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

package/dist/components/index.es.js

@@ -1,4 +1,4 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio, onBeforeUnmount } from "vue";
+import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, mergeDefaults, createVNode, TransitionGroup, toHandlers, useSlots, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio, onBeforeUnmount } from "vue";
 import { uid } from "uid";
 import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
@@ -904,6 +904,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           class: "vv-accordion__summary",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
         }, [
+          createCommentVNode(" @slot Slot for title "),
           renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(
               toDisplayString(unref(title)),
@@ -916,6 +917,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "aria-hidden": !unref(isOpen),
           class: "vv-accordion__content"
         }, [
+          createCommentVNode(" @slot Slot for content  "),
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(
               toDisplayString(unref(content)),
@@ -1050,6 +1052,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(bemCssClasses))
         },
         [
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default", {}, () => [
             (openBlock(true), createElementBlock(
               Fragment,
@@ -1066,9 +1069,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                   }),
                   {
                     header: withCtx((data) => [
+                      createCommentVNode(" @slot Slot for accordion header "),
                       renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
                     ]),
                     details: withCtx((data) => [
+                      createCommentVNode(" @slot Slot for accordion details "),
                       renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
                     ]),
                     _: 2
@@ -1209,6 +1214,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         onMouseleavePassive: onMouseleave
       }), {
         default: withCtx(() => [
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(
               toDisplayString(_ctx.label),
@@ -1223,6 +1229,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 */
@@ -1567,13 +1585,16 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               16
               /* FULL_PROPS */
             )) : createCommentVNode("v-if", true),
+            createCommentVNode(" @slot Header slot "),
             renderSlot(_ctx.$slots, "header", {}, () => [
+              createCommentVNode(" @slot Before title slot "),
               renderSlot(_ctx.$slots, "title::before"),
               _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
                 key: 0,
                 id: unref(hasTitleId),
                 class: "vv-alert__title"
               }, [
+                createCommentVNode(" @slot Title slot "),
                 renderSlot(_ctx.$slots, "title", {}, () => [
                   createTextVNode(
                     toDisplayString(_ctx.title),
@@ -1582,8 +1603,10 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   )
                 ])
               ], 8, _hoisted_2$e)) : createCommentVNode("v-if", true),
+              createCommentVNode(" @slot After title slot "),
               renderSlot(_ctx.$slots, "title::after")
             ]),
+            createCommentVNode(" @slot Close button slot "),
             renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
               _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
                 key: 0,
@@ -1599,6 +1622,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("v-if", true),
           _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+            createCommentVNode(" @slot Content slot "),
             renderSlot(_ctx.$slots, "default", {}, () => [
               createTextVNode(
                 toDisplayString(_ctx.content),
@@ -1608,6 +1632,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("v-if", true),
           _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
+            createCommentVNode(" @slot Footer slot "),
             renderSlot(_ctx.$slots, "footer", {}, () => [
               createTextVNode(
                 toDisplayString(_ctx.footer),
@@ -1777,6 +1802,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         "div",
         normalizeProps(guardReactiveProps(unref(hasProps))),
         [
+          createCommentVNode(" @slot The slot before alert list  "),
           renderSlot(_ctx.$slots, "before"),
           createVNode(TransitionGroup, mergeProps({
             tag: "div",
@@ -1785,6 +1811,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             class: "vv-alert-group__list"
           }, toHandlers(alertGroupTransitionHandlers)), {
             default: withCtx(() => [
+              createCommentVNode(" @slot The slot for alert list  "),
               renderSlot(_ctx.$slots, "default", {}, () => [
                 (openBlock(true), createElementBlock(
                   Fragment,
@@ -1808,6 +1835,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             _: 3
             /* FORWARDED */
           }, 16, ["name"]),
+          createCommentVNode(" @slot The slot after alert list  "),
           renderSlot(_ctx.$slots, "after")
         ],
         16
@@ -1983,6 +2011,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           role: "status"
         },
         [
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(
               toDisplayString(_ctx.value),
@@ -2050,6 +2079,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                       "default-tag": "span"
                     }), {
                       default: withCtx(() => [
+                        createCommentVNode(" @slot Slot for label "),
                         renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
                           createTextVNode(
                             toDisplayString(label),
@@ -2289,24 +2319,38 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         onClick
       }), {
         default: withCtx(() => [
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default", {}, () => [
-            _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$u, {
-                key: 0,
-                class: "vv-button__loading-icon",
-                name: _ctx.loadingIcon
-              }, null, 8, ["name"])) : createCommentVNode("v-if", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock(
-                "span",
-                _hoisted_1$g,
-                toDisplayString(_ctx.loadingLabel),
-                1
-                /* TEXT */
-              )) : createCommentVNode("v-if", true)
-            ]) : (openBlock(), createElementBlock(
+            createCommentVNode(" #region loading "),
+            _ctx.loading ? (openBlock(), createElementBlock(
+              Fragment,
+              { key: 0 },
+              [
+                createCommentVNode(" @slot Slot for loading content "),
+                renderSlot(_ctx.$slots, "loading", {}, () => [
+                  _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$u, {
+                    key: 0,
+                    class: "vv-button__loading-icon",
+                    name: _ctx.loadingIcon
+                  }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+                  _ctx.loadingLabel ? (openBlock(), createElementBlock(
+                    "span",
+                    _hoisted_1$g,
+                    toDisplayString(_ctx.loadingLabel),
+                    1
+                    /* TEXT */
+                  )) : createCommentVNode("v-if", true)
+                ])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : (openBlock(), createElementBlock(
               Fragment,
               { key: 1 },
               [
+                createCommentVNode(" #endregion "),
+                createCommentVNode(" #region button "),
+                createCommentVNode(" @slot Before label and icon "),
                 renderSlot(_ctx.$slots, "before"),
                 unref(hasIcon) ? (openBlock(), createBlock(
                   _sfc_main$u,
@@ -2316,6 +2360,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   /* FULL_PROPS */
                 )) : createCommentVNode("v-if", true),
                 unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$b, [
+                  createCommentVNode(" @slot Use this slot for button label "),
                   renderSlot(_ctx.$slots, "label", {}, () => [
                     createTextVNode(
                       toDisplayString(unref(label)),
@@ -2324,11 +2369,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     )
                   ])
                 ])) : createCommentVNode("v-if", true),
+                createCommentVNode(" @slot After label and icon "),
                 renderSlot(_ctx.$slots, "after")
               ],
               64
               /* STABLE_FRAGMENT */
-            ))
+            )),
+            createCommentVNode(" #endregion ")
           ])
         ]),
         _: 3
@@ -2413,6 +2460,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           role: "group"
         },
         [
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default")
         ],
         2
@@ -2455,6 +2503,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         },
         [
           _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$f, [
+            createCommentVNode(" @slot Title slot "),
             renderSlot(_ctx.$slots, "header", {}, () => [
               createTextVNode(
                 toDisplayString(_ctx.title),
@@ -2463,11 +2512,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               )
             ])
           ])) : createCommentVNode("v-if", true),
+          createCommentVNode(" @slot Default slot "),
           renderSlot(_ctx.$slots, "default"),
           _ctx.$slots.content ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+            createCommentVNode(" @slot Content slot "),
             renderSlot(_ctx.$slots, "content")
           ])) : createCommentVNode("v-if", true),
           _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$6, [
+            createCommentVNode(" @slot Footer slot "),
             renderSlot(_ctx.$slots, "footer")
           ])) : createCommentVNode("v-if", true)
         ],
@@ -2851,6 +2903,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_2$9), [
           [vModelCheckbox, unref(localModelValue)]
         ]),
+        createCommentVNode(" @slot Use this slot for check label "),
         renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
           createTextVNode(
             toDisplayString(_ctx.label),
@@ -2993,6 +3046,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             textContent: toDisplayString(_ctx.label)
           }, null, 8, _hoisted_1$d)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$8, [
+            createCommentVNode(" #region options set up "),
             _ctx.options.length > 0 ? (openBlock(true), createElementBlock(
               Fragment,
               { key: 0 },
@@ -3007,7 +3061,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               }),
               128
               /* KEYED_FRAGMENT */
-            )) : renderSlot(_ctx.$slots, "default", { key: 1 })
+            )) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                createCommentVNode(" #endregion "),
+                renderSlot(_ctx.$slots, "default")
+              ],
+              2112
+              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+            ))
           ]),
           createVNode(
             unref(HintSlot),
@@ -4044,8 +4107,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             key: 0,
             for: unref(hasId)
           }, toDisplayString(_ctx.label), 9, _hoisted_1$9)) : createCommentVNode("v-if", true),
+          createCommentVNode(" #region native select "),
           createElementVNode("div", _hoisted_2$7, [
             _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+              createCommentVNode(" @slot Slot before input "),
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             createElementVNode("div", _hoisted_4$4, [
@@ -4119,9 +4184,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               )) : createCommentVNode("v-if", true)
             ]),
             _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+              createCommentVNode(" @slot Slot after input "),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true)
           ]),
+          createCommentVNode(" #endregion native select "),
           createVNode(unref(HintSlot), {
             id: unref(hasHintId),
             class: "vv-select__hint"
@@ -4495,6 +4562,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             }), createSlots({
               default: withCtx(({ aria }) => [
                 _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+                  createCommentVNode(" @slot Slot before input "),
                   renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
                 ])) : createCommentVNode("v-if", true),
                 createElementVNode("div", _hoisted_5$3, [
@@ -4518,6 +4586,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     tabindex: unref(hasTabindex),
                     onClickPassive: onClickInput
                   }), [
+                    createCommentVNode(" @slot Slot for value customization "),
                     renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
                       unref(hasValue) ? (openBlock(), createElementBlock(
                         Fragment,
@@ -4587,6 +4656,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   )) : createCommentVNode("v-if", true)
                 ]),
                 _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+                  createCommentVNode(" @slot Slot after input "),
                   renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
                 ])) : createCommentVNode("v-if", true)
               ]),
@@ -4627,6 +4697,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                     onClickPassive: ($event) => onInput(item)
                                   }), {
                                     default: withCtx(() => [
+                                      createCommentVNode(" @slot Slot for option customization "),
                                       renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
                                         option,
                                         selectedOptions: unref(selectedOptions),
@@ -4662,6 +4733,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                             onClickPassive: ($event) => onInput(option)
                           }), {
                             default: withCtx(() => [
+                              createCommentVNode(" @slot Slot for option customization "),
                               renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
                                 option,
                                 selectedOptions: unref(selectedOptions),
@@ -4690,6 +4762,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     modifiers: "inert"
                   }, {
                     default: withCtx(() => [
+                      createCommentVNode(" @slot Slot for no options available "),
                       renderSlot(_ctx.$slots, "no-options", {}, () => [
                         createTextVNode(
                           toDisplayString(unref(propsDefaults).noOptionsLabel),
@@ -4705,6 +4778,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     modifiers: "inert"
                   }, {
                     default: withCtx(() => [
+                      createCommentVNode(" @slot Slot for no results available "),
                       renderSlot(_ctx.$slots, "no-results", {}, () => [
                         createTextVNode(
                           toDisplayString(unref(propsDefaults).noResultsLabel),
@@ -4719,9 +4793,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 ];
               }),
               after: withCtx(() => [
+                createCommentVNode(" @slot Slot after dropdown items "),
                 renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                   var _a;
                   return [
+                    createCommentVNode(" Close button if dropdown custom position is enabled and floating-ui disabled "),
                     ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$n, {
                       key: 0,
                       label: unref(propsDefaults).closeLabel,
@@ -4737,6 +4813,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
                 name: "before",
                 fn: withCtx(() => [
+                  createCommentVNode(" @slot Slot before dropdown items "),
                   renderSlot(_ctx.$slots, "dropdown::before"),
                   unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
                     key: 0,
@@ -4969,6 +5046,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 },
                 [
                   _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$7, [
+                    createCommentVNode(" @slot Header slot "),
                     renderSlot(_ctx.$slots, "header", {}, () => [
                       createTextVNode(
                         toDisplayString(_ctx.title) + " ",
@@ -4992,9 +5070,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     ])
                   ])) : createCommentVNode("v-if", true),
                   createElementVNode("div", _hoisted_2$5, [
+                    createCommentVNode(" @slot Content slot "),
                     renderSlot(_ctx.$slots, "default")
                   ]),
                   _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$3, [
+                    createCommentVNode(" @slot Footer slot "),
                     renderSlot(_ctx.$slots, "footer")
                   ])) : createCommentVNode("v-if", true)
                 ],
@@ -5074,14 +5154,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 +5222,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 +5337,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 +5351,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 +5362,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 +5443,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 +5457,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 +5825,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 +5865,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,
@@ -5911,6 +5987,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           }, toDisplayString(unref(label)), 9, _hoisted_1$6)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$4, [
             _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+              createCommentVNode(" @slot Slot before input icon "),
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             createElementVNode(
@@ -5940,6 +6017,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
                 }), null, 16, _hoisted_4$2),
                 (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+                  createCommentVNode(" @slot Slot to replace unit"),
                   renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                     createTextVNode(
                       toDisplayString(_ctx.unit),
@@ -5952,6 +6030,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               512
               /* NEED_PATCH */
             ),
+            createCommentVNode(" @slot Slot to replace right icon "),
             unref(iconAfter) ? (openBlock(), createBlock(
               _sfc_main$u,
               mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
@@ -5969,10 +6048,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               key: 4,
               onClear
             })) : createCommentVNode("v-if", true),
+            createCommentVNode(" @slot Slot after input "),
             _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+              createCommentVNode(" @slot Slot before input icon "),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7$2, [
+              createCommentVNode(" @slot Slot to replace count "),
               renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                 createTextVNode(
                   toDisplayString(unref(countFormatted)),
@@ -6438,6 +6520,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             textContent: toDisplayString(_ctx.label)
           }, null, 8, _hoisted_1$2)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$2, [
+            createCommentVNode(" #region options "),
             _ctx.options.length > 0 ? (openBlock(true), createElementBlock(
               Fragment,
               { key: 0 },
@@ -6452,7 +6535,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }),
               128
               /* KEYED_FRAGMENT */
-            )) : renderSlot(_ctx.$slots, "default", { key: 1 })
+            )) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                createCommentVNode(" #endregion "),
+                createCommentVNode(" #region default "),
+                renderSlot(_ctx.$slots, "default")
+              ],
+              2112
+              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+            )),
+            createCommentVNode(" #endregion ")
           ]),
           createVNode(
             unref(HintSlot),
@@ -6568,6 +6662,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(bemCssClasses))
         },
         [
+          createCommentVNode(" #region nav "),
           createVNode(
             _sfc_main$8,
             mergeProps({
@@ -6584,6 +6679,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             16
             /* FULL_PROPS */
           ),
+          createCommentVNode(" #endregion "),
+          createCommentVNode(" #region panels "),
           (openBlock(true), createElementBlock(
             Fragment,
             null,
@@ -6611,7 +6708,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             }),
             128
             /* KEYED_FRAGMENT */
-          ))
+          )),
+          createCommentVNode(" #endregion ")
         ],
         2
         /* CLASS */
@@ -6810,7 +6908,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: "vv-textarea__label"
           }, toDisplayString(unref(label)), 9, _hoisted_1$1)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$1, [
+            createCommentVNode(" @slot Slot to replace icon before textarea "),
             _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              createCommentVNode(" @slot Slot before input "),
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             createElementVNode("div", _hoisted_4$1, [
@@ -6840,9 +6940,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               )) : createCommentVNode("v-if", true)
             ]),
             _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+              createCommentVNode(" @slot Slot after input "),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7$1, [
+              createCommentVNode(" @slot Slot to replace count "),
               renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                 createTextVNode(
                   toDisplayString(unref(countFormatted)),
@@ -6946,6 +7048,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const VvInputFileProps = {
+  ...IdNameProps,
   ...ModifiersProps,
   ...ValidProps,
   ...InvalidProps,
@@ -6953,32 +7056,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 +7173,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 +7216,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 +7273,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;
       }
@@ -7104,17 +7292,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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] 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 +7340,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 +7379,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 +7426,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 */