@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.30

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, getCurrentInstance, ref, watch, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, toRefs, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode, normalizeProps, guardReactiveProps } from "vue";
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
     const toReturn = {
@@ -22,6 +22,11 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -56,13 +61,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 +90,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -94,44 +103,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: 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] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -162,7 +192,8 @@ const ModifiersProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -230,10 +261,11 @@ const ModifiersProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
-({
+const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
@@ -254,12 +286,171 @@ const ModifiersProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
+};
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
 });
 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 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) ? 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) => {
+      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);
+    };
+    const 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);
+    };
+    const 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 +463,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(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", 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,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||{}),o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),n=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(n||{});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}};r.before,o.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const b={...d,...m,...p,...c,...v,...s,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:n.button}};t.local;const g={...f,routes:Array},y=b;const k=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const l=t,s=r,d=e.getCurrentInstance(),c=e.inject(a),v=e.ref(null);o({$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((()=>l.pressed||(null==b?void 0:b.value))),{role:y}=e.inject(i,{}),k=e.computed((()=>{switch(!0){case l.disabled:return n.button;case void 0!==l.to:return(null==c?void 0:c.nuxt)?n.nuxtLink:n.routerLink;case void 0!==l.href:return n.a;default:return l.defaultTag}})),B=e.computed((()=>{const e={...null==f?void 0:f.value,ariaPressed:!!g.value||void 0,ariaLabel:l.ariaLabel,role:null==y?void 0:y.value};switch(k.value){case n.a:return{...e,href:l.href,target:l.target,rel:l.rel};case n.routerLink:case n.nuxtLink:return{...e,to:l.to,target:l.target};case n.button:return{...e,type:l.type,disabled:l.disabled};default:return e}})),h=e=>{var t;l.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)},S=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)},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,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(B),{ref_key:"element",ref:v,class:{active:t.active,pressed:e.unref(g),disabled:t.disabled,current:t.current},onClickPassive:h,onMouseoverPassive:S,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}}),B={class:"vv-breadcrumb__list"},h=["content"];return e.defineComponent({name:"VvBreadcrumb",props:g,setup(t){const o=t,{modifiers:r}=e.toRefs(o),l=function(t,o,r){return e.computed((()=>{const l={[t]:!0},n="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{l[`${t}--${o}`]=e.unref(r.value[o])})),l}))}("vv-breadcrumb",r),n=e.computed((()=>{var e;return(null==(e=o.routes)?void 0:e.length)??0})),a=e=>e===n.value-1;return(t,o)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(l)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,(({label:o,...r},l)=>(e.openBlock(),e.createElementBlock("li",{key:`${o}-${l}`,class:e.normalizeClass(a(l)?"vv-breadcrumb__item-active":"vv-breadcrumb__item"),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[e.createVNode(k,e.mergeProps(r,{class:a(l)?"vv-breadcrumb__label":"vv-breadcrumb__link","aria-current":a(l)?"page":void 0,itemprop:"item","default-tag":"span"}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:r,index:l})),(()=>[e.createTextVNode(e.toDisplayString(o),1)]))])),_:2},1040,["class","aria-current"]),e.createElementVNode("meta",{itemprop:"position",content:`${l+1}`},null,8,h)],2)))),128))])],2))}})}));