@volverjs/ui-vue 0.0.5-beta.2 → 0.0.5-beta.4

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,
@@ -947,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;
@@ -973,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;
@@ -990,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", {
@@ -1125,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;
@@ -1226,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 }) {
@@ -1413,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"
 };
@@ -1421,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 }) {
@@ -1500,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,
@@ -1519,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),
@@ -1558,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 }) {
@@ -1620,7 +1620,7 @@ const VvCardProps = {
   title: String,
   modifiers: [String, Array]
 };
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "vv-card__header"
 };
@@ -1632,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;
@@ -1646,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)
           ])
@@ -1819,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 }) {
@@ -1965,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);
     };
   }
 });
@@ -1988,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 }) {
@@ -2045,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" })
@@ -2261,13 +2267,13 @@ 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, { expose, emit }) {
@@ -2576,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)]
@@ -2588,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);
@@ -2616,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,
@@ -2658,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,
@@ -2673,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,
@@ -2783,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"
 };
@@ -2875,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;
@@ -2887,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))
@@ -2900,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),
@@ -2917,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)
         ]),
@@ -3012,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,
@@ -3026,6 +3078,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       VvComboboxProps,
       props
     );
+    const isGroup = (option) => {
+      if (typeof option === "string") {
+        return false;
+      }
+      return option.options && option.options.length > 0;
+    };
     const { HintSlot } = HintSlotFactory(props, slots);
     const inputEl = ref(null);
     const inputSearchEl = ref(null);
@@ -3132,7 +3190,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) => {
@@ -3152,9 +3215,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       } else if (props.modelValue) {
         selectedValues = [props.modelValue];
       }
-      return props.options.filter(
-        (option) => selectedValues.includes(getOptionValue(option))
-      );
+      const options = props.options.reduce((acc, value) => {
+        if (isGroup(value)) {
+          return [...acc, ...getOptionGrouped(value)];
+        }
+        return [...acc, value];
+      }, []);
+      return options.filter((option) => {
+        if (isGroup(option)) {
+          return getOptionGrouped(option).some(
+            (item) => selectedValues.includes(getOptionValue(item))
+          );
+        }
+        return selectedValues.includes(getOptionValue(option));
+      });
     });
     const hasValue = computed(() => {
       return selectedOptions.value.map((option) => getOptionLabel(option)).join(props.separator);
@@ -3269,7 +3343,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), {
@@ -3280,7 +3354,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),
@@ -3299,7 +3373,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"
@@ -3311,7 +3385,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
@@ -3322,7 +3396,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)
@@ -3333,31 +3407,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"
               }, {
@@ -3367,7 +3474,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              })) : (openBlock(), createBlock(_sfc_main$8, {
+              })) : (openBlock(), createBlock(_sfc_main$9, {
                 key: 2,
                 modifiers: "inert"
               }, {
@@ -3545,7 +3652,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),
@@ -3757,7 +3864,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3801,7 +3908,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"
     });
@@ -3820,7 +3927,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3865,7 +3972,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$h
+    VvIcon: _sfc_main$i
   },
   props: {
     disabled: {
@@ -3894,7 +4001,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"
     });
@@ -3915,7 +4022,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$h,
+      VvIcon: _sfc_main$i,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4323,7 +4430,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),
@@ -4344,7 +4451,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), {
@@ -4796,7 +4903,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),
@@ -4810,7 +4917,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)
@@ -4833,19 +4940,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,