saasufy-components 7.5.0 → 7.6.0

package/collection-deleter.js

@@ -4,13 +4,6 @@ class CollectionDeleter extends HTMLElement {
     this.attachShadow({ mode: 'open' });
   }
 
-  static get observedAttributes() {
-    return [
-      'model-id',
-      'confirm-message'
-    ];
-  }
-
   connectedCallback() {
     this.shadowRoot.innerHTML = `
       <slot></slot>
@@ -24,21 +17,6 @@ class CollectionDeleter extends HTMLElement {
     );
   }
 
-  confirmDeleteItem() {
-    let confirmMessage = this.getAttribute('confirm-message');
-    this.dispatchEvent(
-      new CustomEvent('showModal', {
-        detail: {
-          message: confirmMessage,
-          callback: () => {
-            this.deleteItem();
-          }
-        },
-        bubbles: true
-      })
-    )
-  }
-
   deleteItemField() {
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -47,19 +25,37 @@ class CollectionDeleter extends HTMLElement {
     );
   }
 
-  confirmDeleteItemField() {
-    let confirmMessage = this.getAttribute('confirm-message');
+  showConfirmModal(deleteField) {
+    let message = this.getAttribute('confirm-message');
+    let title = this.getAttribute('confirm-title');
+    let confirmButtonLabel = this.getAttribute('confirm-button-label');
+    let cancelButtonLabel = this.getAttribute('cancel-button-label');
     this.dispatchEvent(
       new CustomEvent('showModal', {
         detail: {
-          message: confirmMessage,
+          message,
+          title,
+          confirmButtonLabel,
+          cancelButtonLabel,
           callback: () => {
-            this.deleteItemField();
+            if (deleteField) {
+              this.deleteItemField();
+            } else {
+              this.deleteItem();
+            }
           }
         },
         bubbles: true
       })
-    )
+    );
+  }
+
+  confirmDeleteItem() {
+    this.showConfirmModal();
+  }
+
+  confirmDeleteItemField() {
+    this.showConfirmModal(true);
   }
 }
 

package/collection-viewer.js

@@ -15,7 +15,8 @@ class CollectionViewer extends SocketConsumer {
     this.handleShowModalEvent = (event) => {
       event.stopPropagation();
       let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
-      modal.show(event.detail.message, event.detail.callback);
+      let { callback, ...confirmOptions } = event.detail;
+      modal.show(confirmOptions, callback);
     };
 
     this.handleCRUDCreateEvent = async (event) => {

package/confirm-modal.js

@@ -21,14 +21,29 @@ class ConfirmModal extends HTMLElement {
     this.render();
   }
 
-  show(message, confirmCallback) {
+  show(options, confirmCallback) {
     let overlayModal = this.querySelector('overlay-modal');
     if (overlayModal) {
       overlayModal.removeAttribute('style');
     }
     this.confirmCallback = confirmCallback;
     this.hidden = false;
-    this.setAttribute('message', message);
+    if (typeof options === 'string') {
+      this.setAttribute('message', options);
+    } else {
+      if (options.title != null) {
+        this.setAttribute('title', options.title);
+      }
+      if (options.confirmButtonLabel != null) {
+        this.setAttribute('confirm-button-label', options.confirmButtonLabel);
+      }
+      if (options.cancelButtonLabel != null) {
+        this.setAttribute('cancel-button-label', options.cancelButtonLabel);
+      }
+      if (options.message != null) {
+        this.setAttribute('message', options.message);
+      }
+    }
   }
 
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {