saasufy-components 3.23.0 → 3.24.0

package/README.md

@@ -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 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`.
 - `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 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`.
 - `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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.23.0",
+  "version": "3.24.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"