saasufy-components 3.15.2 → 3.16.1

package/README.md

@@ -19,6 +19,7 @@ Components for Saasufy
 ### User input
 - [input-provider](#input-provider)
 - [input-combiner](#input-combiner)
+- [input-transformer](#input-transformer)
 
 ### Authentication
 - [log-in-form](#log-in-form)
@@ -53,40 +54,14 @@ You can apply custom CSS/styling to elements that are rendered inside a viewport
 
 ### Components
 
-To use components, you just need to include them into your `.html` file inside your `<head>` tag like this:
-
-```html
-<script src="https://saasufy.com/node_modules/saasufy-components/socket.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/app-router.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-browser.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-adder.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-deleter.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-reducer.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/model-input.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/model-text.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/model-viewer.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/input-provider.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/input-combiner.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/log-in-form.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/log-out.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/oauth-link.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/oauth-handler.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/render-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/if-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/switch-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-adder-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/confirm-modal.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/overlay-modal.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/download-link.js" type="module" defer></script>
-```
+To use a component, you just need to include the relevant `<script>` tag into the `<head>` tag of your `.html` file.
+You can simply copy-paste the script tag provided under the `Import` section of the relevant component's documentation.
 
 You should only add the script tags for the components which your page uses to avoid wasting bandwidth and unnecessarily delaying page load for your users.
-The `.js` file name of the component matches the names of the HTML tags which the script provides.
-The only exception is the `socket-provider` component which is located inside the `socket.js` file - This is because that file exposes multiple components which are used behind the scenes by other components.
-You should always include the `socket.js` script as shown above whenever you use components which depend on data from Saasufy.
+You should always include the `socket.js` script and create a top-level `socket-provider` component if you intend to use components which depend on data from Saasufy.
 
-Linking the scripts directly from `saasufy.com` as shown above is the simplest way to get started as it doesn't require loading anything or hosting the scripts yourself.
-An alternative approach is to download Saasufy components using `npm install saasufy-components` and then link to them from your own hosting provider.
+Linking the scripts directly from `saasufy.com` is the simplest way to get started as it doesn't require loading anything or hosting the scripts yourself.
+An alternative approach is to download Saasufy components using `npm install saasufy-components` and self-host them.
 
 ### Styling
 
@@ -111,6 +86,42 @@ The following utility functions can be used anywhere inside template `{{expressi
 - Format UNIX timestamp as a human-readable date: `{{date(Product.updatedAt)}}`
 - Given an array of objects, extract the values from the specified field and join them together into a single comma-separated string: `{{joinFields(Product, 'name')}}`
 
+### File hosting
+
+Saasufy provides basic HTTP/HTTPS file hosting functionality with support for client-side caching (with `ETag`).
+This is especially useful for hosting images.
+
+To upload files to Saasufy, you first need to create a field of type `string` on a model of your choice.
+You will then need to check/enable the `blob` constraint to tell Saasufy to treat this field as a base64 file.
+
+After you've deployed your schema from the Saasufy dashboard, you will be able to manually add new records into your model via its `data` section.
+Saasufy will show you a file picker next to the relevant field name which you can use to upload a file/image to Saasufy.
+
+After adding a record to Saasufy which holds a file in one of its fields, that file can be accessed over HTTP/HTTPS via your Saasufy service's `/files` HTTP endpoint.
+The format of the URL to link directly to a specific file/image is:
+
+```
+https://saasufy.com/:serviceId/files/:modelName/:modelId/:fieldName
+```
+For example, if the URL for your Saasufy service (which you get after deploying your service) is `wss://saasufy.com/sid7999/socketcluster/`
+and your file is stored inside an `Image` model with ID `58f2051c-14bc-4518-8816-ff387cfdd57e` inside a `data` field, you will be able to link to your image directly using this URL:
+
+```
+https://saasufy.com/sid7999/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data
+```
+
+You can use it to embed images into your application using the `<img>` tag like this:
+
+```html
+<img src="https://saasufy.com/sid7999/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data" alt="My image" />
+```
+
+Saasufy enforces access controls for HTTP in the same way as it does for its WebSocket protocol.
+It's possible to block or restrict access to specific files stored on specific fields via the `Access` page under the relevant model.
+
+If your model field's access is set to `restrict`, only authenticated users with matching permissions will be able to view/download the image/file.
+In this case, you will need to add your user's JWT token to a cookie with the name `socketcluster.saasufyService.authToken` and it will be passed along with the request.
+
 ## Components
 
 ### app-router
@@ -609,6 +620,46 @@ The `combineFilters` function produces a combined query string (joined with `%AN
 - `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.
 
+### input-transformer
+
+A component which can be used to transform data from an `input-provider` component and pass the transformed data to other components (or HTML elements) via custom attributes.
+This component can be configured to provide its data to multiple components (consumers) via custom attributes.
+
+**Import**
+
+```html
+<script src="https://saasufy.com/node_modules/saasufy-components/input-transformer.js" type="module" defer></script>
+```
+
+**Example usage**
+
+The following example shows how to bind an `input-provider` component to an `input-transformer`.
+
+```html
+<input-provider
+  class="dollar-input"
+  name="count"
+  type="text"
+  consumers=".cents-transformer"
+  value=""
+  placeholder="Dollars"
+></input-provider>
+
+<input-transformer
+  class="cents-transformer"
+  consumers=".cents-container"
+  provider-template="{{Number(value) * 100}}"
+></input-transformer>
+
+<div class="cents-container"></div>
+```
+
+**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. 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.
+
 ### log-in-form
 
 A form component which allows end-users to authenticate themselves into your app using the Saasufy blockchain or any Capitalisk-based blockchain.

package/collection-browser.js

@@ -139,8 +139,14 @@ class CollectionBrowser extends SocketConsumer {
     let currentPageElements = this.shadowRoot.querySelector('slot[name="page-number"]').assignedElements();
     let pageNumber = Math.floor(this.collection.meta.pageOffset / this.collection.meta.pageSize + 1);
     for (let element of currentPageElements) {
-      if (element.nodeName === 'INPUT') {
+      if (element.nodeName === 'INPUT' || element.nodeName === 'MODEL-INPUT') {
         element.value = pageNumber;
+      } else if (
+        element.nodeName === 'INPUT-PROVIDER' ||
+        element.nodeName === 'INPUT-COMBINER' ||
+        element.nodeName === 'INPUT-TRANSFORMER'
+      ) {
+        element.setAttribute('value', pageNumber);
       } else {
         element.innerHTML = pageNumber;
       }
@@ -241,7 +247,7 @@ class CollectionBrowser extends SocketConsumer {
   render() {
     let collectionType = this.getAttribute('collection-type');
     let collectionFields = this.getAttribute('collection-fields') || '';
-    let collectionView = this.getAttribute('collection-view');
+    let collectionView = this.getAttribute('collection-view') || 'defaultView';
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionViewParams = this.getAttribute('collection-view-params') || '';
     let collectionPageOffset = this.getAttribute('collection-page-offset');

package/input-transformer.js

@@ -0,0 +1,48 @@
+import { debouncer, updateConsumerElements } from './utils.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 0;
+
+class InputTransformer extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.debounce = debouncer();
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return [
+      'consumers',
+      'debounce-delay',
+      'provider-template',
+      'value'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.render();
+  }
+
+  render() {
+    if (!this.hasAttribute('value')) return;
+
+    let value = this.getAttribute('value') || '';
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
+
+    if (!this.isReady) return;
+
+    let consumers = this.getAttribute('consumers');
+    if (!consumers) return;
+
+    this.debounce(async () => {
+      let providerTemplate = this.getAttribute('provider-template') || '{{value}}';
+      updateConsumerElements(consumers, value, providerTemplate);
+    }, debounceDelay);
+  }
+}
+
+window.customElements.define('input-transformer', InputTransformer);

package/package.json

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

package/utils.js

@@ -320,6 +320,8 @@ export function updateConsumerElements(consumers, value, template, sourceElement
             }
           } else if (element.nodeName === 'MODEL-INPUT') {
             element.value = value;
+          } else if (element.nodeName === 'INPUT-TRANSFORMER') {
+            element.setAttribute('value', value);
           } else if (element.nodeName === 'INPUT-COMBINER') {
             element.setAttribute(
               'value',