@volverjs/ui-vue 0.0.10-beta.23 → 0.0.10-beta.24

package/dist/components/VvCombobox/VvCombobox.vue.d.ts

@@ -83,7 +83,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     placement: {
-        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: globalThis.PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: import("../../constants").Side;
         validator: (value: never) => boolean;
     };
@@ -401,7 +401,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     placement: {
-        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: globalThis.PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: import("../../constants").Side;
         validator: (value: never) => boolean;
     };
@@ -634,14 +634,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     id: (StringConstructor | NumberConstructor)[];
 }>>, {
-    readonly: boolean;
-    disabled: boolean;
-    valid: boolean;
-    invalid: boolean;
-    modelValue: string | number | boolean | unknown[] | Record<string, any>;
-    multiple: boolean;
-    unselectable: boolean;
-    modifiers: string | string[];
     size: boolean | {
         rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
         elementContext?: import("@floating-ui/core").ElementContext | undefined;
@@ -686,6 +678,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     floating: boolean;
     options: (string | Option)[];
     label: string | number;
+    disabled: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
+    modifiers: string | string[];
     shift: boolean | {
         rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
         elementContext?: import("@floating-ui/core").ElementContext | undefined;
@@ -741,14 +736,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     iconPosition: "before" | "after";
     loading: boolean;
     loadingLabel: string;
+    unselectable: boolean;
+    multiple: boolean;
+    readonly: boolean;
     hintLabel: string;
+    invalid: boolean;
     invalidLabel: string | unknown[];
+    valid: boolean;
     validLabel: string | unknown[];
     tabindex: string | number;
     labelKey: string | Function;
     valueKey: string | Function;
     disabledKey: string | Function;
-    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     strategy: "absolute" | "fixed";
     transitionName: string;
     offset: string | import("@floating-ui/core").OffsetOptions | undefined;

package/dist/components/VvCombobox/index.d.ts

@@ -157,7 +157,7 @@ export declare const VvComboboxProps: {
         default: undefined;
     };
     placement: {
-        type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: import("../../constants").Side;
         validator: (value: never) => boolean;
     };

package/dist/components/VvDropdown/VvDropdown.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     placement: {
-        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: globalThis.PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: Side;
         validator: (value: never) => boolean;
     };
@@ -218,7 +218,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     placement: {
-        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: globalThis.PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: Side;
         validator: (value: never) => boolean;
     };
@@ -393,8 +393,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onAfterExpand?: ((...args: any[]) => any) | undefined;
     onAfterCollapse?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
-    modifiers: string | string[];
     size: boolean | {
         rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
         elementContext?: import("@floating-ui/core").ElementContext | undefined;
@@ -437,6 +435,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         }) => void | Promise<void>) | undefined;
     }> | undefined;
     reference: HTMLElement | null;
+    modelValue: boolean;
+    modifiers: string | string[];
     shift: boolean | {
         rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
         elementContext?: import("@floating-ui/core").ElementContext | undefined;
@@ -488,7 +488,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         flipAlignment?: boolean | undefined;
         boundary?: import("@floating-ui/dom").Boundary | undefined;
     }> | undefined;
-    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     strategy: "absolute" | "fixed";
     transitionName: string;
     offset: string | import("@floating-ui/core").OffsetOptions | undefined;

package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts

@@ -109,9 +109,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
+    label: string | number;
     disabled: boolean;
     modifiers: string | string[];
-    label: string | number;
     type: "button" | "submit" | "reset";
     target: "_blank" | "_self" | "_parent" | "_top";
     ariaLabel: string;

package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts

@@ -52,8 +52,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-    unselectable: boolean;
     modifiers: string | string[];
+    unselectable: boolean;
     selected: boolean;
 }, {}>, {
     default?(_: {}): any;

package/dist/components/VvDropdown/index.d.ts

@@ -28,7 +28,7 @@ export declare const VvDropdownProps: {
         default: undefined;
     };
     placement: {
-        type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: import("../../constants").Side;
         validator: (value: never) => boolean;
     };

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

@@ -1,7 +1,8 @@
-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 { 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, createVNode, guardReactiveProps, createSlots } from "vue";
 import { useVModel } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { uid } from "uid";
+import Sortable from "vuedraggable";
 const ACTION_ICONS = {
   showPassword: "eye-on",
   hidePassword: "eye-off",
@@ -67,7 +68,9 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   return AnchorTarget2;
 })(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+  "buttonGroup"
+);
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
@@ -638,100 +641,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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));
+  const isInGroup = computed(() => group !== void 0);
   function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
       return computed({
         get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
+          return groupPropValue.value;
         },
         set(value) {
           groupPropValue.value = value;
@@ -744,8 +662,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -809,14 +728,11 @@ function useGroupProps(props, emit) {
   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 unselectable = getGroupOrLocalRef("unselectable", props);
+  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
   const modifiers = computed(() => {
     let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    let groupModifiers = group == null ? void 0 : group.modifiers.value;
     const toReturn = /* @__PURE__ */ new Set();
     if (localModifiers) {
       if (!Array.isArray(localModifiers)) {
@@ -833,10 +749,7 @@ function useGroupProps(props, emit) {
     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));
-    }
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
   );
   return {
     // group props
@@ -857,6 +770,88 @@ function useGroupProps(props, emit) {
   };
 }
 const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+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 isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
 function useComponentIcon(icon, iconPosition) {
   const hasIcon = computed(() => {
     if (typeof (icon == null ? void 0 : icon.value) === "string") {
@@ -1179,8 +1174,7 @@ const VvInputFileProps = {
    * Input value
    */
   modelValue: {
-    type: Object,
-    required: true
+    type: Object
   },
   /**
    * Whether to show progress bar
@@ -1224,6 +1218,10 @@ const VvInputFileProps = {
    * Show drop area
    */
   dropArea: { type: Boolean, default: false },
+  /**
+   * Enable sorting
+   */
+  sortable: { type: Boolean, default: false },
   /**
    * Label for add button
    */
@@ -1336,12 +1334,11 @@ 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", "capture", "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 _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["title", "onClick"];
+const _hoisted_9 = { class: "vv-input-file__item-name" };
+const _hoisted_10 = { class: "vv-input-file__item-info" };
+const _hoisted_11 = ["title", "onClick"];
 const __default__ = {
   name: "VvInputFile"
 };
@@ -1390,12 +1387,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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 [];
+    const files = computed({
+      get: () => {
+        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];
+      },
+      set: (value) => {
+        if (isMultiple.value) {
+          localModelValue.value = value;
+          return;
+        }
+        localModelValue.value = value == null ? void 0 : value[0];
       }
-      return Array.isArray(localModelValue.value) ? localModelValue.value : [localModelValue.value];
     });
     const hasMax = computed(() => {
       return typeof props.max === "string" ? parseInt(props.max) : props.max;
@@ -1549,6 +1555,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return props.iconReplace;
     });
+    const onSortEnd = ({ newIndex }) => {
+      if (newIndex !== null) {
+        selectedFileIndex.value = newIndex;
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1635,60 +1646,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               /* 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"])
+          createVNode(unref(Sortable), {
+            modelValue: files.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => files.value = $event),
+            tag: "ul",
+            class: "vv-input-file__list",
+            "item-key": "name",
+            move: () => _ctx.sortable,
+            onEnd: onSortEnd
+          }, {
+            item: withCtx(({ element: file, index }) => [
+              createElementVNode("li", {
+                class: normalizeClass(["vv-input-file__item", {
+                  active: index === selectedFileIndex.value && hasDropArea.value && files.value.length > 1,
+                  "cursor-move": _ctx.sortable
+                }]),
+                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"])
                 }, [
-                  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(
+                    _sfc_main$3,
+                    normalizeProps(guardReactiveProps(unref(hasIconDownload))),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )
+                ], 8, _hoisted_8)) : createCommentVNode("v-if", true),
+                createElementVNode(
+                  "div",
+                  _hoisted_9,
+                  toDisplayString(file.name),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "small",
+                  _hoisted_10,
+                  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_11)) : createCommentVNode("v-if", true)
+              ], 10, _hoisted_7)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["modelValue", "move"]),
           createVNode(unref(HintSlot), {
             id: hasHintId.value,
             class: "vv-input-file__hint"