saasufy-components 3.38.0 → 3.39.0

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.38.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;
 }