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

package/dist/components/VvBadge/VvBadge.es.js

@@ -1,4 +1,4 @@
-import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -33,6 +33,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   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";
@@ -57,6 +64,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -71,38 +79,65 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
+};
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -133,7 +168,8 @@ const ModifiersProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -201,7 +237,8 @@ const ModifiersProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 ({
@@ -209,6 +246,7 @@ const ModifiersProps = {
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -224,6 +262,13 @@ const ModifiersProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
 const VvBadgeProps = {
@@ -264,14 +309,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-badge", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "status"
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          role: "status"
+        },
+        [
+          createCommentVNode(" @slot Default slot "),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });

package/dist/components/VvBadge/VvBadge.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue")):"function"==typeof define&&define.amd?define(["vue"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvBadge=o(e.vue)}(this,(function(e){"use strict";var o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),t=(e=>(e.before="before",e.after="after",e))(t||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{});Boolean,Boolean,Boolean;const r={modifiers:[String,Array]};t.before,o.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button;const l={...r,value:[String,Number]};return e.defineComponent({name:"VvBadge",props:l,setup(o){const t=o,{modifiers:n}=e.toRefs(t),r=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-badge",n);return(o,t)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(r)),role:"status"},[e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value),1)]))],2))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue")):"function"==typeof define&&define.amd?define(["vue"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvBadge=o(e.vue)}(this,(function(e){"use strict";var o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),t=(e=>(e.before="before",e.after="after",e))(t||{}),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||{});Boolean,Boolean,Boolean,Boolean;const l={modifiers:{type:[String,Array],default:void 0}};t.before,o.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button,r.button;const a={...l,value:[String,Number]};return e.defineComponent({name:"VvBadge",props:a,setup(o){const t=o,{modifiers:n}=e.toRefs(t),r=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-badge",n);return(o,t)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(r)),role:"status"},[e.createCommentVNode(" @slot Default slot "),e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value),1)]))],2))}})}));

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

@@ -1,10 +1,18 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: (StringConstructor | NumberConstructor)[];
-    modifiers: globalThis.PropType<string | string[]>;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     value: (StringConstructor | NumberConstructor)[];
-    modifiers: globalThis.PropType<string | string[]>;
-}>>, {}, {}>, {
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
+}>>, {
+    modifiers: string | string[];
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -1,4 +1,7 @@
 export declare const VvBadgeProps: {
     value: (StringConstructor | NumberConstructor)[];
-    modifiers: globalThis.PropType<string | string[]>;
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
 };

package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js

@@ -1,4 +1,4 @@
-import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+import { computed, unref, inject, defineComponent, ref, watch, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createCommentVNode, renderSlot, createTextVNode, toDisplayString, toRefs, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode, normalizeProps, guardReactiveProps } from "vue";
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
     const toReturn = {
@@ -56,6 +56,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   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";
@@ -63,6 +70,13 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   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.
@@ -80,6 +94,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -94,38 +109,65 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
+};
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -156,7 +198,8 @@ const ModifiersProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -224,14 +267,16 @@ const ModifiersProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
-({
+const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -247,12 +292,151 @@ const ModifiersProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
-});
+};
 const VvBreadcrumbProps = {
   ...ModifiersProps,
   routes: Array
 };
+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__$1 = {
+  name: "VvAction"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    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 props.defaultTag;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
+        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
+          };
+        case ActionTag.button:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+        default:
+          return toReturn;
+      }
+    });
+    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,
+          current: _ctx.current
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          createCommentVNode(" @slot Default slot "),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
 const _hoisted_1 = { class: "vv-breadcrumb__list" };
 const _hoisted_2 = ["content"];
 const __default__ = {
@@ -265,46 +449,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
+    const length = computed(() => {
+      var _a;
+      return ((_a = props.routes) == null ? void 0 : _a.length) ?? 0;
+    });
+    const isLast = (index) => index === length.value - 1;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(unref(bemCssClasses)),
-        "aria-label": "breadcrumbs"
-      }, [
-        createElementVNode("ol", _hoisted_1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
-            var _a, _b, _c, _d;
-            return openBlock(), createElementBlock("li", {
-              key: `${route.label}-${index}`,
-              class: normalizeClass({
-                "vv-breadcrumb__item": index < Number((_a = _ctx.routes) == null ? void 0 : _a.length) - 1,
-                "vv-breadcrumb__item-active": index === Number((_b = _ctx.routes) == null ? void 0 : _b.length) - 1
+      return openBlock(), createElementBlock(
+        "nav",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          "aria-label": "breadcrumbs"
+        },
+        [
+          createElementVNode("ol", _hoisted_1, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.routes, ({ label, ...route }, index) => {
+                return openBlock(), createElementBlock(
+                  "li",
+                  {
+                    key: `${label}-${index}`,
+                    class: normalizeClass(
+                      !isLast(index) ? "vv-breadcrumb__item" : "vv-breadcrumb__item-active"
+                    ),
+                    itemprop: "itemListElement",
+                    itemtype: "https://schema.org/ListItem",
+                    itemscope: ""
+                  },
+                  [
+                    createVNode(_sfc_main$1, mergeProps(route, {
+                      class: !isLast(index) ? "vv-breadcrumb__link" : "vv-breadcrumb__label",
+                      "aria-current": isLast(index) ? "page" : void 0,
+                      itemprop: "item",
+                      "default-tag": "span"
+                    }), {
+                      default: withCtx(() => [
+                        createCommentVNode(" @slot Slot for label "),
+                        renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
+                          createTextVNode(
+                            toDisplayString(label),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1040, ["class", "aria-current"]),
+                    createElementVNode("meta", {
+                      itemprop: "position",
+                      content: `${index + 1}`
+                    }, null, 8, _hoisted_2)
+                  ],
+                  2
+                  /* CLASS */
+                );
               }),
-              itemprop: "itemListElement",
-              itemtype: "https://schema.org/ListItem",
-              itemscope: ""
-            }, [
-              (openBlock(), createBlock(resolveDynamicComponent(route.to ? "router-link" : route.href ? "a" : "span"), mergeProps(route, {
-                class: {
-                  "vv-breadcrumb__link": index < Number((_c = _ctx.routes) == null ? void 0 : _c.length) - 1
-                },
-                "aria-current": index === Number((_d = _ctx.routes) == null ? void 0 : _d.length) - 1 ? "page" : void 0,
-                itemprop: "item"
-              }), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
-                    createTextVNode(toDisplayString(route.label), 1)
-                  ])
-                ]),
-                _: 2
-              }, 1040, ["class", "aria-current"])),
-              createElementVNode("meta", {
-                itemprop: "position",
-                content: `${index + 1}`
-              }, null, 8, _hoisted_2)
-            ], 2);
-          }), 128))
-        ])
-      ], 2);
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });

package/dist/components/VvBreadcrumb/VvBreadcrumb.umd.js

@@ -1 +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).VvBreadcrumb=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||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{});Boolean,Boolean,Boolean;const n={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,r.button;const l={...n,routes:Array},a={class:"vv-breadcrumb__list"},i=["content"];return e.defineComponent({name:"VvBreadcrumb",props:l,setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[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&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-breadcrumb",r);return(t,o)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(n)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,((o,r)=>{var n,l,a,u;return e.openBlock(),e.createElementBlock("li",{key:`${o.label}-${r}`,class:e.normalizeClass({"vv-breadcrumb__item":r<Number(null==(n=t.routes)?void 0:n.length)-1,"vv-breadcrumb__item-active":r===Number(null==(l=t.routes)?void 0:l.length)-1}),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.to?"router-link":o.href?"a":"span"),e.mergeProps(o,{class:{"vv-breadcrumb__link":r<Number(null==(a=t.routes)?void 0:a.length)-1},"aria-current":r===Number(null==(u=t.routes)?void 0:u.length)-1?"page":void 0,itemprop:"item"}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:o,index:r})),(()=>[e.createTextVNode(e.toDisplayString(o.label),1)]))])),_:2},1040,["class","aria-current"])),e.createElementVNode("meta",{itemprop:"position",content:`${r+1}`},null,8,i)],2)})),128))])],2))}})}));
+!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).VvBreadcrumb=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||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),o=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(o||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{}),l=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(l||{});const n=Symbol.for("volver"),u=Symbol.for("dropdownTrigger"),i=Symbol.for("dropdownAction"),s={to:{type:[String,Object]},href:String,target:{type:String,default:void 0,validator:e=>Object.values(l).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:{type:Boolean,default:!1}},c={active:{type:Boolean,default:!1}},m={current:{type:Boolean,default:!1}},p={pressed:{type:Boolean,default:!1}},v={label:{type:[String,Number],default:void 0}},f={modifiers:{type:[String,Array],default:void 0}};r.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const b={...d,...v,...p,...c,...m,...s,type:{type:String,default:o.button,validator:e=>Object.values(o).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:a.button}},y={...f,routes:Array},g=b;const k=e.defineComponent({name:"VvAction",props:g,emits:["click","mouseover","mouseleave"],setup(t,{expose:r,emit:o}){const l=t,s=o,d=e.inject(n),c=e.ref(null);r({$el:c});const{reference:m,bus:p,aria:v,expanded:f}=e.inject(u,{});e.watch((()=>c.value),(e=>{m&&(m.value=e)}));const b=e.computed((()=>l.pressed||(null==f?void 0:f.value))),{role:y}=e.inject(i,{}),g=e.computed((()=>{switch(!0){case l.disabled:return a.button;case void 0!==l.to:return(null==d?void 0:d.nuxt)?a.nuxtLink:a.routerLink;case void 0!==l.href:return a.a;default:return l.defaultTag}})),k=e.computed((()=>{const e={...null==v?void 0:v.value,ariaPressed:!!b.value||void 0,ariaLabel:l.ariaLabel,role:null==y?void 0:y.value};switch(g.value){case a.a:return{...e,href:l.href,target:l.target,rel:l.rel};case a.routerLink:case a.nuxtLink:return{...e,to:l.to,target:l.target};case a.button:return{...e,type:l.type,disabled:l.disabled};default:return e}})),B=e=>{l.disabled?e.preventDefault():(null==p||p.emit("click",e),s("click",e))},_=e=>{null==p||p.emit("mouseover",e),s("mouseover",e)},h=e=>{null==p||p.emit("mouseleave",e),s("mouseleave",e)};return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(k),{ref_key:"element",ref:c,class:{active:t.active,pressed:e.unref(b),disabled:t.disabled,current:t.current},onClickPassive:B,onMouseoverPassive:_,onMouseleavePassive:h}),{default:e.withCtx((()=>[e.createCommentVNode(" @slot Default slot "),e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}}),B={class:"vv-breadcrumb__list"},_=["content"];return e.defineComponent({name:"VvBreadcrumb",props:y,setup(t){const r=t,{modifiers:o}=e.toRefs(r),a=function(t,r,o){return e.computed((()=>{const a={[t]:!0},l="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(a[`${t}--${e}`]=!0)})),o&&Object.keys(o.value).forEach((r=>{a[`${t}--${r}`]=e.unref(o.value[r])})),a}))}("vv-breadcrumb",o),l=e.computed((()=>{var e;return(null==(e=r.routes)?void 0:e.length)??0})),n=e=>e===l.value-1;return(t,r)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(a)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,(({label:r,...o},a)=>(e.openBlock(),e.createElementBlock("li",{key:`${r}-${a}`,class:e.normalizeClass(n(a)?"vv-breadcrumb__item-active":"vv-breadcrumb__item"),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[e.createVNode(k,e.mergeProps(o,{class:n(a)?"vv-breadcrumb__label":"vv-breadcrumb__link","aria-current":n(a)?"page":void 0,itemprop:"item","default-tag":"span"}),{default:e.withCtx((()=>[e.createCommentVNode(" @slot Slot for label "),e.renderSlot(t.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:o,index:a})),(()=>[e.createTextVNode(e.toDisplayString(r),1)]))])),_:2},1040,["class","aria-current"]),e.createElementVNode("meta",{itemprop:"position",content:`${a+1}`},null,8,_)],2)))),128))])],2))}})}));

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

@@ -1,12 +1,32 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    routes: globalThis.PropType<import(".").Route[]>;
-    modifiers: globalThis.PropType<string | string[]>;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    routes: globalThis.PropType<import(".").Route[]>;
-    modifiers: globalThis.PropType<string | string[]>;
-}>>, {}, {}>, {
+    routes: globalThis.PropType<import("../..").NavItem[]>;
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    routes: globalThis.PropType<import("../..").NavItem[]>;
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
+}>>, {
+    modifiers: string | string[];
+}, {}>, {
     label?(_: {
-        route: import(".").Route;
+        route: {
+            ariaLabel?: string | undefined;
+            title?: string | undefined;
+            to?: string | Record<string, unknown> | undefined;
+            href?: string | undefined;
+            target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+            rel?: string | undefined;
+            disabled?: boolean | undefined;
+            current?: boolean | undefined;
+            class?: string | string[] | undefined;
+            on?: Record<string, () => void> | undefined;
+            data?: Record<string, unknown> | undefined;
+        };
         index: number;
     }): any;
 }>;