tg-controls_cli 0.0.8 → 0.0.10

package/dist/myLib.common.js

@@ -22631,6 +22631,13 @@ module.exports = DESCRIPTORS && fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "b372":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "b42e":
@@ -24054,6 +24061,17 @@ module.exports = JSON.parse("{\"code\":\"ro\",\"messages\":{\"alpha\":\"Câmpul
 
 module.exports = JSON.parse("{\"code\":\"sv\",\"messages\":{\"alpha\":\"Fältet {_field_} får bara innehålla alfabetiska tecken\",\"alpha_dash\":\"Fältet {_field_} får bara innehålla alfanumeriska tecken såväl som snedstreck och understreck\",\"alpha_num\":\"Fältet {_field_} får bara innehålla alfanumeriska tecken\",\"alpha_spaces\":\"Fältet {_field_} får bara innehålla alfabetiska tecken och mellanslag\",\"between\":\"Fältet {_field_} måste vara mellan {min} och {max}\",\"confirmed\":\"Fältet {_field_} matchar inte {target}\",\"digits\":\"Fältet {_field_} måste vara numeriskt och innehålla exakt {length} siffor\",\"dimensions\":\"Fältet {_field_} måste vara {width} pixlar bred och {height} pixlar hög\",\"email\":\"Fältet {_field_} måste vara en giltig e-postadress\",\"excluded\":\"Fältet {_field_} måste vara ett godkänt alternativ\",\"ext\":\"Fältet {_field_} måste vara en godkänd fil\",\"image\":\"Fältet {_field_} måste vara en bildfil\",\"integer\":\"Fältet {_field_} måste vara ett heltal\",\"length\":\"Fältet {_field_} måste vara {length} långt\",\"oneOf\":\"Fältet {_field_} måste vara ett godkänt alternativ\",\"max\":\"Fältet {_field_} får inte vara längre än {length} tecken\",\"mimes\":\"Fältet {_field_} måste ha en filändelse\",\"min\":\"Fältet {_field_} måste minst vara {length} tecken\",\"numeric\":\"Fältet {_field_} får bara innehålla numeriska tecken\",\"regex\":\"Fältet {_field_} har en felaktig formatering\",\"required\":\"Fältet {_field_} är obligatoriskt\",\"required_if\":\"Fältet {_field_} är obligatoriskt\",\"size\":\"Fältet {_field_} måste vara mindre än {size}KB\",\"double\":\"Fältet {_field_} måste vara ett giltigt decimal\"}}");
 
+/***/ }),
+
+/***/ "eeee":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_FileField_vue_vue_type_style_index_0_id_610fb118_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b372");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_FileField_vue_vue_type_style_index_0_id_610fb118_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_FileField_vue_vue_type_style_index_0_id_610fb118_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "f551":
@@ -28982,78 +29000,74 @@ var ColorField_component = normalizeComponent(
 )
 
 /* harmony default export */ var ColorField = (ColorField_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"c1dfe90e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=template&id=9506f218&
-var FileFieldvue_type_template_id_9506f218_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"c1dfe90e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=template&id=610fb118&scoped=true&
+var FileFieldvue_type_template_id_610fb118_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('Field', {
-    staticClass: "w-100",
+  return _c('div', [_c('div', {
+    staticClass: "col-12 mb-2 mt-2"
+  }, [_c('label', [_vm._v("Allowed File Type:")]), _vm._l(_vm.fieldInfo.config.accept, function (fileTypeInfo) {
+    return _c('div', {
+      staticClass: "mx-2 d-inline-block doc-ico-legend"
+    }, [_c('em', {
+      staticClass: "fa text-primary",
+      class: fileTypeInfo.iconClass,
+      attrs: {
+        "id": "helpText"
+      }
+    }), _vm._v(" " + _vm._s(fileTypeInfo.fileType) + " ")]);
+  })], 2), _c('div', {
+    staticClass: "file-upload",
     attrs: {
-      "name": _vm.fieldInfo.name,
-      "rules": _vm.fieldInfo.validationRules,
-      "label": _vm.fieldInfo.label
+      "id": "fileAttachment"
+    }
+  }, [_c('div', {
+    staticClass: "file-upload__area",
+    on: {
+      "click": _vm.openFilePopup
+    }
+  }, [_c('div', [_c('span', [_vm._v("Drop files here to upload")]), _c('input', {
+    staticClass: "d-none",
+    attrs: {
+      "type": "file",
+      "id": "customFile",
+      "disabled": _vm.fieldInfo.disabled,
+      "multiple": _vm.canUploadMultipleFile()
     },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function ({
-        errors
-      }) {
-        return [_c('div', {
-          class: {
-            'custom-file from-control': true,
-            'is-invalid': errors[0]
-          }
-        }, [_c('input', {
-          staticClass: "custom-file-input w-100",
-          attrs: {
-            "type": "file",
-            "disabled": _vm.fieldInfo.disabled,
-            "id": "customFile",
-            "multiple": _vm.canUploadMultipleFile()
-          },
-          on: {
-            "change": function ($event) {
-              return _vm.onChange($event);
-            },
-            "input": function ($event) {
-              return _vm.onInput($event);
-            }
-          }
-        }), _c('label', {
-          staticClass: "custom-file-label",
-          attrs: {
-            "for": "customFile"
-          }
-        }, [_vm._v(_vm._s(_vm.fileName))])]), _vm.showAddIcon() ? _c('div', {
-          staticClass: "ml-2 mt-1"
-        }, [_c('a', {
-          class: _vm.addButtonClass()
-        }, [_c('i', {
-          class: _vm.addIconClass(),
-          attrs: {
-            "alt": "+"
-          },
-          on: {
-            "click": function ($event) {
-              return _vm.onAddButtonClick($event);
-            }
-          }
-        })])]) : _vm._e(), errors[0] ? _c('span', {
-          staticClass: "invalid-feedback",
-          attrs: {
-            "name": _vm.fieldInfo.name
-          }
-        }, [_vm._v(_vm._s(errors[0]))]) : _vm._e()];
-      }
-    }])
-  });
+    on: {
+      "change": function ($event) {
+        return _vm.onChange($event);
+      }
+    }
+  }), _vm.errors.length > 0 ? _c('div', _vm._l(_vm.errors, function (error, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "file-upload__error"
+    }, [_c('span', [_vm._v(_vm._s(error))])]);
+  }), 0) : _vm._e()]), _vm._l(_vm.previewFiles, function (file, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "upload-preview"
+    }, [file.isImage ? _c('img', {
+      staticClass: "file-image",
+      attrs: {
+        "src": file.url,
+        "alt": ""
+      }
+    }) : _vm._e(), !file.isImage ? _c('div', {
+      staticClass: "file-extention"
+    }, [_vm._v(" " + _vm._s(file.fileExtention) + " ")]) : _vm._e(), _c('span', {
+      staticClass: "file-name"
+    }, [_vm._v(" " + _vm._s(file.name) + _vm._s(file.isImage ? `.${file.fileExtention}` : "") + " ")])]);
+  })], 2)])]);
 };
-var FileFieldvue_type_template_id_9506f218_staticRenderFns = [];
+var FileFieldvue_type_template_id_610fb118_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=9506f218&
+// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=610fb118&scoped=true&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=script&lang=js&
 
+
 /* harmony default export */ var FileFieldvue_type_script_lang_js_ = ({
   components: {
     Field: ValidationProvider
@@ -29070,7 +29084,19 @@ var FileFieldvue_type_template_id_9506f218_staticRenderFns = [];
   },
   data: function () {
     return {
-      fileName: "Choose File"
+      maxSize: 0,
+      accept: '',
+      errors: [],
+      file: {
+        name: "",
+        size: 0,
+        type: "",
+        fileExtention: "",
+        url: "",
+        isImage: false,
+        isUploaded: false
+      },
+      previewFiles: []
     };
   },
   mounted: function () {
@@ -29078,40 +29104,89 @@ var FileFieldvue_type_template_id_9506f218_staticRenderFns = [];
     if (this.fieldInfo.placeholder) {
       this.fileName = this.fieldInfo.placeholder;
     }
+    if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('maxSize')) {
+      this.maxSize = this.fieldInfo.config.maxSize;
+    }
+    if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('accept')) {
+      this.accept = Array.prototype.map.call(this.fieldInfo.config.accept, function (item) {
+        return item.fileType;
+      }).join(",");
+      console.log(this.accept);
+    }
   },
   methods: {
-    onChange: function (e) {
-      if (e.target.files.length > 0) {
-        this.fileName = e.target.files[0].name;
-      }
-      this.fieldInfo.value = e.target.files;
-      if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onChange) {
-        this.fieldInfo.config.onChange(e, this.fieldInfo);
-      }
+    openFilePopup() {
+      document.querySelectorAll('[type="file"]')[0].click();
     },
-    onInput: function (e) {},
-    showAddIcon: function () {
-      if (this.fieldInfo.config && this.fieldInfo.config.showAddIcon) {
-        return this.fieldInfo.config.showAddIcon;
+    onChange(e) {
+      this.errors = [];
+      // Check if file is selected
+      if (e.target.files && e.target.files[0]) {
+        // Check if file is valid
+        for (let index = 0; index < e.target.files.length; index++) {
+          const file = e.target.files[index];
+          if (this.isFileValid(file)) {
+            // Get uploaded file           
+            // Get file size
+            var fileSize = Math.round(file.size / 1024 / 1024 * 100) / 100;
+            // Get file extention
+            var fileExtention = file.name.split(".").pop();
+            // Get file name
+            var fileName = file.name.split(".").shift();
+            // Check if file is an image
+            var isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
+            // Print to console
+            console.log(fileSize, fileExtention, fileName, isImage);
+            // Load the FileReader API
+            let reader = new FileReader();
+            reader.addEventListener("load", () => {
+              // Set file data
+              this.file = {
+                name: fileName,
+                size: fileSize,
+                type: file.type,
+                fileExtention: fileExtention,
+                isImage: isImage,
+                url: reader.result,
+                isUploaded: true
+              };
+              this.previewFiles.push(this.file);
+            }, false);
+            // Read uploaded file
+            reader.readAsDataURL(file);
+          } else {
+            console.log("Invalid file");
+          }
+        }
+        if (this.errors.length == 0) {
+          this.fieldInfo.value = e.target.files;
+          if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onChange) {
+            this.fieldInfo.config.onChange(e, this.fieldInfo);
+          }
+        }
       }
     },
-    onAddButtonClick: function (e) {
-      if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onAddButtonClick) {
-        this.fieldInfo.config.onAddButtonClick(e, this.fieldInfo);
+    isFileSizeValid(fileSize) {
+      if (fileSize <= this.maxSize) {
+        console.log("File size is valid");
+      } else {
+        this.errors.push(`File size should be less than ${this.maxSize} MB`);
       }
     },
-    addButtonClass: function () {
-      if (this.fieldInfo.config && this.fieldInfo.config.addIconBackground) {
-        return "round-icon-small theme-primary " + this.fieldInfo.config.addIconBackground;
+    isFileTypeValid(fileExtention) {
+      if (this.accept.split(",").includes(fileExtention)) {
+        console.log("File type is valid");
       } else {
-        return "round-icon-small btn-dark theme-primary";
+        this.errors.push(`File type should be ${this.accept}`);
       }
     },
-    addIconClass: function () {
-      if (this.fieldInfo.config && this.fieldInfo.config.addIcon) {
-        return "fa text-white pt-7 font-18 " + this.fieldInfo.config.addIcon;
+    isFileValid(file) {
+      this.isFileSizeValid(Math.round(file.size / 1024 / 1024 * 100) / 100);
+      this.isFileTypeValid(file.name.split(".").pop());
+      if (this.errors.length === 0) {
+        return true;
       } else {
-        return "fa fa-plus text-white pt-7 font-18";
+        return false;
       }
     },
     canUploadMultipleFile() {
@@ -29124,21 +29199,25 @@ var FileFieldvue_type_template_id_9506f218_staticRenderFns = [];
 });
 // CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_FileFieldvue_type_script_lang_js_ = (FileFieldvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./src/components/FileField.vue?vue&type=style&index=0&id=610fb118&prod&scoped=true&lang=css&
+var FileFieldvue_type_style_index_0_id_610fb118_prod_scoped_true_lang_css_ = __webpack_require__("eeee");
+
 // CONCATENATED MODULE: ./src/components/FileField.vue
 
 
 
 
 
+
 /* normalize component */
 
 var FileField_component = normalizeComponent(
   components_FileFieldvue_type_script_lang_js_,
-  FileFieldvue_type_template_id_9506f218_render,
-  FileFieldvue_type_template_id_9506f218_staticRenderFns,
+  FileFieldvue_type_template_id_610fb118_scoped_true_render,
+  FileFieldvue_type_template_id_610fb118_scoped_true_staticRenderFns,
   false,
   null,
-  null,
+  "610fb118",
   null
   
 )