@dile/crud - npm Package Compare versions

Comparing version 0.0.52 to 0.0.53

components/ajax-form/src/DileAjaxForm.js

@@ -23,3 +23,14 @@ import { LitElement, html, css } from 'lit';
                 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);
+            }
         `
@@ -33,2 +44,3 @@ ];
         actionLabel: { type: String },
+        cancelLabel: { type: String },
         data: { type: Object },
@@ -42,2 +54,3 @@ relatedId: { type: String },
         sendDataAsFormData: { type: Boolean },
+        showCancelButton: { type: Boolean },
       };
@@ -77,2 +90,12 @@ }
 
+    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() {
@@ -84,3 +107,4 @@ return html`
             <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> 
@@ -237,3 +261,13 @@ `;
     }
+
+    doCancel() {
+        this.dispatchEvent(new CustomEvent('form-canceled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                data: this.form.getData()
+            }
+        }));
+    }
 }
 

components/insert/src/DileCrudInsert.js

@@ -27,2 +27,3 @@ import { LitElement, html, css } from 'lit';
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
@@ -58,2 +59,3 @@ }
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
@@ -60,0 +62,0 @@ ${this.formTemplate(this.belongsTo, this.relationId)}

components/single/src/DileCrudSingle.js

@@ -93,3 +93,3 @@ import { LitElement, html, css } from 'lit';
       
-      ${this.config.templates.relations(this.element)}
+      ${this.element ? this.config.templates.relations(this.element) : ''}
     `;
@@ -96,0 +96,0 @@ }

components/update/src/DileCrudUpdate.js

@@ -27,2 +27,3 @@ import { LitElement, html, css } from 'lit';
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
@@ -61,2 +62,3 @@ }
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
@@ -63,0 +65,0 @@ ${this.formTemplate()}

lib/i18n/en.js

@@ -15,2 +15,3 @@ export const translations = {
   error_operation: (operation) => `${operation == 'insert' ? 'Insertion' : 'Update'} error`,
+  send_label: "Send",
   insert_label: "Create",
@@ -17,0 +18,0 @@ update_label: "Update",

lib/i18n/es.js

@@ -15,2 +15,3 @@ export const translations = {
   error_operation: (operation) => `Se ha producido un error en la ${operation == 'insert' ? 'inserción' : 'actualización'}`,
+  send_label: "Enviar",
   insert_label: "Insertar",
@@ -17,0 +18,0 @@ update_label: "Actualizar",

package.json

 {
   "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",
@@ -27,3 +27,3 @@ "main": "index.js",
   "dependencies": {
-    "@dile/ui": "^2.1.28",
+    "@dile/ui": "^2.1.29",
     "axios": "^1.7.2",
@@ -35,3 +35,3 @@ "lit": "^2.7.0 || ^3.0.0"
   },
-  "gitHead": "2ff303719dd914f0beeee873b285466e3c8eadf5"
+  "gitHead": "ae6bb276e5139b7924bb81e4235d0745a59057b8"
 }

No alert changes

Improved metrics

Total package byte prevSize

115873

increased by1.85%

Lines of code

3485

increased by1.1%

Dependency changes

• Updated@dile/ui@^2.1.29