@volverjs/ui-vue 0.0.3 → 0.0.4

package/dist/components/VvDropdown/VvDropdown.es.js

@@ -1,27 +1,76 @@
-import { defineComponent as de, openBlock as A, createElementBlock as N, Fragment as ce, createVNode as V, unref as r, withCtx as j, renderSlot as c, normalizeProps as p, guardReactiveProps as v, Transition as pe, withDirectives as ve, createElementVNode as C, normalizeStyle as W, normalizeClass as me, createCommentVNode as he, mergeProps as be, vShow as ge } from "vue";
-import { autoPlacement as z, flip as R, shift as F, size as I, offset as y, arrow as ye, useFloating as we, autoUpdate as xe } from "@floating-ui/vue";
-var w = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(w || {}), K = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(K || {}), x = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(x || {});
-const Ee = {
+import { computed as s, defineComponent as X, h as we, Fragment as Z, provide as xe, unref as a, toRefs as M, useAttrs as _e, ref as p, watch as Oe, nextTick as D, openBlock as T, createElementBlock as K, createVNode as L, withCtx as U, renderSlot as E, normalizeProps as w, guardReactiveProps as x, Transition as Se, withDirectives as Pe, createElementVNode as q, normalizeStyle as G, normalizeClass as $e, createCommentVNode as De, mergeProps as Ne, vShow as je } from "vue";
+import { autoPlacement as H, flip as J, shift as Y, size as Q, offset as N, arrow as ke, useFloating as Be, autoUpdate as Ae } from "@floating-ui/vue";
+import { nanoid as Ie } from "nanoid";
+import { useVModel as Ve, onClickOutside as Ce, useFocusWithin as We, onKeyStroke as _ } from "@vueuse/core";
+import Re from "mitt";
+var j = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(j || {}), ee = /* @__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))(ee || {}), k = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(k || {}), B = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(B || {}), O = /* @__PURE__ */ ((e) => (e.listbox = "listbox", e.menu = "menu", e))(O || {}), A = /* @__PURE__ */ ((e) => (e.option = "option", e.presentation = "presentation", e))(A || {}), te = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(te || {});
+const ze = Symbol.for("dropdownTrigger"), Fe = Symbol.for("dropdownItem"), Me = {
+  /**
+   * 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: (e) => Object.values(te).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, Te = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, Ke = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Le = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, Ue = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, qe = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-x.before;
-const Se = {
+k.before;
+const Ge = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
-}, ke = {
+}, He = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: w.bottom,
-    validator: (t) => Object.values(w).includes(t) || Object.values(K).includes(t)
+    default: j.bottom,
+    validator: (e) => Object.values(j).includes(e) || Object.values(ee).includes(e)
   },
   /**
    * Dropdown show / hide transition name
@@ -97,10 +146,22 @@ const Se = {
   triggerWidth: {
     type: Boolean
   }
-}, T = ["listbox", "menu"], Oe = {
-  ...Se,
-  ...Ee,
-  ...ke,
+};
+({
+  ...Te,
+  ...Ue,
+  ...Le,
+  ...Ke,
+  ...Me,
+  /**
+   * Button type
+   */
+  type: B.button
+});
+const Je = {
+  ...Ge,
+  ...qe,
+  ...He,
   /**
    * Show / hide dropdown programmatically
    */
@@ -120,218 +181,275 @@ const Se = {
    */
   role: {
     type: String,
-    default: T[1],
-    validator: (t) => T.includes(t)
+    default: O.menu,
+    validator: (e) => Object.values(O).includes(e)
   }
-}, De = ["id", "tabindex", "role", "aria-labelledby"], _e = {
+}, Ye = (e) => s(() => String((e == null ? void 0 : e.value) || Ie()));
+function Qe({
+  reference: e,
+  id: l,
+  expanded: o,
+  aria: f
+}) {
+  const u = Re(), i = X({
+    name: "VvDropdownTriggerProvider",
+    provide() {
+      return {
+        [ze]: {
+          reference: e,
+          id: l,
+          expanded: o,
+          aria: f,
+          bus: u
+        }
+      };
+    },
+    setup() {
+      return {};
+    },
+    render() {
+      var v, m;
+      return we(Z, {}, (m = (v = this.$slots).default) == null ? void 0 : m.call(v));
+    }
+  });
+  return {
+    bus: u,
+    component: i
+  };
+}
+function Xe({
+  role: e,
+  expanded: l
+}) {
+  const o = s(
+    () => e.value === O.listbox ? A.option : A.presentation
+  );
+  return xe(Fe, {
+    role: o,
+    expanded: l
+  }), { itemRole: o };
+}
+function Ze(e, l, o) {
+  return s(() => {
+    const f = {
+      [e]: !0
+    }, u = typeof (l == null ? void 0 : l.value) == "string" ? l.value.split(" ") : l == null ? void 0 : l.value;
+    return u && Array.isArray(u) && u.forEach((i) => {
+      f[`${e}--${i}`] = !0;
+    }), o && Object.keys(o.value).forEach((i) => {
+      f[`${e}--${i}`] = a(o.value[i]);
+    }), f;
+  });
+}
+const et = ["id", "tabindex", "role", "aria-labelledby"], tt = {
   name: "VvDropdown",
   inheritAttrs: !1
-}, Pe = /* @__PURE__ */ de({
-  ..._e,
-  props: Oe,
+}, st = /* @__PURE__ */ X({
+  ...tt,
+  props: Je,
   emits: ["update:modelValue"],
-  setup(t, { emit: M }) {
-    const o = t, { id: U } = toRefs(o), m = useUniqueId(U), q = useAttrs(), E = ref("auto"), S = ref("auto"), k = ref(null), n = ref(null), u = ref(null), H = ref(null), s = computed({
-      get: () => o.reference ?? k.value,
-      set: (e) => {
-        k.value = e;
+  setup(e, { emit: l }) {
+    const o = e, { id: f } = M(o), u = Ye(f), i = _e(), v = p("auto"), m = p("auto"), I = p(null), c = p(null), g = p(null), oe = p(null), d = s({
+      get: () => o.reference ?? I.value,
+      set: (t) => {
+        I.value = t;
       }
-    }), L = computed(() => {
-      const e = [];
-      if (o.autoPlacement ? typeof o.autoPlacement == "boolean" ? e.push(z()) : e.push(
-        z(o.autoPlacement)
-      ) : o.flip && (typeof o.flip == "boolean" ? e.push(R()) : e.push(R(o.flip))), o.shift && (typeof o.shift == "boolean" ? e.push(F()) : e.push(F(o.shift))), o.size) {
-        const l = ({
-          availableWidth: f,
-          availableHeight: d
+    }), re = s(() => {
+      const t = [];
+      if (o.autoPlacement ? typeof o.autoPlacement == "boolean" ? t.push(H()) : t.push(
+        H(o.autoPlacement)
+      ) : o.flip && (typeof o.flip == "boolean" ? t.push(J()) : t.push(J(o.flip))), o.shift && (typeof o.shift == "boolean" ? t.push(Y()) : t.push(Y(o.shift))), o.size) {
+        const r = ({
+          availableWidth: h,
+          availableHeight: y
         }) => {
-          E.value = `${f}px`, S.value = `${d}px`;
+          v.value = `${h}px`, m.value = `${y}px`;
         };
-        typeof o.size == "boolean" ? e.push(
-          I({
-            apply: l
+        typeof o.size == "boolean" ? t.push(
+          Q({
+            apply: r
           })
-        ) : e.push(
-          I({
+        ) : t.push(
+          Q({
             ...o.size,
-            apply: l
+            apply: r
           })
         );
       }
-      return o.offset && (e.push(y(Number(o.offset))), ["string", "number"].includes(typeof o.offset) ? e.push(y(Number(o.offset))) : e.push(y(o.offset))), o.arrow && e.push(
-        ye({
-          element: u
+      return o.offset && (t.push(N(Number(o.offset))), ["string", "number"].includes(typeof o.offset) ? t.push(N(Number(o.offset))) : t.push(N(o.offset))), o.arrow && t.push(
+        ke({
+          element: g
         })
-      ), e;
-    }), { x: G, y: J, strategy: Q, middlewareData: O, placement: X } = we(
-      s,
-      n,
+      ), t;
+    }), { x: ne, y: ae, strategy: le, middlewareData: V, placement: se } = Be(
+      d,
+      c,
       {
-        whileElementsMounted: xe,
+        whileElementsMounted: Ae,
         placement: o.placement,
-        middleware: L
+        middleware: re
       }
-    ), Y = computed(() => ({
-      position: Q.value,
-      top: `${J.value ?? 0}px`,
-      left: `${G.value ?? 0}px`,
-      maxWidth: E.value,
-      maxHeight: S.value,
-      width: o.triggerWidth && s.value ? `${s.value.offsetWidth}px` : void 0
-    })), Z = computed(() => X.value.split("-")[0]), h = computed(
+    ), ue = s(() => ({
+      position: le.value,
+      top: `${ae.value ?? 0}px`,
+      left: `${ne.value ?? 0}px`,
+      maxWidth: v.value,
+      maxHeight: m.value,
+      width: o.triggerWidth && d.value ? `${d.value.offsetWidth}px` : void 0
+    })), ie = s(() => se.value.split("-")[0]), S = s(
       () => ({
         top: "bottom",
         right: "left",
         bottom: "top",
         left: "right"
-      })[Z.value] ?? "bottom"
-    ), ee = computed(() => {
-      var e, l, f, d;
-      return ["bottom", "top"].includes(h.value) ? {
-        right: `${((e = O.value.arrow) == null ? void 0 : e.x) ?? 0}px`,
-        [h.value]: `${-(((l = u.value) == null ? void 0 : l.offsetWidth) ?? 0) / 2}px`
+      })[ie.value] ?? "bottom"
+    ), fe = s(() => {
+      var t, r, h, y;
+      return ["bottom", "top"].includes(S.value) ? {
+        right: `${((t = V.value.arrow) == null ? void 0 : t.x) ?? 0}px`,
+        [S.value]: `${-(((r = g.value) == null ? void 0 : r.offsetWidth) ?? 0) / 2}px`
       } : {
-        top: `${((f = O.value.arrow) == null ? void 0 : f.y) ?? 0}px`,
-        [h.value]: `${-(((d = u.value) == null ? void 0 : d.offsetWidth) ?? 0) / 2}px`
+        top: `${((h = V.value.arrow) == null ? void 0 : h.y) ?? 0}px`,
+        [S.value]: `${-(((y = g.value) == null ? void 0 : y.offsetWidth) ?? 0) / 2}px`
       };
-    }), b = useVModel(o, "modelValue", M), D = ref(!1), a = computed({
-      get: () => b.value ?? D.value,
-      set: (e) => {
-        if (b.value === void 0) {
-          D.value = e;
+    }), P = Ve(o, "modelValue", l), C = p(!1), n = s({
+      get: () => P.value ?? C.value,
+      set: (t) => {
+        if (P.value === void 0) {
+          C.value = t;
           return;
         }
-        b.value = e;
+        P.value = t;
       }
-    }), te = () => {
-      a.value = !0;
-    }, _ = () => {
-      a.value = !1;
-    }, $ = () => {
-      a.value = !a.value;
-    }, oe = (e) => {
-      s.value = e;
+    }), ce = () => {
+      n.value = !0;
+    }, W = () => {
+      n.value = !1;
+    }, R = () => {
+      n.value = !n.value;
+    }, de = (t) => {
+      d.value = t;
     };
-    watch(a, (e) => {
-      e && o.autofocusFirst && nextTick(() => {
-        const l = g(
-          n.value
+    Oe(n, (t) => {
+      t && o.autofocusFirst && D(() => {
+        const r = $(
+          c.value
         );
-        l.length > 0 && l[0].focus();
+        r.length > 0 && r[0].focus();
       });
-    }), onClickOutside(
-      n,
+    }), Ce(
+      c,
       () => {
-        o.autoClose && (a.value = !1);
+        o.autoClose && (n.value = !1);
       },
-      { ignore: [s] }
+      { ignore: [d] }
     );
-    const le = computed(() => {
-      var e;
-      return ((e = s.value) == null ? void 0 : e.getAttribute("id")) ?? void 0;
-    }), B = computed(() => ({
-      "aria-controls": m.value,
+    const pe = s(() => {
+      var t;
+      return ((t = d.value) == null ? void 0 : t.getAttribute("id")) ?? void 0;
+    }), z = s(() => ({
+      "aria-controls": u.value,
       "aria-haspopup": !0,
-      "aria-expanded": a.value
-    })), { component: ae, bus: re } = useProvideDropdownTrigger({
-      reference: s,
-      id: m,
-      expanded: a,
-      aria: B
+      "aria-expanded": n.value
+    })), { component: ve, bus: me } = Qe({
+      reference: d,
+      id: u,
+      expanded: n,
+      aria: z
     });
-    re.on("click", $);
-    const { role: P, modifiers: ne } = toRefs(o), { itemRole: se } = useProvideDropdownItem({ role: P, expanded: a }), ie = useBemModifiers(
+    me.on("click", R);
+    const { role: F, modifiers: be } = M(o), { itemRole: ge } = Xe({ role: F, expanded: n }), he = Ze(
       "vv-dropdown",
-      ne,
-      computed(() => ({
+      be,
+      s(() => ({
         arrow: o.arrow
       }))
-    ), { focused: i } = useFocusWithin(n);
-    function g(e) {
-      return e ? [
-        ...e.querySelectorAll(
+    ), { focused: b } = We(c);
+    function $(t) {
+      return t ? [
+        ...t.querySelectorAll(
           'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
         )
       ].filter(
-        (l) => !l.hasAttribute("disabled") && !l.getAttribute("aria-hidden")
+        (r) => !r.hasAttribute("disabled") && !r.getAttribute("aria-hidden")
       ) : [];
     }
-    const ue = () => {
-      nextTick(() => {
-        if (i.value) {
-          const e = g(
-            n.value
+    const ye = () => {
+      D(() => {
+        if (b.value) {
+          const t = $(
+            c.value
           );
-          if (e.length === 0 || !document.activeElement)
+          if (t.length === 0 || !document.activeElement)
             return;
-          const l = e.indexOf(
+          const r = t.indexOf(
             document.activeElement
           );
-          l < e.length - 1 ? e[l + 1].focus() : e[0].focus();
+          r < t.length - 1 ? t[r + 1].focus() : t[0].focus();
         }
       });
-    }, fe = () => {
-      nextTick(() => {
-        if (i.value) {
-          const e = g(
-            n.value
+    }, Ee = () => {
+      D(() => {
+        if (b.value) {
+          const t = $(
+            c.value
           );
-          if (e.length === 0 || !document.activeElement)
+          if (t.length === 0 || !document.activeElement)
             return;
-          const l = e.indexOf(
+          const r = t.indexOf(
             document.activeElement
           );
-          l > 0 ? e[l - 1].focus() : e[e.length - 1].focus();
+          r > 0 ? t[r - 1].focus() : t[t.length - 1].focus();
         }
       });
     };
-    return onKeyStroke("Escape", (e) => {
-      a.value && (e.preventDefault(), _());
-    }), onKeyStroke("ArrowDown", (e) => {
-      a.value && i.value && (e.preventDefault(), ue());
-    }), onKeyStroke("ArrowUp", (e) => {
-      a.value && i.value && (e.preventDefault(), fe());
-    }), onKeyStroke([" ", "Enter"], (e) => {
-      a.value && i.value && (e.preventDefault(), document.activeElement.click());
-    }), (e, l) => (A(), N(ce, null, [
-      V(r(ae), null, {
-        default: j(() => [
-          c(e.$slots, "default", p(v({ init: oe, show: te, hide: _, toggle: $, expanded: r(a), aria: r(B) })))
+    return _("Escape", (t) => {
+      n.value && (t.preventDefault(), W());
+    }), _("ArrowDown", (t) => {
+      n.value && b.value && (t.preventDefault(), ye());
+    }), _("ArrowUp", (t) => {
+      n.value && b.value && (t.preventDefault(), Ee());
+    }), _([" ", "Enter"], (t) => {
+      n.value && b.value && (t.preventDefault(), document.activeElement.click());
+    }), (t, r) => (T(), K(Z, null, [
+      L(a(ve), null, {
+        default: U(() => [
+          E(t.$slots, "default", w(x({ init: de, show: ce, hide: W, toggle: R, expanded: a(n), aria: a(z) })))
         ]),
         _: 3
       }),
-      V(pe, { name: e.transitionName }, {
-        default: j(() => [
-          ve(C("div", {
+      L(Se, { name: t.transitionName }, {
+        default: U(() => [
+          Pe(q("div", {
             ref_key: "floatingEl",
-            ref: n,
-            style: W(r(Y)),
-            class: me(r(ie))
+            ref: c,
+            style: G(a(ue)),
+            class: $e(a(he))
           }, [
-            o.arrow ? (A(), N("div", {
+            o.arrow ? (T(), K("div", {
               key: 0,
               ref_key: "arrowEl",
-              ref: u,
-              style: W(r(ee)),
+              ref: g,
+              style: G(a(fe)),
               class: "vv-dropdown__arrow"
-            }, null, 4)) : he("", !0),
-            c(e.$slots, "before", p(v({ expanded: r(a) }))),
-            C("ul", be(r(q), {
-              id: r(m),
+            }, null, 4)) : De("", !0),
+            E(t.$slots, "before", w(x({ expanded: a(n) }))),
+            q("ul", Ne(a(i), {
+              id: a(u),
               ref_key: "listEl",
-              ref: H,
-              tabindex: r(a) ? void 0 : -1,
-              role: r(P),
-              "aria-labelledby": r(le),
+              ref: oe,
+              tabindex: a(n) ? void 0 : -1,
+              role: a(F),
+              "aria-labelledby": a(pe),
               class: "vv-dropdown__list"
             }), [
-              c(e.$slots, "items", p(v({
-                role: r(se)
+              E(t.$slots, "items", w(x({
+                role: a(ge)
               })))
-            ], 16, De),
-            c(e.$slots, "after", p(v({ expanded: r(a) })))
+            ], 16, et),
+            E(t.$slots, "after", w(x({ expanded: a(n) })))
           ], 6), [
-            [ge, r(a)]
+            [je, a(n)]
           ])
         ]),
         _: 3
@@ -340,5 +458,5 @@ const Se = {
   }
 });
 export {
-  Pe as default
+  st as default
 };

package/dist/components/VvDropdown/VvDropdown.umd.js

@@ -1 +1 @@
-(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue"),require("@floating-ui/vue")):typeof define=="function"&&define.amd?define(["vue","@floating-ui/vue"],l):(t=typeof globalThis<"u"?globalThis:t||self,t.VvDropdown=l(t.vue,t.vue$1))})(this,function(t,l){"use strict";var p=(o=>(o.left="left",o.right="right",o.top="top",o.bottom="bottom",o))(p||{}),v=(o=>(o.topStart="top-start",o.topEnd="top-end",o.bottomStart="bottom-start",o.bottomEnd="bottom-end",o.leftStart="left-start",o.leftEnd="left-end",o.rightStart="right-start",o.rightEnd="right-end",o))(v||{}),m=(o=>(o.before="before",o.after="after",o))(m||{});const V={modifiers:[String,Array]};m.before;const z={id:[String,Number]},N={placement:{type:String,default:p.bottom,validator:o=>Object.values(p).includes(o)||Object.values(v).includes(o)},transitionName:{type:String},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},autoClose:{type:Boolean,default:!0},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}},w=["listbox","menu"],j={...z,...V,...N,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:w[1],validator:o=>w.includes(o)}},A=["id","tabindex","role","aria-labelledby"],R={name:"VvDropdown",inheritAttrs:!1};return t.defineComponent({...R,props:j,emits:["update:modelValue"],setup(o,{emit:C}){const r=o,{id:W}=toRefs(r),h=useUniqueId(W),T=useAttrs(),x=ref("auto"),E=ref("auto"),S=ref(null),s=ref(null),u=ref(null),F=ref(null),i=computed({get:()=>r.reference??S.value,set:e=>{S.value=e}}),I=computed(()=>{const e=[];if(r.autoPlacement?typeof r.autoPlacement=="boolean"?e.push(l.autoPlacement()):e.push(l.autoPlacement(r.autoPlacement)):r.flip&&(typeof r.flip=="boolean"?e.push(l.flip()):e.push(l.flip(r.flip))),r.shift&&(typeof r.shift=="boolean"?e.push(l.shift()):e.push(l.shift(r.shift))),r.size){const n=({availableWidth:d,availableHeight:c})=>{x.value=`${d}px`,E.value=`${c}px`};typeof r.size=="boolean"?e.push(l.size({apply:n})):e.push(l.size({...r.size,apply:n}))}return r.offset&&(e.push(l.offset(Number(r.offset))),["string","number"].includes(typeof r.offset)?e.push(l.offset(Number(r.offset))):e.push(l.offset(r.offset))),r.arrow&&e.push(l.arrow({element:u})),e}),{x:K,y:M,strategy:q,middlewareData:P,placement:U}=l.useFloating(i,s,{whileElementsMounted:l.autoUpdate,placement:r.placement,middleware:I}),H=computed(()=>({position:q.value,top:`${M.value??0}px`,left:`${K.value??0}px`,maxWidth:x.value,maxHeight:E.value,width:r.triggerWidth&&i.value?`${i.value.offsetWidth}px`:void 0})),L=computed(()=>U.value.split("-")[0]),b=computed(()=>({top:"bottom",right:"left",bottom:"top",left:"right"})[L.value]??"bottom"),$=computed(()=>{var e,n,d,c;return["bottom","top"].includes(b.value)?{right:`${((e=P.value.arrow)==null?void 0:e.x)??0}px`,[b.value]:`${-(((n=u.value)==null?void 0:n.offsetWidth)??0)/2}px`}:{top:`${((d=P.value.arrow)==null?void 0:d.y)??0}px`,[b.value]:`${-(((c=u.value)==null?void 0:c.offsetWidth)??0)/2}px`}}),g=useVModel(r,"modelValue",C),k=ref(!1),a=computed({get:()=>g.value??k.value,set:e=>{if(g.value===void 0){k.value=e;return}g.value=e}}),G=()=>{a.value=!0},_=()=>{a.value=!1},D=()=>{a.value=!a.value},J=e=>{i.value=e};watch(a,e=>{e&&r.autofocusFirst&&nextTick(()=>{const n=y(s.value);n.length>0&&n[0].focus()})}),onClickOutside(s,()=>{r.autoClose&&(a.value=!1)},{ignore:[i]});const Q=computed(()=>{var e;return((e=i.value)==null?void 0:e.getAttribute("id"))??void 0}),O=computed(()=>({"aria-controls":h.value,"aria-haspopup":!0,"aria-expanded":a.value})),{component:X,bus:Y}=useProvideDropdownTrigger({reference:i,id:h,expanded:a,aria:O});Y.on("click",D);const{role:B,modifiers:Z}=toRefs(r),{itemRole:ee}=useProvideDropdownItem({role:B,expanded:a}),te=useBemModifiers("vv-dropdown",Z,computed(()=>({arrow:r.arrow}))),{focused:f}=useFocusWithin(s);function y(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter(n=>!n.hasAttribute("disabled")&&!n.getAttribute("aria-hidden")):[]}const oe=()=>{nextTick(()=>{if(f.value){const e=y(s.value);if(e.length===0||!document.activeElement)return;const n=e.indexOf(document.activeElement);n<e.length-1?e[n+1].focus():e[0].focus()}})},re=()=>{nextTick(()=>{if(f.value){const e=y(s.value);if(e.length===0||!document.activeElement)return;const n=e.indexOf(document.activeElement);n>0?e[n-1].focus():e[e.length-1].focus()}})};return onKeyStroke("Escape",e=>{a.value&&(e.preventDefault(),_())}),onKeyStroke("ArrowDown",e=>{a.value&&f.value&&(e.preventDefault(),oe())}),onKeyStroke("ArrowUp",e=>{a.value&&f.value&&(e.preventDefault(),re())}),onKeyStroke([" ","Enter"],e=>{a.value&&f.value&&(e.preventDefault(),document.activeElement.click())}),(e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(X),null,{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps({init:J,show:G,hide:_,toggle:D,expanded:t.unref(a),aria:t.unref(O)})))]),_:3}),t.createVNode(t.Transition,{name:e.transitionName},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",{ref_key:"floatingEl",ref:s,style:t.normalizeStyle(t.unref(H)),class:t.normalizeClass(t.unref(te))},[r.arrow?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:u,style:t.normalizeStyle(t.unref($)),class:"vv-dropdown__arrow"},null,4)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"before",t.normalizeProps(t.guardReactiveProps({expanded:t.unref(a)}))),t.createElementVNode("ul",t.mergeProps(t.unref(T),{id:t.unref(h),ref_key:"listEl",ref:F,tabindex:t.unref(a)?void 0:-1,role:t.unref(B),"aria-labelledby":t.unref(Q),class:"vv-dropdown__list"}),[t.renderSlot(e.$slots,"items",t.normalizeProps(t.guardReactiveProps({role:t.unref(ee)})))],16,A),t.renderSlot(e.$slots,"after",t.normalizeProps(t.guardReactiveProps({expanded:t.unref(a)})))],6),[[t.vShow,t.unref(a)]])]),_:3},8,["name"])],64))}})});
+(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@floating-ui/vue"),require("nanoid"),require("@vueuse/core"),require("mitt")):typeof define=="function"&&define.amd?define(["vue","@floating-ui/vue","nanoid","@vueuse/core","mitt"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDropdown=a(e.vue,e.vue$1,e.nanoid,e.core,e.mitt))})(this,function(e,a,I,u,W){"use strict";var x=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(x||{}),N=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(N||{}),v=(t=>(t.before="before",t.after="after",t))(v||{}),S=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(S||{}),g=(t=>(t.listbox="listbox",t.menu="menu",t))(g||{}),_=(t=>(t.option="option",t.presentation="presentation",t))(_||{}),D=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(D||{});const T=Symbol.for("dropdownTrigger"),q=Symbol.for("dropdownItem"),F={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(D).includes(t)},rel:{type:String,default:"noopener noreferrer"}},K={disabled:Boolean},M={active:Boolean},$={pressed:Boolean},L={label:[String,Number]},U={modifiers:[String,Array]};v.before;const G={id:[String,Number]},H={placement:{type:String,default:x.bottom,validator:t=>Object.values(x).includes(t)||Object.values(N).includes(t)},transitionName:{type:String},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},autoClose:{type:Boolean,default:!0},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};({...K,...L,...$,...M,...F,type:S.button});const J={...G,...U,...H,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:g.menu,validator:t=>Object.values(g).includes(t)}},Y=t=>e.computed(()=>String((t==null?void 0:t.value)||I.nanoid()));function Q({reference:t,id:s,expanded:n,aria:c}){const i=W(),f=e.defineComponent({name:"VvDropdownTriggerProvider",provide(){return{[T]:{reference:t,id:s,expanded:n,aria:c,bus:i}}},setup(){return{}},render(){var m,b;return e.h(e.Fragment,{},(b=(m=this.$slots).default)==null?void 0:b.call(m))}});return{bus:i,component:f}}function X({role:t,expanded:s}){const n=e.computed(()=>t.value===g.listbox?_.option:_.presentation);return e.provide(q,{role:n,expanded:s}),{itemRole:n}}function Z(t,s,n){return e.computed(()=>{const c={[t]:!0},i=typeof(s==null?void 0:s.value)=="string"?s.value.split(" "):s==null?void 0:s.value;return i&&Array.isArray(i)&&i.forEach(f=>{c[`${t}--${f}`]=!0}),n&&Object.keys(n.value).forEach(f=>{c[`${t}--${f}`]=e.unref(n.value[f])}),c})}const ee=["id","tabindex","role","aria-labelledby"],te={name:"VvDropdown",inheritAttrs:!1};return e.defineComponent({...te,props:J,emits:["update:modelValue"],setup(t,{emit:s}){const n=t,{id:c}=e.toRefs(n),i=Y(c),f=e.useAttrs(),m=e.ref("auto"),b=e.ref("auto"),j=e.ref(null),d=e.ref(null),y=e.ref(null),oe=e.ref(null),p=e.computed({get:()=>n.reference??j.value,set:o=>{j.value=o}}),ne=e.computed(()=>{const o=[];if(n.autoPlacement?typeof n.autoPlacement=="boolean"?o.push(a.autoPlacement()):o.push(a.autoPlacement(n.autoPlacement)):n.flip&&(typeof n.flip=="boolean"?o.push(a.flip()):o.push(a.flip(n.flip))),n.shift&&(typeof n.shift=="boolean"?o.push(a.shift()):o.push(a.shift(n.shift))),n.size){const r=({availableWidth:E,availableHeight:w})=>{m.value=`${E}px`,b.value=`${w}px`};typeof n.size=="boolean"?o.push(a.size({apply:r})):o.push(a.size({...n.size,apply:r}))}return n.offset&&(o.push(a.offset(Number(n.offset))),["string","number"].includes(typeof n.offset)?o.push(a.offset(Number(n.offset))):o.push(a.offset(n.offset))),n.arrow&&o.push(a.arrow({element:y})),o}),{x:re,y:ae,strategy:le,middlewareData:B,placement:se}=a.useFloating(p,d,{whileElementsMounted:a.autoUpdate,placement:n.placement,middleware:ne}),ie=e.computed(()=>({position:le.value,top:`${ae.value??0}px`,left:`${re.value??0}px`,maxWidth:m.value,maxHeight:b.value,width:n.triggerWidth&&p.value?`${p.value.offsetWidth}px`:void 0})),fe=e.computed(()=>se.value.split("-")[0]),P=e.computed(()=>({top:"bottom",right:"left",bottom:"top",left:"right"})[fe.value]??"bottom"),ue=e.computed(()=>{var o,r,E,w;return["bottom","top"].includes(P.value)?{right:`${((o=B.value.arrow)==null?void 0:o.x)??0}px`,[P.value]:`${-(((r=y.value)==null?void 0:r.offsetWidth)??0)/2}px`}:{top:`${((E=B.value.arrow)==null?void 0:E.y)??0}px`,[P.value]:`${-(((w=y.value)==null?void 0:w.offsetWidth)??0)/2}px`}}),O=u.useVModel(n,"modelValue",s),V=e.ref(!1),l=e.computed({get:()=>O.value??V.value,set:o=>{if(O.value===void 0){V.value=o;return}O.value=o}}),ce=()=>{l.value=!0},z=()=>{l.value=!1},C=()=>{l.value=!l.value},de=o=>{p.value=o};e.watch(l,o=>{o&&n.autofocusFirst&&e.nextTick(()=>{const r=k(d.value);r.length>0&&r[0].focus()})}),u.onClickOutside(d,()=>{n.autoClose&&(l.value=!1)},{ignore:[p]});const pe=e.computed(()=>{var o;return((o=p.value)==null?void 0:o.getAttribute("id"))??void 0}),R=e.computed(()=>({"aria-controls":i.value,"aria-haspopup":!0,"aria-expanded":l.value})),{component:me,bus:be}=Q({reference:p,id:i,expanded:l,aria:R});be.on("click",C);const{role:A,modifiers:he}=e.toRefs(n),{itemRole:ge}=X({role:A,expanded:l}),ye=Z("vv-dropdown",he,e.computed(()=>({arrow:n.arrow}))),{focused:h}=u.useFocusWithin(d);function k(o){return o?[...o.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter(r=>!r.hasAttribute("disabled")&&!r.getAttribute("aria-hidden")):[]}const Ee=()=>{e.nextTick(()=>{if(h.value){const o=k(d.value);if(o.length===0||!document.activeElement)return;const r=o.indexOf(document.activeElement);r<o.length-1?o[r+1].focus():o[0].focus()}})},we=()=>{e.nextTick(()=>{if(h.value){const o=k(d.value);if(o.length===0||!document.activeElement)return;const r=o.indexOf(document.activeElement);r>0?o[r-1].focus():o[o.length-1].focus()}})};return u.onKeyStroke("Escape",o=>{l.value&&(o.preventDefault(),z())}),u.onKeyStroke("ArrowDown",o=>{l.value&&h.value&&(o.preventDefault(),Ee())}),u.onKeyStroke("ArrowUp",o=>{l.value&&h.value&&(o.preventDefault(),we())}),u.onKeyStroke([" ","Enter"],o=>{l.value&&h.value&&(o.preventDefault(),document.activeElement.click())}),(o,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(me),null,{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:de,show:ce,hide:z,toggle:C,expanded:e.unref(l),aria:e.unref(R)})))]),_:3}),e.createVNode(e.Transition,{name:o.transitionName},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:d,style:e.normalizeStyle(e.unref(ie)),class:e.normalizeClass(e.unref(ye))},[n.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:y,style:e.normalizeStyle(e.unref(ue)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(l)}))),e.createElementVNode("ul",e.mergeProps(e.unref(f),{id:e.unref(i),ref_key:"listEl",ref:oe,tabindex:e.unref(l)?void 0:-1,role:e.unref(A),"aria-labelledby":e.unref(pe),class:"vv-dropdown__list"}),[e.renderSlot(o.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(ge)})))],16,ee),e.renderSlot(o.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(l)})))],6),[[e.vShow,e.unref(l)]])]),_:3},8,["name"])],64))}})});

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

@@ -8,9 +8,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: null;
     };
     role: {
-        type: import("vue").PropType<"menu" | "listbox">;
-        default: "menu";
-        validator: (value: string) => boolean;
+        type: import("vue").PropType<import("../../constants.js").DropdownRole>;
+        default: import("../../constants.js").DropdownRole;
+        validator: (value: import("../../constants.js").DropdownRole) => boolean;
     };
     placement: {
         type: import("vue").PropType<import("../../constants.js").Side | import("../../constants.js").Placement>;
@@ -84,9 +84,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: null;
     };
     role: {
-        type: import("vue").PropType<"menu" | "listbox">;
-        default: "menu";
-        validator: (value: string) => boolean;
+        type: import("vue").PropType<import("../../constants.js").DropdownRole>;
+        default: import("../../constants.js").DropdownRole;
+        validator: (value: import("../../constants.js").DropdownRole) => boolean;
     };
     placement: {
         type: import("vue").PropType<import("../../constants.js").Side | import("../../constants.js").Placement>;
@@ -157,11 +157,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     shift: boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
+    reference: HTMLElement | null;
+    role: import("../../constants.js").DropdownRole;
     flip: boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
-    reference: HTMLElement | null;
-    role: "menu" | "listbox";
     placement: import("../../constants.js").Side | import("../../constants.js").Placement;
     offset: string | import("@floating-ui/core").OffsetOptions | undefined;
     size: boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
@@ -198,7 +198,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         expanded: boolean;
     }) => any;
     items: (_: {
-        role: "option" | "presentation";
+        role: import("../../constants.js").DropdownItemRole;
     }) => any;
     after: (_: {
         expanded: boolean;