@volverjs/ui-vue 0.0.10-beta.20 → 0.0.10-beta.22

package/dist/components/index.es.js

@@ -1223,6 +1223,18 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const ACTION_ICONS = {
+  showPassword: "eye-on",
+  hidePassword: "eye-off",
+  showDatePicker: "calendar",
+  showTimePicker: "time",
+  showColorPicker: "color",
+  clear: "close",
+  add: "add",
+  remove: "trash",
+  edit: "edit",
+  download: "download"
+};
 const VvIconPropsDefaults = {
   prefix: "normal"
   /* normal */
@@ -5074,14 +5086,6 @@ const INPUT_TYPES = {
   MONTH: "month",
   WEEK: "week"
 };
-const TYPES_ICON = {
-  PASSWORD_SHOW: "eye-on",
-  PASSWORD_HIDE: "eye-off",
-  DATE: "calendar",
-  TIME: "time",
-  COLOR: "color",
-  SEARCH: "close"
-};
 const VvInputTextEvents = [
   "update:modelValue",
   "update:masked",
@@ -5150,24 +5154,24 @@ const VvInputTextProps = {
    * @see VVIcon
    */
   iconShowPassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_SHOW
+    type: [String, Object],
+    default: ACTION_ICONS.showPassword
   },
   /**
    * VvIcon name for hide password button
    * @see VVIcon
    */
   iconHidePassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_HIDE
+    type: [String, Object],
+    default: ACTION_ICONS.hidePassword
   },
   /**
    * VvIcon name for clear button
    * @see VVIcon
    */
   iconClear: {
-    type: String,
-    default: TYPES_ICON.SEARCH
+    type: [String, Object],
+    default: ACTION_ICONS.clear
   },
   /**
    * Label for step up button
@@ -5265,12 +5269,12 @@ const VvInputPasswordAction = defineComponent({
       default: "Hide password"
     },
     iconShow: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_SHOW
+      type: [String, Object],
+      default: ACTION_ICONS.showPassword
     },
     iconHide: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_HIDE
+      type: [String, Object],
+      default: ACTION_ICONS.hidePassword
     }
   },
   emits: ["toggle-password"],
@@ -5279,6 +5283,7 @@ const VvInputPasswordAction = defineComponent({
     const activeIcon = computed(
       () => active.value ? props.iconHide : props.iconShow
     );
+    const { hasIcon } = useComponentIcon(activeIcon);
     function onClick(e) {
       e == null ? void 0 : e.stopPropagation();
       if (!props.disabled) {
@@ -5289,14 +5294,15 @@ const VvInputPasswordAction = defineComponent({
     return {
       active,
       activeIcon,
+      hasIcon,
       onClick
     };
   },
   render() {
-    const icon = h(_sfc_main$u, {
-      name: this.activeIcon,
+    const icon = this.hasIcon ? h(_sfc_main$u, {
+      ...this.hasIcon,
       class: "vv-input-text__icon"
-    });
+    }) : void 0;
     return h(
       "button",
       {
@@ -5369,12 +5375,13 @@ const VvInputClearAction = defineComponent({
       default: "Clear"
     },
     icon: {
-      type: String,
+      type: [String, Object],
       default: "close"
     }
   },
   emits: ["clear"],
   setup(props, { emit }) {
+    const { hasIcon } = useComponentIcon(computed(() => props.icon));
     function onClick(e) {
       e == null ? void 0 : e.stopPropagation();
       if (!props.disabled) {
@@ -5382,14 +5389,15 @@ const VvInputClearAction = defineComponent({
       }
     }
     return {
+      hasIcon,
       onClick
     };
   },
   render() {
-    const icon = h(_sfc_main$u, {
-      name: this.icon,
+    const icon = this.hasIcon ? h(_sfc_main$u, {
+      ...this.hasIcon,
       class: "vv-input-text__icon"
-    });
+    }) : void 0;
     return h(
       "button",
       {
@@ -5749,14 +5757,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       switch (props.type) {
         case INPUT_TYPES.COLOR:
-          return { name: TYPES_ICON.COLOR };
+          return { name: ACTION_ICONS.showColorPicker };
         case INPUT_TYPES.DATE:
         case INPUT_TYPES.DATETIME_LOCAL:
         case INPUT_TYPES.WEEK:
         case INPUT_TYPES.MONTH:
-          return { name: TYPES_ICON.DATE };
+          return { name: ACTION_ICONS.showDatePicker };
         case INPUT_TYPES.TIME:
-          return { name: TYPES_ICON.TIME };
+          return { name: ACTION_ICONS.showTimePicker };
       }
       return void 0;
     });
@@ -5789,8 +5797,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value !== void 0,
-        "icon-after": iconAfter.value !== void 0,
+        "icon-before": !!hasIconBefore.value,
+        "icon-after": !!iconAfter.value,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
         focus: isFocused.value,
@@ -6946,6 +6954,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const VvInputFileProps = {
+  ...IdNameProps,
   ...ModifiersProps,
   ...ValidProps,
   ...InvalidProps,
@@ -6953,32 +6962,107 @@ const VvInputFileProps = {
   ...LabelProps,
   ...LoadingProps,
   ...ReadonlyProps,
-  name: { type: String },
-  id: { type: String },
+  ...IconProps,
+  /**
+   * Input value
+   */
   modelValue: {
     type: Object,
     required: true
   },
-  max: [Number, String],
-  labelButton: { type: String, default: "Image" },
-  loading: Boolean,
-  accept: String,
-  placeholder: String,
-  multiple: Boolean,
-  iconLeft: String,
-  iconRight: String
+  /**
+   * Whether to show progress bar
+   */
+  progress: { type: [Number, String], default: void 0 },
+  /**
+   * Input
+   * Text that appears in the form control when it has no value set
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder: { type: String, default: void 0 },
+  /**
+   * File types to accept
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+   */
+  accept: { type: String, default: "*" },
+  /**
+   * Whether to allow multiple values
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
+  multiple: { type: Boolean, default: false },
+  /**
+   * Max number of files
+   */
+  max: { type: [Number, String], default: void 0 },
+  /**
+   * Show drop area
+   */
+  dropArea: { type: Boolean, default: false },
+  /**
+   * Label for add button
+   */
+  labelAdd: {
+    type: String,
+    default: "Add file"
+  },
+  /**
+   * VvIcon name for add button
+   * @see VVIcon
+   */
+  iconAdd: {
+    type: [String, Object],
+    default: ACTION_ICONS.add
+  },
+  /**
+   * Label for replace button
+   */
+  labelReplace: {
+    type: String,
+    default: "Replace file"
+  },
+  /**
+   * VvIcon name for replace button
+   * @see VVIcon
+   */
+  iconReplace: {
+    type: [String, Object],
+    default: ACTION_ICONS.edit
+  },
+  /**
+   * Label for download button
+   */
+  labelDownload: {
+    type: String,
+    default: "Downlaod file"
+  },
+  /**
+   * VvIcon name for download button
+   * @see VVIcon
+   */
+  iconDownload: {
+    type: [String, Object],
+    default: ACTION_ICONS.download
+  },
+  /**
+   * Label for remove button
+   */
+  labelRemove: {
+    type: String,
+    default: "Remove file"
+  }
 };
 const _hoisted_1 = ["for"];
 const _hoisted_2 = { class: "vv-input-file__preview" };
 const _hoisted_3 = ["src", "alt"];
 const _hoisted_4 = { class: "vv-input-file__wrapper" };
 const _hoisted_5 = ["id", "readonly", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "name"];
-const _hoisted_6 = { class: "vv-input-file__list" };
-const _hoisted_7 = ["onClick"];
+const _hoisted_6 = ["value"];
+const _hoisted_7 = { class: "vv-input-file__list" };
 const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "vv-input-file__item-name cursor-pointer" };
-const _hoisted_10 = { class: "vv-input-file__item-info" };
-const _hoisted_11 = ["onClick"];
+const _hoisted_9 = ["title", "onClick"];
+const _hoisted_10 = { class: "vv-input-file__item-name" };
+const _hoisted_11 = { class: "vv-input-file__item-info" };
+const _hoisted_12 = ["title", "onClick"];
 const __default__ = {
   name: "VvInputFile"
 };
@@ -6995,19 +7079,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       VvInputFileProps,
       props
     );
-    const { modifiers, id, readonly } = toRefs(props);
+    const { modifiers, id, readonly, icon, iconPosition, iconDownload } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
+    const hasProgress = computed(() => {
+      if (!props.progress) {
+        return false;
+      }
+      const progress = typeof props.progress === "string" ? parseInt(props.progress) : props.progress;
+      return progress > 0 && progress < 100;
+    });
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const { hasIcon: hasIconDownload } = useComponentIcon(iconDownload);
     const bemCssClasses = useModifiers(
       "vv-input-file",
       modifiers,
       computed(() => ({
         dragging: isDragging.value,
-        loading: props.loading,
+        loading: props.loading && !hasProgress.value,
         valid: props.valid === true,
         invalid: props.invalid === true,
-        "icon-before": !!props.iconLeft,
-        "icon-after": !!props.iconRight
+        "icon-before": !!hasIconBefore.value,
+        "icon-after": !!hasIconAfter.value,
+        "drop-area": hasDropArea.value
       }))
     );
     const {
@@ -7028,8 +7122,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return typeof props.max === "string" ? parseInt(props.max) : props.max;
     });
     const hasDropArea = computed(() => {
-      var _a;
-      return (_a = modifiers == null ? void 0 : modifiers.value) == null ? void 0 : _a.includes("drop-area");
+      return props.dropArea && !readonly.value;
     });
     const isMultiple = computed(() => {
       if (!props.multiple) {
@@ -7086,8 +7179,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toReturn.push(file);
       }
       localModelValue.value = toReturn;
+      selectedFileIndex.value = toReturn.length - 1;
     };
-    const onClick = () => {
+    const onClickDropArea = () => {
       if (!inputEl.value) {
         return;
       }
@@ -7100,21 +7194,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         localModelValue.value = void 0;
         return;
       }
+      if (selectedFileIndex.value === index) {
+        selectedFileIndex.value = 0;
+      }
       const toReturn = [...localModelValue.value];
       toReturn.splice(index, 1);
       localModelValue.value = toReturn;
     };
-    const currentFileIndex = ref(0);
+    const selectedFileIndex = ref(0);
+    const PREVIEW_MIME_TYPES = ["image/jpeg", "image/png"];
     const previewSrc = computed(() => {
       if (files.value.length === 0) {
         return;
       }
-      if (files.value[currentFileIndex.value] instanceof File) {
-        return URL.createObjectURL(
-          files.value[currentFileIndex.value]
-        );
+      if (!files.value[selectedFileIndex.value]) {
+        return void 0;
+      }
+      if (files.value[selectedFileIndex.value] instanceof File) {
+        const currentFile2 = files.value[selectedFileIndex.value];
+        if (!PREVIEW_MIME_TYPES.includes(currentFile2.type)) {
+          return void 0;
+        }
+        return URL.createObjectURL(currentFile2);
+      }
+      const currentFile = files.value[selectedFileIndex.value];
+      if (currentFile.thumbnailUrl) {
+        return currentFile.thumbnailUrl;
+      }
+      if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+        return void 0;
+      }
+      return currentFile.url;
+    });
+    watch(previewSrc, (_newValue, oldValue) => {
+      if (oldValue) {
+        URL.revokeObjectURL(oldValue);
       }
-      return files.value[currentFileIndex.value].url;
     });
     onBeforeUnmount(() => {
       if (previewSrc.value) {
@@ -7137,7 +7252,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       link.setAttribute("download", file.name);
       document.body.appendChild(link);
       link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
     };
+    const onClickSelectFile = (index) => {
+      selectedFileIndex.value = index;
+    };
+    const dropdAreaActionLabel = computed(() => {
+      if (files.value.length === 0 || isMultiple.value) {
+        return props.labelAdd;
+      }
+      return props.labelReplace;
+    });
+    const dropAreaActionIcon = computed(() => {
+      if (files.value.length === 0 || isMultiple.value) {
+        return props.iconAdd;
+      }
+      return props.iconReplace;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -7159,42 +7291,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onDrop: withModifiers(onDrop, ["prevent", "stop"]),
               onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
               }, ["prevent", "stop"])),
-              onClick: withModifiers(onClick, ["stop"])
+              onClick: withModifiers(onClickDropArea, ["stop"])
             },
             [
               renderSlot(_ctx.$slots, "drop-area", {}, () => [
-                !unref(readonly) ? (openBlock(), createBlock(_sfc_main$n, {
-                  key: 0,
-                  modifiers: "action",
-                  "aria-label": "upload",
-                  label: !previewSrc.value ? _ctx.labelButton : void 0,
-                  class: normalizeClass([{
-                    "absolute top-8 right-8": previewSrc.value
-                  }, "z-1"]),
-                  icon: !previewSrc.value ? "image" : isMultiple.value ? "add" : "edit",
-                  onClick: withModifiers(onClick, ["stop"])
-                }, null, 8, ["label", "class", "icon"])) : createCommentVNode("v-if", true),
                 createElementVNode("picture", _hoisted_2, [
                   previewSrc.value ? (openBlock(), createElementBlock("img", {
                     key: 0,
                     src: previewSrc.value,
-                    alt: files.value[currentFileIndex.value].name
+                    alt: files.value[selectedFileIndex.value].name
                   }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
-                ])
+                ]),
+                !unref(readonly) ? (openBlock(), createBlock(_sfc_main$n, {
+                  key: 0,
+                  modifiers: "action",
+                  label: !previewSrc.value ? dropdAreaActionLabel.value : void 0,
+                  title: previewSrc.value ? dropdAreaActionLabel.value : void 0,
+                  class: normalizeClass({
+                    "vv-input-file__drop-area-action": previewSrc.value
+                  }),
+                  icon: dropAreaActionIcon.value,
+                  onClick: withModifiers(onClickDropArea, ["stop"])
+                }, null, 8, ["label", "title", "class", "icon"])) : createCommentVNode("v-if", true)
               ])
             ],
             32
             /* NEED_HYDRATION */
           )) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_4, [
-            _ctx.iconLeft ? (openBlock(), createBlock(_sfc_main$u, {
-              key: 0,
-              name: _ctx.iconLeft
-            }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+            unref(hasIconBefore) ? (openBlock(), createBlock(
+              _sfc_main$u,
+              normalizeProps(mergeProps({ key: 0 }, unref(hasIconBefore))),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true),
             createElementVNode("input", {
               id: unref(hasId),
               ref_key: "inputEl",
               ref: inputEl,
+              type: "file",
               readonly: unref(readonly),
               placeholder: _ctx.placeholder,
               "aria-describedby": unref(hasHintLabelOrSlot) ? hasHintId.value : void 0,
@@ -7202,57 +7338,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "aria-errormessage": unref(hasInvalidLabelOrSlot) ? hasHintId.value : void 0,
               multiple: isMultiple.value,
               accept: _ctx.accept,
-              type: "file",
               name: _ctx.name,
               onChange
             }, null, 40, _hoisted_5),
-            _ctx.iconRight ? (openBlock(), createBlock(_sfc_main$u, {
+            hasProgress.value ? (openBlock(), createElementBlock("progress", {
               key: 1,
-              name: _ctx.iconRight
-            }, null, 8, ["name"])) : createCommentVNode("v-if", true)
+              class: "vv-input-file__progress",
+              value: _ctx.progress,
+              max: "100"
+            }, toDisplayString(_ctx.progress) + "% ", 9, _hoisted_6)) : createCommentVNode("v-if", true),
+            unref(hasIconAfter) ? (openBlock(), createBlock(
+              _sfc_main$u,
+              normalizeProps(mergeProps({ key: 2 }, unref(hasIconAfter))),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("ul", _hoisted_6, [
+          createElementVNode("ul", _hoisted_7, [
             (openBlock(true), createElementBlock(
               Fragment,
               null,
               renderList(files.value, (file, index) => {
                 return openBlock(), createElementBlock("li", {
                   key: index,
-                  class: "vv-input-file__item",
-                  onClick: withModifiers(($event) => currentFileIndex.value = index, ["stop"])
+                  class: normalizeClass(["vv-input-file__item", {
+                    active: index === selectedFileIndex.value && hasDropArea.value && files.value.length > 1
+                  }]),
+                  onClick: withModifiers(($event) => onClickSelectFile(index), ["stop"])
                 }, [
-                  createElementVNode("button", {
+                  unref(hasIconDownload) ? (openBlock(), createElementBlock("button", {
+                    key: 0,
                     type: "button",
-                    class: "vv-input-file__item-icon cursor-pointer",
-                    title: "Download",
-                    "aria-label": "download-file",
+                    class: "vv-input-file__item-action",
+                    title: _ctx.labelDownload,
                     onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
                   }, [
-                    createVNode(_sfc_main$u, { name: "download" })
-                  ], 8, _hoisted_8),
+                    createVNode(
+                      _sfc_main$u,
+                      normalizeProps(guardReactiveProps(unref(hasIconDownload))),
+                      null,
+                      16
+                      /* FULL_PROPS */
+                    )
+                  ], 8, _hoisted_9)) : createCommentVNode("v-if", true),
                   createElementVNode(
                     "div",
-                    _hoisted_9,
+                    _hoisted_10,
                     toDisplayString(file.name),
                     1
                     /* TEXT */
                   ),
                   createElementVNode(
                     "small",
-                    _hoisted_10,
+                    _hoisted_11,
                     toDisplayString(sizeInKiB(file.size)) + " KB ",
                     1
                     /* TEXT */
                   ),
                   !unref(readonly) ? (openBlock(), createElementBlock("button", {
-                    key: 0,
+                    key: 1,
                     type: "button",
                     class: "vv-input-file__item-remove",
-                    title: "Remove",
-                    "aria-label": "remove-file",
+                    title: _ctx.labelRemove,
                     onClick: withModifiers(($event) => onClickRemoveFile(index), ["stop"])
-                  }, null, 8, _hoisted_11)) : createCommentVNode("v-if", true)
-                ], 8, _hoisted_7);
+                  }, null, 8, _hoisted_12)) : createCommentVNode("v-if", true)
+                ], 10, _hoisted_8);
               }),
               128
               /* KEYED_FRAGMENT */