saasufy-components 3.11.0 → 3.13.0

package/README.md

@@ -253,7 +253,7 @@ A form component for inserting data into collections.
 <collection-adder
   collection-type="Product"
   collection-fields="name,brand,qty"
-  model-values="categoryName=electronics"
+  model-values="categoryName=electronics,isNew:boolean=true"
   submit-button-label="Create"
   trim-spaces
 ></collection-adder>
@@ -263,7 +263,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)`.
-- `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.
+- `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.
 - `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.
@@ -284,6 +284,13 @@ It supports either immediate deletion or deletion upon confirmation; in the latt
 
 **Example usage**
 
+```html
+<!-- Must be placed somewhere inside a collection-browser component, typically inside the slotted item template. -->
+<collection-deleter model-id="{{Product.id}}" onclick="deleteItem()">&#x2715;</collection-deleter>
+```
+
+OR (with confirmation step)
+
 ```html
 <!-- Must be placed somewhere inside a collection-browser component, typically inside the slotted item template. -->
 <collection-deleter model-id="{{Product.id}}" confirm-message="Are you sure you want to delete the {{Product.name}} product?" onclick="confirmDeleteItem()">&#x2715;</collection-deleter>

package/collection-adder.js

@@ -154,6 +154,7 @@ class CollectionAdder extends SocketConsumer {
 
     let {
       fieldNames: modelFieldNames,
+      fieldTypes: modelFieldTypes,
       fieldValues: modelFieldValues
     } = convertStringToFieldParams(this.getAttribute('model-values'));
 
@@ -174,7 +175,17 @@ class CollectionAdder extends SocketConsumer {
       autocorrect ? ` autocorrect="${autocorrect}"` : ''
     }`;
 
-    this.modelFieldValues = modelFieldValues;
+    this.modelFieldValues = Object.fromEntries(
+      Object.entries(modelFieldValues).map(([key, value]) => {
+        if (modelFieldTypes[key] === 'boolean') {
+          return [ key, value !== 'false' && value !== '' ];
+        }
+        if (modelFieldTypes[key] === 'number') {
+          return [ key, Number(value) ];
+        }
+        return [ key, value ];
+      })
+    );
 
     if (this.collection) this.collection.destroy();
 

package/collection-browser.js

@@ -202,14 +202,24 @@ class CollectionBrowser extends SocketConsumer {
 
     let items = [];
 
+    let type = this.getAttribute('type-alias') || this.collection.type;
+
     if (firstItemTemplate) {
-      items.push(firstItemTemplate.innerHTML);
+      let itemString = renderTemplate(
+        firstItemTemplate.innerHTML,
+        { [`$${type}`]: this.collection.meta },
+        this.socket
+      );
+      items.push(itemString);
     }
     if (noItemTemplate && !this.collection.value.length) {
-      items.push(noItemTemplate.innerHTML);
+      let itemString = renderTemplate(
+        noItemTemplate.innerHTML,
+        { [`$${type}`]: this.collection.meta },
+        this.socket
+      );
+      items.push(itemString);
     } else if (itemTemplate) {
-      let type = this.getAttribute('type-alias') || this.collection.type;
-
       for (let modelItem of this.collection.value) {
         let itemString = renderTemplate(
           itemTemplate.innerHTML,

package/input-provider.js

@@ -40,8 +40,12 @@ class InputProvider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroy();
-    this.render();
+    if (name === 'value') {
+      this.value = newValue;
+    } else {
+      this.destroy();
+      this.render();
+    }
   }
 
   triggerChange() {
@@ -53,7 +57,20 @@ class InputProvider extends HTMLElement {
       if (newValue && this.hasAttribute('computable-value')) {
         newValue = renderTemplate(newValue);
       }
-      let oldValue = this.inputElement.value;
+      let oldValue;
+      if (this.inputElement.type === 'checkbox') {
+        oldValue = this.inputElement.checked;
+        if (typeof newValue === 'string') {
+          this.inputElement.checked = newValue !== 'false' && newValue !== '';
+        } else {
+          this.inputElement.checked = newValue;
+        }
+        if (oldValue !== newValue) {
+          this.triggerChange();
+        }
+        return;
+      }
+      oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
       if (oldValue !== newValue) {
         this.triggerChange();
@@ -62,7 +79,13 @@ class InputProvider extends HTMLElement {
   }
 
   get value() {
-    return (this.inputElement && this.inputElement.value) || '';
+    if (!this.inputElement) {
+      return '';
+    }
+    if (this.inputElement.type === 'checkbox') {
+      return this.inputElement.checked;
+    }
+    return this.inputElement.value || '';
   }
 
   render() {

package/model-input.js

@@ -63,15 +63,20 @@ class ModelInput extends SocketConsumer {
       if (newValue && this.hasAttribute('computable-value')) {
         newValue = renderTemplate(newValue);
       }
+      let oldValue;
       if (this.inputElement.type === 'checkbox') {
-        let oldValue = this.inputElement.checked;
-        this.inputElement.checked = newValue;
+        oldValue = this.inputElement.checked;
+        if (typeof newValue === 'string') {
+          this.inputElement.checked = newValue !== 'false' && newValue !== '';
+        } else {
+          this.inputElement.checked = newValue;
+        }
         if (oldValue !== newValue) {
           this.triggerChange();
         }
         return;
       }
-      let oldValue = this.inputElement.value;
+      oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
       if (oldValue !== newValue) {
         this.triggerChange();

package/package.json

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