saasufy-components 3.23.0 → 3.25.0

package/README.md

@@ -491,7 +491,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,6 +499,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 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.
@@ -533,6 +534,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 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
@@ -571,6 +573,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
@@ -602,7 +605,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`.
@@ -663,7 +666,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.
 
@@ -703,7 +706,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-input.js

@@ -31,6 +31,7 @@ class ModelInput extends SocketConsumer {
       'model-type',
       'model-id',
       'model-field',
+      'slice-to',
       'debounce-delay',
       'enable-rebound',
       'options',
@@ -109,6 +110,7 @@ class ModelInput extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
+    let sliceTo = this.getAttribute('slice-to');
     let options = this.getAttribute('options');
     let height = this.getAttribute('height');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
@@ -141,11 +143,21 @@ class ModelInput extends SocketConsumer {
 
     let modelFieldList = writeOnly ? [] : [ modelField ];
 
+    let fieldTransformations;
+    if (sliceTo != null) {
+      fieldTransformations = {
+        [modelField]: { sliceTo: Number(sliceTo) }
+      };
+    } else {
+      fieldTransformations = {};
+    }
+
     let model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
       fields: modelFieldList,
+      fieldTransformations,
       enableRebound
     });
     if (!hideErrorLogs) {

package/model-text.js

@@ -24,6 +24,7 @@ class ModelText extends SocketConsumer {
       'model-type',
       'model-id',
       'model-field',
+      'slice-to',
       'hide-error-logs'
     ];
   }
@@ -40,6 +41,7 @@ class ModelText extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
+    let sliceTo = this.getAttribute('slice-to');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
     let socket;
@@ -63,11 +65,22 @@ class ModelText extends SocketConsumer {
       socket = this.getSocket();
     }
     this.socket = socket;
+
+    let fieldTransformations;
+    if (sliceTo != null) {
+      fieldTransformations = {
+        [modelField]: { sliceTo: Number(sliceTo) }
+      };
+    } else {
+      fieldTransformations = {};
+    }
+
     let model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
-      fields: [ modelField ]
+      fields: [ modelField ],
+      fieldTransformations
     });
     if (!hideErrorLogs) {
       (async () => {

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.23.0",
+  "version": "3.25.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.0.2",
-    "ag-model": "^3.0.1",
+    "ag-collection": "^5.1.0",
+    "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0",
     "uuid": "^8.3.2"