@dile/crud - npm Package Compare versions

Comparing version 0.0.55 to 0.0.56

components/ajax-form/src/DileAjaxForm.js

@@ -38,2 +38,3 @@ import { LitElement, html, css } from 'lit';
                 align-items: center;
+                gap: var(--inline-gap, 1rem);
             }
@@ -46,2 +47,8 @@ :host([inline]) dile-inline-feedback {
             }
+            .actionIcon {
+                --dile-icon-color: var(--action-icon-color, var(--dile-primary-color, #674cdc));
+            }
+            .cancelIcon {
+                --dile-icon-color: var(--cancel-icon-color, #d74c3c);
+            }
         `
@@ -65,2 +72,5 @@ ];
         showCancelButton: { type: Boolean },
+        inline: { type: Boolean, reflect: true },
+        actionIcon: { type: Object },
+        cancelIcon: { type: Object },
       };
@@ -114,10 +124,25 @@ }
             <section>
-            <slot></slot>
+                <slot></slot>
+                ${this.inline ? this.actionsTemplate : ''}
+            </section>
             <dile-inline-feedback id="feedback"></dile-inline-feedback>
+            ${this.inline ? '' : this.actionsTemplate}
+        `;
+    }
+
+    get actionsTemplate() {
+        return html`
             <div class="actions">
-                <dile-button @click=${this.doAction}>${this.actionLabelComputed(this.actionLabel, this.translations, this.operation)}</dile-button>
-                ${this.showCancelButton ? html`<dile-button class="cancel_button" @click=${this.doCancel}>${this.translations.cancel_label}</dile-button>` : ''}
+                ${this.actionIcon 
+                    ? html`<a href="#" @click=${this.doAction}><dile-icon .icon=${this.actionIcon} class="actionIcon"></dile-icon></a>`
+                    : html`<dile-button @click=${this.doAction}>${this.actionLabelComputed(this.actionLabel, this.translations, this.operation)}</dile-button>`
+                }
+                ${this.showCancelButton ? 
+                    this.cancelIcon 
+                        ? html`<a href="#" @click=${this.doCancel}><dile-icon @click=${this.doAction} .icon=${this.cancelIcon} class="cancelIcon"></dile-icon></a>`
+                        : html`<dile-button class="cancel_button" @click=${this.doCancel}>${this.translations.cancel_label}</dile-button>`
+                    : ''
+                }
             </div> 
-            </section>
-        `;
+        `
     }
@@ -155,3 +180,4 @@
 
-    doAction() {
+    doAction(e) {
+        e.preventDefault();
         this.feedback.clear();
@@ -274,3 +300,4 @@ this.ajaxsave.data = this.form.getData();
 
-    doCancel() {
+    doCancel(e) {
+        e.preventDefault();
         this.dispatchEvent(new CustomEvent('form-canceled', {
@@ -277,0 +304,0 @@ bubbles: true,

package.json

 {
   "name": "@dile/crud",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Components to create a generic crud system based on Web Components and Lit",
@@ -34,3 +34,3 @@ "main": "index.js",
   },
-  "gitHead": "8f71392b64dc49d9049cf98d1087dcb2d841c5df"
+  "gitHead": "995e1cef5db80dad3e967d4a88b26d19ae37d5cc"
 }

No alert changes

Improved metrics

Total package byte prevSize

117466

increased by0.97%

Lines of code

3525

increased by0.74%

No dependency changes