saasufy-components 3.16.0 → 3.16.2

package/README.md

@@ -54,41 +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/input-transformer.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
 
@@ -113,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
@@ -280,7 +289,7 @@ A form component for inserting data into collections.
 **Attributes**
 
 - `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)`.
+- `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.
 - `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.
@@ -438,7 +447,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea`, `checkbox` or `file`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `model-input` 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 `model-input` 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.
+- `consumers`: This allows you to connect this `model-input` 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 `model-input` 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.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
@@ -547,7 +556,7 @@ This component can be configured to provide its data to multiple components (con
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `input-provider` 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.
+- `consumers`: This allows you to connect this `input-provider` 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.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
@@ -607,7 +616,7 @@ The `combineFilters` function produces a combined query string (joined with `%AN
 
 **Attributes**
 
-- `consumers`: This allows you to connect this `input-combiner` 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.
+- `consumers`: This allows you to connect this `input-combiner` 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. 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.
 
@@ -647,7 +656,7 @@ The following example shows how to bind an `input-provider` component to an `inp
 
 **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.
+- `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.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 

package/collection-browser.js

@@ -247,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/model-input.js

@@ -188,7 +188,7 @@ class ModelInput extends SocketConsumer {
       }
     } else if (elementType === 'input') {
       if (inputList) {
-        this.inputElement.setAttribute('list', inputList)
+        this.inputElement.setAttribute('list', inputList);
       }
       this.inputElement.type = type;
     }

package/package.json

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