@dile/crud 0.0.52 → 0.0.53

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

@@ -20,6 +20,17 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
             .actions {
                 margin-top: var(--dile-ajax-form-actions-margin-top, 1rem);
                 padding-left: 3px;
+                display: flex; 
+                gap: var(--dile-form-actions-gap, 1.2rem);
+                justify-content: var(--dile-form-actions-justify-content, flex-start);
+            }
+            .cancel_button {
+                --dile-primary-color: var(--dile-ajax-form-cancel-button-background-color, transparent);
+                --dile-on-primary-color: var(--dile-ajax-form-cancel-button-text-color, #303030);
+                --dile-primary-dark-color: var(--dile-ajax-form-cancel-button-border-color, transparent);
+                --dile-button-hover-background-color: var(--dile-ajax-form-cancel-button-hover-background-color, transparent);
+                --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);
             }
         `
     ];
@@ -29,6 +40,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         operation: { type: String },
         endpoint: { type: String },
         actionLabel: { type: String },
+        cancelLabel: { type: String },
         data: { type: Object },
         relatedId: { type: String },
         loadOnInit: { type: Boolean },
@@ -37,6 +49,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         setDataOnInit: { type: Boolean },
         responseAdapter: { type: Object },
         sendDataAsFormData: { type: Boolean },
+        showCancelButton: { type: Boolean },
       };
     }
 
@@ -71,13 +84,24 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         return this.querySelector('#' + this.formIdentifier);
     }
 
+    actionLabelComputed(label, translations, operation) {
+        if(operation == 'insert') {
+            return label ? label : translations?.insert_label ? translations.insert_label : 'Insert';
+        }
+        if(operation == 'update') {
+            return label ? label : translations?.update_label ? translations.update_label : 'Update';
+        }
+        return translations.send_label;
+    }
+
     render() {
         return html`
             ${this.ajaxComponents}
             <slot></slot>
             <dile-inline-feedback id="feedback"></dile-inline-feedback>
             <div class="actions">
-                <dile-button @click=${this.doAction}>${this.actionLabel}</dile-button>
+                <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>` : ''}
             </div> 
         `;
     }
@@ -229,5 +253,15 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         } 
         return this.translations.error_operation(this.operation);
     }
+
+    doCancel() {
+        this.dispatchEvent(new CustomEvent('form-canceled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                data: this.form.getData()
+            }
+        }));
+    }
 }
 

package/components/insert/src/DileCrudInsert.js

@@ -24,6 +24,7 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
             responseAdapter: { type: Object},
             formIdentifier: { type: String },
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
     }
 
@@ -54,6 +55,7 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
                 formIdentifier="${this.formIdentifier}"
                 language="${this.language}"
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
                 ${this.formTemplate(this.belongsTo, this.relationId)}
             </dile-ajax-form> 

package/components/single/src/DileCrudSingle.js

@@ -90,7 +90,7 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
       ${this.updateTemplate}
       ${this.singleActionsTemplate}
       
-      ${this.config.templates.relations(this.element)}
+      ${this.element ? this.config.templates.relations(this.element) : ''}
     `;
   }
 

package/components/update/src/DileCrudUpdate.js

@@ -24,6 +24,7 @@ export class DileCrudUpdate extends DileI18nMixin(LitElement) {
             responseAdapter: { type: Object },
             formIdentifier: { type: String },
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
     }
 
@@ -57,6 +58,7 @@ export class DileCrudUpdate extends DileI18nMixin(LitElement) {
                 formIdentifier="${this.formIdentifier}"
                 language="${this.language}"
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
                 ${this.formTemplate()}
             </dile-ajax-form>

package/lib/i18n/en.js

@@ -12,6 +12,7 @@ export const translations = {
   ajax_form_not_supported: "Operation not supported in dile-ajax-form use 'insert' or 'update'",
   success_operation: (operation) => operation == 'insert' ? 'The new item has been created' : 'Item updated successfully',
   error_operation: (operation) => `${operation == 'insert' ? 'Insertion' : 'Update'} error`,
+  send_label: "Send",
   insert_label: "Create",
   update_label: "Update",
   start_update_label: "Edit",

package/lib/i18n/es.js

@@ -12,6 +12,7 @@ export const translations = {
   ajax_form_not_supported: "Operación no soportada por dile-ajax-form. Elige entre 'insert' o 'update'",
   success_operation: (operation) => `${operation == 'insert' ? 'Inserción' : 'Actualización'} completada con éxito`,
   error_operation: (operation) => `Se ha producido un error en la ${operation == 'insert' ? 'inserción' : 'actualización'}`,
+  send_label: "Enviar",
   insert_label: "Insertar",
   update_label: "Actualizar",
   start_update_label: "Editar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "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.28",
+    "@dile/ui": "^2.1.29",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2ff303719dd914f0beeee873b285466e3c8eadf5"
+  "gitHead": "ae6bb276e5139b7924bb81e4235d0745a59057b8"
 }