saasufy-components 3.37.0 → 3.39.0

package/README.md

@@ -217,6 +217,7 @@ So for example, if your `index.html` file is served up from the URL `http://mywe
 - `default-page`: The path/route of the default page to send the user to in case no routes are matched. Commonly used to point to a `/page-not-found` page. For the home page, it's typically recommended to create a page template with `route-path=""` instead.
 - `debounce-delay`: The number of milliseconds to wait before changing the route. This can help to avoid multiple renders if the route changes rapidly (e.g. when doing hard redirects). Defaults to 100ms.
 - `target-page`: A convenience attribute which can be used to programmatically change the `location.hash` in the address bar.
+- `force-render-paths`: An optional list of comma-separated paths to force a page render/re-render, regardless of whether or not the page has changed.
 
 **Attributes of slotted page templates**
 

package/app-router.js

@@ -58,6 +58,7 @@ export class AppRouter extends SocketConsumer {
     return [
       'target-page',
       'default-page',
+      'force-render-paths',
       'debounce-delay',
       'max-redirects'
     ];
@@ -141,9 +142,16 @@ export class AppRouter extends SocketConsumer {
     let routerViewport = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
     if (!routerViewport) return;
 
+    let forceRenderPathsString = this.getAttribute('force-render-paths');
+    let forceRenderPaths = forceRenderPathsString == null ?
+      [] : forceRenderPathsString.split(',').map(path => path.trim());
+
     let routeArgs;
     let pagePath = location.hash.replace(this.hashStartRegex, '');
     let { pageTemplate, route, regExp, params } = this.getMatchingPage(pagePath, 'path', true);
+    if (forceRenderPaths.includes(pagePath)) {
+      this.lastPageState = null;
+    }
 
     if (!pageTemplate) {
       let defaultPage = this.getAttribute('default-page');

package/model-input.js

@@ -332,7 +332,6 @@ class ModelInput extends SocketConsumer {
       inputElement.classList.remove(successStyleClass);
       debounce(async () => {
         if (event.target.value === String(model.value[fieldName] || '')) return;
-
         let providerTemplate = this.getAttribute('provider-template');
         try {
           if (inputElement.type === 'checkbox') {
@@ -347,6 +346,7 @@ class ModelInput extends SocketConsumer {
           let inputValue;
           if (inputElement.type === 'file') {
             if (inputElement.files && inputElement.files.length) {
+              inputElement.focus();
               let reader = new FileReader();
               let readerLoadPromise = new Promise((resolve, reject) => {
                 reader.addEventListener('load', () => {
@@ -386,19 +386,19 @@ class ModelInput extends SocketConsumer {
     inputElement.addEventListener('change', onInputChange);
 
     let onInputKeyUp;
-    if (inputElement.type !== 'checkbox' && inputElement.type !== 'select') {
+    let inputType = inputElement.type;
+    if (inputType !== 'checkbox' && inputType !== 'select' && inputType !== 'file') {
       onInputKeyUp = async (event) => {
         inputElement.classList.remove(successStyleClass);
         debounce(async () => {
           if (event.target.value === String(model.value[fieldName] || '')) return;
-
           let providerTemplate = this.getAttribute('provider-template');
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
               updateConsumerElements(consumers, '', providerTemplate, this.getAttribute('name'));
             } else {
-              let targetValue = inputElement.type === 'number' ?
+              let targetValue = inputType === 'number' ?
                 Number(event.target.value) : event.target.value;
               updateConsumerElements(consumers, targetValue, providerTemplate, this.getAttribute('name'));
               await model.update(fieldName, targetValue);

package/package.json

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

package/styles.css

@@ -33,22 +33,24 @@ input[type=file] {
   padding: 10px;
 }
 
-input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus {
+input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,input[type=file]:focus,select:focus,textarea:focus {
   border-color: #00a5e5;
   outline-color: #00a5e5;
+  outline-width: 1px;
+  outline-style: solid;
 }
 
-input[type=text].error,input[type=password].error,input[type=number].error,select.error,textarea.error {
+input[type=text].error,input[type=password].error,input[type=number].error,input[type=file].error,select.error,textarea.error {
   border-color: #ff0000;
   outline-color: #ff0000;
 }
 
-input[type=text].warning,input[type=password].warning,input[type=number].warning,select.warning,textarea.warning {
+input[type=text].warning,input[type=password].warning,input[type=number].warning,input[type=file].warning,select.warning,textarea.warning {
   border-color: #ee9900;
   outline-color: #ee9900;
 }
 
-input[type=text].success:focus,input[type=password].success:focus,input[type=number].success:focus,select.success:focus,textarea.success:focus {
+input[type=text].success:focus,input[type=password].success:focus,input[type=number].success:focus,input[type=file].success:focus,select.success:focus,textarea.success:focus {
   border-color: #009900;
   outline-color: #009900;
 }