@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/dist/components/VvAction/VvAction.es.js

@@ -1,6 +1,51 @@
-import { inject as v, defineComponent as D, ref as I, watch as L, computed as c, openBlock as P, createBlock as E, resolveDynamicComponent as R, unref as f, mergeProps as V, withCtx as B, renderSlot as x, createTextVNode as M, toDisplayString as w } from "vue";
-var d = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(d || {}), _ = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(_ || {}), p = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(p || {}), b = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(b || {}), n = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(n || {}), O = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(O || {});
-const J = Symbol.for("volver"), K = Symbol.for("dropdownTrigger"), W = Symbol.for("dropdownAction"), Y = {
+import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } 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/)
@@ -17,7 +62,7 @@ const J = Symbol.for("volver"), K = Symbol.for("dropdownTrigger"), W = Symbol.fo
    */
   target: {
     type: String,
-    validator: (e) => Object.values(O).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -26,145 +71,278 @@ const J = Symbol.for("volver"), K = Symbol.for("dropdownTrigger"), W = Symbol.fo
     type: String,
     default: "noopener noreferrer"
   }
-}, G = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, T = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, $ = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, z = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
 };
-p.before;
-d.bottom;
-const A = {
-  ...G,
-  ...z,
-  ...$,
-  ...T,
-  ...Y,
+({
+  /**
+   * 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
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 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: b.button,
-    validator: (e) => Object.values(b).includes(e)
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
   }
-}, F = ["click", "mouseover", "mouseleave"], q = A;
-function H() {
-  return v(J);
+};
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-function Q() {
-  return v(K, {});
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
 }
-function U() {
-  return v(W, {});
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const X = {
+const __default__ = {
   name: "VvAction"
-}, te = /* @__PURE__ */ D({
-  ...X,
-  props: q,
-  emits: F,
-  setup(e, { expose: k, emit: s }) {
-    const r = e, a = H(), l = I(null);
-    k({ $el: l });
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const volver = useVolver();
+    const element = ref(null);
+    expose({ $el: element });
     const {
-      reference: m,
-      bus: o,
-      aria: u,
-      expanded: i
-    } = Q();
-    L(
-      () => l.value,
-      (t) => {
-        m && (m.value = t);
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
       }
     );
-    const g = c(() => r.pressed || (i == null ? void 0 : i.value)), { role: S } = U(), y = c(() => {
-      switch (!0) {
-        case r.disabled:
-          return n.button;
-        case r.to !== void 0:
-          return a != null && a.nuxt ? n.nuxtLink : n.routerLink;
-        case r.href !== void 0:
-          return n.a;
+    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 n.button;
+          return ActionTag.button;
       }
-    }), h = c(() => {
-      const t = {
-        ...u == null ? void 0 : u.value,
-        "aria-pressed": g.value ? !0 : void 0,
-        role: S
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        "aria-pressed": pressed.value ? true : void 0,
+        role
       };
-      switch (y.value) {
-        case n.a:
+      switch (hasTag.value) {
+        case ActionTag.a:
           return {
-            ...t,
-            href: r.href,
-            target: r.target,
-            rel: r.rel
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
           };
-        case n.routerLink:
-        case n.nuxtLink:
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
           return {
-            ...t,
-            to: r.to,
-            target: r.target
+            ...toReturn,
+            to: props.to,
+            target: props.target
           };
         default:
           return {
-            ...t,
-            type: r.type,
-            disabled: r.disabled
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
           };
       }
-    }), j = (t) => {
-      if (r.disabled) {
-        t.preventDefault();
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
         return;
       }
-      o == null || o.emit("click", t), s("click", t);
-    }, N = (t) => {
-      o == null || o.emit("mouseover", t), s("mouseover", t);
-    }, C = (t) => {
-      o == null || o.emit("mouseleave", t), s("mouseleave", t);
+      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"]);
     };
-    return (t, Z) => (P(), E(R(f(y)), V(f(h), {
-      ref_key: "element",
-      ref: l,
-      class: {
-        active: t.active,
-        pressed: f(g),
-        disabled: t.disabled
-      },
-      onClickPassive: j,
-      onMouseoverPassive: N,
-      onMouseleavePassive: C
-    }), {
-      default: B(() => [
-        x(t.$slots, "default", {}, () => [
-          M(w(t.label), 1)
-        ])
-      ]),
-      _: 3
-    }, 16, ["class"]));
   }
 });
 export {
-  te as default
+  _sfc_main as default
 };

package/dist/components/VvAction/VvAction.umd.js

@@ -1 +1 @@
-(function(t,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.VvAction=a(t.vue))})(this,function(t){"use strict";var a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),b=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(b||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),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||{}),m=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(m||{});const _=Symbol.for("volver"),O=Symbol.for("dropdownTrigger"),h=Symbol.for("dropdownAction"),k={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(m).includes(e)},rel:{type:String,default:"noopener noreferrer"}},j={disabled:Boolean},S={active:Boolean},N={pressed:Boolean},C={label:[String,Number]};i.before,a.bottom;const D={...j,...C,...N,...S,...k,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},I=["click","mouseover","mouseleave"],L=D;function P(){return t.inject(_)}function V(){return t.inject(O,{})}function E(){return t.inject(h,{})}const R={name:"VvAction"};return t.defineComponent({...R,props:L,emits:I,setup(e,{expose:x,emit:u}){const o=e,c=P(),f=t.ref(null);x({$el:f});const{reference:g,bus:s,aria:d,expanded:p}=V();t.watch(()=>f.value,r=>{g&&(g.value=r)});const v=t.computed(()=>o.pressed||(p==null?void 0:p.value)),{role:B}=E(),y=t.computed(()=>{switch(!0){case o.disabled:return n.button;case o.to!==void 0:return c!=null&&c.nuxt?n.nuxtLink:n.routerLink;case o.href!==void 0:return n.a;default:return n.button}}),M=t.computed(()=>{const r={...d==null?void 0:d.value,"aria-pressed":v.value?!0:void 0,role:B};switch(y.value){case n.a:return{...r,href:o.href,target:o.target,rel:o.rel};case n.routerLink:case n.nuxtLink:return{...r,to:o.to,target:o.target};default:return{...r,type:o.type,disabled:o.disabled}}}),T=r=>{if(o.disabled){r.preventDefault();return}s==null||s.emit("click",r),u("click",r)},w=r=>{s==null||s.emit("mouseover",r),u("mouseover",r)},J=r=>{s==null||s.emit("mouseleave",r),u("mouseleave",r)};return(r,W)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(y)),t.mergeProps(t.unref(M),{ref_key:"element",ref:f,class:{active:r.active,pressed:t.unref(v),disabled:r.disabled},onClickPassive:T,onMouseoverPassive:w,onMouseleavePassive:J}),{default:t.withCtx(()=>[t.renderSlot(r.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(r.label),1)])]),_:3},16,["class"]))}})});
+!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).VvAction=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),r=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(r||{}),l=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(l||{});const a=Symbol.for("volver"),u=Symbol.for("dropdownTrigger"),i=Symbol.for("dropdownAction"),s={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(l).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},f={pressed:Boolean},p={label:[String,Number]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const v={...d,...p,...f,...c,...s,type:{type:String,default:n.button,validator:e=>Object.values(n).includes(e)}};return e.defineComponent({name:"VvAction",props:v,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:n}){const l=t,s=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:f,aria:p,expanded:v}=e.inject(u,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const b=e.computed((()=>l.pressed||(null==v?void 0:v.value))),{role:m}=e.inject(i,{}),g=e.computed((()=>{switch(!0){case l.disabled:return r.button;case void 0!==l.to:return(null==s?void 0:s.nuxt)?r.nuxtLink:r.routerLink;case void 0!==l.href:return r.a;default:return r.button}})),k=e.computed((()=>{const e={...null==p?void 0:p.value,"aria-pressed":!!b.value||void 0,role:m};switch(g.value){case r.a:return{...e,href:l.href,target:l.target,rel:l.rel};case r.routerLink:case r.nuxtLink:return{...e,to:l.to,target:l.target};default:return{...e,type:l.type,disabled:l.disabled}}})),y=e=>{l.disabled?e.preventDefault():(null==f||f.emit("click",e),n("click",e))},h=e=>{null==f||f.emit("mouseover",e),n("mouseover",e)},B=e=>{null==f||f.emit("mouseleave",e),n("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(k),{ref_key:"element",ref:d,class:{active:t.active,pressed:e.unref(b),disabled:t.disabled},onClickPassive:y,onMouseoverPassive:h,onMouseleavePassive:B}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}})}));

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

@@ -1,16 +1,16 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: {
-        type: StringConstructor;
-        default: import("@/constants").ButtonType;
-        validator: (value: import("@/constants").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/constants").AnchorTarget>;
-        validator: (value: import("@/constants").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -21,20 +21,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: (StringConstructor | NumberConstructor)[];
     disabled: BooleanConstructor;
 }, {
-    $el: import("vue").Ref<HTMLElement | null>;
+    $el: globalThis.Ref<HTMLElement | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
-        type: StringConstructor;
-        default: import("@/constants").ButtonType;
-        validator: (value: import("@/constants").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/constants").AnchorTarget>;
-        validator: (value: import("@/constants").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -48,7 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    type: string;
+    type: "button" | "submit" | "reset";
     rel: string;
     active: boolean;
     pressed: boolean;

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

@@ -1,7 +1,7 @@
 export declare const VvActionEvents: string[];
 export declare const VvActionProps: {
     type: {
-        type: StringConstructor;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
         default: import("../../constants").ButtonType;
         validator: (value: import("../../constants").ButtonType) => boolean;
     };
@@ -10,7 +10,7 @@ export declare const VvActionProps: {
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("../../constants").AnchorTarget>;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
         validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {