@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/dist/components/VvInputText/VvInputText.vue.d.ts

@@ -5,8 +5,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: "text";
         validator: (value: import("../VvInputText").InputType) => boolean;
     };
-    min: (StringConstructor | DateConstructor | NumberConstructor)[];
-    max: (StringConstructor | DateConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor | DateConstructor)[];
+    max: (StringConstructor | NumberConstructor | DateConstructor)[];
     step: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -83,7 +83,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: (StringConstructor | NumberConstructor)[];
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -107,9 +107,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     tabindex: {
@@ -135,8 +135,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: "text";
         validator: (value: import("../VvInputText").InputType) => boolean;
     };
-    min: (StringConstructor | DateConstructor | NumberConstructor)[];
-    max: (StringConstructor | DateConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor | DateConstructor)[];
+    max: (StringConstructor | NumberConstructor | DateConstructor)[];
     step: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -213,7 +213,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: (StringConstructor | NumberConstructor)[];
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -237,9 +237,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     tabindex: {
@@ -260,11 +260,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    floating: boolean;
     type: import("../VvInputText").InputType;
     mask: string;
-    floating: boolean;
+    tabindex: string | number;
     required: boolean;
     iconPosition: "before" | "after";
+    autofocus: boolean;
     loading: boolean;
     loadingLabel: string;
     multiple: boolean;
@@ -272,9 +274,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     hintLabel: string;
     invalid: boolean;
     valid: boolean;
-    tabindex: string | number;
     autocomplete: string;
-    autofocus: boolean;
     step: string | number;
     iconShowPassword: string;
     iconHidePassword: string;
@@ -291,8 +291,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     autoWidth: boolean;
     hideActions: boolean;
     count: string | boolean;
-}>, {
-    before: (_: {
+}, {}>, {
+    before?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | undefined;
@@ -300,8 +300,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         stepUp: () => void;
         stepDown: () => void;
         clear: () => void;
-    }) => any;
-    default: (_: {
+    }): any;
+    default?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | undefined;
@@ -309,8 +309,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         stepUp: () => void;
         stepDown: () => void;
         clear: () => void;
-    }) => any;
-    after: (_: {
+    }): any;
+    after?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | undefined;
@@ -318,8 +318,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         stepUp: () => void;
         stepDown: () => void;
         clear: () => void;
-    }) => any;
-    count: (_: {
+    }): any;
+    count?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | undefined;
@@ -327,7 +327,31 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         stepUp: () => void;
         stepDown: () => void;
         clear: () => void;
-    }) => any;
+    }): any;
+    hint?(_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }): any;
+    loading?(_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }): any;
+    valid?(_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }): any;
+    invalid?(_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/VvInputText/index.d.ts

@@ -45,13 +45,13 @@ export declare const VvInputTextProps: {
      * Available for input types: date, month, week, time, datetime-local, number, range.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
      */
-    min: (StringConstructor | DateConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor | DateConstructor)[];
     /**
      * Maximum value
      * Available for input types: date, month, week, time, datetime-local, number, range.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
      */
-    max: (StringConstructor | DateConstructor | NumberConstructor)[];
+    max: (StringConstructor | NumberConstructor | DateConstructor)[];
     /**
      * Incremental values that are valid
      * Available for input types: date, month, week, time, datetime-local and number
@@ -199,7 +199,7 @@ export declare const VvInputTextProps: {
     label: (StringConstructor | NumberConstructor)[];
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: PropType<"before" | "after">;
@@ -223,9 +223,9 @@ export declare const VvInputTextProps: {
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     tabindex: {

package/dist/components/VvNav/VvNav.es.js

@@ -0,0 +1,454 @@
+import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, toRefs, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode, toHandlers } from "vue";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      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
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+};
+const VvNavProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvNavEvents = ["click"];
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__ = {
+  name: "VvAction"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return ActionTag.button;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        "aria-pressed": pressed.value ? true : void 0,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        default:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const _hoisted_1 = {
+  class: "vv-nav__menu",
+  role: "menu",
+  "aria-busy": "true"
+};
+const _sfc_main = /* @__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) {
+        emit("click", item);
+        activeItem.value = item.id;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        createElementVNode("ul", _hoisted_1, [
+          (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$1, 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))
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/VvNav/VvNav.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvNav=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),r=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(r||{}),l=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(l||{});const a=Symbol.for("volver"),i=Symbol.for("dropdownTrigger"),s=Symbol.for("dropdownAction"),u={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(l).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},v={pressed:Boolean},f={label:[String,Number]},p={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const m={...d,...f,...v,...c,...u,type:{type:String,default:n.button,validator:e=>Object.values(n).includes(e)}},b={...p,items:{type:Array,required:!0,default:()=>[]}},k=m;const y=e.defineComponent({name:"VvAction",props:k,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:n}){const l=t,u=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:v,aria:f,expanded:p}=e.inject(i,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const m=e.computed((()=>l.pressed||(null==p?void 0:p.value))),{role:b}=e.inject(s,{}),k=e.computed((()=>{switch(!0){case l.disabled:return r.button;case void 0!==l.to:return(null==u?void 0:u.nuxt)?r.nuxtLink:r.routerLink;case void 0!==l.href:return r.a;default:return r.button}})),y=e.computed((()=>{const e={...null==f?void 0:f.value,"aria-pressed":!!m.value||void 0,role:null==b?void 0:b.value};switch(k.value){case r.a:return{...e,href:l.href,target:l.target,rel:l.rel};case r.routerLink:case r.nuxtLink:return{...e,to:l.to,target:l.target};default:return{...e,type:l.type,disabled:l.disabled}}})),g=e=>{l.disabled?e.preventDefault():(null==v||v.emit("click",e),n("click",e))},_=e=>{null==v||v.emit("mouseover",e),n("mouseover",e)},B=e=>{null==v||v.emit("mouseleave",e),n("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(y),{ref_key:"element",ref:d,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:g,onMouseoverPassive:_,onMouseleavePassive:B}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const g={class:"vv-nav__menu",role:"menu","aria-busy":"true"};return e.defineComponent({__name:"VvNav",props:b,emits:["click"],setup(t,{emit:o}){const n=t,{modifiers:r,items:l}=e.toRefs(n),a=e.ref(null),i=function(t,o,n){return e.computed((()=>{const r={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{r[`${t}--${o}`]=e.unref(n.value[o])})),r}))}("vv-nav",r),s=e.computed((()=>l.value.map(((e,t)=>({...e,id:e.id||`nav-item_${t}`})))));return(t,n)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i))},[e.createElementVNode("ul",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(t=>(e.openBlock(),e.createElementBlock("li",{key:t.id,class:"vv-nav__item",role:"presentation"},[e.createVNode(y,e.mergeProps({disabled:t.disabled,to:t.to,href:t.href,tabindex:0},{class:[{current:e.unref(a)==t.id,disabled:t.disabled},"vv-nav__item-label"]},e.toHandlers(t.on||{}),{onClick:e=>{var n;(n=t).disabled||(o("click",n),a.value=n.id)}}),{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.title),1)])),_:2},1040,["class","onClick"])])))),128))])],2))}})}));

package/dist/components/VvNav/VvNav.vue.d.ts

@@ -0,0 +1,21 @@
+import { type NavItem } from '@/components/VvNav';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: globalThis.PropType<NavItem[]>;
+        required: boolean;
+        default: () => never[];
+    };
+    modifiers: globalThis.PropType<string | string[]>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: globalThis.PropType<NavItem[]>;
+        required: boolean;
+        default: () => never[];
+    };
+    modifiers: globalThis.PropType<string | string[]>;
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    items: NavItem[];
+}, {}>;
+export default _default;