@volverjs/ui-vue 0.0.10-beta.15 → 0.0.10-beta.17

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, 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, 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 { 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";
@@ -104,6 +104,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -118,27 +119,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -151,49 +158,73 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const SelectedProps = {
   /**
    * Whether the item is selected
    */
-  selected: Boolean
+  selected: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -233,14 +264,20 @@ const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
-  debounce: [Number, String]
+  debounce: {
+    type: [Number, String],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -261,7 +298,10 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
 };
 const UnselectableProps = {
   /**
@@ -297,7 +337,8 @@ const DropdownProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -365,7 +406,8 @@ const DropdownProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 };
 const IdNameProps = {
@@ -382,7 +424,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -414,28 +459,34 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: [String, Number],
+  minlength: { type: [String, Number], default: void 0 },
   /**
    * Input / Textarea maxlength
    * Maximum length (number of characters) of value
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
    */
-  maxlength: [String, Number],
+  maxlength: { type: [String, Number], default: void 0 },
   /**
    * Input / Textarea placeholder
    * Text that appears in the form control when it has no value set
    * Available for input types: text, search, url, tel, email, password, number
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
    */
-  placeholder: String,
+  placeholder: {
+    type: String,
+    default: void 0
+  },
   /**
    * Input / Textarea required
    * A value is required or must be check for the form to be submittable
    * Available for all input types except color
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
    */
-  required: Boolean
+  required: {
+    type: Boolean,
+    default: false
+  }
 };
 const CheckboxRadioProps = {
   ...IdNameProps,
@@ -452,11 +503,17 @@ const CheckboxRadioProps = {
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
    */
-  value: [String, Number, Boolean],
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
   /**
    * Input value
    */
-  modelValue: [Object, Number, Boolean, String]
+  modelValue: {
+    type: [Object, Number, Boolean, String],
+    default: void 0
+  }
 };
 const CheckboxRadioGroupProps = {
   ...ValidProps,
@@ -471,7 +528,10 @@ const CheckboxRadioGroupProps = {
   /**
    * Input value
    */
-  modelValue: [String, Array, Boolean, Number, Symbol],
+  modelValue: {
+    type: [String, Array, Boolean, Number, Symbol],
+    default: void 0
+  },
   /**
    * Input name
    */
@@ -479,7 +539,10 @@ const CheckboxRadioGroupProps = {
   /**
    * If true, the group will be displayed in a vertical column
    */
-  vertical: Boolean
+  vertical: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActionProps = {
   ...DisabledProps,
@@ -1157,106 +1220,33 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  provider: {
-    type: String
-  },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
-  },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
 const __default__$o = {
   name: "VvIcon"
 };
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...__default__$o,
-  props: VvIconProps,
+  props: mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
   setup(__props) {
     const props = __props;
     const hasRotate = computed(() => {
@@ -1351,6 +1341,41 @@ function useInjectedAlertGroup() {
   return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
 const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
 const VvAlertProps = {
   ...IdProps,
   ...ModifiersProps,
@@ -1427,9 +1452,7 @@ const useVvAlert = (props, emit) => {
   const { bus } = useInjectedAlertGroup();
   const hasId = useUniqueId(computed(() => props.id));
   const hasTitleId = computed(() => `${hasId.value}-title`);
-  const hasIcon = computed(
-    () => typeof props.icon === "string" ? { name: props.icon } : props.icon
-  );
+  const { hasIcon } = useComponentIcon(computed(() => props.icon));
   const hasClass = useModifiers(
     "vv-alert",
     computed(() => props.modifiers),
@@ -2060,10 +2083,7 @@ const VvButtonProps = {
   ...ModifiersProps,
   ...UnselectableProps,
   ...LoadingProps,
-  /**
-   * Button icon
-   */
-  icon: [String, Object],
+  ...IconProps,
   /**
    * Button icon position
    */
@@ -2219,9 +2239,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         )
       }))
     );
-    const hasIconProps = computed(
-      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
-    );
+    const { hasIcon } = useComponentIcon(icon);
     const toggleValue = computed(() => {
       return props.value !== void 0 ? props.value : name.value;
     });
@@ -2284,12 +2302,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               { key: 1 },
               [
                 renderSlot(_ctx.$slots, "before"),
-                unref(icon) ? (openBlock(), createBlock(
+                unref(hasIcon) ? (openBlock(), createBlock(
                   _sfc_main$u,
-                  mergeProps({
-                    key: 0,
-                    class: "vv-button__icon"
-                  }, unref(hasIconProps)),
+                  mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
                   /* FULL_PROPS */
@@ -3874,41 +3889,6 @@ function useComponentFocus(inputTemplateRef, emit) {
     focused
   };
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIconBefore = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
-  );
-  const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
-  );
-  const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
-  );
-  const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
-  );
-  const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
-  );
-  const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
-  );
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
 const _hoisted_1$a = ["for"];
 const _hoisted_2$7 = { class: "vv-select__wrapper" };
 const _hoisted_3$5 = {
@@ -3969,10 +3949,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         focused.value = true;
       }
     });
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isDirty = computed(() => !isEmpty(props.modelValue));
     const isDisabled = computed(() => props.disabled || props.readonly);
     const hasTabindex = computed(() => {
@@ -3996,8 +3973,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: disabled.value,
         readonly: readonly.value,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         dirty: isDirty.value,
         focus: focused.value,
         floating: floating.value,
@@ -4063,10 +4040,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_4$5, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({
-                  key: 0,
-                  class: "vv-select__icon"
-                }, unref(hasIcon)),
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -4127,10 +4101,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ]),
               unref(hasIconAfter) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({
-                  key: 1,
-                  class: "vv-select__icon vv-select__icon-after"
-                }, unref(hasIcon)),
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -4315,10 +4286,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const localLoading = ref(false);
     const isLoading = computed(() => localLoading.value || loading.value);
     const dropdownEl = ref();
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isDirty = computed(() => !isEmpty(props.modelValue));
     const hasTabindex = computed(() => {
       return disabled.value || readonly.value ? -1 : props.tabindex;
@@ -4330,8 +4298,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         disabled: disabled.value,
         loading: isLoading.value,
         readonly: readonly.value,
-        "icon-before": Boolean(hasIconBefore.value),
-        "icon-after": Boolean(hasIconAfter.value),
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         valid: valid.value,
         invalid: invalid.value,
         dirty: isDirty.value,
@@ -4520,10 +4488,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_5$3, [
                   unref(hasIconBefore) ? (openBlock(), createBlock(
                     _sfc_main$u,
-                    mergeProps({
-                      key: 0,
-                      class: "vv-select__icon"
-                    }, unref(hasIcon)),
+                    mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                     null,
                     16
                     /* FULL_PROPS */
@@ -4603,10 +4568,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   ], 16, _hoisted_6$3),
                   unref(hasIconAfter) ? (openBlock(), createBlock(
                     _sfc_main$u,
-                    mergeProps({
-                      key: 1,
-                      class: "vv-select__icon vv-select__icon-after"
-                    }, unref(hasIcon)),
+                    mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                     null,
                     16
                     /* FULL_PROPS */
@@ -5762,11 +5724,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const onClear = () => {
       localModelValue.value = "";
     };
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const defaultAfterIcon = computed(() => {
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const iconAfter = computed(() => {
+      if (hasIconAfter.value !== void 0) {
+        return hasIconAfter.value;
+      }
       switch (props.type) {
         case INPUT_TYPES.COLOR:
           return { name: TYPES_ICON.COLOR };
@@ -5777,9 +5739,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           return { name: TYPES_ICON.DATE };
         case INPUT_TYPES.TIME:
           return { name: TYPES_ICON.TIME };
-        default:
-          return "";
       }
+      return void 0;
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: count.value,
@@ -5810,8 +5771,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value || !isEmpty(defaultAfterIcon),
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": iconAfter.value !== void 0,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
         focus: isFocused.value,
@@ -5942,10 +5903,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             }, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({
-                  key: 0,
-                  class: "vv-input-text__icon"
-                }, unref(hasIcon)),
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -5970,12 +5928,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 ])
               ])) : createCommentVNode("v-if", true)
             ], 8, _hoisted_4$2),
-            unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(
+            unref(iconAfter) ? (openBlock(), createBlock(
               _sfc_main$u,
-              mergeProps({
-                key: 1,
-                class: "vv-input-text__icon vv-input-text__icon-after"
-              }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)),
+              mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
               null,
               16
               /* FULL_PROPS */
@@ -6732,10 +6687,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
     const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const { focused } = useComponentFocus(textarea, emit);
     const isVisible = useElementVisibility(textarea);
     watch(isVisible, (newValue) => {
@@ -6777,8 +6729,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
         focus: focused.value,
@@ -6836,10 +6788,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_4$1, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({
-                  key: 0,
-                  class: "vv-textarea__icon"
-                }, unref(hasIcon)),
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -6856,10 +6805,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               unref(hasIconAfter) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({
-                  key: 1,
-                  class: "vv-textarea__icon vv-textarea__icon-after"
-                }, unref(hasIcon)),
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -7000,9 +6946,11 @@ const _hoisted_4 = ["src", "alt"];
 const _hoisted_5 = { class: "vv-input-file__wrapper" };
 const _hoisted_6 = ["id", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "name"];
 const _hoisted_7 = { class: "vv-input-file__list" };
-const _hoisted_8 = { class: "vv-input-file__item-name" };
-const _hoisted_9 = { class: "vv-input-file__item-info" };
-const _hoisted_10 = ["onClick"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "vv-input-file__item-name cursor-pointer" };
+const _hoisted_11 = { class: "vv-input-file__item-info" };
+const _hoisted_12 = ["onClick"];
 const __default__ = {
   name: "VvInputFile"
 };
@@ -7125,14 +7073,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       toReturn.splice(index, 1);
       localModelValue.value = toReturn;
     };
+    const currentFileIndex = ref(0);
     const previewSrc = computed(() => {
       if (files.value.length === 0) {
         return;
       }
-      if (files.value[0] instanceof File) {
-        return URL.createObjectURL(files.value[0]);
+      if (files.value[currentFileIndex.value] instanceof File) {
+        return URL.createObjectURL(
+          files.value[currentFileIndex.value]
+        );
       }
-      return files.value[0].url;
+      return files.value[currentFileIndex.value].url;
     });
     onBeforeUnmount(() => {
       if (previewSrc.value) {
@@ -7145,6 +7096,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return Math.floor(size2 / 1024);
     };
+    const onClickDownloadFile = (file) => {
+      const link = document.createElement("a");
+      if (file instanceof File) {
+        link.href = URL.createObjectURL(file);
+      } else if (file.url) {
+        link.href = file.url;
+      }
+      link.setAttribute("download", file.name);
+      document.body.appendChild(link);
+      link.click();
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -7174,14 +7136,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([{
                   "absolute top-8 right-8": previewSrc.value
                 }, "z-1"]),
-                icon: !previewSrc.value ? "image" : "edit",
+                icon: !previewSrc.value ? "image" : isMultiple.value ? "add" : "edit",
                 onClick: withModifiers(onClick, ["stop"])
               }, null, 8, ["label", "class", "icon", "onClick"]),
               createElementVNode("picture", _hoisted_3, [
                 previewSrc.value ? (openBlock(), createElementBlock("img", {
                   key: 0,
                   src: previewSrc.value,
-                  alt: files.value[0].name
+                  alt: files.value[currentFileIndex.value].name
                 }, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
               ])
             ])
@@ -7217,22 +7179,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderList(files.value, (file, index) => {
                 return openBlock(), createElementBlock("li", {
                   key: index,
-                  class: "vv-input-file__item"
+                  class: "vv-input-file__item",
+                  onClick: withModifiers(($event) => currentFileIndex.value = index, ["stop"])
                 }, [
-                  createVNode(_sfc_main$u, {
-                    class: "vv-input-file__item-icon",
-                    name: "akar-icons:file"
-                  }),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "vv-input-file__item-icon cursor-pointer",
+                    title: "Download",
+                    "aria-label": "download-file",
+                    onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
+                  }, [
+                    createVNode(_sfc_main$u, { name: "download" })
+                  ], 8, _hoisted_9),
                   createElementVNode(
                     "div",
-                    _hoisted_8,
+                    _hoisted_10,
                     toDisplayString(file.name),
                     1
                     /* TEXT */
                   ),
                   createElementVNode(
                     "small",
-                    _hoisted_9,
+                    _hoisted_11,
                     toDisplayString(sizeInKiB(file.size)) + " KB ",
                     1
                     /* TEXT */
@@ -7243,8 +7211,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: "Remove",
                     "aria-label": "remove-file",
                     onClick: withModifiers(($event) => onClickRemoveFile(index), ["stop"])
-                  }, null, 8, _hoisted_10)
-                ]);
+                  }, null, 8, _hoisted_12)
+                ], 8, _hoisted_8);
               }),
               128
               /* KEYED_FRAGMENT */