@volverjs/ui-vue 0.0.3-beta.3 → 0.0.3

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

@@ -1,103 +1,344 @@
-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 = {
-  disabled: Boolean
-}, P = {
+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 = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, $ = {
-  options: {
-    type: Array,
-    default: () => []
+};
+x.before;
+const Se = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+}, ke = {
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: w.bottom,
+    validator: (t) => Object.values(w).includes(t) || Object.values(K).includes(t)
+  },
+  /**
+   * 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
+  }
+}, T = ["listbox", "menu"], Oe = {
+  ...Se,
+  ...Ee,
+  ...ke,
+  /**
+   * Show / hide dropdown programmatically
+   */
   modelValue: {
-    type: [String, Number, Boolean, Object, Array]
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
   },
-  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 role
+   */
+  role: {
+    type: String,
+    default: T[1],
+    validator: (t) => T.includes(t)
+  }
+}, De = ["id", "tabindex", "role", "aria-labelledby"], _e = {
+  name: "VvDropdown",
+  inheritAttrs: !1
+}, Pe = /* @__PURE__ */ de({
+  ..._e,
+  props: Oe,
   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(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;
+      }
+    }), 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
+        }) => {
+          E.value = `${f}px`, S.value = `${d}px`;
+        };
+        typeof o.size == "boolean" ? e.push(
+          I({
+            apply: l
+          })
+        ) : e.push(
+          I({
+            ...o.size,
+            apply: l
+          })
+        );
+      }
+      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
+        })
+      ), e;
+    }), { x: G, y: J, strategy: Q, middlewareData: O, placement: X } = we(
+      s,
+      n,
+      {
+        whileElementsMounted: xe,
+        placement: o.placement,
+        middleware: L
+      }
+    ), 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(
+      () => ({
+        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`
+      } : {
+        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`
+      };
+    }), 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;
+          return;
+        }
+        b.value = e;
+      }
+    }), te = () => {
+      a.value = !0;
+    }, _ = () => {
+      a.value = !1;
+    }, $ = () => {
+      a.value = !a.value;
+    }, oe = (e) => {
+      s.value = e;
+    };
+    watch(a, (e) => {
+      e && o.autofocusFirst && nextTick(() => {
+        const l = g(
+          n.value
+        );
+        l.length > 0 && l[0].focus();
+      });
+    }), onClickOutside(
+      n,
+      () => {
+        o.autoClose && (a.value = !1);
+      },
+      { ignore: [s] }
+    );
+    const le = computed(() => {
+      var e;
+      return ((e = s.value) == null ? void 0 : e.getAttribute("id")) ?? void 0;
+    }), B = computed(() => ({
+      "aria-controls": m.value,
+      "aria-haspopup": !0,
+      "aria-expanded": a.value
+    })), { component: ae, bus: re } = useProvideDropdownTrigger({
+      reference: s,
+      id: m,
+      expanded: a,
+      aria: B
     });
-    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;
+    re.on("click", $);
+    const { role: P, modifiers: ne } = toRefs(o), { itemRole: se } = useProvideDropdownItem({ role: P, expanded: a }), ie = useBemModifiers(
+      "vv-dropdown",
+      ne,
+      computed(() => ({
+        arrow: o.arrow
+      }))
+    ), { focused: i } = useFocusWithin(n);
+    function g(e) {
+      return e ? [
+        ...e.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (l) => !l.hasAttribute("disabled") && !l.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 ue = () => {
+      nextTick(() => {
+        if (i.value) {
+          const e = g(
+            n.value
+          );
+          if (e.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 l = e.indexOf(
+            document.activeElement
+          );
+          l < e.length - 1 ? e[l + 1].focus() : e[0].focus();
+        }
+      });
+    }, fe = () => {
+      nextTick(() => {
+        if (i.value) {
+          const e = g(
+            n.value
+          );
+          if (e.length === 0 || !document.activeElement)
+            return;
+          const l = e.indexOf(
+            document.activeElement
+          );
+          l > 0 ? e[l - 1].focus() : e[e.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) })))
+        ]),
+        _: 3
+      }),
+      V(pe, { name: e.transitionName }, {
+        default: j(() => [
+          ve(C("div", {
+            ref_key: "floatingEl",
+            ref: n,
+            style: W(r(Y)),
+            class: me(r(ie))
+          }, [
+            o.arrow ? (A(), N("div", {
+              key: 0,
+              ref_key: "arrowEl",
+              ref: u,
+              style: W(r(ee)),
+              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),
+              ref_key: "listEl",
+              ref: H,
+              tabindex: r(a) ? void 0 : -1,
+              role: r(P),
+              "aria-labelledby": r(le),
+              class: "vv-dropdown__list"
+            }), [
+              c(e.$slots, "items", p(v({
+                role: r(se)
+              })))
+            ], 16, De),
+            c(e.$slots, "after", p(v({ expanded: r(a) })))
+          ], 6), [
+            [ge, r(a)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
   }
 });
 export {
-  T as default
+  Pe 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(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))}})});