saasufy-components 3.24.0 → 3.26.0

package/README.md

@@ -250,6 +250,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.
 
 ### collection-browser
 
@@ -491,7 +492,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `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`, `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. 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.
+- `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`.
@@ -499,7 +500,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `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.
 - `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
-- `slice-to`: Optional field which can be set to a number to trim strings down to a maximum number of characters. This is useful when dealing with potentially very long field values. Extra care should be taken when using this attribute on a `model-input` element as it will cause values to be overwritten with shortened values if the user edits the input box. Note also that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
+- `slice-to`: Optional attribute which can be set to a number to trim strings down to a maximum number of characters. This is useful when dealing with potentially very long field values. Extra care should be taken when using this attribute on a `model-input` element as it will cause values to be overwritten with shortened values if the user edits the input box. Note also that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 - `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.
@@ -534,7 +535,7 @@ Used to displaying a field of a model instance in real time.
 - `model-type` (required): Specifies the type of model to bind to. This should match a `Model` available in your Saasufy service.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading.
-- `slice-to`: Optional field which can be set to a number to trim strings down to a maximum number of characters when reading. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
+- `slice-to`: Optional attribute which can be set to a number to trim strings down to a maximum number of characters when reading. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 
 ### model-viewer
@@ -573,6 +574,7 @@ Used for rendering a single model resource using a template. This is the single-
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-fields` (required): A comma-separated list of fields to bind to. Note that unlike with `model-input` and `model-text`, the attribute name is plural and can bind to multiple fields.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `model-browser` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `MyProduct`, then `{{Product.name}}` would become `{{MyProduct.name}}`.
+- `fields-slice-to`: Optional attribute which can be used to trim strings down to a maximum number of characters when reading. The format is `fieldName1=number1,fieldName2=number2`. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
 
 ### input-provider
@@ -604,7 +606,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. 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.
+- `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`.
@@ -665,7 +667,7 @@ The `combineFilters` function produces a combined query string (joined with `%AN
 
 **Attributes**
 
-- `consumers`: This allows you to connect this `input-combiner` 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.
+- `consumers`: This allows you to connect this `input-combiner` 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. In the case of the `input-combiner`, the value is an object wherein each key represents the unique label associated with different `input-provider` components.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 
@@ -705,7 +707,7 @@ The following example shows how to bind an `input-provider` component to an `inp
 
 **Attributes**
 
-- `consumers`: This allows you to connect this `input-transformer` 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.
+- `consumers`: This allows you to connect this `input-transformer` 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. Default is 0ms.
 

package/model-viewer.js

@@ -1,6 +1,6 @@
 import { SocketConsumer } from './socket.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
-import { renderTemplate } from './utils.js';
+import { renderTemplate, convertStringToFieldParams } from './utils.js';
 
 class ModelViewer extends SocketConsumer {
   constructor() {
@@ -30,9 +30,11 @@ class ModelViewer extends SocketConsumer {
 
   static get observedAttributes() {
     return [
+      'socket-instance-property',
       'model-type',
       'model-id',
       'model-fields',
+      'fields-slice-to',
       'type-alias',
       'hide-error-logs'
     ];
@@ -85,12 +87,22 @@ class ModelViewer extends SocketConsumer {
   }
 
   render() {
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelFields = this.getAttribute('model-fields') || '';
-    let socketInstanceProperty = this.getAttribute('socket-instance-property');
+    let fieldsSliceTo = this.getAttribute('fields-slice-to') || '';
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
+    let {
+      fieldValues: sliceToMap
+    } = convertStringToFieldParams(fieldsSliceTo);
+
+    let fieldTransformations = {};
+    for (let [ fieldName, sliceTo ] of Object.entries(sliceToMap)) {
+      fieldTransformations[fieldName] = { sliceTo: Number(sliceTo) };
+    }
+
     if (this.model) this.model.destroy();
 
     let socket;
@@ -114,11 +126,13 @@ class ModelViewer extends SocketConsumer {
       socket = this.getSocket();
     }
     this.socket = socket;
+
     this.model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
-      fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
+      fields: modelFields.split(',').map(field => field.trim()).filter(field => field),
+      fieldTransformations
     });
 
     this.shadowRoot.innerHTML = `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.24.0",
+  "version": "3.26.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "ag-collection": "^5.1.0",
     "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
-    "socketcluster-client": "^19.1.0",
+    "socketcluster-client": "^19.1.1",
     "uuid": "^8.3.2"
   },
   "bugs": {

package/socket.js

@@ -1,4 +1,5 @@
 import { create } from '/node_modules/socketcluster-client/socketcluster-client.min.js';
+import { convertStringToFieldParams } from './utils.js';
 
 let globalSocket;
 
@@ -21,23 +22,12 @@ export class SocketProvider extends HTMLElement {
     super();
     this.saasufySocket = null;
     this.isReady = false;
+    this.lastExtraSocketOptionsString = '';
   }
 
   connectedCallback() {
     this.isReady = true;
     this.getSocket();
-    let disableTabSync = this.hasAttribute('disable-tab-sync');
-    if (!disableTabSync) {
-      if (this.storageChangeWatcher) {
-        window.removeEventListener('storage', this.storageChangeWatcher);
-      }
-      this.storageChangeWatcher = (event) => {
-        if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
-          this.saasufySocket.reconnect();
-        }
-      };
-    }
-    window.addEventListener('storage', this.storageChangeWatcher);
   }
 
   disconnectedCallback() {
@@ -50,7 +40,9 @@ export class SocketProvider extends HTMLElement {
   static get observedAttributes() {
     return [
       'url',
-      'auth-token-name'
+      'auth-token-name',
+      'disable-tab-sync',
+      'socket-options'
     ];
   }
 
@@ -72,6 +64,7 @@ export class SocketProvider extends HTMLElement {
 
   getSocketOptions() {
     let authTokenName = this.getAttribute('auth-token-name') || null;
+    let socketOptionsString = this.getAttribute('socket-options') || '';
     let url = this.getSanitizedURL();
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);
@@ -92,18 +85,24 @@ export class SocketProvider extends HTMLElement {
       }
       urlOptions = {};
     }
+    let {
+      fieldValues: extraSocketOptions
+    } = convertStringToFieldParams(socketOptionsString);
     let socketOptions = {
       authTokenName,
+      autoConnect: !!url,
+      ...extraSocketOptions,
       ...urlOptions
     };
-    socketOptions.autoConnect = !!url;
     return socketOptions;
   }
 
   getSocket() {
+    let socket;
+    let socketOptionsString = this.getAttribute('socket-options') || '';
     if (this.saasufySocket) {
       let sanitizedURL = this.getSanitizedURL();
-      if (this.lastSaasufySocketURL !== sanitizedURL) {
+      if (this.lastSaasufySocketURL !== sanitizedURL || this.lastExtraSocketOptionsString !== socketOptionsString) {
         this.saasufySocket.connect(
           this.getSocketOptions()
         );
@@ -111,15 +110,31 @@ export class SocketProvider extends HTMLElement {
         this.saasufySocket.connect();
       }
       this.lastSaasufySocketURL = sanitizedURL;
-      return this.saasufySocket;
+      this.lastExtraSocketOptionsString = socketOptionsString;
+      socket = this.saasufySocket;
+    } else {
+      socket = this.createSocket();
+    }
+    if (this.storageChangeWatcher) {
+      window.removeEventListener('storage', this.storageChangeWatcher);
     }
-    return this.createSocket();
+    let disableTabSync = this.hasAttribute('disable-tab-sync');
+    if (!disableTabSync) {
+      this.storageChangeWatcher = (event) => {
+        if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
+          this.saasufySocket.reconnect();
+        }
+      };
+      window.addEventListener('storage', this.storageChangeWatcher);
+    }
+    return socket;
   }
 
   createSocket() {
     let socketOptions = this.getSocketOptions();
     this.saasufySocket = create(socketOptions);
     this.lastSaasufySocketURL = this.getSanitizedURL();
+    this.lastExtraSocketOptionsString = this.getAttribute('socket-options') || '';
 
     return this.saasufySocket;
   }