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

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

@@ -1,10 +1,57 @@
-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 = {
+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/)
@@ -21,7 +68,7 @@ const ze = Symbol.for("dropdownTrigger"), Fe = Symbol.for("dropdownItem"), Me =
    */
   target: {
     type: String,
-    validator: (e) => Object.values(te).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -30,47 +77,79 @@ const ze = Symbol.for("dropdownTrigger"), Fe = Symbol.for("dropdownItem"), Me =
     type: String,
     default: "noopener noreferrer"
   }
-}, Te = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Ke = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, Le = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, Ue = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, qe = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-k.before;
-const Ge = {
+({
+  /**
+   * 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]
-}, He = {
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: j.bottom,
-    validator: (e) => Object.values(j).includes(e) || Object.values(ee).includes(e)
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
   },
   /**
    * Dropdown show / hide transition name
@@ -92,7 +171,7 @@ const Ge = {
    */
   shift: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Flip dropdown position if there is no space in the default position
@@ -100,7 +179,7 @@ const Ge = {
    */
   flip: {
     type: [Boolean, Object],
-    default: !0
+    default: true
   },
   /**
    * Size of the dropdown
@@ -116,7 +195,7 @@ const Ge = {
    */
   autoPlacement: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Add arrow to the dropdown
@@ -124,21 +203,21 @@ const Ge = {
    */
   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
@@ -148,20 +227,24 @@ const Ge = {
   }
 };
 ({
-  ...Te,
-  ...Ue,
-  ...Le,
-  ...Ke,
-  ...Me,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: B.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const Je = {
-  ...Ge,
-  ...qe,
-  ...He,
+const VvDropdownProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...DropdownProps,
   /**
    * Show / hide dropdown programmatically
    */
@@ -181,26 +264,28 @@ const Je = {
    */
   role: {
     type: String,
-    default: O.menu,
-    validator: (e) => Object.values(O).includes(e)
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
   }
-}, Ye = (e) => s(() => String((e == null ? void 0 : e.value) || Ie()));
-function Qe({
-  reference: e,
-  id: l,
-  expanded: o,
-  aria: f
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useProvideDropdownTrigger({
+  reference,
+  id,
+  expanded,
+  aria
 }) {
-  const u = Re(), i = X({
+  const bus = mitt();
+  const component = defineComponent({
     name: "VvDropdownTriggerProvider",
     provide() {
       return {
-        [ze]: {
-          reference: e,
-          id: l,
-          expanded: o,
-          aria: f,
-          bus: u
+        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
+          reference,
+          id,
+          expanded,
+          aria,
+          bus
         }
       };
     },
@@ -208,255 +293,378 @@ function Qe({
       return {};
     },
     render() {
-      var v, m;
-      return we(Z, {}, (m = (v = this.$slots).default) == null ? void 0 : m.call(v));
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
     }
   });
   return {
-    bus: u,
-    component: i
+    bus,
+    component
   };
 }
-function Xe({
-  role: e,
-  expanded: l
+function useProvideDropdownItem({
+  role,
+  expanded
 }) {
-  const o = s(
-    () => e.value === O.listbox ? A.option : A.presentation
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
-  return xe(Fe, {
-    role: o,
-    expanded: l
-  }), { itemRole: o };
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    expanded
+  });
+  return { itemRole };
 }
-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;
+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 et = ["id", "tabindex", "role", "aria-labelledby"], tt = {
+const _hoisted_1 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__ = {
   name: "VvDropdown",
-  inheritAttrs: !1
-}, st = /* @__PURE__ */ X({
-  ...tt,
-  props: Je,
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvDropdownProps,
   emits: ["update:modelValue"],
-  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;
+  setup(__props, { expose, 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));
+        }
+      }
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
       }
-    }), 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
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
         }) => {
-          v.value = `${h}px`, m.value = `${y}px`;
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
         };
-        typeof o.size == "boolean" ? t.push(
-          Q({
-            apply: r
-          })
-        ) : t.push(
-          Q({
-            ...o.size,
-            apply: r
+        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 && (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,
+      return toReturn;
+    });
+    const { x, y, strategy, middlewareData, placement } = useFloating(
+      referenceEl,
+      floatingEl,
       {
-        whileElementsMounted: Ae,
-        placement: o.placement,
-        middleware: re
+        whileElementsMounted: autoUpdate,
+        placement: computed(() => props.placement),
+        strategy: computed(() => props.strategy),
+        middleware
       }
-    ), 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(
+    );
+    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"
-      })[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`
+      })[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`
       };
-    }), 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;
+    });
+    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;
         }
-        P.value = t;
+        modelValue.value = newValue;
       }
-    }), ce = () => {
-      n.value = !0;
-    }, W = () => {
-      n.value = !1;
-    }, R = () => {
-      n.value = !n.value;
-    }, de = (t) => {
-      d.value = t;
+    });
+    const show = () => {
+      expanded.value = true;
     };
-    Oe(n, (t) => {
-      t && o.autofocusFirst && D(() => {
-        const r = $(
-          c.value
-        );
-        r.length > 0 && r[0].focus();
-      });
-    }), Ce(
-      c,
+    const hide = () => {
+      expanded.value = false;
+    };
+    const toggle = () => {
+      expanded.value = !expanded.value;
+    };
+    const init = (el) => {
+      referenceEl.value = el;
+    };
+    expose({ toggle, show, hide, init });
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        nextTick(() => {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        });
+      }
+    });
+    onClickOutside(
+      floatingEl,
       () => {
-        o.autoClose && (n.value = !1);
+        if (props.autoClose) {
+          expanded.value = false;
+        }
       },
-      { ignore: [d] }
+      { ignore: [referenceEl] }
     );
-    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
+    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;
     });
-    me.on("click", R);
-    const { role: F, modifiers: be } = M(o), { itemRole: ge } = Xe({ role: F, expanded: n }), he = Ze(
+    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
+    });
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const { itemRole } = useProvideDropdownItem({ role, expanded });
+    const bemCssClasses = useModifiers(
       "vv-dropdown",
-      be,
-      s(() => ({
-        arrow: o.arrow
+      modifiers,
+      computed(() => ({
+        arrow: props.arrow
       }))
-    ), { focused: b } = We(c);
-    function $(t) {
-      return t ? [
-        ...t.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(
-        (r) => !r.hasAttribute("disabled") && !r.getAttribute("aria-hidden")
-      ) : [];
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
     }
-    const ye = () => {
-      D(() => {
-        if (b.value) {
-          const t = $(
-            c.value
+    const focusNext = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (t.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const r = t.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          r < t.length - 1 ? t[r + 1].focus() : t[0].focus();
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus();
+          } else {
+            focusableElements[0].focus();
+          }
         }
       });
-    }, Ee = () => {
-      D(() => {
-        if (b.value) {
-          const t = $(
-            c.value
+    };
+    const focusPrev = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (t.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const r = t.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          r > 0 ? t[r - 1].focus() : t[t.length - 1].focus();
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus();
+          } else {
+            focusableElements[focusableElements.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));
+    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 {
-  st as default
+  _sfc_main as default
 };