saasufy-components 10.0.1 → 10.1.1

package/README.md

@@ -511,7 +511,7 @@ This component is similar to the `collection-adder` component except that it req
 **Attributes of slotted input, select, textarea... elements**
 
 - `name` (required): This must correspond to a field name on the model specified via the `collection-type` attribute of the `collection-adder-form`.
-- `output-type`: An optional type to cast the value of the input element into when the form is submitted.
+- `output-type`: An optional type to cast the value of the input element into when the form is submitted; supported types are `string` (default), `number` and `boolean`. This is especially useful for `select` elements as their values are always strings by default; for example `<select name="duration" output-type="number">` will submit the number `30` instead of the string `'30'`. If not specified, the value is cast based on the element's own type.
 
 ### collection-deleter
 
@@ -669,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.
@@ -790,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

@@ -92,10 +92,8 @@ class CollectionAdderForm extends SocketConsumer {
                 } else {
                   inputType = input.type;
                 }
-                let Type = getTypeCastFunction(
-                  inputType === 'hidden' ?
-                    input.getAttribute('output-type') : inputType
-                );
+                let outputType = input.getAttribute('output-type');
+                let Type = getTypeCastFunction(outputType || inputType);
                 let value;
                 if (inputType === 'file' && input.files && input.files.length) {
                   let reader = new FileReader();

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