saasufy-components 9.6.1 → 10.0.0

package/README.md

@@ -541,6 +541,7 @@ OR (with confirmation step)
 - `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.
 - `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.
+- `confirm-heading`: The heading to show in the confirmation modal's title bar when this component's `confirmDeleteItem()` function is invoked.
 - `model-field`: If specified, this attribute can be used to delete a single field of a model instance, instead of the whole instance.
 
 If `confirmDeleteItem()` is used, then the parent `collection-viewer` must have a `confirm-modal` element slotted into it as shown here:
@@ -563,7 +564,7 @@ If `confirmDeleteItem()` is used, then the parent `collection-viewer` must have
   <div slot="viewport" class="chat-viewport"></div>
 
   <!-- The confirm-modal element must be specified here with slot="modal" to prompt the user for confirmation -->
-  <confirm-modal slot="modal" title="Delete confirmation" message="" confirm-button-label="Delete"></confirm-modal>
+  <confirm-modal slot="modal" heading="Delete confirmation" message="" confirm-button-label="Delete"></confirm-modal>
 </collection-viewer>
 ```
 
@@ -1173,16 +1174,17 @@ A modal component to prompt the user for confirmation before performing sensitiv
   <div slot="viewport"></div>
 
   <!-- The confirm-modal element must be specified here with slot="modal" to prompt the user for confirmation -->
-  <confirm-modal slot="modal" title="Delete confirmation" message="" confirm-button-label="Delete"></confirm-modal>
+  <confirm-modal slot="modal" heading="Delete confirmation" message="" confirm-button-label="Delete"></confirm-modal>
 </collection-viewer>
 ```
 
 **Attributes**
 
-- `title`: The text to show in the modal's title bar.
+- `heading`: The text to show in the modal's title bar.
 - `message`: The text to show as the modal's main content.
 - `confirm-button-label`: The text to use as the confirm button label.
 - `cancel-button-label`: The text to use as the cancel button label.
+- `auto-focus`: Which button to focus when the modal is shown; either `confirm` (or its alias `delete`) or `cancel`. If not specified, no button will be focused.
 
 ### overlay-modal
 

package/collection-deleter.js

@@ -27,14 +27,14 @@ class CollectionDeleter extends HTMLElement {
 
   showConfirmModal(deleteField) {
     let message = this.getAttribute('confirm-message');
-    let title = this.getAttribute('confirm-title');
+    let heading = this.getAttribute('confirm-heading');
     let confirmButtonLabel = this.getAttribute('confirm-button-label');
     let cancelButtonLabel = this.getAttribute('cancel-button-label');
     this.dispatchEvent(
       new CustomEvent('showModal', {
         detail: {
           message,
-          title,
+          heading,
           confirmButtonLabel,
           cancelButtonLabel,
           callback: () => {

package/confirm-modal.js

@@ -3,7 +3,7 @@ import './overlay-modal.js';
 class ConfirmModal extends HTMLElement {
   constructor() {
     super();
-    this.hidden = true;
+    this.isHidden = true;
     this.isReady = false;
   }
 
@@ -13,7 +13,7 @@ class ConfirmModal extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return [ 'message', 'title', 'confirm-button-label', 'cancel-button-label' ];
+    return [ 'message', 'heading', 'confirm-button-label', 'cancel-button-label' ];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -27,12 +27,12 @@ class ConfirmModal extends HTMLElement {
       overlayModal.removeAttribute('style');
     }
     this.confirmCallback = confirmCallback;
-    this.hidden = false;
+    this.isHidden = false;
     if (typeof options === 'string') {
       this.setAttribute('message', options);
     } else {
-      if (options.title != null) {
-        this.setAttribute('title', options.title);
+      if (options.heading != null) {
+        this.setAttribute('heading', options.heading);
       }
       if (options.confirmButtonLabel != null) {
         this.setAttribute('confirm-button-label', options.confirmButtonLabel);
@@ -44,17 +44,30 @@ class ConfirmModal extends HTMLElement {
         this.setAttribute('message', options.message);
       }
     }
+    this.applyAutoFocus();
+  }
+
+  applyAutoFocus() {
+    let autoFocus = this.getAttribute('auto-focus');
+    let selector;
+    if (autoFocus === 'confirm' || autoFocus === 'delete') {
+      selector = '.modal-confirm-button';
+    } else if (autoFocus === 'cancel') {
+      selector = '.modal-cancel-button';
+    }
+    if (!selector) return;
+    this.querySelector(selector)?.focus({ preventScroll: true });
   }
 
   render() {
     let message = this.getAttribute('message') || '';
-    let title = this.getAttribute('title') || '';
+    let heading = this.getAttribute('heading') || '';
     let confirmButtonLabel = this.getAttribute('confirm-button-label') || 'Confirm';
     let cancelButtonLabel = this.getAttribute('cancel-button-label') || 'Cancel';
 
     this.innerHTML = `
-      <overlay-modal${this.hidden ? ' style="display: none;"' : ''}>
-        <div slot="title">${title}</div>
+      <overlay-modal${this.isHidden ? ' style="display: none;"' : ''}>
+        <div slot="title">${heading}</div>
         <div class="confirm-modal-content" slot="content">
           <div>${message}</div>
           <div class="confirm-modal-buttons-container">

package/package.json

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