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

package/dist/components/index.es.js

@@ -1,11 +1,12 @@
-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 { inject, computed, toRef, unref, defineComponent, useAttrs, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, provide, watchEffect, reactive, onMounted, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, isRef, h, withDirectives, vModelCheckbox, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } 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";
+import { useVModel, useLocalStorage, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { useIMask } from "vue-imask";
+import Sortable from "vuedraggable";
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -71,10 +72,18 @@ 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_RADIO_GROUP = Symbol.for("radioGroup");
-const INJECTION_KEY_CHECK_GROUP = Symbol.for("checkGroup");
-const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+  "buttonGroup"
+);
+const INJECTION_KEY_RADIO_GROUP = Symbol.for(
+  "radioGroup"
+);
+const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+  "checkGroup"
+);
+const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+  "accordionGroup"
+);
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
@@ -580,120 +589,15 @@ const NavProps = {
     default: () => []
   }
 };
-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 findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
-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 removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
-  }
-}
-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;
@@ -706,8 +610,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -748,23 +653,16 @@ const VvAccordionProps = {
   not: Boolean
 };
 const VvAccordionEvents = ["update:modelValue"];
-function useGroupProps$3(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
+function useGroupProps$3(props) {
+  const { group, isInGroup } = useInjectedGroupState(
     INJECTION_KEY_ACCORDION_GROUP
   );
-  const { title, content } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const not = getGroupOrLocalRef("not", props);
-  const collapse = getGroupOrLocalRef("collapse", props);
   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))
   );
   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)) {
@@ -782,16 +680,11 @@ function useGroupProps$3(props, emit) {
   });
   return {
     // group props
-    modelValue,
-    not,
     isInGroup,
     group,
-    collapse,
     modifiers,
     disabled,
-    // local props
-    title,
-    content
+    bus: group == null ? void 0 : group.bus
   };
 }
 function useModifiers(prefix, modifiers, others) {
@@ -827,62 +720,103 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...__default__$r,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const attrs = useAttrs();
     const emit = __emit;
+    const modelValue = useVModel(props, "modelValue", emit);
     const accordionName = computed(
       () => props.name || (attrs == null ? void 0 : attrs.id) || uid()
     );
-    const {
-      modifiers,
-      title,
-      content,
-      disabled,
-      collapse,
+    const { title, content, not } = toRefs(props);
+    const { isInGroup, modifiers, disabled, bus } = useGroupProps$3(props);
+    const isExpanded = ref(false);
+    watch(
       modelValue,
-      isInGroup,
-      not
-    } = useGroupProps$3(props, emit);
-    const localModelValue = ref(false);
-    const isOpen = computed({
-      get: () => {
-        let toReturn = modelValue.value;
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            toReturn = modelValue.value.includes(accordionName.value);
-          } else {
-            toReturn = modelValue.value === accordionName.value;
-          }
-        } else if (modelValue.value === void 0) {
-          toReturn = localModelValue.value;
+      (newValue) => {
+        if (typeof newValue === "boolean") {
+          isExpanded.value = not.value ? !newValue : newValue;
         }
-        return not.value ? !toReturn : toReturn;
       },
-      set: (newValue) => {
-        if (not.value) {
-          newValue = !newValue;
-        }
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            if (newValue) {
-              modelValue.value.push(accordionName.value);
-              return;
-            }
-            modelValue.value = modelValue.value.filter(
-              (name) => name !== accordionName.value
-            );
-            return;
+      { immediate: true }
+    );
+    watch(isExpanded, (newValue) => {
+      modelValue.value = not.value ? !newValue : newValue;
+    });
+    bus == null ? void 0 : bus.on("toggle", ({ name, value }) => {
+      if (name !== accordionName.value) {
+        return;
+      }
+      isExpanded.value = value;
+    });
+    const onClick = () => {
+      if (disabled.value) {
+        return;
+      }
+      if (isInGroup.value) {
+        bus == null ? void 0 : bus.emit("toggle", {
+          name: accordionName.value,
+          value: !isExpanded.value
+        });
+        return;
+      }
+      isExpanded.value = !isExpanded.value;
+    };
+    watch(
+      accordionName,
+      (newValue, oldValue) => {
+        if (bus) {
+          if (oldValue && oldValue !== newValue) {
+            bus.emit("unregister", { name: oldValue });
           }
-          modelValue.value = newValue ? accordionName.value : null;
-          return;
+          bus.emit("register", { name: newValue });
         }
-        if (modelValue.value === void 0 && typeof newValue === "boolean") {
-          localModelValue.value = newValue;
-          return;
-        }
-        modelValue.value = newValue;
+      },
+      {
+        immediate: true
       }
+    );
+    onBeforeUnmount(() => {
+      if (bus) {
+        bus.emit("unregister", { name: accordionName.value });
+      }
+    });
+    const expand = () => {
+      if (isExpanded.value) {
+        return;
+      }
+      onClick();
+    };
+    const collapse = () => {
+      if (!isExpanded.value) {
+        return;
+      }
+      onClick();
+    };
+    const groupExpand = (name) => {
+      if (!bus) {
+        console.warn(
+          `[VvAccordion]: You are trying to expand accordion group of "${accordionName.value}" but it is not in a group`
+        );
+        return;
+      }
+      bus.emit("expand", { name });
+    };
+    const groupCollapse = (name) => {
+      if (!bus) {
+        console.warn(
+          `[VvAccordion]: You are trying to collapse accordion group of "${accordionName.value}" but it is not in a group`
+        );
+        return;
+      }
+      bus == null ? void 0 : bus.emit("collapse", { name });
+    };
+    __expose({
+      isExpanded,
+      expand,
+      collapse,
+      groupExpand,
+      groupCollapse
     });
     const bemCssClasses = useModifiers(
       "vv-accordion",
@@ -891,20 +825,25 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         disabled: disabled.value
       }))
     );
-    const onClick = useToggle(isOpen);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("details", {
         id: unref(accordionName),
         class: normalizeClass(unref(bemCssClasses)),
-        open: unref(isOpen)
+        open: unref(isExpanded)
       }, [
         createElementVNode("summary", {
           "aria-controls": unref(accordionName),
-          "aria-expanded": unref(isOpen),
+          "aria-expanded": unref(isExpanded),
           class: "vv-accordion__summary",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClick(), ["prevent"]))
         }, [
-          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
             createTextVNode(
               toDisplayString(unref(title)),
               1
@@ -913,10 +852,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ])
         ], 8, _hoisted_2$f),
         createElementVNode("div", {
-          "aria-hidden": !unref(isOpen),
+          "aria-hidden": !unref(isExpanded),
           class: "vv-accordion__content"
         }, [
-          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
             createTextVNode(
               toDisplayString(unref(content)),
               1
@@ -933,7 +878,10 @@ const VvAccordionGroupProps = {
   /**
    * VModel
    */
-  modelValue: [String, Array],
+  modelValue: {
+    type: [String, Array],
+    default: void 0
+  },
   /**
    * Accordion items
    * @type VvAccordionGroupItem
@@ -967,15 +915,8 @@ const VvAccordionGroupProps = {
   storeKey: String
 };
 const VvAccordionGroupEvents = ["update:modelValue"];
-function useProvideGroupState(groupState) {
-  if (Object.keys(groupState).some(
-    (k) => k !== "key" && !isRef(groupState[k])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  provide(
-    groupState.key,
-    computed(() => groupState)
-  );
+function useProvideGroupState(key, groupState) {
+  provide(key, groupState);
 }
 const __default__$q = {
   name: "VvAccordionGroup"
@@ -984,58 +925,166 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...__default__$q,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    const { disabled, modifiers, itemModifiers, items } = toRefs(props);
     watchEffect(() => {
-      if (typeof props.modelValue === "string" && collapse.value) {
+      if (typeof props.modelValue === "string" && props.collapse) {
         console.warn(
           `[VvAccordionGroup]: modelValue is a string but collapse is true.`
         );
       }
     });
-    let localModelValue = ref([]);
+    const accordionNames = reactive(/* @__PURE__ */ new Set());
+    let storeModelValue = ref();
     watch(
       () => props.storeKey,
-      (newKey) => {
+      (newKey, oldKey) => {
+        if (oldKey && oldKey !== newKey) {
+          localStorage.removeItem(oldKey);
+        }
         if (newKey) {
-          localModelValue = useStorage(newKey, localModelValue.value);
-        } else {
-          localModelValue = ref([]);
+          storeModelValue = useLocalStorage(newKey, storeModelValue.value);
+          return;
         }
+        storeModelValue = ref(storeModelValue.value);
       },
-      { immediate: true }
+      {
+        immediate: true
+      }
     );
-    const modelValue = computed({
+    const localModelValue = computed({
       get: () => {
-        var _a;
-        if (props.modelValue !== void 0) {
-          if (!collapse.value) {
-            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
-          }
+        if (props.modelValue !== null && props.modelValue !== void 0) {
           return props.modelValue;
         }
-        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
+        return storeModelValue.value;
       },
       set: (newValue) => {
-        if (props.modelValue !== void 0) {
-          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
-            newValue = [newValue];
+        emit("update:modelValue", newValue);
+        storeModelValue.value = newValue;
+      }
+    });
+    const expandedAccordions = computed({
+      get: () => {
+        if (localModelValue.value === void 0) {
+          return /* @__PURE__ */ new Set();
+        }
+        let toReturn = /* @__PURE__ */ new Set();
+        if (props.not) {
+          if (typeof localModelValue.value === "string") {
+            toReturn = new Set(
+              [...accordionNames].filter(
+                (name) => name !== localModelValue.value
+              )
+            );
+          } else if (Array.isArray(localModelValue.value)) {
+            toReturn = new Set(
+              [...accordionNames].filter(
+                (name) => !localModelValue.value.includes(
+                  name
+                )
+              )
+            );
           }
-          return emit("update:modelValue", newValue);
+        } else if (typeof localModelValue.value === "string") {
+          toReturn = /* @__PURE__ */ new Set([localModelValue.value]);
+        } else if (Array.isArray(localModelValue.value)) {
+          toReturn = new Set(localModelValue.value);
+        }
+        return toReturn;
+      },
+      set: (newValue) => {
+        if (props.not) {
+          localModelValue.value = [...accordionNames].filter(
+            (name) => !newValue.has(name)
+          );
+          return;
+        }
+        if (props.collapse) {
+          localModelValue.value = [...newValue];
+          return;
         }
-        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
+        localModelValue.value = newValue.values().next().value;
       }
     });
-    useProvideGroupState({
-      key: INJECTION_KEY_ACCORDION_GROUP,
-      modelValue,
+    onMounted(() => {
+      if (props.not && localModelValue.value === void 0) {
+        localModelValue.value = props.collapse ? [] : [...accordionNames.values()].splice(1, accordionNames.size);
+      }
+      nextTick(() => {
+        for (const name of accordionNames) {
+          bus.emit("toggle", {
+            name,
+            value: expandedAccordions.value.has(name)
+          });
+        }
+      });
+    });
+    const bus = mitt();
+    useProvideGroupState(INJECTION_KEY_ACCORDION_GROUP, {
       disabled,
-      collapse,
       modifiers: itemModifiers,
-      not
+      bus
+    });
+    bus.on("register", ({ name }) => {
+      accordionNames.add(name);
+    });
+    bus.on("unregister", ({ name }) => {
+      accordionNames.delete(name);
     });
+    bus.on("toggle", ({ name, value }) => {
+      const newValue = new Set(expandedAccordions.value);
+      if (value) {
+        if (!props.collapse) {
+          for (const item of newValue) {
+            if (item !== name) {
+              bus.emit("toggle", { name: item, value: false });
+            }
+          }
+          newValue.clear();
+        }
+        newValue.add(name);
+        expandedAccordions.value = newValue;
+        return;
+      }
+      newValue.delete(name);
+      expandedAccordions.value = newValue;
+    });
+    const expand = (name) => {
+      if (typeof name === "string") {
+        bus.emit("toggle", { name, value: true });
+        return;
+      }
+      if (Array.isArray(name)) {
+        for (const item of name) {
+          bus.emit("toggle", { name: item, value: true });
+        }
+        return;
+      }
+      for (const item of accordionNames) {
+        bus.emit("toggle", { name: item, value: true });
+      }
+    };
+    bus.on("expand", ({ name }) => expand(name));
+    const collapse = (name) => {
+      if (typeof name === "string") {
+        bus.emit("toggle", { name, value: false });
+        return;
+      }
+      if (Array.isArray(name)) {
+        for (const item of name) {
+          bus.emit("toggle", { name: item, value: false });
+        }
+        return;
+      }
+      for (const item of accordionNames) {
+        bus.emit("toggle", { name: item, value: false });
+      }
+    };
+    bus.on("collapse", ({ name }) => collapse(name));
+    __expose({ expandedAccordions, expand, collapse });
     const bemCssClasses = useModifiers(
       "vv-accordion-group",
       modifiers,
@@ -1050,7 +1099,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(bemCssClasses))
         },
         [
-          renderSlot(_ctx.$slots, "default", {}, () => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            expandedAccordions: unref(expandedAccordions),
+            expand,
+            collapse
+          })), () => [
             (openBlock(true), createElementBlock(
               Fragment,
               null,
@@ -1064,16 +1117,25 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                     title: item.title,
                     content: item.content
                   }),
-                  {
-                    header: withCtx((data) => [
-                      renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-                    ]),
-                    details: withCtx((data) => [
-                      renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-                    ]),
+                  createSlots({
                     _: 2
                     /* DYNAMIC */
-                  },
+                  }, [
+                    _ctx.$slots[`summary::${item.name}`] ? {
+                      name: "summary",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `summary::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.$slots[`content::${item.name}`] ? {
+                      name: "default",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `content::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]),
                   1040
                   /* FULL_PROPS, DYNAMIC_SLOTS */
                 );
@@ -2147,14 +2209,11 @@ function useGroupProps$2(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)) {
@@ -2171,10 +2230,7 @@ function useGroupProps$2(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
@@ -2194,6 +2250,111 @@ function useGroupProps$2(props, emit) {
     label
   };
 }
+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 findIndexInList(value, list) {
+  let index = -1;
+  if (list) {
+    for (let i = 0; i < list.length; i++) {
+      if (equals(list[i], value)) {
+        index = i;
+        break;
+      }
+    }
+  }
+  return index;
+}
+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 removeFromList(value, list) {
+  const indexElToRemove = findIndexInList(value, list);
+  if (indexElToRemove > -1) {
+    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
+  } else {
+    return list;
+  }
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
 const _hoisted_1$g = {
   key: 1,
   class: "vv-button__label"
@@ -2407,8 +2568,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         return emit("update:modelValue", newValue);
       }
     });
-    useProvideGroupState({
-      key: INJECTION_KEY_BUTTON_GROUP,
+    useProvideGroupState(INJECTION_KEY_BUTTON_GROUP, {
       modelValue,
       disabled,
       toggle,
@@ -2513,16 +2673,10 @@ function useGroupProps$1(props, emit) {
   const valid = getGroupOrLocalRef("valid", props);
   const invalid = getGroupOrLocalRef("invalid", props);
   const readonly = computed(
-    () => {
-      var _a;
-      return Boolean(props.readonly || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.readonly.value));
-    }
+    () => Boolean(props.readonly || (group == null ? void 0 : group.readonly.value))
   );
   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 {
     // local props
@@ -2964,8 +3118,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
-    useProvideGroupState({
-      key: INJECTION_KEY_CHECK_GROUP,
+    useProvideGroupState(INJECTION_KEY_CHECK_GROUP, {
       modelValue,
       disabled,
       readonly,
@@ -6221,16 +6374,10 @@ function useGroupProps(props, emit) {
   const valid = getGroupOrLocalRef("valid", props);
   const invalid = getGroupOrLocalRef("invalid", props);
   const readonly = computed(
-    () => {
-      var _a;
-      return Boolean(props.readonly || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.readonly.value));
-    }
+    () => Boolean(props.readonly || (group == null ? void 0 : group.readonly.value))
   );
   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 {
     // local props
@@ -6405,8 +6552,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
-    useProvideGroupState({
-      key: INJECTION_KEY_RADIO_GROUP,
+    useProvideGroupState(INJECTION_KEY_RADIO_GROUP, {
       modelValue,
       disabled,
       readonly,
@@ -6967,8 +7113,7 @@ const VvInputFileProps = {
    * Input value
    */
   modelValue: {
-    type: Object,
-    required: true
+    type: Object
   },
   /**
    * Whether to show progress bar
@@ -7012,6 +7157,10 @@ const VvInputFileProps = {
    * Show drop area
    */
   dropArea: { type: Boolean, default: false },
+  /**
+   * Enable sorting
+   */
+  sortable: { type: Boolean, default: false },
   /**
    * Label for add button
    */
@@ -7071,12 +7220,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"
 };
@@ -7125,12 +7273,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;
@@ -7284,6 +7441,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",
@@ -7370,60 +7532,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$u,
-                      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$u,
+                    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"