saasufy-components 9.6.0 → 10.0.0

package/README.md

@@ -345,7 +345,7 @@ A Saasufy component which integrates with data from Saasufy is known as a `socke
 - `url` (required): Specifies the URL for the Saasufy service to use as the data store for all components which are placed inside it.
 - `auth-token-name`: Allows you to specify a custom key for your token - This will be used as the key in localStorage. You generally do not need to set this attribute. It is intended for situations were an app has multiple `socket-provider` elements connecting different services with different/separate authentication flows.
 - `disable-tab-sync`: By default, the socket provider synchronizes socket auth state across multiple tabs via localStorage. If this attribute is set, then the socket auth state will not sync automatically and a manual page refresh may be necessary to update to the latest auth state.
-- `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string.
+- `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string. Nested properties can be set like this: `autoReconnectOptions.initialDelay:number=2000,autoReconnectOptions.randomness:number=1000,autoReconnectOptions.multiplier:number=1.5,autoReconnectOptions.maxDelay:number=20000`.
 - `disconnect-on-deauth`: If this attribute is set, the underlying socket will be disconnected if the socket becomes unauthenticated. This means that components will not receive real-time updates until the user's next interaction (which will cause the socket to reconnect). If this attribute is not set, the socket will attempt to reconnect immediately after losing authentication.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 
@@ -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.0",
+  "version": "10.0.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {