tg-controls_cli 0.0.8 → 0.0.9

package/dist/myLib.common.js

@@ -22248,6 +22248,17 @@ module.exports = JSON.parse("{\"code\":\"sk\",\"messages\":{\"alpha\":\"{_field_
 
 // extracted by mini-css-extract-plugin
 
+/***/ }),
+
+/***/ "719a":
+/***/ (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_6aec890d_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("836d");
+/* 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_6aec890d_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_6aec890d_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "7234":
@@ -22326,6 +22337,13 @@ module.exports = function (argument) {
 };
 
 
+/***/ }),
+
+/***/ "836d":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "83ab":
@@ -28982,78 +29000,55 @@ 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=6aec890d&scoped=true&
+var FileFieldvue_type_template_id_6aec890d_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('Field', {
-    staticClass: "w-100",
+  return _c('div', {
+    staticClass: "file-upload"
+  }, [_c('div', {
+    staticClass: "file-upload__area"
+  }, [_c('div', [_c('input', {
     attrs: {
-      "name": _vm.fieldInfo.name,
-      "rules": _vm.fieldInfo.validationRules,
-      "label": _vm.fieldInfo.label
+      "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_6aec890d_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=9506f218&
+// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=6aec890d&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 +29065,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 +29085,83 @@ 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 = this.fieldInfo.config.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);
-      }
-    },
-    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 +29174,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=6aec890d&prod&scoped=true&lang=css&
+var FileFieldvue_type_style_index_0_id_6aec890d_prod_scoped_true_lang_css_ = __webpack_require__("719a");
+
 // 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_6aec890d_scoped_true_render,
+  FileFieldvue_type_template_id_6aec890d_scoped_true_staticRenderFns,
   false,
   null,
-  null,
+  "6aec890d",
   null
   
 )