saasufy-components 9.6.1 → 10.0.1

package/README.md

@@ -458,6 +458,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
 - `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `consumers`: This allows you to connect this `collection-adder` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the output of the `collection-adder` component on submit. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
 - `success-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a success.
 - `error-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a failure.
@@ -499,6 +500,7 @@ This component is similar to the `collection-adder` component except that it req
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
 - `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
 - `auto-reset-hidden-inputs`: If this attribute exists, then `hidden` input elements which are inside the `collection-adder-form` will be cleared along with other input fields. By default, `hidden` input elements are not cleared when the form is reset.
+- `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `disable-submit-on-enter-key`: If this attribute exists, then the form will not submit when the enter key is pressed.
 - `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.
 - `consumers`: This allows you to connect this `collection-adder-form` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the output of the `collection-adder-form` component on submit. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
@@ -541,6 +543,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 +566,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 +1176,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-adder-form.js

@@ -50,22 +50,15 @@ class CollectionAdderForm extends SocketConsumer {
       throw new Error('Collection adder form is not ready to be submitted');
     }
     let successMessage = this.getAttribute('success-message');
-    let messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+    let messageContainer;
 
-    if (messageContainer) {
-      messageContainer.classList.remove('success');
-      messageContainer.classList.remove('error');
-      messageContainer.textContent = '';
+    // By default, the previous status is only cleared once the outcome of the
+    // submit is known so that the status is replaced within a single frame; this
+    // avoids the form flickering when the same error occurs twice in a row.
+    if (this.hasAttribute('reset-status-on-submit')) {
+      this.clearStatus();
     }
 
-    // Clear any existing field errors
-    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
-    existingFieldErrors.forEach(el => el.remove());
-
-    // Clear error classes from all inputs
-    let allInputs = this.querySelectorAll('input, textarea, select');
-    allInputs.forEach(input => input.classList.remove('error'));
-
     let trimSpaces = this.hasAttribute('trim-spaces');
 
     let inputElements = this.getAllInputElements();
@@ -133,6 +126,9 @@ class CollectionAdderForm extends SocketConsumer {
       };
 
       let resourceId = await this.collection.create(newModelData);
+
+      this.clearStatus();
+
       let insertedModelData = {
         ...newModelData,
         id: resourceId
@@ -162,6 +158,8 @@ class CollectionAdderForm extends SocketConsumer {
         }
       }
     } catch (error) {
+      this.clearStatus();
+
       messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
       if (messageContainer) {
         messageContainer.classList.add('error');
@@ -229,6 +227,24 @@ class CollectionAdderForm extends SocketConsumer {
     updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
+  clearStatus() {
+    let messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+
+    if (messageContainer) {
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+    }
+
+    // Clear any existing field errors
+    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
+    existingFieldErrors.forEach(el => el.remove());
+
+    // Clear error classes from all inputs
+    let allInputs = this.querySelectorAll('input, textarea, select');
+    allInputs.forEach(input => input.classList.remove('error'));
+  }
+
   getAllInputElements() {
     return this.shadowRoot.querySelector('.input-slot')
       .assignedElements()

package/collection-adder.js

@@ -55,17 +55,12 @@ class CollectionAdder extends SocketConsumer {
     let successMessage = this.getAttribute('success-message');
     let messageContainer = this.querySelector('.collection-adder-message-container');
 
-    messageContainer.classList.remove('success');
-    messageContainer.classList.remove('error');
-    messageContainer.textContent = '';
-
-    // Clear any existing field errors
-    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
-    existingFieldErrors.forEach(el => el.textContent = '');
-
-    // Clear error classes from all inputs
-    let allInputs = this.querySelectorAll('.collection-adder-input, .collection-adder-radio');
-    allInputs.forEach(input => input.classList.remove('error'));
+    // By default, the previous status is only cleared once the outcome of the
+    // submit is known so that the status is replaced within a single frame; this
+    // avoids the form flickering when the same error occurs twice in a row.
+    if (this.hasAttribute('reset-status-on-submit')) {
+      this.clearStatus();
+    }
 
     let radioInputs = [ ...this.querySelectorAll('.collection-adder-radio') ];
     let radioData = {};
@@ -131,6 +126,9 @@ class CollectionAdder extends SocketConsumer {
         )
       };
       let resourceId = await this.collection.create(newModelData);
+
+      this.clearStatus();
+
       let insertedModelData = {
         ...newModelData,
         id: resourceId
@@ -156,6 +154,8 @@ class CollectionAdder extends SocketConsumer {
         messageContainer.textContent = '';
       }
     } catch (error) {
+      this.clearStatus();
+
       messageContainer.classList.add('error');
       messageContainer.classList.remove('success');
 
@@ -213,6 +213,24 @@ class CollectionAdder extends SocketConsumer {
     updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
+  clearStatus() {
+    let messageContainer = this.querySelector('.collection-adder-message-container');
+
+    if (messageContainer) {
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+    }
+
+    // Clear any existing field errors
+    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
+    existingFieldErrors.forEach(el => el.textContent = '');
+
+    // Clear error classes from all inputs
+    let allInputs = this.querySelectorAll('.collection-adder-input, .collection-adder-radio');
+    allInputs.forEach(input => input.classList.remove('error'));
+  }
+
   reset() {
     let form = this.querySelector('.collection-adder-form');
     if (form) {

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.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {