@volverjs/ui-vue 0.0.5-beta.1 → 0.0.5-beta.3

package/dist/components/index.es.js

@@ -295,14 +295,14 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const _hoisted_1$e = ["id", "open"];
+const _hoisted_1$f = ["id", "open"];
 const _hoisted_2$c = ["aria-controls", "aria-expanded"];
 const _hoisted_3$6 = ["aria-hidden"];
-const __default__$l = {
+const __default__$m = {
   name: "VvAccordion"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
   setup(__props, { emit }) {
@@ -393,7 +393,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(unref(content)), 1)
           ])
         ], 8, _hoisted_3$6)
-      ], 10, _hoisted_1$e);
+      ], 10, _hoisted_1$f);
     };
   }
 });
@@ -446,11 +446,11 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$k = {
+const __default__$l = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
   setup(__props, { emit }) {
@@ -517,7 +517,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$l, mergeProps({
+            return openBlock(), createBlock(_sfc_main$m, mergeProps({
               key: item.title
             }, {
               name: item.name,
@@ -732,6 +732,16 @@ const DropdownProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */
@@ -853,14 +863,14 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: Number,
+  minlength: [String, Number],
   /**
    * Input / Textarea maxlength
    * Maximum length (number of characters) of value
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
    */
-  maxlength: Number,
+  maxlength: [String, Number],
   /**
    * Input / Textarea placeholder
    * Text that appears in the form control when it has no value set
@@ -937,11 +947,11 @@ const VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
 };
-const __default__$j = {
+const __default__$k = {
   name: "VvBadge"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvBadgeProps,
   setup(__props) {
     const props = __props;
@@ -963,13 +973,13 @@ const VvBreadcrumbProps = {
   ...ModifiersProps,
   routes: Array
 };
-const _hoisted_1$d = { class: "vv-breadcrumb__list" };
+const _hoisted_1$e = { class: "vv-breadcrumb__list" };
 const _hoisted_2$b = ["content"];
-const __default__$i = {
+const __default__$j = {
   name: "VvBreadcrumb"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: VvBreadcrumbProps,
   setup(__props) {
     const props = __props;
@@ -980,7 +990,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         class: normalizeClass(unref(bemCssClasses)),
         "aria-label": "breadcrumbs"
       }, [
-        createElementVNode("ol", _hoisted_1$d, [
+        createElementVNode("ol", _hoisted_1$e, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
             var _a, _b, _c, _d;
             return openBlock(), createElementBlock("li", {
@@ -1115,11 +1125,11 @@ const VvIconProps = {
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER);
 }
-const __default__$h = {
+const __default__$i = {
   name: "VvIcon"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -1216,11 +1226,11 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$g = {
+const __default__$h = {
   name: "VvAction"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   props: VvActionProps,
   emits: VvActionEvents,
   setup(__props, { expose, emit }) {
@@ -1403,7 +1413,7 @@ function useGroupProps$2(props, emit) {
   };
 }
 const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   key: 1,
   class: "vv-button__label"
 };
@@ -1411,11 +1421,11 @@ const _hoisted_2$a = {
   key: 1,
   class: "vv-button__label"
 };
-const __default__$f = {
+const __default__$g = {
   name: "VvButton"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
   props: VvButtonProps,
   emits: VvButtonEvents,
   setup(__props, { expose, emit }) {
@@ -1490,7 +1500,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$g, mergeProps({
+      return openBlock(), createBlock(_sfc_main$h, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1509,15 +1519,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$h, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$i, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
               }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$c, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
+              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$d, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
             ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
                 key: 0,
                 class: "vv-button__icon"
               }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
@@ -1548,11 +1558,11 @@ const VvButtonGroupProps = {
   modelValue: { type: [String, Array], default: void 0 }
 };
 const VvButtonGroupEvents = ["update:modelValue"];
-const __default__$e = {
+const __default__$f = {
   name: "VvButtonGroup"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
   setup(__props, { emit }) {
@@ -1610,7 +1620,7 @@ const VvCardProps = {
   title: String,
   modifiers: [String, Array]
 };
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "vv-card__header"
 };
@@ -1622,11 +1632,11 @@ const _hoisted_3$5 = {
   key: 2,
   class: "vv-card__footer"
 };
-const __default__$d = {
+const __default__$e = {
   name: "VvCard"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   props: VvCardProps,
   setup(__props) {
     const props = __props;
@@ -1636,7 +1646,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("article", {
         class: normalizeClass(unref(bemCssClasses))
       }, [
-        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$b, [
+        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$c, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
@@ -1809,13 +1819,13 @@ function HintSlotFactory(parentProps, parentSlots) {
     }
   };
 }
-const _hoisted_1$a = ["for"];
+const _hoisted_1$b = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"];
-const __default__$c = {
+const __default__$d = {
   name: "VvCheckbox"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
   setup(__props, { emit }) {
@@ -1955,7 +1965,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           class: "vv-checkbox__hint",
           params: { value: unref(modelValue) }
         }, null, 8, ["params"])
-      ], 10, _hoisted_1$a);
+      ], 10, _hoisted_1$b);
     };
   }
 });
@@ -1978,20 +1988,26 @@ function useOptions(props) {
       return false;
     return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
   };
+  const getOptionGrouped = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return [];
+    return option.options;
+  };
   return {
     options,
     getOptionLabel,
     getOptionValue,
-    getOptionDisabled
+    getOptionDisabled,
+    getOptionGrouped
   };
 }
-const _hoisted_1$9 = ["textContent"];
+const _hoisted_1$a = ["textContent"];
 const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
-const __default__$b = {
+const __default__$c = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
   setup(__props, { emit }) {
@@ -2035,10 +2051,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$9)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$a)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$7, [
           _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$c, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            return openBlock(), createBlock(_sfc_main$d, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
         createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" })
@@ -2251,16 +2267,16 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$8 = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$a = {
+const _hoisted_1$9 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$b = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   props: VvDropdownProps,
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -2346,7 +2362,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       floatingEl,
       {
         whileElementsMounted: autoUpdate,
-        placement: props.placement,
+        placement: computed(() => props.placement),
+        strategy: computed(() => props.strategy),
         middleware
       }
     );
@@ -2404,6 +2421,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
+    expose({ toggle, show, hide, init });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -2564,7 +2582,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                   role: unref(itemRole)
                 })))
-              ], 16, _hoisted_1$8),
+              ], 16, _hoisted_1$9),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
             ], 6), [
               [vShow, unref(expanded)]
@@ -2576,11 +2594,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$9 = {
+const __default__$a = {
   name: "VvDropdownItem"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -2604,12 +2622,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["title"];
-const __default__$8 = {
+const _hoisted_1$8 = ["title"];
+const __default__$9 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -2646,7 +2664,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -2661,13 +2679,33 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
               createTextVNode(toDisplayString(unref(hintLabel)), 1)
             ])
-          ], 8, _hoisted_1$7)
+          ], 8, _hoisted_1$8)
         ]),
         _: 3
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
+const _hoisted_1$7 = {
+  class: "vv-dropdown-optgroup",
+  role: "presentation",
+  tabindex: "-1"
+};
+const __default__$8 = {
+  name: "VvDropdownOptgroup"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
+  props: {
+    ...LabelProps
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$7, toDisplayString(props.label), 1);
+    };
+  }
+});
 const VvSelectProps = {
   ...IdNameProps,
   ...AutofocusProps,
@@ -2771,7 +2809,9 @@ const _hoisted_4$3 = { class: "vv-select__inner" };
 const _hoisted_5$3 = ["id"];
 const _hoisted_6$3 = ["disabled", "hidden"];
 const _hoisted_7$3 = ["disabled", "value"];
-const _hoisted_8$2 = {
+const _hoisted_8$2 = ["disabled", "label"];
+const _hoisted_9 = ["disabled", "value"];
+const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
 };
@@ -2863,7 +2903,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const {
+      getOptionLabel,
+      getOptionValue,
+      getOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
     const localModelValue = computed({
       get: () => {
         return props.modelValue;
@@ -2875,6 +2920,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", newValue);
       }
     });
+    const isGroup = (option) => {
+      if (typeof option === "string")
+        return false;
+      return option && option.options && option.options.length > 0;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
@@ -2888,7 +2938,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4$3, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -2905,21 +2955,35 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 hidden: !_ctx.unselectable
               }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$3)) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
-                return openBlock(), createElementBlock("option", {
-                  key: index,
-                  disabled: unref(getOptionDisabled)(option),
-                  value: unref(getOptionValue)(option)
-                }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$3);
-              }), 128))
+                return openBlock(), createElementBlock(Fragment, null, [
+                  !isGroup(option) ? (openBlock(), createElementBlock("option", {
+                    key: index,
+                    disabled: unref(getOptionDisabled)(option),
+                    value: unref(getOptionValue)(option)
+                  }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$3)) : (openBlock(), createElementBlock("optgroup", {
+                    key: `group-${index}`,
+                    disabled: unref(getOptionDisabled)(option),
+                    label: unref(getOptionLabel)(option)
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(option), (item, i) => {
+                      return openBlock(), createElementBlock("option", {
+                        key: `group-${index}-item-${i}`,
+                        disabled: unref(getOptionDisabled)(item),
+                        value: unref(getOptionValue)(item)
+                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9);
+                    }), 128))
+                  ], 8, _hoisted_8$2))
+                ], 64);
+              }), 256))
             ], 16, _hoisted_5$3), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
             renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true)
         ]),
@@ -3000,7 +3064,7 @@ const _hoisted_8$1 = {
 };
 const __default__$6 = {
   name: "VvCombobox",
-  components: { VvDropdown: _sfc_main$a, VvDropdownOption: _sfc_main$8 }
+  components: { VvDropdown: _sfc_main$b, VvDropdownOption: _sfc_main$9, VvDropdownOptgroup: _sfc_main$8 }
 };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
@@ -3120,7 +3184,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const hasOptions = computed(
       () => props.searchable ? filteredOptions.value : props.options
     );
-    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const {
+      getOptionLabel,
+      getOptionValue,
+      getOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
     const filteredOptions = computed(() => {
       var _a;
       return (_a = props.options) == null ? void 0 : _a.filter((option) => {
@@ -3164,7 +3233,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       let toReturn = value;
       if (props.multiple) {
         if (Array.isArray(props.modelValue)) {
-          if (props.maxValues !== void 0 && props.maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= props.maxValues) {
+          const maxValues = Number(props.maxValues);
+          if (props.maxValues !== void 0 && maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= maxValues) {
             if (!contains(value, props.modelValue)) {
               return;
             }
@@ -3213,6 +3283,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       id: hasDropdownId.value,
       reference: wrapperEl.value,
       placement: props.placement,
+      strategy: props.strategy,
       transitionName: props.transitionName,
       offset: props.offset,
       shift: props.shift,
@@ -3239,6 +3310,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         toggleExpanded();
       }
     });
+    const isGroup = (option) => {
+      if (typeof option === "string") {
+        return false;
+      }
+      return option.options && option.options.length > 0;
+    };
     return (_ctx, _cache) => {
       return !_ctx.native ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -3255,7 +3332,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$a, mergeProps({
+          createVNode(_sfc_main$b, mergeProps({
             modelValue: unref(expanded),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(expanded) ? expanded.value = $event : null)
           }, unref(dropdownProps), {
@@ -3266,7 +3343,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3285,7 +3362,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                       !_ctx.badges ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                         createTextVNode(toDisplayString(unref(hasValue)), 1)
                       ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$j, {
+                        return openBlock(), createBlock(_sfc_main$k, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
                           class: "vv-select__badge"
@@ -3297,7 +3374,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                               "aria-label": unref(propsDefaults).deselectActionLabel,
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$h, { name: "close" })
+                              createVNode(_sfc_main$i, { name: "close" })
                             ], 8, _hoisted_7$2)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -3308,7 +3385,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6$2),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3319,31 +3396,64 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             ]),
             items: withCtx(() => [
               unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                return openBlock(), createBlock(_sfc_main$8, mergeProps({
-                  disabled: unref(getOptionDisabled)(option),
-                  selected: getOptionSelected(option),
-                  unselectable: _ctx.unselectable,
-                  deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                  selectHintLabel: unref(propsDefaults).selectHintLabel,
-                  selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                }, {
-                  key: index,
-                  class: "vv-dropdown-option",
-                  onClickPassive: ($event) => onInput(option)
-                }), {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                      option,
-                      selectedOptions: unref(selectedOptions),
-                      selected: getOptionSelected(option),
-                      disabled: unref(getOptionDisabled)(option)
-                    })), () => [
-                      createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                    ])
-                  ]),
-                  _: 2
-                }, 1040, ["onClickPassive"]);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$8, {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createVNode(_sfc_main$8, {
+                      label: unref(getOptionLabel)(option)
+                    }, null, 8, ["label"]),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
+                      option
+                    ), (item, i) => {
+                      return openBlock(), createBlock(_sfc_main$9, mergeProps({
+                        disabled: unref(getOptionDisabled)(item),
+                        selected: getOptionSelected(item),
+                        unselectable: _ctx.unselectable,
+                        deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                        selectHintLabel: unref(propsDefaults).selectHintLabel,
+                        selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                      }, {
+                        key: i,
+                        class: "vv-dropdown-option",
+                        onClickPassive: ($event) => onInput(item)
+                      }), {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                            option,
+                            selectedOptions: unref(selectedOptions),
+                            selected: getOptionSelected(item),
+                            disabled: unref(getOptionDisabled)(item)
+                          })), () => [
+                            createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
+                          ])
+                        ]),
+                        _: 2
+                      }, 1040, ["onClickPassive"]);
+                    }), 128))
+                  ], 64)) : (openBlock(), createBlock(_sfc_main$9, mergeProps({ key: 1 }, {
+                    disabled: unref(getOptionDisabled)(option),
+                    selected: getOptionSelected(option),
+                    unselectable: _ctx.unselectable,
+                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                    selectHintLabel: unref(propsDefaults).selectHintLabel,
+                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                  }, {
+                    class: "vv-dropdown-option",
+                    onClickPassive: ($event) => onInput(option)
+                  }), {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                        option,
+                        selectedOptions: unref(selectedOptions),
+                        selected: getOptionSelected(option),
+                        disabled: unref(getOptionDisabled)(option)
+                      })), () => [
+                        createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1040, ["onClickPassive"]))
+                ], 64);
+              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$9, {
                 key: 1,
                 modifiers: "inert"
               }, {
@@ -3353,7 +3463,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              })) : (openBlock(), createBlock(_sfc_main$8, {
+              })) : (openBlock(), createBlock(_sfc_main$9, {
                 key: 2,
                 modifiers: "inert"
               }, {
@@ -3531,7 +3641,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     class: "vv-dialog__close",
                     onClickPassive: close
                   }, [
-                    createVNode(_sfc_main$h, { name: "close" })
+                    createVNode(_sfc_main$i, { name: "close" })
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
@@ -3743,7 +3853,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3787,7 +3897,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$h, {
+    const icon = h(_sfc_main$i, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -3806,7 +3916,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3851,7 +3961,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3880,7 +3990,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$h, {
+    const icon = h(_sfc_main$i, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -3901,7 +4011,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$h,
+      VvIcon: _sfc_main$i,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4155,8 +4265,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: props.count,
-      upperLimit: props.maxlength,
-      lowerLimit: props.minlength
+      upperLimit: Number(props.maxlength),
+      lowerLimit: Number(props.minlength)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -4309,7 +4419,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: "vv-input-text__inner",
             onClick: withModifiers(onClickInner, ["stop"])
           }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -4330,7 +4440,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true)
           ], 8, _hoisted_4$1),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
             key: 1,
             class: "vv-input-text__icon vv-input-text__icon-after"
           }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
@@ -4701,8 +4811,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: props.count,
-      upperLimit: props.maxlength,
-      lowerLimit: props.minlength
+      upperLimit: Number(props.maxlength),
+      lowerLimit: Number(props.minlength)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -4782,7 +4892,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
               key: 0,
               class: "vv-textarea__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -4796,7 +4906,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), null, 16, _hoisted_5), [
               [vModelText, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$h, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
               key: 1,
               class: "vv-textarea__icon vv-textarea__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -4819,19 +4929,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$l as VvAccordion,
-  _sfc_main$k as VvAccordionGroup,
-  _sfc_main$j as VvBadge,
-  _sfc_main$i as VvBreadcrumb,
-  _sfc_main$f as VvButton,
-  _sfc_main$e as VvButtonGroup,
-  _sfc_main$d as VvCard,
-  _sfc_main$c as VvCheckbox,
-  _sfc_main$b as VvCheckboxGroup,
+  _sfc_main$m as VvAccordion,
+  _sfc_main$l as VvAccordionGroup,
+  _sfc_main$k as VvBadge,
+  _sfc_main$j as VvBreadcrumb,
+  _sfc_main$g as VvButton,
+  _sfc_main$f as VvButtonGroup,
+  _sfc_main$e as VvCard,
+  _sfc_main$d as VvCheckbox,
+  _sfc_main$c as VvCheckboxGroup,
   _sfc_main$6 as VvCombobox,
   _sfc_main$5 as VvDialog,
-  _sfc_main$a as VvDropdown,
-  _sfc_main$h as VvIcon,
+  _sfc_main$b as VvDropdown,
+  _sfc_main$i as VvIcon,
   _sfc_main$4 as VvInputText,
   _sfc_main$3 as VvProgress,
   _sfc_main$2 as VvRadio,