@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.37

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -5,6 +5,10 @@ import { uid } from "uid";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { get } from "ts-dot-prop";
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -80,6 +84,145 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 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__$9 = {
+  name: "VvIcon"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
+  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 Number.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.
@@ -383,362 +526,66 @@ const DropdownProps = {
 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 AutofocusProps = {
-  /**
-   * Global attribute autofocus
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-   */
-  autofocus: {
-    type: Boolean,
-    default: false
-  }
-};
-const AutocompleteProps = {
-  /**
-   * Global attribute autocomplete
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-   */
-  autocomplete: { type: String, default: "off" }
-};
-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
-  }
-};
-({
-  storageType: {
-    type: String,
-    default: StorageType.local,
-    validator: (value) => Object.values(StorageType).includes(value)
-  },
-  storageKey: String
-});
-const VvComboboxEvents = [
-  "update:modelValue",
-  "update:search",
-  /**
-   * @deprecated change:search should not be used, use update:search instead
-   */
-  "change:search",
-  "focus",
-  "blur"
-];
-const VvComboboxProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...UnselectableProps,
-  ...DropdownProps,
-  ...LabelProps,
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String,
-    default: "vv-dropdown--mobile-fade-block"
-  },
-  /**
-   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  /**
-   * Label for no search results
-   */
-  noResultsLabel: { type: String, default: "No results" },
-  /**
-   * Label for no options	available
-   */
-  noOptionsLabel: { type: String, default: "No options available" },
-  /**
-   * Label for selected option hint
-   */
-  selectedHintLabel: { type: String, default: "Selected" },
-  /**
-   * Label for deselect action button
-   */
-  deselectActionLabel: { type: String, default: "Deselect" },
-  /**
-   * Label for select option hint
-   */
-  selectHintLabel: { type: String, default: "Press enter to select" },
-  /**
-   * Label for deselected option hint
-   */
-  deselectHintLabel: { type: String, default: "Press enter to remove" },
-  /**
-   * Label close button
-   */
-  closeLabel: { type: String, default: "Close" },
-  /**
-   * Select input placeholder
-   */
-  placeholder: String,
-  /**
-   * Use input text to search on options
-   */
-  searchable: Boolean,
-  /**
-   * Search function to filter options
-   */
-  searchFunction: {
-    type: Function,
-    default: void 0
-  },
-  /**
-   * On searchable select is the input search placeholder
-   */
-  searchPlaceholder: {
-    type: String,
-    default: "Search..."
-  },
-  /**
-   * The input search debounce time in ms
-   */
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  /**
-   * Manage modelValue as string[] or object[]
-   */
-  multiple: Boolean,
-  /**
-   * The max number of selected values
-   */
-  maxValues: [Number, String],
-  /**
-   * The select label separator visible to the user
-   */
-  separator: { type: String, default: ", " },
-  /**
-   * Show native select
-   */
-  native: Boolean,
-  /**
-   * Show badges
-   */
-  badges: Boolean,
-  /**
-   * Badge modifiers
-   */
-  badgeModifiers: {
-    type: [String, Array],
-    default: "action sm"
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    ...DropdownProps.triggerWidth,
-    default: true
-  },
-  /**
-   * Dropdown modifiers
-   */
-  dropdownModifiers: {
-    type: [String, Array],
-    default: "mobile"
-  },
-  /**
-   * Open dropdown on focus
-   */
-  autoOpen: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on single select
-   */
-  keepOpen: {
-    type: Boolean,
-    default: false
-  }
-};
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
-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__$9 = {
-  name: "VvIcon"
-};
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
-  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);
-    };
+   * 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 AutofocusProps = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
+};
+const AutocompleteProps = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autocomplete: { type: String, default: "off" }
+};
+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
   }
+};
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
 });
 const VvDropdownProps = {
   ...IdProps,
@@ -792,7 +639,9 @@ const VvDropdownOptionProps = {
     default: false
   }
 };
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+}
 function useProvideDropdownTrigger({
   reference,
   id,
@@ -852,6 +701,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
@@ -859,11 +710,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     "before-enter",
     "after-leave",
     "enter",
-    "after-enter",
-    "enter-cancelled",
-    "before-leave",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
     "leave",
-    "leave-cancelled"
+    "leaveCancelled"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
@@ -1022,18 +873,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         modelValue.value = newValue;
       }
     });
-    const show = () => {
+    function show() {
       expanded.value = true;
-    };
-    const hide = () => {
+    }
+    function hide() {
       expanded.value = false;
-    };
-    const toggle = () => {
+    }
+    function toggle() {
       expanded.value = !expanded.value;
-    };
-    const init = (el) => {
+    }
+    function init(el) {
       referenceEl.value = el;
-    };
+    }
     __expose({
       toggle,
       show,
@@ -1101,7 +952,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
       );
     }
-    const focusNext = () => {
+    function focusNext() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -1124,8 +975,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
-    const focusPrev = () => {
+    }
+    function focusPrev() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -1148,7 +999,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
+    }
     const hovered = useElementHover(floatingEl);
     const { itemRole } = useProvideDropdownItem({
       role,
@@ -1183,29 +1034,29 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const dropdownTransitionHandlers = {
       "before-enter": () => {
         emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
         emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("leave-cancelled");
+        emit("leaveCancelled");
       }
     };
     return (_ctx, _cache) => {
@@ -1419,32 +1270,36 @@ function deepEquals(a, b) {
     let i, length, key;
     if (arrA && arrB) {
       length = a.length;
-      if (length != b.length)
+      if (length !== b.length)
         return false;
-      for (i = length; i-- !== 0; )
+      for (i = length; i-- !== 0; ) {
         if (!deepEquals(a[i], b[i]))
           return false;
+      }
       return true;
     }
-    if (arrA != arrB)
+    if (arrA !== arrB)
       return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
+    const dateA = a instanceof Date;
+    const 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 a.getTime() === b.getTime();
+    const regexpA = a instanceof RegExp;
+    const regexpB = b instanceof RegExp;
+    if (regexpA !== regexpB)
       return false;
     if (regexpA && regexpB)
-      return a.toString() == b.toString();
+      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; )
+    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]))
@@ -1452,11 +1307,11 @@ function deepEquals(a, b) {
     }
     return true;
   }
-  return a !== a && b !== b;
+  return Number.isNaN(a) && Number.isNaN(b);
 }
 function resolveFieldData(data, field) {
   if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
+    if (!field.includes(".")) {
       return data[field];
     } else {
       const fields = field.split(".");
@@ -1885,28 +1740,28 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       "vv-select",
       modifiers,
       computed(() => ({
-        valid: valid.value,
-        invalid: invalid.value,
-        loading: loading.value,
-        disabled: disabled.value,
-        readonly: readonly.value,
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "loading": loading.value,
+        "disabled": disabled.value,
+        "readonly": readonly.value,
         "icon-before": hasIconBefore.value !== void 0,
         "icon-after": hasIconAfter.value !== void 0,
-        dirty: isDirty.value,
-        focus: focused.value,
-        floating: floating.value,
-        multiple: multiple.value
+        "dirty": isDirty.value,
+        "focus": focused.value,
+        "floating": floating.value,
+        "multiple": multiple.value
       }))
     );
     const hasAttrs = computed(() => {
       return {
-        name: props.name,
-        tabindex: hasTabindex.value,
-        disabled: isDisabled.value,
-        required: props.required,
-        size: props.size,
-        autocomplete: props.autocomplete,
-        multiple: props.multiple,
+        "name": props.name,
+        "tabindex": hasTabindex.value,
+        "disabled": isDisabled.value,
+        "required": props.required,
+        "size": props.size,
+        "autocomplete": props.autocomplete,
+        "multiple": props.multiple,
         "aria-invalid": isInvalid.value,
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
@@ -1934,11 +1789,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", newValue);
       }
     });
-    const isGroup = (option) => {
+    function isGroup(option) {
       if (typeof option === "string")
         return false;
       return option && option.options && option.options.length > 0;
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -2184,7 +2039,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           return toReturn;
       }
     });
-    const onClick = (e) => {
+    function onClick(e) {
       var _a;
       if (props.disabled) {
         e.preventDefault();
@@ -2195,23 +2050,23 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return;
       }
       dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-    };
-    const onMouseover = (e) => {
+    }
+    function onMouseover(e) {
       var _a;
       if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
         emit("mouseover", e);
         return;
       }
       dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-    };
-    const onMouseleave = (e) => {
+    }
+    function onMouseleave(e) {
       var _a;
       if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
         emit("mouseleave", e);
         return;
       }
       dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
         ref_key: "element",
@@ -2387,9 +2242,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: VvButtonEvents,
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const attrs = useAttrs();
     const slots = useSlots();
-    const emit = __emit;
     const {
       id,
       modifiers,
@@ -2422,10 +2277,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       "vv-button",
       modifiers,
       computed(() => ({
-        reverse: [Side.right, Side.bottom].includes(
+        "reverse": [Side.right, Side.bottom].includes(
           iconPosition.value
         ),
-        column: [Side.top, Side.bottom].includes(
+        "column": [Side.top, Side.bottom].includes(
           iconPosition.value
         ),
         "icon-only": Boolean(
@@ -2445,7 +2300,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onClick
       };
     });
-    const onClick = () => {
+    function onClick() {
       if (toggle.value) {
         if (Array.isArray(modelValue.value)) {
           if (contains(toggleValue.value, modelValue.value)) {
@@ -2465,7 +2320,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         modelValue.value = toggleValue.value;
       }
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$2, mergeProps({
         ...unref(attrs),
@@ -2534,6 +2389,159 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvComboboxEvents = [
+  "update:modelValue",
+  "update:search",
+  /**
+   * @deprecated change:search should not be used, use update:search instead
+   */
+  "change:search",
+  "focus",
+  "blur"
+];
+const VvComboboxProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...DropdownProps,
+  ...LabelProps,
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: "vv-dropdown--mobile-fade-block"
+  },
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  /**
+   * Label for no search results
+   */
+  noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for no options	available
+   */
+  noOptionsLabel: { type: String, default: "No options available" },
+  /**
+   * Label for selected option hint
+   */
+  selectedHintLabel: { type: String, default: "Selected" },
+  /**
+   * Label for deselect action button
+   */
+  deselectActionLabel: { type: String, default: "Deselect" },
+  /**
+   * Label for select option hint
+   */
+  selectHintLabel: { type: String, default: "Press enter to select" },
+  /**
+   * Label for deselected option hint
+   */
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Label close button
+   */
+  closeLabel: { type: String, default: "Close" },
+  /**
+   * Select input placeholder
+   */
+  placeholder: String,
+  /**
+   * Use input text to search on options
+   */
+  searchable: Boolean,
+  /**
+   * Search function to filter options
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * On searchable select is the input search placeholder
+   */
+  searchPlaceholder: {
+    type: String,
+    default: "Search..."
+  },
+  /**
+   * The input search debounce time in ms
+   */
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * Manage modelValue as string[] or object[]
+   */
+  multiple: Boolean,
+  /**
+   * The max number of selected values
+   */
+  maxValues: [Number, String],
+  /**
+   * The select label separator visible to the user
+   */
+  separator: { type: String, default: ", " },
+  /**
+   * Show native select
+   */
+  native: Boolean,
+  /**
+   * Show badges
+   */
+  badges: Boolean,
+  /**
+   * Badge modifiers
+   */
+  badgeModifiers: {
+    type: [String, Array],
+    default: "action sm"
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    ...DropdownProps.triggerWidth,
+    default: true
+  },
+  /**
+   * Dropdown modifiers
+   */
+  dropdownModifiers: {
+    type: [String, Array],
+    default: "mobile"
+  },
+  /**
+   * Open dropdown on focus
+   */
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on single select
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  }
+};
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "for"];
 const _hoisted_3 = ["id", "aria-controls", "placeholder"];
@@ -2574,12 +2582,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       VvComboboxProps,
       props
     );
-    const isGroup = (option) => {
+    function isGroup(option) {
       if (typeof option === "string") {
         return false;
       }
       return option.options && option.options.length > 0;
-    };
+    }
     const {
       HintSlot,
       hasHintLabelOrSlot,
@@ -2618,22 +2626,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("change:search", debouncedSearchText.value);
     });
     const expanded = ref(false);
-    const toggleExpanded = () => {
+    function toggleExpanded() {
       if (props.disabled || props.readonly)
         return;
       expanded.value = !expanded.value;
-    };
-    const expand = () => {
+    }
+    function expand() {
       if (props.disabled || props.readonly || expanded.value)
         return;
       expanded.value = true;
-    };
-    const collapse = () => {
+    }
+    function collapse() {
       if (props.disabled || props.readonly || !expanded.value)
         return;
       expanded.value = false;
-    };
-    const onAfterExpand = () => {
+    }
+    function onAfterExpand() {
       if (propsDefaults.value.searchable) {
         if (inputSearchEl.value) {
           inputSearchEl.value.focus({
@@ -2641,12 +2649,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           });
         }
       }
-    };
-    const onAfterCollapse = () => {
+    }
+    function onAfterCollapse() {
       if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
-    };
+    }
     const {
       id,
       icon,
@@ -2676,17 +2684,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "vv-select",
       modifiers,
       computed(() => ({
-        disabled: disabled.value,
-        loading: isLoading.value,
-        readonly: readonly.value,
+        "disabled": disabled.value,
+        "loading": isLoading.value,
+        "readonly": readonly.value,
         "icon-before": hasIconBefore.value !== void 0,
         "icon-after": hasIconAfter.value !== void 0,
-        valid: valid.value,
-        invalid: invalid.value,
-        dirty: isDirty.value,
-        focus: focused.value || focusedWithin.value || expanded.value,
-        floating: floating.value,
-        badges: props.badges
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "dirty": isDirty.value,
+        "focus": focused.value || focusedWithin.value || expanded.value,
+        "floating": floating.value,
+        "badges": props.badges
       }))
     );
     const {
@@ -2735,10 +2743,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasValue = computed(() => {
       return selectedOptions.value.map((option) => getOptionLabel(option)).join(props.separator);
     });
-    const onClickInput = () => {
+    function onClickInput() {
       props.autoOpen ? expand() : toggleExpanded();
-    };
-    const onInput = (option) => {
+    }
+    function onInput(option) {
       var _a;
       if (props.disabled || props.readonly) {
         return;
@@ -2772,7 +2780,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
       emit("update:modelValue", toReturn);
-    };
+    }
     const selectProps = computed(() => ({
       id: hasId.value,
       name: props.name,