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

package/dist/components/VvTab/VvTab.es.js

@@ -0,0 +1,509 @@
+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 VvTabProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvTabEvents = ["click"];
+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$2 = /* @__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$1 = {
+  class: "vv-nav__menu",
+  role: "menu",
+  "aria-busy": "true"
+};
+const _sfc_main$1 = /* @__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$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$2, 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);
+    };
+  }
+});
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvTab",
+  props: VvTabProps,
+  emits: VvTabEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { modifiers, items } = toRefs(props);
+    const activeTab = ref(null);
+    const bemCssClasses = useModifiers("vv-tab", modifiers);
+    const localItems = computed(() => {
+      return items.value.map((item, index) => {
+        return {
+          ...item,
+          id: item.id || `tab-item_${index}`
+        };
+      });
+    });
+    function onClick(item) {
+      if (!item.disabled) {
+        emit("click", item);
+        activeTab.value = item.id;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        createVNode(_sfc_main$1, {
+          items: unref(localItems),
+          modifiers: "tabs full",
+          onClick
+        }, null, 8, ["items"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (item) => {
+          return openBlock(), createElementBlock("article", {
+            id: item.id,
+            key: item.id,
+            class: normalizeClass([{ target: unref(activeTab) === item.id }, "vv-tab__panel"])
+          }, [
+            renderSlot(_ctx.$slots, `${item.id}`)
+          ], 10, _hoisted_1);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/VvTab/VvTab.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).VvTab=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||{}),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||{}),r=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(r||{});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(r).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},v={pressed:Boolean},f={label:[String,Number]},m={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const p={...d,...f,...v,...c,...u,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},b={...m,items:{type:Array,required:!0,default:()=>[]}},k={...m,items:{type:Array,required:!0,default:()=>[]}},y=p;const g=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:l}){const r=t,u=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:v,aria:f,expanded:m}=e.inject(i,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const p=e.computed((()=>r.pressed||(null==m?void 0:m.value))),{role:b}=e.inject(s,{}),k=e.computed((()=>{switch(!0){case r.disabled:return n.button;case void 0!==r.to:return(null==u?void 0:u.nuxt)?n.nuxtLink:n.routerLink;case void 0!==r.href:return n.a;default:return n.button}})),y=e.computed((()=>{const e={...null==f?void 0:f.value,"aria-pressed":!!p.value||void 0,role:null==b?void 0:b.value};switch(k.value){case n.a:return{...e,href:r.href,target:r.target,rel:r.rel};case n.routerLink:case n.nuxtLink:return{...e,to:r.to,target:r.target};default:return{...e,type:r.type,disabled:r.disabled}}})),g=e=>{r.disabled?e.preventDefault():(null==v||v.emit("click",e),l("click",e))},B=e=>{null==v||v.emit("mouseover",e),l("mouseover",e)},_=e=>{null==v||v.emit("mouseleave",e),l("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(p),disabled:t.disabled},onClickPassive:g,onMouseoverPassive:B,onMouseleavePassive:_}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});function B(t,o,l){return e.computed((()=>{const n={[t]:!0},r="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return r&&Array.isArray(r)&&r.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{n[`${t}--${o}`]=e.unref(l.value[o])})),n}))}const _={class:"vv-nav__menu",role:"menu","aria-busy":"true"},h=e.defineComponent({__name:"VvNav",props:k,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:n,items:r}=e.toRefs(l),a=e.ref(null),i=B("vv-nav",n),s=e.computed((()=>r.value.map(((e,t)=>({...e,id:e.id||`nav-item_${t}`})))));return(t,l)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i))},[e.createElementVNode("ul",_,[(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(g,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 l;(l=t).disabled||(o("click",l),a.value=l.id)}}),{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.title),1)])),_:2},1040,["class","onClick"])])))),128))])],2))}}),x=["id"];return e.defineComponent({__name:"VvTab",props:b,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:n,items:r}=e.toRefs(l),a=e.ref(null),i=B("vv-tab",n),s=e.computed((()=>r.value.map(((e,t)=>({...e,id:e.id||`tab-item_${t}`})))));function u(e){e.disabled||(o("click",e),a.value=e.id)}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(i))},[e.createVNode(h,{items:e.unref(s),modifiers:"tabs full",onClick:u},null,8,["items"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(o=>(e.openBlock(),e.createElementBlock("article",{id:o.id,key:o.id,class:e.normalizeClass([{target:e.unref(a)===o.id},"vv-tab__panel"])},[e.renderSlot(t.$slots,`${o.id}`)],10,x)))),128))],2))}})}));

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

@@ -0,0 +1,26 @@
+import type { NavItem } from '@/components/VvNav';
+declare const _default: __VLS_WithTemplateSlots<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[];
+}, {}>, Partial<Record<string, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,10 @@
+import type { NavItem } from '../VvNav';
+export declare const VvTabProps: {
+    items: {
+        type: globalThis.PropType<NavItem[]>;
+        required: boolean;
+        default: () => never[];
+    };
+    modifiers: globalThis.PropType<string | string[]>;
+};
+export declare const VvTabEvents: string[];