saasufy-components 3.15.0 → 3.15.2

package/README.md

@@ -315,7 +315,8 @@ OR (with confirmation step)
 **Attributes**
 
 - `model-id` (required): Specifies the ID of the resource to delete from the parent collection when this component is activated. This can be achieved by invoking either the `deleteItem()` or `confirmDeleteItem()` function from inside an event handler. The example above shows how to achieve deletion via the `onclick` event. You can either invoke `deleteItem()` to delete the resource immediately or you can invoke `confirmDeleteItem()` to require additional confirmation prior to deletion.
-- `confirm-message`: The confirmation message to show the user when this component's `confirmDeleteItem()` function is invoked,
+- `onclick` (required): The logic to execute to delete the item. Should be either `deleteItem()` or `confirmDeleteItem()`.
+- `confirm-message`: The confirmation message to show the user when this component's `confirmDeleteItem()` function is invoked.
 
 If `confirmDeleteItem()` is used, then the parent `collection-browser` must have a `confirm-modal` element slotted into it as shown here:
 

package/confirm-modal.js

@@ -24,7 +24,7 @@ class ConfirmModal extends HTMLElement {
   show(message, confirmCallback) {
     let overlayModal = this.querySelector('overlay-modal');
     if (overlayModal) {
-      overlayModal.classList.remove('hidden');
+      overlayModal.removeAttribute('style');
     }
     this.confirmCallback = confirmCallback;
     this.hidden = false;
@@ -38,7 +38,7 @@ class ConfirmModal extends HTMLElement {
     let cancelButtonLabel = this.getAttribute('cancel-button-label') || 'Cancel';
 
     this.innerHTML = `
-      <overlay-modal class="${this.hidden ? 'hidden' : 'visible'}">
+      <overlay-modal${this.hidden ? ' style="display: none;"' : ''}>
         <div slot="title">${title}</div>
         <div class="confirm-modal-content" slot="content">
           <div>${message}</div>
@@ -52,16 +52,16 @@ class ConfirmModal extends HTMLElement {
 
     let overlayModal = this.querySelector('overlay-modal');
     overlayModal.addEventListener('close', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
     });
     let cancelButton = this.querySelector('.modal-cancel-button');
     cancelButton.addEventListener('click', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
       this.dispatchEvent(new CustomEvent('cancel'));
     });
     let confirmButton = this.querySelector('.modal-confirm-button');
     confirmButton.addEventListener('click', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
       this.dispatchEvent(new CustomEvent('confirm'));
       this.confirmCallback && this.confirmCallback();
     });

package/overlay-modal.js

@@ -39,6 +39,7 @@ class OverlayModal extends HTMLElement {
         .modal-title-bar {
           display: var(--title-bar-display, flex);
           justify-content: space-between;
+          align-items: center;
           width: 100%;
           padding: 10px;
           color: #ffffff;

package/package.json

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

package/styles.css

@@ -178,6 +178,19 @@ collection-browser > [slot=next-page] {
   width: auto;
 }
 
+.confirm-modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+}
+
+.confirm-modal-buttons-container {
+  display: flex;
+  gap: 5px;
+}
+
 .container-vertical {
   display: flex;
   flex-direction: column;