saasufy-components 10.0.0 → 10.1.0

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.
@@ -667,7 +669,7 @@ Used for displaying and editing a single field of a model instance in realtime.
 - `consumers`: This allows you to connect this `model-input` to other elements on your page. It 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 value of the `model-input` component in real-time. 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. Note that `model-input` elements of the `file` type are treated as write-only unless the `consumers` attribute is present.
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
-- `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
+- `options`: A comma-separated list of options to provide - This only works if the input type is `select`. Each option is in the format `label:type=value`; the `:type` and `=value` parts are optional. If the value is not specified, the label is used as the value. The type can be `string` (default), `number` or `boolean` and determines the type which will be saved to the model field when the option is selected; for example `options="30 min:number=30,1 hour:number=60"` will save the number `30` or `60` instead of the string `'30'` or `'60'`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `default-value`: A default value to show the user if the underlying model field's value is null or undefined. Note that setting a default value will not affect the underlying model's value.
 - `value`: Used to set the model's value.
@@ -788,7 +790,7 @@ This component can be configured to provide its data to multiple components (con
 - `consumers`: This allows you to connect this `input-provider` to other elements on your page. It 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 value of the `input-provider` component in real-time. 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.
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
-- `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
+- `options`: A comma-separated list of options to provide - This only works if the input type is `select`. Each option is in the format `label:type=value`; the `:type` and `=value` parts are optional. If the value is not specified, the label is used as the value. The type can be `string` (default), `number` or `boolean` and determines the type of the value which will be passed to consumers when the option is selected; for example `options="30 min:number=30,1 hour:number=60"` will pass the number `30` or `60` instead of the string `'30'` or `'60'`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `value`: Used to set the input's value.
 - `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.

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/input-provider.js

@@ -3,7 +3,8 @@ import {
   renderTemplate,
   updateConsumerElements,
   convertStringToFieldParams,
-  convertStringToFieldTypeValues
+  convertStringToFieldTypeValues,
+  getTypeCastFunction
 } from './utils.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 800;
@@ -135,15 +136,21 @@ class InputProvider extends HTMLElement {
       elementType = 'input';
     }
     this.inputElement = document.createElement(elementType);
+    let optionValues = null;
     if (type === 'select') {
       if (options != null) {
         let fieldTypeValues = convertStringToFieldTypeValues(options, true, true);
+        optionValues = new Map();
         let optionElements = fieldTypeValues
           .map((option) => {
             if (option.field === placeholder) {
               return `<option value="" selected class="select-default-option">${option.field}</option>`;
             }
-            return `<option value="${option.value ?? option.field}">${option.field}</option>`;
+            let Type = getTypeCastFunction(option.type);
+            let optionValue = Type(option.value ?? option.field);
+            let elementValue = String(optionValue);
+            optionValues.set(elementValue, optionValue);
+            return `<option value="${elementValue}">${option.field}</option>`;
           })
           .join('');
         this.inputElement.innerHTML = optionElements;
@@ -189,7 +196,7 @@ class InputProvider extends HTMLElement {
     this.updateInputClassList(value);
     this.appendChild(this.inputElement);
 
-    let destroyHandlers = this.updateConsumerElementsOnEdit();
+    let destroyHandlers = this.updateConsumerElementsOnEdit(optionValues);
 
     if (this.hasAttribute('force-init-change')) {
       this.forceTriggerChange = true;
@@ -208,7 +215,14 @@ class InputProvider extends HTMLElement {
     };
   }
 
-  updateConsumerElementsOnEdit() {
+  getTargetValue(inputValue, inputElement, optionValues) {
+    if (optionValues && optionValues.has(inputValue)) {
+      return optionValues.get(inputValue);
+    }
+    return inputElement.type === 'number' ? Number(inputValue) : inputValue;
+  }
+
+  updateConsumerElementsOnEdit(optionValues) {
     let consumers = this.getAttribute('consumers');
     if (!consumers) return () => {};
 
@@ -235,8 +249,7 @@ class InputProvider extends HTMLElement {
         if (event.target.value === '') {
           updateConsumerElements.call(this, consumers, '', providerTemplate, elementName);
         } else {
-          let targetValue = inputElement.type === 'number' ?
-            Number(event.target.value) : event.target.value;
+          let targetValue = this.getTargetValue(event.target.value, inputElement, optionValues);
           updateConsumerElements.call(this, consumers, targetValue, providerTemplate, elementName);
         }
       }, debounceDelay);
@@ -256,8 +269,7 @@ class InputProvider extends HTMLElement {
           if (event.target.value === '') {
             updateConsumerElements.call(this, consumers, '', providerTemplate, elementName);
           } else {
-            let targetValue = inputElement.type === 'number' ?
-              Number(event.target.value) : event.target.value;
+            let targetValue = this.getTargetValue(event.target.value, inputElement, optionValues);
             updateConsumerElements.call(this, consumers, targetValue, providerTemplate, elementName);
           }
         }, debounceDelay);

package/model-input.js

@@ -4,6 +4,7 @@ import {
   updateConsumerElements,
   convertStringToFieldParams,
   convertStringToFieldTypeValues,
+  getTypeCastFunction,
   formatError,
   renderTemplate
 } from './utils.js';
@@ -207,15 +208,21 @@ class ModelInput extends SocketConsumer {
     }
     this.inputElement = document.createElement(elementType);
     let optionList = null;
+    let optionValues = null;
     if (type === 'select') {
       if (options != null) {
         let fieldTypeValues = convertStringToFieldTypeValues(options, true, true);
+        optionValues = new Map();
         let optionElements = fieldTypeValues
           .map((option) => {
             if (option.field === placeholder) {
               return `<option value="" selected class="select-default-option">${option.field}</option>`;
             }
-            return `<option value="${option.value ?? option.field}">${option.field}</option>`;
+            let Type = getTypeCastFunction(option.type);
+            let optionValue = Type(option.value ?? option.field);
+            let elementValue = String(optionValue);
+            optionValues.set(elementValue, optionValue);
+            return `<option value="${elementValue}">${option.field}</option>`;
           })
           .join('');
         this.inputElement.innerHTML = optionElements;
@@ -260,7 +267,7 @@ class ModelInput extends SocketConsumer {
       this.appendChild(errorMessageContainer);
     }
     this.appendChild(this.inputElement);
-    let destroyInputSync = this.syncInputElementWithModel(this.inputElement, model, modelField, errorMessageContainer, optionList);
+    let destroyInputSync = this.syncInputElementWithModel(this.inputElement, model, modelField, errorMessageContainer, optionList, optionValues);
     this.destroy = () => {
       destroyInputSync();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
@@ -302,13 +309,13 @@ class ModelInput extends SocketConsumer {
     }
   }
 
-  syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement, optionList) {
+  syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement, optionList, optionValues) {
     if (model.isLoaded) {
       let fieldValue = model.value[fieldName];
       this.verifyValue(fieldValue, optionList, inputElement, messageContainerElement);
       this.updateInputElement(inputElement, fieldValue);
     }
-    let stopSaving = this.saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement);
+    let stopSaving = this.saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement, optionValues);
     let changeConsumer = model.listener('change').createConsumer();
     (async () => {
       for await (let event of changeConsumer) {
@@ -325,7 +332,7 @@ class ModelInput extends SocketConsumer {
     };
   }
 
-  saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement) {
+  saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement, optionValues) {
     let errorStyleClass = 'error';
     let successStyleClass = 'success';
     let showErrorMessage = (fieldName, errorMessage) => {
@@ -387,8 +394,13 @@ class ModelInput extends SocketConsumer {
             updateConsumerElements.call(this, consumers, '', providerTemplate, this.getAttribute('name'));
             await model.delete(fieldName);
           } else {
-            let targetValue = inputElement.type === 'number' ?
-              Number(inputValue) : inputValue;
+            let targetValue;
+            if (optionValues && optionValues.has(inputValue)) {
+              targetValue = optionValues.get(inputValue);
+            } else {
+              targetValue = inputElement.type === 'number' ?
+                Number(inputValue) : inputValue;
+            }
             updateConsumerElements.call(this, consumers, targetValue, providerTemplate, this.getAttribute('name'));
             await model.update(fieldName, targetValue);
           }

package/package.json

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