@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -1,8 +1,4 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
     title: StringConstructor;
     modelValue: BooleanConstructor;
     transition: {
@@ -14,11 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
     title: StringConstructor;
     modelValue: BooleanConstructor;
     transition: {
@@ -30,12 +23,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
-    transition: string;
     autoClose: boolean;
+    transition: string;
 }>, {
     header: (_: {}) => any;
     default: (_: {}) => any;

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

@@ -1,18 +1,30 @@
 export declare const VvDialogEvents: string[];
 export declare const VvDialogProps: {
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
+    /**
+     * Dialog title
+     */
     title: StringConstructor;
+    /**
+     * Show / hide dialog programmatically
+     */
     modelValue: BooleanConstructor;
+    /**
+     * Dialog transition
+     */
     transition: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Dialog size
+     */
     size: StringConstructor;
+    /**
+     * Close dialog on click outside
+     */
     autoClose: {
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 };

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

@@ -1,103 +1,462 @@
-import { defineComponent as N, openBlock as s, createElementBlock as i, unref as l, normalizeClass as S, createElementVNode as m, toDisplayString as f, createCommentVNode as v, Fragment as C, renderList as w, withModifiers as A, createTextVNode as B } from "vue";
-import { nanoid as D } from "nanoid";
-const O = {
+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
-}, P = {
+}, 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]
-}, $ = {
-  options: {
-    type: Array,
-    default: () => []
+};
+k.before;
+const Ge = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+}, He = {
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: j.bottom,
+    validator: (e) => Object.values(j).includes(e) || Object.values(ee).includes(e)
+  },
+  /**
+   * 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: !1
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  /**
+   * 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: !1
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: !0
   },
-  labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, F = {
-  id: [String, Number],
-  name: { type: String, required: !0 }
-}, R = {
-  ...F,
-  ...$,
-  ...O,
-  ...P,
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+};
+({
+  ...Te,
+  ...Ue,
+  ...Le,
+  ...Ke,
+  ...Me,
+  /**
+   * Button type
+   */
+  type: B.button
+});
+const Je = {
+  ...Ge,
+  ...qe,
+  ...He,
+  /**
+   * Show / hide dropdown programmatically
+   */
   modelValue: {
-    type: [String, Number, Boolean, Object, Array]
+    type: Boolean,
+    default: void 0
   },
-  labelNoResults: { type: String, default: "No results" },
-  multiple: Boolean,
-  maxValues: [Number, String],
-  unselectable: { type: Boolean, default: !0 }
-}, q = ["id"], x = {
-  key: 0,
-  role: "option"
-}, I = ["aria-selected"], L = ["for", "onClick"], M = ["id", "type", "value", "checked", "disabled", "name"], E = {
-  name: "VvDropdown"
-}, T = /* @__PURE__ */ N({
-  ...E,
-  props: R,
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: O.menu,
+    validator: (e) => Object.values(O).includes(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
+}, st = /* @__PURE__ */ X({
+  ...tt,
+  props: Je,
   emits: ["update:modelValue"],
-  setup(b, { emit: V }) {
-    const t = b, d = computed(() => String(t.id || D())), { modifiers: y, disabled: c } = toRefs(t), { getOptionLabel: g, getOptionValue: a } = useOptions(t), { bemCssClasses: h } = useBemModifiers("vv-dropdown", {
-      modifiers: y,
-      disabled: c
+  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;
+      }
+    }), 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
+        }) => {
+          v.value = `${h}px`, m.value = `${y}px`;
+        };
+        typeof o.size == "boolean" ? t.push(
+          Q({
+            apply: r
+          })
+        ) : t.push(
+          Q({
+            ...o.size,
+            apply: r
+          })
+        );
+      }
+      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
+        })
+      ), t;
+    }), { x: ne, y: ae, strategy: le, middlewareData: V, placement: se } = Be(
+      d,
+      c,
+      {
+        whileElementsMounted: Ae,
+        placement: o.placement,
+        middleware: re
+      }
+    ), 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"
+      })[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: `${((h = V.value.arrow) == null ? void 0 : h.y) ?? 0}px`,
+        [S.value]: `${-(((y = g.value) == null ? void 0 : y.offsetWidth) ?? 0) / 2}px`
+      };
+    }), 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;
+        }
+        P.value = t;
+      }
+    }), ce = () => {
+      n.value = !0;
+    }, W = () => {
+      n.value = !1;
+    }, R = () => {
+      n.value = !n.value;
+    }, de = (t) => {
+      d.value = t;
+    };
+    Oe(n, (t) => {
+      t && o.autofocusFirst && D(() => {
+        const r = $(
+          c.value
+        );
+        r.length > 0 && r[0].focus();
+      });
+    }), Ce(
+      c,
+      () => {
+        o.autoClose && (n.value = !1);
+      },
+      { ignore: [d] }
+    );
+    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": n.value
+    })), { component: ve, bus: me } = Qe({
+      reference: d,
+      id: u,
+      expanded: n,
+      aria: z
     });
-    function p(e) {
-      return Array.isArray(t.modelValue) ? contains(e, t.modelValue) || contains(a(e), t.modelValue) : equals(e, t.modelValue) || equals(a(e), t.modelValue);
-    }
-    function _(e) {
-      return typeof e == "string" || e.disabled === void 0 ? c.value : e.disabled;
+    me.on("click", R);
+    const { role: F, modifiers: be } = M(o), { itemRole: ge } = Xe({ role: F, expanded: n }), he = Ze(
+      "vv-dropdown",
+      be,
+      s(() => ({
+        arrow: o.arrow
+      }))
+    ), { focused: b } = We(c);
+    function $(t) {
+      return t ? [
+        ...t.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (r) => !r.hasAttribute("disabled") && !r.getAttribute("aria-hidden")
+      ) : [];
     }
-    function k(e) {
-      var n;
-      if (t.disabled)
-        return;
-      let r = e;
-      if (t.multiple)
-        if (Array.isArray(t.modelValue)) {
-          if (t.maxValues !== void 0 && t.maxValues >= 0 && ((n = t.modelValue) == null ? void 0 : n.length) >= t.maxValues && !contains(e, t.modelValue))
+    const ye = () => {
+      D(() => {
+        if (b.value) {
+          const t = $(
+            c.value
+          );
+          if (t.length === 0 || !document.activeElement)
             return;
-          r = contains(e, t.modelValue) ? removeFromList(e, t.modelValue) : [...t.modelValue, e];
-        } else
-          r = [e];
-      else
-        t.unselectable && e === t.modelValue && (r = void 0);
-      V("update:modelValue", r);
-    }
-    return (e, r) => {
-      var n;
-      return s(), i("ul", {
-        id: l(d),
-        class: S(l(h)),
-        role: "listbox"
-      }, [
-        (n = e.options) != null && n.length ? v("", !0) : (s(), i("li", x, [
-          m("label", null, f(e.labelNoResults), 1)
-        ])),
-        (s(!0), i(C, null, w(e.options, (o, u) => (s(), i("li", {
-          key: u,
-          role: "option",
-          "aria-selected": p(o)
-        }, [
-          m("label", {
-            for: `dropdown-${u}-${l(d)}`,
-            onClick: A((K) => k(l(a)(o)), ["prevent"])
-          }, [
-            m("input", {
-              id: `dropdown-${u}-${l(d)}`,
-              type: e.multiple ? "checkbox" : "radio",
-              value: l(a)(o),
-              checked: p(o),
-              disabled: _(o),
-              name: e.name,
-              tabindex: "-1",
-              "aria-hidden": "true"
-            }, null, 8, M),
-            B(" " + f(l(g)(o)), 1)
-          ], 8, L)
-        ], 8, I))), 128))
-      ], 10, q);
+          const r = t.indexOf(
+            document.activeElement
+          );
+          r < t.length - 1 ? t[r + 1].focus() : t[0].focus();
+        }
+      });
+    }, Ee = () => {
+      D(() => {
+        if (b.value) {
+          const t = $(
+            c.value
+          );
+          if (t.length === 0 || !document.activeElement)
+            return;
+          const r = t.indexOf(
+            document.activeElement
+          );
+          r > 0 ? t[r - 1].focus() : t[t.length - 1].focus();
+        }
+      });
     };
+    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
+      }),
+      L(Se, { name: t.transitionName }, {
+        default: U(() => [
+          Pe(q("div", {
+            ref_key: "floatingEl",
+            ref: c,
+            style: G(a(ue)),
+            class: $e(a(he))
+          }, [
+            o.arrow ? (T(), K("div", {
+              key: 0,
+              ref_key: "arrowEl",
+              ref: g,
+              style: G(a(fe)),
+              class: "vv-dropdown__arrow"
+            }, 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: oe,
+              tabindex: a(n) ? void 0 : -1,
+              role: a(F),
+              "aria-labelledby": a(pe),
+              class: "vv-dropdown__list"
+            }), [
+              E(t.$slots, "items", w(x({
+                role: a(ge)
+              })))
+            ], 16, et),
+            E(t.$slots, "after", w(x({ expanded: a(n) })))
+          ], 6), [
+            [je, a(n)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
   }
 });
 export {
-  T as default
+  st as default
 };

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

@@ -1 +1 @@
-(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDropdown=l(e.vue,e.nanoid))})(this,function(e,l){"use strict";const m={...{id:[String,Number],name:{type:String,required:!0}},...{options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},...{disabled:Boolean},...{modifiers:[String,Array]},modelValue:{type:[String,Number,Boolean,Object,Array]},labelNoResults:{type:String,default:"No results"},multiple:Boolean,maxValues:[Number,String],unselectable:{type:Boolean,default:!0}},p=["id"],f={key:0,role:"option"},V=["aria-selected"],b=["for","onClick"],y=["id","type","value","checked","disabled","name"],h={name:"VvDropdown"};return e.defineComponent({...h,props:m,emits:["update:modelValue"],setup(g,{emit:k}){const t=g,a=computed(()=>String(t.id||l.nanoid())),{modifiers:_,disabled:u}=toRefs(t),{getOptionLabel:B,getOptionValue:i}=useOptions(t),{bemCssClasses:N}=useBemModifiers("vv-dropdown",{modifiers:_,disabled:u});function c(o){return Array.isArray(t.modelValue)?contains(o,t.modelValue)||contains(i(o),t.modelValue):equals(o,t.modelValue)||equals(i(o),t.modelValue)}function S(o){return typeof o=="string"||o.disabled===void 0?u.value:o.disabled}function C(o){var s;if(t.disabled)return;let r=o;if(t.multiple)if(Array.isArray(t.modelValue)){if(t.maxValues!==void 0&&t.maxValues>=0&&((s=t.modelValue)==null?void 0:s.length)>=t.maxValues&&!contains(o,t.modelValue))return;r=contains(o,t.modelValue)?removeFromList(o,t.modelValue):[...t.modelValue,o]}else r=[o];else t.unselectable&&o===t.modelValue&&(r=void 0);k("update:modelValue",r)}return(o,r)=>{var s;return e.openBlock(),e.createElementBlock("ul",{id:e.unref(a),class:e.normalizeClass(e.unref(N)),role:"listbox"},[(s=o.options)!=null&&s.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",f,[e.createElementVNode("label",null,e.toDisplayString(o.labelNoResults),1)])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(n,d)=>(e.openBlock(),e.createElementBlock("li",{key:d,role:"option","aria-selected":c(n)},[e.createElementVNode("label",{for:`dropdown-${d}-${e.unref(a)}`,onClick:e.withModifiers(O=>C(e.unref(i)(n)),["prevent"])},[e.createElementVNode("input",{id:`dropdown-${d}-${e.unref(a)}`,type:o.multiple?"checkbox":"radio",value:e.unref(i)(n),checked:c(n),disabled:S(n),name:o.name,tabindex:"-1","aria-hidden":"true"},null,8,y),e.createTextVNode(" "+e.toDisplayString(e.unref(B)(n)),1)],8,b)],8,V))),128))],10,p)}}})});
+(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))}})});