@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

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

@@ -1,27 +1,145 @@
-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, defineComponent, h, Fragment, provide, unref, toRefs, useAttrs, ref, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, mergeProps, vShow } from "vue";
+import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
+import { nanoid } from "nanoid";
+import { useVModel, onClickOutside, useFocusWithin, onKeyStroke } from "@vueuse/core";
+import mitt from "mitt";
+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 DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
+var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
+  DropdownItemRole2["option"] = "option";
+  DropdownItemRole2["presentation"] = "presentation";
+  return DropdownItemRole2;
+})(DropdownItemRole || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-x.before;
-const Se = {
+({
+  /**
+   * 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)
+  }
+});
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
-}, ke = {
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: w.bottom,
-    validator: (t) => Object.values(w).includes(t) || Object.values(K).includes(t)
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
   },
   /**
    * Dropdown show / hide transition name
@@ -43,7 +161,7 @@ const Se = {
    */
   shift: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Flip dropdown position if there is no space in the default position
@@ -51,7 +169,7 @@ const Se = {
    */
   flip: {
     type: [Boolean, Object],
-    default: !0
+    default: true
   },
   /**
    * Size of the dropdown
@@ -67,7 +185,7 @@ const Se = {
    */
   autoPlacement: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Add arrow to the dropdown
@@ -75,21 +193,21 @@ const Se = {
    */
   arrow: {
     type: Boolean,
-    default: !1
+    default: false
   },
   /**
    * Close dropdown on click outside
    */
   autoClose: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * Autofocus first item on dropdown open
    */
   autofocusFirst: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * Set dropdown width to the same as the trigger
@@ -97,10 +215,26 @@ const Se = {
   triggerWidth: {
     type: Boolean
   }
-}, T = ["listbox", "menu"], Oe = {
-  ...Se,
-  ...Ee,
-  ...ke,
+};
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+const VvDropdownProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...DropdownProps,
   /**
    * Show / hide dropdown programmatically
    */
@@ -120,225 +254,405 @@ const Se = {
    */
   role: {
     type: String,
-    default: T[1],
-    validator: (t) => T.includes(t)
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
   }
-}, De = ["id", "tabindex", "role", "aria-labelledby"], _e = {
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useProvideDropdownTrigger({
+  reference,
+  id,
+  expanded,
+  aria
+}) {
+  const bus = mitt();
+  const component = defineComponent({
+    name: "VvDropdownTriggerProvider",
+    provide() {
+      return {
+        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
+          reference,
+          id,
+          expanded,
+          aria,
+          bus
+        }
+      };
+    },
+    setup() {
+      return {};
+    },
+    render() {
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+    }
+  });
+  return {
+    bus,
+    component
+  };
+}
+function useProvideDropdownItem({
+  role,
+  expanded
+}) {
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
+  );
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    expanded
+  });
+  return { itemRole };
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const _hoisted_1 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__ = {
   name: "VvDropdown",
-  inheritAttrs: !1
-}, Pe = /* @__PURE__ */ de({
-  ..._e,
-  props: Oe,
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvDropdownProps,
   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(__props, { emit }) {
+    const props = __props;
+    const { id } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const attrs = useAttrs();
+    const maxWidth = ref("auto");
+    const maxHeight = ref("auto");
+    const localReferenceEl = ref(null);
+    const floatingEl = ref(null);
+    const arrowEl = ref(null);
+    const listEl = ref(null);
+    const referenceEl = computed({
+      get: () => props.reference ?? localReferenceEl.value,
+      set: (newValue) => {
+        localReferenceEl.value = newValue;
+      }
+    });
+    const middleware = computed(() => {
+      const toReturn = [];
+      if (props.autoPlacement) {
+        if (typeof props.autoPlacement === "boolean") {
+          toReturn.push(autoPlacement());
+        } else {
+          toReturn.push(
+            autoPlacement(props.autoPlacement)
+          );
+        }
+      } else if (props.flip) {
+        if (typeof props.flip === "boolean") {
+          toReturn.push(flip());
+        } else {
+          toReturn.push(flip(props.flip));
+        }
       }
-    }), 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
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
         }) => {
-          E.value = `${f}px`, S.value = `${d}px`;
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
         };
-        typeof o.size == "boolean" ? e.push(
-          I({
-            apply: l
-          })
-        ) : e.push(
-          I({
-            ...o.size,
-            apply: l
+        if (typeof props.size === "boolean") {
+          toReturn.push(
+            size({
+              apply
+            })
+          );
+        } else {
+          toReturn.push(
+            size({
+              ...props.size,
+              apply
+            })
+          );
+        }
+      }
+      if (props.offset) {
+        toReturn.push(offset(Number(props.offset)));
+        if (["string", "number"].includes(typeof props.offset)) {
+          toReturn.push(offset(Number(props.offset)));
+        } else {
+          toReturn.push(offset(props.offset));
+        }
+      }
+      if (props.arrow) {
+        toReturn.push(
+          arrow({
+            element: arrowEl
           })
         );
       }
-      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,
+      return toReturn;
+    });
+    const { x, y, strategy, middlewareData, placement } = useFloating(
+      referenceEl,
+      floatingEl,
       {
-        whileElementsMounted: xe,
-        placement: o.placement,
-        middleware: L
+        whileElementsMounted: autoUpdate,
+        placement: props.placement,
+        middleware
       }
-    ), 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(
+    );
+    const dropdownPlacement = computed(() => ({
+      position: strategy.value,
+      top: `${y.value ?? 0}px`,
+      left: `${x.value ?? 0}px`,
+      maxWidth: maxWidth.value,
+      maxHeight: maxHeight.value,
+      width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+    }));
+    const side = computed(() => placement.value.split("-")[0]);
+    const staticSide = 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`
+      })[side.value] ?? "bottom"
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d;
+      if (["bottom", "top"].includes(staticSide.value)) {
+        return {
+          right: `${((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) ?? 0}px`,
+          [staticSide.value]: `${-(((_b = arrowEl.value) == null ? void 0 : _b.offsetWidth) ?? 0) / 2}px`
+        };
+      }
+      return {
+        top: `${((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) ?? 0}px`,
+        [staticSide.value]: `${-(((_d = arrowEl.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;
+    });
+    const modelValue = useVModel(props, "modelValue", emit);
+    const localModelValue = ref(false);
+    const expanded = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
           return;
         }
-        b.value = e;
+        modelValue.value = newValue;
       }
-    }), te = () => {
-      a.value = !0;
-    }, _ = () => {
-      a.value = !1;
-    }, $ = () => {
-      a.value = !a.value;
-    }, oe = (e) => {
-      s.value = e;
+    });
+    const show = () => {
+      expanded.value = true;
     };
-    watch(a, (e) => {
-      e && o.autofocusFirst && nextTick(() => {
-        const l = g(
-          n.value
-        );
-        l.length > 0 && l[0].focus();
-      });
-    }), onClickOutside(
-      n,
+    const hide = () => {
+      expanded.value = false;
+    };
+    const toggle = () => {
+      expanded.value = !expanded.value;
+    };
+    const init = (el) => {
+      referenceEl.value = el;
+    };
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        nextTick(() => {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        });
+      }
+    });
+    onClickOutside(
+      floatingEl,
       () => {
-        o.autoClose && (a.value = !1);
+        if (props.autoClose) {
+          expanded.value = false;
+        }
       },
-      { ignore: [s] }
+      { ignore: [referenceEl] }
     );
-    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
+    const hasAriaLabelledby = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+    });
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
     });
-    re.on("click", $);
-    const { role: P, modifiers: ne } = toRefs(o), { itemRole: se } = useProvideDropdownItem({ role: P, expanded: a }), ie = useBemModifiers(
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const { itemRole } = useProvideDropdownItem({ role, expanded });
+    const bemCssClasses = useModifiers(
       "vv-dropdown",
-      ne,
+      modifiers,
       computed(() => ({
-        arrow: o.arrow
+        arrow: props.arrow
       }))
-    ), { focused: i } = useFocusWithin(n);
-    function g(e) {
-      return e ? [
-        ...e.querySelectorAll(
+    );
+    const { focused } = useFocusWithin(floatingEl);
+    function getKeyboardFocusableElements(element) {
+      if (!element) {
+        return [];
+      }
+      return [
+        ...element.querySelectorAll(
           'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
         )
       ].filter(
-        (l) => !l.hasAttribute("disabled") && !l.getAttribute("aria-hidden")
-      ) : [];
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
     }
-    const ue = () => {
+    const focusNext = () => {
       nextTick(() => {
-        if (i.value) {
-          const e = g(
-            n.value
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (e.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const l = e.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          l < e.length - 1 ? e[l + 1].focus() : e[0].focus();
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus();
+          } else {
+            focusableElements[0].focus();
+          }
         }
       });
-    }, fe = () => {
+    };
+    const focusPrev = () => {
       nextTick(() => {
-        if (i.value) {
-          const e = g(
-            n.value
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (e.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const l = e.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          l > 0 ? e[l - 1].focus() : e[e.length - 1].focus();
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus();
+          } else {
+            focusableElements[focusableElements.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));
+    onKeyStroke("Escape", (e) => {
+      if (expanded.value) {
+        e.preventDefault();
+        hide();
+      }
+    });
+    onKeyStroke("ArrowDown", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusNext();
+      }
+    });
+    onKeyStroke("ArrowUp", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusPrev();
+      }
+    });
+    onKeyStroke([" ", "Enter"], (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        const activeElement = document.activeElement;
+        activeElement.click();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(VvDropdownTriggerProvider), null, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+          ]),
+          _: 3
+        }),
+        createVNode(Transition, { name: _ctx.transitionName }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              ref_key: "floatingEl",
+              ref: floatingEl,
+              style: normalizeStyle(unref(dropdownPlacement)),
+              class: normalizeClass(unref(bemCssClasses))
+            }, [
+              props.arrow ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "arrowEl",
+                ref: arrowEl,
+                style: normalizeStyle(unref(arrowPlacement)),
+                class: "vv-dropdown__arrow"
+              }, null, 4)) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+              createElementVNode("ul", mergeProps(unref(attrs), {
+                id: unref(hasId),
+                ref_key: "listEl",
+                ref: listEl,
+                tabindex: !unref(expanded) ? -1 : void 0,
+                role: unref(role),
+                "aria-labelledby": unref(hasAriaLabelledby),
+                class: "vv-dropdown__list"
+              }), [
+                renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                  role: unref(itemRole)
+                })))
+              ], 16, _hoisted_1),
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+            ], 6), [
+              [vShow, unref(expanded)]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 64);
+    };
   }
 });
 export {
-  Pe as default
+  _sfc_main as default
 };