saasufy-components 3.2.0 → 3.4.0

package/README.md

@@ -404,9 +404,9 @@ Used for displaying and editing a single field of a model instance in real time.
 - `debounce-delay`: The delay in milliseconds to wait before sending an update to the server. This is useful to batch multiple updates together (as is common when user is typing). Default is 300ms.
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
-- `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
+- `type`: The type of the input component; can be `text`, `number`, `select`, `textarea`, `checkbox` or `file`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `model-input` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. 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.
+- `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. 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.
 - `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`.
@@ -417,6 +417,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
 - `enable-rebound`: By default, for efficiency reasons, real-time updates performed via `model-input` components are not sent back to the publishing client; it is usually unnecessary because state changes are shared locally between all components which are bound to the same `socket-provider`. You can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher to support more advanced scenarios. Note that enabling rebound comes with additional performance overheads.
+- `accept`: This attribute should only be used if the `type` is set to `file`; it serves to constrain the types of files which can be selected by the user.
 
 ### model-text
 
@@ -513,7 +514,7 @@ This component can be configured to provide its data to multiple components (con
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `input-provider` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. 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.
+- `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. 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`.
@@ -738,7 +739,7 @@ A component which can be used to group together multiple `collection-adder` comp
 
 ```html
 <!--
-  This collection-adder-group adds two pre-defined records into a Product
+  This collection-adder-group adds multiple pre-defined records into a Product
   collection using a single button click. This example assumes that the name
   field is the only required field in the Product model.
 -->

package/model-input.js

@@ -26,6 +26,7 @@ class ModelInput extends SocketConsumer {
       'socket-instance-property',
       'type',
       'placeholder',
+      'accept',
       'consumers',
       'show-error-message',
       'model-type',
@@ -95,6 +96,7 @@ class ModelInput extends SocketConsumer {
     let inputList = this.getAttribute('list');
     let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
+    let accept = this.getAttribute('accept');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -102,6 +104,7 @@ class ModelInput extends SocketConsumer {
     let height = this.getAttribute('height');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let enableRebound = this.hasAttribute('enable-rebound');
+    let hasConsumers = this.hasAttribute('consumers');
 
     let socket;
     if (socketInstanceProperty) {
@@ -124,11 +127,14 @@ class ModelInput extends SocketConsumer {
       socket = this.getSocket();
     }
     this.socket = socket;
+
+    let modelFieldList = hasConsumers ? [ modelField ] : [];
+
     let model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
-      fields: [ modelField ],
+      fields: modelFieldList,
       enableRebound
     });
     if (!hideErrorLogs) {
@@ -191,6 +197,9 @@ class ModelInput extends SocketConsumer {
     if (placeholder) {
       this.inputElement.setAttribute('placeholder', placeholder);
     }
+    if (accept) {
+      this.inputElement.setAttribute('accept', accept);
+    }
     let errorMessageContainer = null;
     if (showErrorMessage) {
       errorMessageContainer = document.createElement('div');
@@ -215,8 +224,11 @@ class ModelInput extends SocketConsumer {
       updateConsumerElements(consumers, checked, providerTemplate);
     } else {
       let defaultValue = this.getAttribute('default-value') || '';
-      inputElement.value = fieldValue == null ? defaultValue : fieldValue;
-      updateConsumerElements(consumers, inputElement.value, providerTemplate);
+      let elementValue = fieldValue == null ? defaultValue : fieldValue;
+      if (inputElement.type !== 'file') {
+        inputElement.value = elementValue;
+      }
+      updateConsumerElements(consumers, elementValue, providerTemplate);
     }
   }
 
@@ -278,12 +290,28 @@ class ModelInput extends SocketConsumer {
             hideErrorMessage(fieldName);
             return;
           }
-          if (event.target.value === '') {
+          let inputValue;
+          if (inputElement.type === 'file' && inputElement.files && inputElement.files.length) {
+            let reader = new FileReader();
+            let readerLoadPromise = new Promise((resolve, reject) => {
+              reader.addEventListener('load', () => {
+                resolve(reader.result);
+              });
+              reader.addEventListener('error', () => {
+                reject(new Error('Failed to read file'));
+              });
+            });
+            reader.readAsDataURL(inputElement.files[0]);
+            inputValue = await readerLoadPromise;
+          } else {
+            inputValue = event.target.value;
+          }
+          if (inputValue === '') {
             updateConsumerElements(consumers, '', providerTemplate);
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
-              Number(event.target.value) : event.target.value;
+              Number(inputValue) : inputValue;
             updateConsumerElements(consumers, targetValue, providerTemplate);
             await model.update(fieldName, targetValue);
           }

package/package.json

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