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

package/dist/components/index.es.js

@@ -1,5 +1,5 @@
 import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
-import { nanoid } from "nanoid";
+import { uid } from "uid";
 import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
@@ -165,6 +165,12 @@ const ActiveProps = {
    */
   active: Boolean
 };
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: Boolean
+};
 const PressedProps = {
   /**
    * Whether the item is pressed
@@ -480,6 +486,7 @@ const ActionProps = {
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -497,6 +504,12 @@ const ActionProps = {
     default: void 0
   }
 };
+const NavProps = {
+  items: {
+    type: Array,
+    default: () => []
+  }
+};
 function equals(obj1, obj2, field) {
   if (field) {
     return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
@@ -737,18 +750,18 @@ function useModifiers(prefix, modifiers, others) {
 const _hoisted_1$i = ["id", "open"];
 const _hoisted_2$d = ["aria-controls", "aria-expanded"];
 const _hoisted_3$7 = ["aria-hidden"];
-const __default__$n = {
+const __default__$o = {
   name: "VvAccordion"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
   setup(__props, { emit }) {
     const props = __props;
     const attrs = useAttrs();
     const accordionName = computed(
-      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
+      () => props.name || (attrs == null ? void 0 : attrs.id) || uid()
     );
     const {
       modifiers,
@@ -885,11 +898,11 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$m = {
+const __default__$n = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
   setup(__props, { emit }) {
@@ -956,7 +969,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$q, mergeProps({
+            return openBlock(), createBlock(_sfc_main$r, mergeProps({
               key: item.title
             }, {
               name: item.name,
@@ -991,11 +1004,11 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$l = {
+const __default__$m = {
   name: "VvAction"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: VvActionProps,
   emits: VvActionEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1086,7 +1099,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: {
           active: _ctx.active,
           pressed: unref(pressed),
-          disabled: _ctx.disabled
+          disabled: _ctx.disabled,
+          current: _ctx.current
         },
         onClickPassive: onClick,
         onMouseoverPassive: onMouseover,
@@ -1196,11 +1210,11 @@ const VvIconProps = {
     type: [String, Array]
   }
 };
-const __default__$k = {
+const __default__$l = {
   name: "VvIcon"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -1295,7 +1309,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 function useInjectedAlertGroup() {
   return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 const VvAlertProps = {
   ...IdProps,
   ...ModifiersProps,
@@ -1455,11 +1469,11 @@ const _hoisted_7$4 = {
   key: 2,
   class: "vv-alert__footer"
 };
-const __default__$j = {
+const __default__$k = {
   name: "VvAlert"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvAlertProps,
   emits: VvAlertEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1469,7 +1483,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
         _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
-          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
+          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "header", {}, () => [
             renderSlot(_ctx.$slots, "title::before"),
             _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
@@ -1515,11 +1529,11 @@ const VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
 };
-const __default__$i = {
+const __default__$j = {
   name: "VvBadge"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: VvBadgeProps,
   setup(__props) {
     const props = __props;
@@ -1543,11 +1557,11 @@ const VvBreadcrumbProps = {
 };
 const _hoisted_1$g = { class: "vv-breadcrumb__list" };
 const _hoisted_2$b = ["content"];
-const __default__$h = {
+const __default__$i = {
   name: "VvBreadcrumb"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: VvBreadcrumbProps,
   setup(__props) {
     const props = __props;
@@ -1708,11 +1722,11 @@ const _hoisted_2$a = {
   key: 1,
   class: "vv-button__label"
 };
-const __default__$g = {
+const __default__$h = {
   name: "VvButton"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   props: VvButtonProps,
   emits: VvButtonEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1790,7 +1804,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, mergeProps({
+      return openBlock(), createBlock(_sfc_main$p, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1810,7 +1824,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$n, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$o, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
@@ -1818,7 +1832,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
             ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
                 key: 0,
                 class: "vv-button__icon"
               }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
@@ -1855,11 +1869,11 @@ const VvButtonGroupProps = {
   }
 };
 const VvButtonGroupEvents = ["update:modelValue"];
-const __default__$f = {
+const __default__$g = {
   name: "VvButtonGroup"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
   setup(__props, { emit }) {
@@ -1929,11 +1943,11 @@ const _hoisted_3$5 = {
   key: 2,
   class: "vv-card__footer"
 };
-const __default__$e = {
+const __default__$f = {
   name: "VvCard"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
   props: VvCardProps,
   setup(__props) {
     const props = __props;
@@ -2182,11 +2196,11 @@ function useDefaults(componentName, propsDefinition, props) {
 }
 const _hoisted_1$d = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
-const __default__$d = {
+const __default__$e = {
   name: "VvCheckbox"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
   setup(__props, { emit }) {
@@ -2408,11 +2422,11 @@ function useOptions(props) {
 }
 const _hoisted_1$c = ["textContent"];
 const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
-const __default__$c = {
+const __default__$d = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
   setup(__props, { emit }) {
@@ -2464,7 +2478,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_1$c)) : 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$g, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            return openBlock(), createBlock(_sfc_main$h, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
         createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" }, createSlots({ _: 2 }, [
@@ -2727,12 +2741,12 @@ function useProvideDropdownAction({
   });
 }
 const _hoisted_1$b = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$b = {
+const __default__$c = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
@@ -3133,11 +3147,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$a = {
+const __default__$b = {
   name: "VvDropdownItem"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -3162,11 +3176,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$a = ["title"];
-const __default__$9 = {
+const __default__$a = {
   name: "VvDropdownOption"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -3203,7 +3217,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, {
+      return openBlock(), createBlock(_sfc_main$e, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -3230,11 +3244,11 @@ const _hoisted_1$9 = {
   role: "presentation",
   tabindex: "-1"
 };
-const __default__$8 = {
+const __default__$9 = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   props: {
     ...LabelProps
   },
@@ -3354,11 +3368,11 @@ const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$7 = {
+const __default__$8 = {
   name: "VvSelect"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: VvSelectProps,
   emits: VvSelectEmits,
   setup(__props, { emit }) {
@@ -3487,7 +3501,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4$4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3527,7 +3541,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ], 16, _hoisted_5$3), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3591,17 +3605,17 @@ const _hoisted_9 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$6 = {
+const __default__$7 = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$e,
-    VvDropdownOption: _sfc_main$c,
-    VvDropdownOptgroup: _sfc_main$b,
-    VvButton: _sfc_main$j
+    VvDropdown: _sfc_main$f,
+    VvDropdownOption: _sfc_main$d,
+    VvDropdownOptgroup: _sfc_main$c,
+    VvButton: _sfc_main$k
   }
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   props: VvComboboxProps,
   emits: VvComboboxEvents,
   setup(__props, { emit }) {
@@ -3802,7 +3816,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         if (!props.keepOpen) {
           collapse();
         }
-        if (props.unselectable && value === props.modelValue) {
+        if (Array.isArray(props.modelValue)) {
+          if (props.unselectable && props.modelValue.includes(value)) {
+            toReturn = [];
+          } else {
+            toReturn = [value];
+          }
+        } else if (props.unselectable && value === props.modelValue) {
           toReturn = void 0;
         }
       }
@@ -3884,7 +3904,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$e, mergeProps({
+          createVNode(_sfc_main$f, mergeProps({
             ref_key: "dropdownEl",
             ref: dropdownEl,
             modelValue: unref(expanded),
@@ -3899,7 +3919,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3919,7 +3939,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
                     unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                       !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$l, {
+                        return openBlock(), createBlock(_sfc_main$m, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
                           class: "vv-select__badge"
@@ -3932,7 +3952,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                               type: "button",
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$n, { name: "close" })
+                              createVNode(_sfc_main$o, { name: "close" })
                             ], 8, _hoisted_8$1)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -3943,7 +3963,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6$2),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3958,13 +3978,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
                   return openBlock(), createElementBlock(Fragment, { key: index }, [
                     isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createVNode(_sfc_main$b, {
+                      createVNode(_sfc_main$c, {
                         label: unref(getOptionLabel)(option)
                       }, null, 8, ["label"]),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
                         option
                       ), (item, i) => {
-                        return openBlock(), createBlock(_sfc_main$c, mergeProps({
+                        return openBlock(), createBlock(_sfc_main$d, mergeProps({
                           selected: isOptionSelected(item),
                           disabled: unref(isOptionDisabled)(item),
                           unselectable: _ctx.unselectable,
@@ -3989,7 +4009,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           _: 2
                         }, 1040, ["onClickPassive"]);
                       }), 128))
-                    ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
+                    ], 64)) : (openBlock(), createBlock(_sfc_main$d, mergeProps({ key: 1 }, {
                       selected: isOptionSelected(option),
                       disabled: unref(isOptionDisabled)(option),
                       unselectable: _ctx.unselectable,
@@ -4013,7 +4033,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1040, ["onClickPassive"]))
                   ], 64);
-                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
+                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 1,
                   modifiers: "inert"
                 }, {
@@ -4023,7 +4043,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   _: 3
-                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$c, {
+                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 2,
                   modifiers: "inert"
                 }, {
@@ -4040,7 +4060,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$j, {
+                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$k, {
                     key: 0,
                     label: unref(propsDefaults).closeLabel,
                     modifiers: "secondary",
@@ -4109,7 +4129,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$7)) : (openBlock(), createBlock(_sfc_main$a, mergeProps({ key: 1 }, unref(selectProps), {
+      ], 10, _hoisted_1$7)) : (openBlock(), createBlock(_sfc_main$b, mergeProps({ key: 1 }, unref(selectProps), {
         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
       }), null, 16));
     };
@@ -4164,11 +4184,11 @@ const _hoisted_4$2 = {
   key: 1,
   class: "vv-dialog__footer"
 };
-const __default__$5 = {
+const __default__$6 = {
   name: "VvDialog"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   props: VvDialogProps,
   emits: VvDialogEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -4276,7 +4296,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                     class: "vv-dialog__close",
                     onClickPassive: close
                   }, [
-                    createVNode(_sfc_main$n, { name: "close" })
+                    createVNode(_sfc_main$o, { name: "close" })
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
@@ -4486,7 +4506,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$o
   },
   props: {
     disabled: {
@@ -4530,7 +4550,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$n, {
+    const icon = h(_sfc_main$o, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -4549,7 +4569,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$o
   },
   props: {
     disabled: {
@@ -4594,7 +4614,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$o
   },
   props: {
     disabled: {
@@ -4623,7 +4643,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$n, {
+    const icon = h(_sfc_main$o, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -4644,7 +4664,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$n,
+      VvIcon: _sfc_main$o,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4791,11 +4811,11 @@ const _hoisted_8 = {
   key: 6,
   class: "vv-input-text__limit"
 };
-const __default__$4 = {
+const __default__$5 = {
   name: "VvInputText"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -5154,7 +5174,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             class: "vv-input-text__inner",
             onClick: withModifiers(onClickInner, ["stop"])
           }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -5174,7 +5194,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true)
           ], 8, _hoisted_4$1),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$o, 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), {
@@ -5236,73 +5256,72 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 });
 const VvNavProps = {
   ...ModifiersProps,
-  items: {
-    type: Array,
-    required: true,
-    default: () => []
-  }
+  ...NavProps
 };
 const VvNavEvents = ["click"];
 const _hoisted_1$4 = {
-  class: "vv-nav__menu",
-  role: "menu",
-  "aria-busy": "true"
+  class: "vv-nav__item",
+  role: "presentation"
+};
+const __default__$4 = {
+  name: "VvNavItem",
+  inheritAttrs: false
 };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$4, [
+        createVNode(_sfc_main$p, mergeProps(_ctx.$attrs, { class: "vv-nav__item-label" }), {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 16)
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = ["onClick"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VvNav",
   props: VvNavProps,
   emits: VvNavEvents,
   setup(__props, { emit }) {
     const props = __props;
-    const { modifiers, items } = toRefs(props);
-    const activeItem = ref(null);
-    const bemCssClasses = useModifiers("vv-nav", modifiers);
-    const localItems = computed(() => {
-      return items.value.map((item, index) => {
-        return {
-          ...item,
-          id: item.id || `nav-item_${index}`
-        };
-      });
-    });
-    function onClick(item) {
-      if (!item.disabled) {
+    const { modifiers } = toRefs(props);
+    const onClick = (event) => {
+      var _a;
+      const target = event.target;
+      if (target == null ? void 0 : target.dataset.index) {
+        const index = parseInt(target.dataset.index);
+        const item = (_a = props.items) == null ? void 0 : _a[index];
+        if (!item || (item == null ? void 0 : item.disabled)) {
+          return;
+        }
         emit("click", item);
-        activeItem.value = item.id;
       }
-    }
+    };
+    const bemCssClasses = useModifiers("vv-nav", modifiers);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", {
         class: normalizeClass(unref(bemCssClasses))
       }, [
-        createElementVNode("ul", _hoisted_1$4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (navItem) => {
-            return openBlock(), createElementBlock("li", {
-              key: navItem.id,
-              class: "vv-nav__item",
-              role: "presentation"
-            }, [
-              createVNode(_sfc_main$o, mergeProps({
-                disabled: navItem.disabled,
-                to: navItem.to,
-                href: navItem.href,
-                tabindex: 0
-              }, {
-                class: [{
-                  current: unref(activeItem) == navItem.id,
-                  disabled: navItem.disabled
-                }, "vv-nav__item-label"]
-              }, toHandlers(navItem.on), {
-                onClick: ($event) => onClick(navItem)
-              }), {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(navItem.title), 1)
-                ]),
-                _: 2
-              }, 1040, ["class", "onClick"])
-            ]);
-          }), 128))
-        ])
+        createElementVNode("ul", {
+          class: "vv-nav__menu",
+          role: "menu",
+          "aria-busy": "true",
+          onClick: withModifiers(onClick, ["stop"])
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, ({ on = {}, ...item }, index) => {
+              return openBlock(), createBlock(_sfc_main$7, mergeProps({
+                key: index,
+                "data-index": index
+              }, item, toHandlers(on)), null, 16, ["data-index"]);
+            }), 128))
+          ])
+        ], 8, _hoisted_1$3)
       ], 2);
     };
   }
@@ -5396,7 +5415,7 @@ function useGroupProps(props, emit) {
     disabled
   };
 }
-const _hoisted_1$3 = ["for"];
+const _hoisted_1$2 = ["for"];
 const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$2 = {
   name: "VvRadio"
@@ -5522,13 +5541,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$2);
     };
   }
 });
 const VvRadioGroupProps = CheckboxRadioGroupProps;
 const VvRadioGroupEvents = ["update:modelValue", "change"];
-const _hoisted_1$2 = ["textContent"];
+const _hoisted_1$1 = ["textContent"];
 const _hoisted_2$1 = { class: "vv-radio-group__wrapper" };
 const __default__$1 = {
   name: "VvRadioGroup"
@@ -5583,7 +5602,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$2)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$1, [
           _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
             return openBlock(), createBlock(_sfc_main$4, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
@@ -5625,14 +5644,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const VvTabProps = {
   ...ModifiersProps,
+  navModifiers: {
+    type: [String, Array]
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
   items: {
     type: Array,
-    required: true,
     default: () => []
   }
 };
-const VvTabEvents = ["click"];
-const _hoisted_1$1 = ["id"];
+const VvTabEvents = ["update:modelValue"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "VvTab",
   props: VvTabProps,
@@ -5640,39 +5664,61 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const { modifiers, items } = toRefs(props);
-    const activeTab = ref(null);
-    const bemCssClasses = useModifiers("vv-tab", modifiers);
-    const localItems = computed(() => {
-      return items.value.map((item, index) => {
-        return {
-          ...item,
-          id: item.id || `tab-item_${index}`
-        };
-      });
+    const tabKeys = computed(() => {
+      return items.value.reduce((acc, item) => {
+        if (item.tab) {
+          acc.push(item.tab);
+        }
+        return acc;
+      }, []);
     });
-    function onClick(item) {
-      if (!item.disabled) {
-        emit("click", item);
-        activeTab.value = item.id;
+    const localModelValue = ref();
+    const activeTabKey = computed({
+      get: () => {
+        var _a;
+        return props.modelValue || localModelValue.value || ((_a = tabKeys.value) == null ? void 0 : _a[0]);
+      },
+      set: (newValue) => {
+        localModelValue.value = newValue;
+        emit("update:modelValue", newValue);
       }
-    }
+    });
+    const hasNavModifiers = computed(() => {
+      var _a;
+      return [
+        "tabs",
+        ...Array.isArray(props.navModifiers) ? props.navModifiers : ((_a = props.navModifiers) == null ? void 0 : _a.split(" ")) ?? []
+      ];
+    });
+    const onNavClick = (item) => {
+      if (item.tab) {
+        activeTabKey.value = item.tab;
+      }
+    };
+    const navItems = computed(
+      () => props.items.map((item) => ({
+        current: item.tab === activeTabKey.value,
+        ...item
+      }))
+    );
+    const bemCssClasses = useModifiers("vv-tab", modifiers);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
       }, [
-        createVNode(_sfc_main$6, {
-          items: unref(localItems),
-          modifiers: "tabs full",
-          onClick
-        }, null, 8, ["items"]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (item) => {
-          return openBlock(), createElementBlock("article", {
-            id: item.id,
-            key: item.id,
-            class: normalizeClass([{ target: unref(activeTab) === item.id }, "vv-tab__panel"])
-          }, [
-            renderSlot(_ctx.$slots, `${item.id}`)
-          ], 10, _hoisted_1$1);
+        createVNode(_sfc_main$6, mergeProps({
+          items: unref(navItems),
+          modifiers: unref(hasNavModifiers)
+        }, { onClick: onNavClick }), null, 16),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item, index) => {
+          return openBlock(), createElementBlock(Fragment, { key: index }, [
+            item.tab ? (openBlock(), createElementBlock("article", {
+              key: 0,
+              class: normalizeClass([{ target: unref(activeTabKey) === item.tab }, "vv-tab__panel"])
+            }, [
+              renderSlot(_ctx.$slots, `panel::${item.tab}`)
+            ], 2)) : createCommentVNode("", true)
+          ], 64);
         }), 128))
       ], 2);
     };
@@ -5872,7 +5918,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 0,
               class: "vv-textarea__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -5886,7 +5932,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }), null, 16, _hoisted_5), [
               [vModelText, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 1,
               class: "vv-textarea__icon vv-textarea__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -5978,27 +6024,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$q as VvAccordion,
-  _sfc_main$p as VvAccordionGroup,
-  _sfc_main$o as VvAction,
-  _sfc_main$m as VvAlert,
-  _sfc_main$l as VvBadge,
-  _sfc_main$k as VvBreadcrumb,
-  _sfc_main$j as VvButton,
-  _sfc_main$i as VvButtonGroup,
-  _sfc_main$h as VvCard,
-  _sfc_main$g as VvCheckbox,
-  _sfc_main$f as VvCheckboxGroup,
-  _sfc_main$9 as VvCombobox,
-  _sfc_main$8 as VvDialog,
-  _sfc_main$e as VvDropdown,
-  _sfc_main$n as VvIcon,
-  _sfc_main$7 as VvInputText,
+  _sfc_main$r as VvAccordion,
+  _sfc_main$q as VvAccordionGroup,
+  _sfc_main$p as VvAction,
+  _sfc_main$n as VvAlert,
+  _sfc_main$m as VvBadge,
+  _sfc_main$l as VvBreadcrumb,
+  _sfc_main$k as VvButton,
+  _sfc_main$j as VvButtonGroup,
+  _sfc_main$i as VvCard,
+  _sfc_main$h as VvCheckbox,
+  _sfc_main$g as VvCheckboxGroup,
+  _sfc_main$a as VvCombobox,
+  _sfc_main$9 as VvDialog,
+  _sfc_main$f as VvDropdown,
+  _sfc_main$o as VvIcon,
+  _sfc_main$8 as VvInputText,
   _sfc_main$6 as VvNav,
   _sfc_main$5 as VvProgress,
   _sfc_main$4 as VvRadio,
   _sfc_main$3 as VvRadioGroup,
-  _sfc_main$a as VvSelect,
+  _sfc_main$b as VvSelect,
   _sfc_main$2 as VvTab,
   _sfc_main$1 as VvTextarea,
   _sfc_main as VvTooltip