@dile/crud 1.7.6 → 1.8.0

package/components/ajax-form/confirmed-ajax-form.js

@@ -0,0 +1,2 @@
+import { DileConfirmedAjaxForm } from './src/DileConfirmedAjaxForm.js';
+customElements.define('dile-confirmed-ajax-form', DileConfirmedAjaxForm);

package/components/ajax-form/index.js

@@ -1 +1,2 @@
-export { DileAjaxForm } from './src/DileAjaxForm.js';
+export { DileAjaxForm } from './src/DileAjaxForm.js';
+export { DileConfirmedAjaxForm } from './src/DileConfirmedAjaxForm.js';

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

@@ -0,0 +1,89 @@
+/**
+ *
+ * # DileConfirmedAjaxForm
+ *
+ * Ajax form component that requires confirmation before submission
+ *
+ */
+
+import { LitElement, html } from 'lit';
+import '@dile/ui/components/confirm/confirm.js';
+import { DileAjaxForm } from './DileAjaxForm.js';
+
+export class DileConfirmedAjaxForm extends DileAjaxForm {
+
+  static get properties() {
+    return {
+      ...super.properties,
+      confirmText: { type: String },
+      acceptLabel: { type: String },
+      cancelLabel: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.confirmText = null;
+    this.acceptLabel = null;
+    this.cancelLabel = null;
+  }
+
+  render() {
+    return html`
+      ${super.render()}
+      <dile-confirm
+        id="confirmDialog"
+        @dile-confirm-accepted="${this.onConfirmAccepted}"
+        @dile-confirm-cancelled="${this.onConfirmCancelled}"
+        .acceptLabel="${this.computeAcceptLabel()}"
+        .cancelLabel="${this.computeCancelLabel()}"
+        blocking
+      >
+        <p>${this.computeConfirmText()}</p>
+      </dile-confirm>
+    `;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.confirmDialog = this.shadowRoot.getElementById('confirmDialog');
+  }
+
+  doAction() {
+    this.feedback.clear();
+    this.confirmDialog.open();
+  }
+
+  onConfirmAccepted() {
+    // Call the parent's doAction method directly, bypassing our override
+    const formData = this.form.getData();
+    this.ajaxsave.data = formData;
+    this.ajaxsave.generateRequest();
+  }
+
+  onConfirmCancelled() {
+    // Silently cancel, just close the dialog
+    // No action needed
+  }
+
+  computeConfirmText() {
+    if (this.confirmText) {
+      return this.confirmText;
+    }
+    return this.translations?.confirm_submit_text || 'Are you sure you want to submit this form?';
+  }
+
+  computeAcceptLabel() {
+    if (this.acceptLabel) {
+      return this.acceptLabel;
+    }
+    return this.translations?.accept_label || 'Accept';
+  }
+
+  computeCancelLabel() {
+    if (this.cancelLabel) {
+      return this.cancelLabel;
+    }
+    return this.translations?.cancel_label || 'Cancel';
+  }
+}

package/lib/i18n/en.js

@@ -52,4 +52,6 @@ export const translations = {
   select_file: "Select file",
   selected_file: "Selected file",
   extension_allowed: "Only this file extensions are allowed: ",
+  confirm_submit_title: "Confirm submission",
+  confirm_submit_text: "Are you sure you want to submit this form?",
 };

package/lib/i18n/es.js

@@ -52,4 +52,6 @@ export const translations = {
   select_file: "Seleccionar archivo",
   selected_file: "Archivo seleccionado",
   extension_allowed: "Solo se permiten estas extensiones: ",
+  confirm_submit_title: "Confirmar envío",
+  confirm_submit_text: "¿Estás seguro de que deseas enviar este formulario?",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "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.com/",
   "dependencies": {
-    "@dile/ui": "^2.21.1",
+    "@dile/ui": "^2.21.2",
     "axios": "^1.16.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9639442e17f7bd3e467a1177dc233bb9913dc1e"
+  "gitHead": "cde235f0d633aac9a2da770248c7301cef99041a"
 }