@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.71

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

@@ -1,32 +1,9 @@
-import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
-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;
-  });
-}
-var Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
+import { computed, inject, defineComponent, getCurrentInstance, ref, watch, resolveComponent, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, toRefs, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode } from "vue";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -34,17 +11,6 @@ var Side = /* @__PURE__ */ ((Side2) => {
   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";
@@ -56,13 +22,20 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+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.
@@ -78,10 +51,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -94,51 +64,62 @@ 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: Boolean
+  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] },
   /**
    * VvIcon position
    */
   iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
+    default: Position.before
   }
 });
 ({
@@ -146,94 +127,10 @@ const ModifiersProps = {
    * Dropdown placement
    */
   placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
-  /**
-   * Dropdown strategy
-   */
-  strategy: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).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
+    default: Side.bottom
   }
 });
-({
+const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
@@ -254,12 +151,186 @@ const ModifiersProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+};
+({
+  storageType: {
+    default: StorageType.local
   }
 });
 const VvBreadcrumbProps = {
   ...ModifiersProps,
   routes: Array
 };
+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;
+          }
+        });
+      }
+    }
+    return toReturn;
+  });
+}
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER, void 0);
+}
+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 instance = getCurrentInstance();
+    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) ? resolveComponent(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;
+      }
+    });
+    function onClick(e) {
+      var _a;
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
+        emit("click", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+    }
+    function onMouseover(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
+        emit("mouseover", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+    }
+    function onMouseleave(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
+        emit("mouseleave", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.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(() => [
+          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__ = {
@@ -272,46 +343,71 @@ 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({ ref_for: true }, route, {
+                      class: !isLast(index) ? "vv-breadcrumb__link" : "vv-breadcrumb__label",
+                      "aria-current": isLast(index) ? "page" : void 0,
+                      itemprop: "item",
+                      "default-tag": "span"
+                    }), {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, { ...route, index, label, isLast: isLast(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,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).VvBreadcrumb=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||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{});Boolean,Boolean,Boolean,Boolean;const n={modifiers:[String,Array]};t.before,o.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(o){const t=o,{modifiers:r}=e.toRefs(t),n=function(o,t,r){return e.computed((()=>{const n={[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&&(n[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{n[`${o}--${t}`]=e.unref(r.value[t])})),n}))}("vv-breadcrumb",r);return(o,t)=>(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(o.routes,((t,r)=>{var n,l,a,u;return e.openBlock(),e.createElementBlock("li",{key:`${t.label}-${r}`,class:e.normalizeClass({"vv-breadcrumb__item":r<Number(null==(n=o.routes)?void 0:n.length)-1,"vv-breadcrumb__item-active":r===Number(null==(l=o.routes)?void 0:l.length)-1}),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.to?"router-link":t.href?"a":"span"),e.mergeProps(t,{class:{"vv-breadcrumb__link":r<Number(null==(a=o.routes)?void 0:a.length)-1},"aria-current":r===Number(null==(u=o.routes)?void 0:u.length)-1?"page":void 0,itemprop:"item"}),{default:e.withCtx((()=>[e.renderSlot(o.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:t,index:r})),(()=>[e.createTextVNode(e.toDisplayString(t.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.local="local",e.session="session",e))(t||{}),r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),l=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(l||{});const a=Symbol.for("volver"),u=Symbol.for("dropdownTrigger"),i=Symbol.for("dropdownAction"),s={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},d={disabled:{type:Boolean,default:!1}},c={active:{type:Boolean,default:!1}},v={current:{type:Boolean,default:!1}},p={pressed:{type:Boolean,default:!1}},m={label:{type:[String,Number],default:void 0}},f={modifiers:{type:[String,Array],default:void 0}};o.before,r.bottom;const b={...d,...m,...p,...c,...v,...s,type:{type:String,default:n.button,validator:e=>Object.values(n).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:l.button}};t.local;const g={...f,routes:Array};const y=b;const k=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:r,emit:o}){const n=t,s=o,d=e.getCurrentInstance(),c=e.inject(a,void 0),v=e.ref(null);r({$el:v});const{reference:p,bus:m,aria:f,expanded:b}=e.inject(u,{});e.watch((()=>v.value),(e=>{p&&(p.value=e)}));const g=e.computed((()=>n.pressed||(null==b?void 0:b.value))),{role:y}=e.inject(i,{}),k=e.computed((()=>{switch(!0){case n.disabled:return l.button;case void 0!==n.to:return(null==c?void 0:c.nuxt)?e.resolveComponent(l.nuxtLink):l.routerLink;case void 0!==n.href:return l.a;default:return n.defaultTag}})),h=e.computed((()=>{const e={...null==f?void 0:f.value,ariaPressed:!!g.value||void 0,ariaLabel:n.ariaLabel,role:null==y?void 0:y.value};switch(k.value){case l.a:return{...e,href:n.href,target:n.target,rel:n.rel};case l.routerLink:case l.nuxtLink:return{...e,to:n.to,target:n.target};case l.button:return{...e,type:n.type,disabled:n.disabled};default:return e}}));function S(e){var t;n.disabled?e.preventDefault():(null==(t=null==d?void 0:d.vnode.props)?void 0:t.onClick)?s("click",e):null==m||m.emit("click",e)}function _(e){var t;(null==(t=null==d?void 0:d.vnode.props)?void 0:t.onMouseover)?s("mouseover",e):null==m||m.emit("mouseover",e)}function x(e){var t;(null==(t=null==d?void 0:d.vnode.props)?void 0:t.onMouseleave)?s("mouseleave",e):null==m||m.emit("mouseleave",e)}return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(h),{ref_key:"element",ref:v,class:{active:t.active,pressed:e.unref(g),disabled:t.disabled,current:t.current},onClickPassive:S,onMouseoverPassive:_,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}}),h={class:"vv-breadcrumb__list"},S=["content"];return e.defineComponent({name:"VvBreadcrumb",props:g,setup(t){const r=t,{modifiers:o}=e.toRefs(r),n=function(t,r){return e.computed((()=>{const e={[t]:!0},o="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return o&&Array.isArray(o)&&o.forEach((r=>{r&&(e[`${t}--${r}`]=!0)})),e}))}("vv-breadcrumb",o),l=e.computed((()=>{var e;return(null==(e=r.routes)?void 0:e.length)??0})),a=e=>e===l.value-1;return(t,r)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(n)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,(({label:r,...o},n)=>(e.openBlock(),e.createElementBlock("li",{key:`${r}-${n}`,class:e.normalizeClass(a(n)?"vv-breadcrumb__item-active":"vv-breadcrumb__item"),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[e.createVNode(k,e.mergeProps({ref_for:!0},o,{class:a(n)?"vv-breadcrumb__label":"vv-breadcrumb__link","aria-current":a(n)?"page":void 0,itemprop:"item","default-tag":"span"}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"label",e.mergeProps({ref_for:!0},{...o,index:n,label:r,isLast:a(n)}),(()=>[e.createTextVNode(e.toDisplayString(r),1)]))])),_:2},1040,["class","aria-current"]),e.createElementVNode("meta",{itemprop:"position",content:`${n+1}`},null,8,S)],2)))),128))])],2))}})}));

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

@@ -1,17 +1,37 @@
-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[]>;
-}>>, {}, {}>, {
-    label?(_: {
-        route: import(".").Route;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
+    routes: PropType<import("../..").NavItem[]>;
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    routes: PropType<import("../..").NavItem[]>;
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    modifiers: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    label?: (props: {
         index: number;
-    }): any;
+        label: string;
+        isLast: boolean;
+        ariaLabel?: string;
+        title?: string;
+        to?: string | Record<string, unknown>;
+        href?: string;
+        target?: string;
+        rel?: string;
+        disabled?: boolean;
+        current?: boolean;
+        class?: string | string[];
+        on?: Record<"click" | string, () => void>;
+        data?: Record<string, unknown>;
+    }) => any;
 }>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,12 +1,8 @@
-export interface Route {
-    label: string;
-    to?: string | {
-        [key: string]: unknown;
-    };
-    title?: string;
-    href?: string;
-}
+import type { NavItem } from '../../types';
 export declare const VvBreadcrumbProps: {
-    routes: globalThis.PropType<Route[]>;
-    modifiers: globalThis.PropType<string | string[]>;
+    routes: PropType<NavItem[]>;
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
 };