@dile/crud 0.0.54 → 0.0.56

package/components/ajax-form/src/DileAjaxForm.js

@@ -32,6 +32,23 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
                 --dile-button-hover-text-color: var(--dile-ajax-form-cancel-button-hover-text-color, #303030);
                 --dile-button-hover-border-color: var(--dile-ajax-form-cancel-button-hover-border-color, #303030);
             }
+            :host([inline]) section {
+                display: flex;
+                align-items: center;
+                gap: var(--inline-gap, 1rem);
+            }
+            :host([inline]) dile-inline-feedback {
+                display: none;
+            }
+            :host([hidefeedback]) dile-inline-feedback {
+                display: none;
+            }
+            .actionIcon {
+                --dile-icon-color: var(--action-icon-color, var(--dile-primary-color, #674cdc));
+            }
+            .cancelIcon {
+                --dile-icon-color: var(--cancel-icon-color, #d74c3c);
+            }
         `
     ];
 
@@ -50,6 +67,9 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         responseAdapter: { type: Object },
         sendDataAsFormData: { type: Boolean },
         showCancelButton: { type: Boolean },
+        inline: { type: Boolean, reflect: true },
+        actionIcon: { type: Object },
+        cancelIcon: { type: Object },
       };
     }
 
@@ -97,13 +117,30 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
     render() {
         return html`
             ${this.ajaxComponents}
-            <slot></slot>
+            <section>
+                <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> 
-        `;
+        `
     }
 
     get ajaxComponents() {
@@ -136,7 +173,8 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         }
     }
 
-    doAction() {
+    doAction(e) {
+        e.preventDefault();
         this.feedback.clear();
         this.ajaxsave.data = this.form.getData();
         this.ajaxsave.generateRequest();
@@ -254,7 +292,8 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         return this.translations.error_operation(this.operation);
     }
 
-    doCancel() {
+    doCancel(e) {
+        e.preventDefault();
         this.dispatchEvent(new CustomEvent('form-canceled', {
             bubbles: true,
             composed: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -24,12 +24,12 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/ui": "^2.1.29",
+    "@dile/ui": "^2.1.30",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64a15d3e1432479c7005299f0e0fc8ee4e70aedd"
+  "gitHead": "995e1cef5db80dad3e967d4a88b26d19ae37d5cc"
 }