saasufy-components 3.17.1 → 3.19.0

package/README.md

@@ -259,6 +259,7 @@ Can also perform basic CRUD operations such as deleting or creating records by l
 - `collection-page-size`: Sets how many items from the collection are displayed at once. This is useful for pagination, allowing users to navigate through large sets of data in chunks.
 - `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the browser which page of data you want to display initially.
 - `collection-get-count`: If this attribute is present, the component will get the record count of the target view. The count can be rendered into the template by prefixing the model name with a dollar sign and accessing the `count` property like this: `{{$MyModelName.count}}`.
+- `collection-view-primary-fields`: An optional list of field names to specify which specific `collection-view-params` to watch for real time updates. Fewer primary fields means that the view will be exposed to a broader range of real time updates but at the cost of performance. It is generally recommended to have just one primary field.
 - `auto-reset-page-offset`: If this attribute is present, the `collection-page-offset` will be reset to zero whenever the view params change.
 - `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 `collection-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 `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
@@ -291,6 +292,7 @@ A form component for inserting data into collections.
 - `collection-type` (required): Specifies the type of collection to add the resource to when the form is submitted. This should match a `Model` available in your Saasufy service.
 - `collection-fields`: A comma-separated list of fields from the `Model` to display as input elements inside the form for the user to fill in. Each field name in this list can optionally be followed by an input element type after a `:` character. For example `collection-fields="qty:number, size:select(small,medium,large)` will create one input element with `type="number"` and one with `type=select` with options `small`, `medium` or `large`. To make a select field optional, you can prefix the list of options with a comma; e.g. `size:select(,small,medium,large)`. Supported input types include: `text`, `select`, `number`, `checkbox`, `radio`, `textarea`, `file` and `text-select`.
 - `model-values`: An optional list of key-value pairs in the format `field1=value1,field2=value2` to add to the newly created resource alongside the values collected from the user via the form. For non-string values, the type should be provided in the format `fieldName:type=value`; supported types are `string`, `number` and `boolean`. Unlike `collection-fields` which are rendered as input elements in the form, `model-values` are not shown to the user.
+- `field-labels`: Allows you to specify custom input labels by mapping field names to more user-friendly labels in the format `fieldName1='Field Name 1',fieldName2='Field Name 2'`.
 - `submit-button-label`: Text to display on the submit button. If not specified, defaults to `Submit`.
 - `hide-submit-button`: Adding this attribute will hide the submit button from the form.
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
@@ -566,6 +568,7 @@ This component can be configured to provide its data to multiple components (con
 - `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
 - `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.
+- `input-props`: Can be used to set additional attributes on the inner `input` element. Must be in the format `attr1=value1,attr2=value2`.
 
 ### input-combiner
 

package/collection-browser.js

@@ -101,6 +101,7 @@ class CollectionBrowser extends SocketConsumer {
       'collection-fields',
       'collection-view',
       'collection-view-params',
+      'collection-view-primary-fields',
       'collection-page-size',
       'collection-page-offset',
       'collection-get-count',
@@ -250,6 +251,7 @@ class CollectionBrowser extends SocketConsumer {
     let collectionView = this.getAttribute('collection-view') || 'defaultView';
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionViewParams = this.getAttribute('collection-view-params') || '';
+    let collectionViewPrimaryFields = this.getAttribute('collection-view-primary-fields');
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
@@ -257,6 +259,8 @@ class CollectionBrowser extends SocketConsumer {
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
     let { fieldValues: viewParams } = convertStringToFieldParams(collectionViewParams);
+    let viewPrimaryFields = collectionViewPrimaryFields ?
+      collectionViewPrimaryFields.split(',').map(fieldName => fieldName.trim()) : null;
 
     if (this.collection) this.collection.destroy();
     this.isStale = true;
@@ -267,6 +271,7 @@ class CollectionBrowser extends SocketConsumer {
       fields: collectionFields.split(',').map(field => field.trim()).filter(field => field),
       view: collectionView,
       viewParams,
+      viewPrimaryFields,
       pageSize: Number(collectionPageSize || 10),
       pageOffset: Number(collectionPageOffset || 0),
       changeReloadDelay: collectionReloadDelay,

package/input-provider.js

@@ -1,7 +1,8 @@
 import {
   debouncer,
   renderTemplate,
-  updateConsumerElements
+  updateConsumerElements,
+  convertStringToFieldParams
 } from './utils.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 800;
@@ -24,7 +25,6 @@ class InputProvider extends HTMLElement {
 
   static get observedAttributes() {
     return [
-      'input-id',
       'list',
       'type',
       'placeholder',
@@ -34,7 +34,9 @@ class InputProvider extends HTMLElement {
       'value',
       'height',
       'autocapitalize',
-      'autocorrect'
+      'autocorrect',
+      'input-id',
+      'input-props'
     ];
   }
 
@@ -99,6 +101,7 @@ class InputProvider extends HTMLElement {
     let options = this.getAttribute('options');
     let height = this.getAttribute('height');
     let value = this.getAttribute('value') || '';
+    let inputProps = this.getAttribute('input-props');
 
     let elementType;
     if (type === 'select') {
@@ -140,6 +143,15 @@ class InputProvider extends HTMLElement {
     if (placeholder) {
       this.inputElement.setAttribute('placeholder', placeholder);
     }
+    if (inputProps) {
+      let {
+        fieldNames: attrNames,
+        fieldValues: attrValues
+      } = convertStringToFieldParams(inputProps);
+      for (let attr of attrNames) {
+        this.inputElement.setAttribute(attr, attrValues[attr]);
+      }
+    }
 
     this.appendChild(this.inputElement);
 

package/package.json

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