saasufy-components 3.28.0 → 3.30.0

package/README.md

@@ -710,6 +710,7 @@ The following example shows how to bind an `input-provider` component to an `inp
 
 - `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.
+- `output-type`: The default output type is `string`. This property can be used to convert the output to either `boolean` or `number`.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 
 ### log-in-form

package/input-transformer.js

@@ -18,6 +18,7 @@ class InputTransformer extends HTMLElement {
       'consumers',
       'debounce-delay',
       'provider-template',
+      'output-type',
       'value'
     ];
   }
@@ -30,6 +31,7 @@ class InputTransformer extends HTMLElement {
     if (!this.hasAttribute('value')) return;
 
     let value = this.getAttribute('value') || '';
+    let outputType = this.getAttribute('output-type');
     let debounceDelay = this.getAttribute('debounce-delay');
     debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
 
@@ -40,7 +42,7 @@ class InputTransformer extends HTMLElement {
 
     this.debounce(async () => {
       let providerTemplate = this.getAttribute('provider-template') || '{{value}}';
-      updateConsumerElements(consumers, value, providerTemplate);
+      updateConsumerElements(consumers, value, providerTemplate, null, outputType);
     }, debounceDelay);
   }
 }

package/package.json

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

package/utils.js

@@ -1,6 +1,6 @@
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
-import * as uuid from '/node_modules/uuid/dist/esm-browser/index.js';
+export * as uuid from '/node_modules/uuid/dist/esm-browser/index.js';
 import { sha256 } from './sha256.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 300;
@@ -183,7 +183,7 @@ export function createModel(modelOptions) {
   return model;
 }
 
-function computeId(...parts) {
+export function computeId(...parts) {
   let encoder = new TextEncoder();
   let data = encoder.encode(parts.join('-'));
   let start = Date.now();
@@ -233,7 +233,7 @@ let templateFormatters = {
   computeId
 };
 
-let templateRawTagsRegExp = /{{{.*?}}}/gs;
+let templateTripleTagsRegExp = /{{{.*?}}}/gs;
 let templateTagsRegExp = /{{.*?}}/gs;
 
 function execExpression(expression, options) {
@@ -264,7 +264,7 @@ function getRenderOptions(data, socket) {
 
 export function renderTemplate(templateString, data, socket) {
   return templateString
-    .replace(templateRawTagsRegExp, (match) => {
+    .replace(templateTripleTagsRegExp, (match) => {
       let expString = match.slice(3, -3);
       let options = getRenderOptions(data, socket);
       try {
@@ -292,7 +292,7 @@ export function renderTemplate(templateString, data, socket) {
     });
 }
 
-export function updateConsumerElements(consumers, value, template, sourceElementName) {
+export function updateConsumerElements(consumers, value, template, sourceElementName, outputType) {
   if (consumers) {
     let consumerParts = consumers.split(',')
       .filter(part => part)
@@ -303,10 +303,13 @@ export function updateConsumerElements(consumers, value, template, sourceElement
       .filter(([ selector, attributeName ]) => selector);
 
     if (template) {
-      value = renderTemplate(
-        template,
-        { value }
-      );
+      value = renderTemplate(template, { value });
+    }
+
+    if (outputType === 'boolean') {
+      value = value !== 'false' && value !== '';
+    } else if (outputType === 'number') {
+      value = Number(value);
     }
 
     for (let [ selector, attributeName ] of consumerParts) {