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

package/dist/components/VvInputFile/VvInputFile.es.js

@@ -0,0 +1,1734 @@
+import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment, isRef, h, onBeforeUnmount, normalizeClass, withModifiers, createElementVNode, normalizeProps, renderList, createVNode, guardReactiveProps, createSlots } from "vue";
+import { useVModel } from "@vueuse/core";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { uid } from "uid";
+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 */
+};
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const __default__$3 = {
+  name: "VvIcon"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: /* @__PURE__ */ 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(() => {
+      if (typeof props.rotate === "string") {
+        return parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    default: void 0,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
+  valid: { type: Boolean, default: false },
+  /**
+   * Valid label
+   */
+  validLabel: { type: [String, Array], default: void 0 }
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
+  invalid: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Invalid label
+   */
+  invalidLabel: { type: [String, Array], default: void 0 }
+};
+const LoadingProps = {
+  /**
+   * Loading status
+   */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: {
+    type: Boolean,
+    default: false
+  }
+};
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: {
+    type: Boolean,
+    default: false
+  }
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: {
+    type: Boolean,
+    default: false
+  }
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const ReadonlyProps = {
+  /**
+   * The value is not editable
+   */
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
+};
+const HintProps = {
+  hintLabel: { type: String, default: "" }
+};
+const IconProps = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+};
+const UnselectableProps = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: true }
+};
+const IdProps = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean,
+    default: false
+  }
+});
+const IdNameProps = {
+  ...IdProps,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
+  name: { type: String, required: true }
+};
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...CurrentProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+};
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$2 = {
+  name: "VvAction"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return props.defaultTag;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        case ActionTag.button:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+        default:
+          return toReturn;
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled,
+          current: _ctx.current
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          createCommentVNode(" @slot Default slot "),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+function equals(obj1, obj2, field) {
+  if (field) {
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  }
+  return deepEquals(obj1, obj2);
+}
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() == b.getTime();
+    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
+        get() {
+          return groupPropValue == null ? void 0 : groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvButtonEvents = ["update:modelValue"];
+const VvButtonProps = {
+  ...ActionProps,
+  ...IdProps,
+  ...ModifiersProps,
+  ...UnselectableProps,
+  ...LoadingProps,
+  ...IconProps,
+  /**
+   * Button icon position
+   */
+  iconPosition: {
+    type: String,
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
+  },
+  /**
+   * Loading icon
+   */
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Enable button toggle
+   */
+  toggle: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Button toggle value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Value associated with the unchecked state
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Button toggle model value
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  }
+};
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
+  const { id, iconPosition, icon, label, pressed } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const toggle = getGroupOrLocalRef("toggle", props);
+  const unselectable = getGroupOrLocalRef(
+    "unselectable",
+    props
+  );
+  const multiple = computed(() => (group == null ? void 0 : group.value.multiple.value) ?? false);
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
+  });
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
+  return {
+    // group props
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
+    // local props
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
+  };
+}
+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 _hoisted_1$1 = {
+  key: 1,
+  class: "vv-button__label"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "vv-button__label"
+};
+const __default__$1 = {
+  name: "VvButton"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvButtonProps,
+  emits: VvButtonEvents,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const emit = __emit;
+    const {
+      id,
+      modifiers,
+      iconPosition,
+      icon,
+      label,
+      modelValue,
+      disabled,
+      toggle,
+      unselectable
+    } = useGroupProps(props, emit);
+    const hasId = useUniqueId(id);
+    const name = computed(() => (attrs == null ? void 0 : attrs.name) || hasId.value);
+    const element = ref(null);
+    const $el = computed(() => {
+      var _a;
+      return (_a = element.value) == null ? void 0 : _a.$el;
+    });
+    __expose({ $el });
+    const pressed = computed(() => {
+      if (!toggle.value) {
+        return props.pressed;
+      }
+      if (Array.isArray(modelValue.value)) {
+        return contains(name.value, modelValue.value);
+      }
+      return equals(name.value, modelValue.value);
+    });
+    const bemCssClasses = useModifiers(
+      "vv-button",
+      modifiers,
+      computed(() => ({
+        reverse: [Side.right, Side.bottom].includes(
+          iconPosition.value
+        ),
+        column: [Side.top, Side.bottom].includes(
+          iconPosition.value
+        ),
+        "icon-only": Boolean(
+          (icon == null ? void 0 : icon.value) && !(label == null ? void 0 : label.value) && !slots.default
+        )
+      }))
+    );
+    const { hasIcon } = useComponentIcon(icon);
+    const toggleValue = computed(() => {
+      return props.value !== void 0 ? props.value : name.value;
+    });
+    const onClick = () => {
+      if (toggle.value) {
+        if (Array.isArray(modelValue.value)) {
+          if (contains(toggleValue.value, modelValue.value)) {
+            if (unselectable.value) {
+              modelValue.value = modelValue.value.filter(
+                (n) => n !== toggleValue.value
+              );
+            }
+            return;
+          }
+          modelValue.value.push(toggleValue.value);
+          return;
+        }
+        if (toggleValue.value === modelValue.value && unselectable.value) {
+          modelValue.value = props.uncheckedValue;
+          return;
+        }
+        modelValue.value = toggleValue.value;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+        disabled: unref(disabled),
+        pressed: unref(pressed),
+        active: _ctx.active,
+        type: _ctx.type,
+        to: _ctx.to,
+        href: _ctx.href,
+        target: _ctx.target,
+        rel: _ctx.rel,
+        ariaLabel: _ctx.ariaLabel
+      }, {
+        id: unref(hasId),
+        ref_key: "element",
+        ref: element,
+        class: unref(bemCssClasses),
+        onClick
+      }), {
+        default: withCtx(() => [
+          createCommentVNode(" @slot Default slot "),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            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$3, {
+                    key: 0,
+                    class: "vv-button__loading-icon",
+                    name: _ctx.loadingIcon
+                  }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+                  _ctx.loadingLabel ? (openBlock(), createElementBlock(
+                    "span",
+                    _hoisted_1$1,
+                    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$3,
+                  mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+                  createCommentVNode(" @slot Use this slot for button label "),
+                  renderSlot(_ctx.$slots, "label", {}, () => [
+                    createTextVNode(
+                      toDisplayString(unref(label)),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true),
+                createCommentVNode(" @slot After label and icon "),
+                renderSlot(_ctx.$slots, "after")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )),
+            createCommentVNode(" #endregion ")
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["id", "class"]);
+    };
+  }
+});
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
+  }
+  return items;
+}
+function HintSlotFactory(propsOrRef, slots) {
+  const props = computed(() => {
+    if (isRef(propsOrRef)) {
+      return propsOrRef.value;
+    }
+    return propsOrRef;
+  });
+  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
+  const validLabel = computed(() => joinLines(props.value.validLabel));
+  const loadingLabel = computed(() => props.value.loadingLabel);
+  const hintLabel = computed(() => props.value.hintLabel);
+  const hasLoadingLabelOrSlot = computed(
+    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
+  );
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
+  );
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
+  );
+  const hasHintLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
+  );
+  const isVisible = computed(
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
+  );
+  const hintSlotScope = computed(() => ({
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
+        }
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+          );
+        }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+          );
+        }
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+          );
+        }
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+        );
+      }
+      return null;
+    }
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
+  };
+}
+const VvInputFileProps = {
+  ...IdNameProps,
+  ...ModifiersProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LabelProps,
+  ...LoadingProps,
+  ...ReadonlyProps,
+  ...IconProps,
+  /**
+   * Input value
+   */
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  /**
+   * 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"
+  }
+};
+function useDefaults(componentName, propsDefinition, props) {
+  const volver = useVolver();
+  const volverComponentDefaults = computed(() => {
+    var _a;
+    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+      return void 0;
+    }
+    return volver.defaults.value[componentName];
+  });
+  return computed(() => {
+    if (volverComponentDefaults.value === void 0) {
+      return props;
+    }
+    const componentDefaults = volverComponentDefaults.value;
+    const simplifiedPropsDefinition = propsDefinition;
+    const simplifiedProps = props;
+    return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+      const propValue = simplifiedProps[key];
+      acc[key] = propValue;
+      if (key in componentDefaults) {
+        if (Array.isArray(simplifiedPropsDefinition[key])) {
+          const typeArray = simplifiedPropsDefinition[key];
+          if (typeArray.length) {
+            const typeFunction = typeArray[0];
+            if (typeFunction === propValue) {
+              acc[key] = componentDefaults[key];
+            }
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "function") {
+          const typeFunction = simplifiedPropsDefinition[key];
+          if (typeFunction() === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "object") {
+          let defaultValue = simplifiedPropsDefinition[key].default;
+          if (typeof defaultValue === "function") {
+            defaultValue = defaultValue();
+          }
+          if (typeof defaultValue === "object") {
+            if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
+              acc[key] = componentDefaults[key];
+            }
+          } else if (defaultValue === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+      }
+      return acc;
+    }, {});
+  });
+}
+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 = ["value"];
+const _hoisted_7 = { class: "vv-input-file__list" };
+const _hoisted_8 = ["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"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvInputFileProps,
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvInputFile",
+      VvInputFileProps,
+      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 && !hasProgress.value,
+        valid: props.valid === true,
+        invalid: props.invalid === true,
+        "icon-before": !!hasIconBefore.value,
+        "icon-after": !!hasIconAfter.value,
+        "drop-area": hasDropArea.value
+      }))
+    );
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(propsDefaults, slots);
+    const localModelValue = useVModel(props, "modelValue", emit);
+    const files = computed(() => {
+      var _a;
+      if (!localModelValue.value || !Array.isArray(localModelValue.value) && !((_a = localModelValue.value) == null ? void 0 : _a.name)) {
+        return [];
+      }
+      return Array.isArray(localModelValue.value) ? localModelValue.value : [localModelValue.value];
+    });
+    const hasMax = computed(() => {
+      return typeof props.max === "string" ? parseInt(props.max) : props.max;
+    });
+    const hasDropArea = computed(() => {
+      return props.dropArea && !readonly.value;
+    });
+    const isMultiple = computed(() => {
+      if (!props.multiple) {
+        return false;
+      }
+      if (!hasMax.value) {
+        return true;
+      }
+      return hasMax.value - files.value.length > 1;
+    });
+    const isDragging = ref(false);
+    const inputEl = ref();
+    const onDragenter = () => {
+      isDragging.value = true;
+    };
+    const onDragleave = () => {
+      isDragging.value = false;
+    };
+    const onDrop = (event) => {
+      var _a, _b;
+      if (!((_a = event.dataTransfer) == null ? void 0 : _a.files)) {
+        return;
+      }
+      isDragging.value = false;
+      addFiles((_b = event.dataTransfer) == null ? void 0 : _b.files);
+    };
+    const onChange = () => {
+      var _a;
+      if (!((_a = inputEl.value) == null ? void 0 : _a.files)) {
+        return;
+      }
+      addFiles(inputEl.value.files);
+      inputEl.value.value = "";
+    };
+    const addFiles = (uploadedFiles) => {
+      if (!props.multiple) {
+        if (Array.isArray(localModelValue.value)) {
+          localModelValue.value = [...uploadedFiles];
+          return;
+        }
+        localModelValue.value = uploadedFiles[0];
+        return;
+      }
+      let toReturn = [];
+      if (!Array.isArray(localModelValue.value) && localModelValue.value) {
+        toReturn = [localModelValue.value];
+      } else {
+        toReturn = localModelValue.value && Array.isArray(localModelValue.value) ? [...localModelValue.value] : toReturn;
+      }
+      for (const file of uploadedFiles) {
+        if (hasMax.value && toReturn.length >= hasMax.value) {
+          break;
+        }
+        toReturn.push(file);
+      }
+      localModelValue.value = toReturn;
+      selectedFileIndex.value = toReturn.length - 1;
+    };
+    const onClickDropArea = () => {
+      if (!inputEl.value) {
+        return;
+      }
+      if (!readonly.value) {
+        inputEl.value.click();
+      }
+    };
+    const onClickRemoveFile = (index) => {
+      if (!Array.isArray(localModelValue.value)) {
+        localModelValue.value = void 0;
+        return;
+      }
+      const toReturn = [...localModelValue.value];
+      toReturn.splice(index, 1);
+      localModelValue.value = toReturn;
+    };
+    const selectedFileIndex = ref(0);
+    const PREVIEW_MIME_TYPES = ["image/jpeg", "image/png"];
+    const previewSrc = computed(() => {
+      if (files.value.length === 0) {
+        return;
+      }
+      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);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (previewSrc.value) {
+        URL.revokeObjectURL(previewSrc.value);
+      }
+    });
+    const sizeInKiB = (size) => {
+      if (!size) {
+        return;
+      }
+      return Math.floor(size / 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();
+      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",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId)
+          }, toDisplayString(_ctx.label), 9, _hoisted_1)) : createCommentVNode("v-if", true),
+          hasDropArea.value ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: "vv-input-file__drop-area",
+              onDragenter: withModifiers(onDragenter, ["prevent", "stop"]),
+              onDragleave: withModifiers(onDragleave, ["prevent", "stop"]),
+              onDrop: withModifiers(onDrop, ["prevent", "stop"]),
+              onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["prevent", "stop"])),
+              onClick: withModifiers(onClickDropArea, ["stop"])
+            },
+            [
+              renderSlot(_ctx.$slots, "drop-area", {}, () => [
+                createElementVNode("picture", _hoisted_2, [
+                  previewSrc.value ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    src: previewSrc.value,
+                    alt: files.value[selectedFileIndex.value].name
+                  }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
+                ]),
+                !unref(readonly) ? (openBlock(), createBlock(_sfc_main$1, {
+                  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, [
+            unref(hasIconBefore) ? (openBlock(), createBlock(
+              _sfc_main$3,
+              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,
+              "aria-invalid": _ctx.invalid,
+              "aria-errormessage": unref(hasInvalidLabelOrSlot) ? hasHintId.value : void 0,
+              multiple: isMultiple.value,
+              accept: _ctx.accept,
+              name: _ctx.name,
+              onChange
+            }, null, 40, _hoisted_5),
+            hasProgress.value ? (openBlock(), createElementBlock("progress", {
+              key: 1,
+              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$3,
+              normalizeProps(mergeProps({ key: 2 }, unref(hasIconAfter))),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true)
+          ]),
+          createElementVNode("ul", _hoisted_7, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(files.value, (file, index) => {
+                return openBlock(), createElementBlock("li", {
+                  key: index,
+                  class: normalizeClass(["vv-input-file__item", {
+                    active: index === selectedFileIndex.value && hasDropArea.value && files.value.length > 1
+                  }]),
+                  onClick: withModifiers(($event) => onClickSelectFile(index), ["stop"])
+                }, [
+                  unref(hasIconDownload) ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    class: "vv-input-file__item-action",
+                    title: _ctx.labelDownload,
+                    onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
+                  }, [
+                    createVNode(
+                      _sfc_main$3,
+                      normalizeProps(guardReactiveProps(unref(hasIconDownload))),
+                      null,
+                      16
+                      /* FULL_PROPS */
+                    )
+                  ], 8, _hoisted_9)) : createCommentVNode("v-if", true),
+                  createElementVNode(
+                    "div",
+                    _hoisted_10,
+                    toDisplayString(file.name),
+                    1
+                    /* TEXT */
+                  ),
+                  createElementVNode(
+                    "small",
+                    _hoisted_11,
+                    toDisplayString(sizeInKiB(file.size)) + " KB ",
+                    1
+                    /* TEXT */
+                  ),
+                  !unref(readonly) ? (openBlock(), createElementBlock("button", {
+                    key: 1,
+                    type: "button",
+                    class: "vv-input-file__item-remove",
+                    title: _ctx.labelRemove,
+                    onClick: withModifiers(($event) => onClickRemoveFile(index), ["stop"])
+                  }, null, 8, _hoisted_12)) : createCommentVNode("v-if", true)
+                ], 10, _hoisted_8);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          createVNode(unref(HintSlot), {
+            id: hasHintId.value,
+            class: "vv-input-file__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as default
+};