@volverjs/ui-vue 0.0.11 → 0.0.13-beta.1

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

@@ -1,750 +1 @@
-import { computed, useId, defineComponent, h, Fragment, provide, unref, toRefs, useAttrs, ref, onMounted, watch, createElementBlock, openBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, vShow, nextTick } from "vue";
-import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke } from "@vueuse/core";
-import mitt from "mitt";
-var StorageType = /* @__PURE__ */ ((StorageType2) => {
-  StorageType2["local"] = "local";
-  StorageType2["session"] = "session";
-  return StorageType2;
-})(StorageType || {});
-var Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
-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 ActionTag = /* @__PURE__ */ ((ActionTag2) => {
-  ActionTag2["nuxtLink"] = "nuxt-link";
-  ActionTag2["routerLink"] = "router-link";
-  ActionTag2["a"] = "a";
-  ActionTag2["button"] = "button";
-  return ActionTag2;
-})(ActionTag || {});
-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 || {});
-const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
-  "dropdownTrigger"
-);
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
-  "dropdownItem"
-);
-const ModifiersProps = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: {
-    type: [String, Array],
-    default: void 0
-  }
-};
-({
-  /**
-   * VvIcon position
-   */
-  iconPosition: {
-    default: Position.before
-  }
-});
-const IdProps = {
-  /**
-   * Global attribute id
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id: [String, Number]
-};
-const DropdownProps = {
-  /**
-   * Dropdown placement
-   */
-  placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
-  /**
-   * Dropdown strategy
-   */
-  strategy: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).includes(value)
-  },
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * 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: false
-  },
-  /**
-   * Flip dropdown position if there is no space in the default position
-   * @see https://floating-ui.com/docs/flip
-   */
-  flip: {
-    type: [Boolean, Object],
-    default: true
-  },
-  /**
-   * 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: false
-  },
-  /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
-   */
-  arrow: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on click outside
-   */
-  keepOpen: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Autofocus first item on dropdown open
-   */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean,
-    default: false
-  }
-};
-({
-  /**
-   * Button type
-   */
-  type: {
-    default: ButtonType.button
-  },
-  /**
-   * Default tag for the action
-   */
-  defaultTag: {
-    default: ActionTag.button
-  }
-});
-({
-  storageType: {
-    default: StorageType.local
-  }
-});
-const VvDropdownProps = {
-  ...IdProps,
-  ...DropdownProps,
-  ...ModifiersProps,
-  /**
-   * Show / hide dropdown programmatically
-   */
-  modelValue: {
-    type: Boolean,
-    default: void 0
-  },
-  /**
-   * Dropdown trigger element
-   */
-  reference: {
-    type: Object,
-    default: null
-  },
-  /**
-   * Dropdown role
-   */
-  role: {
-    type: String,
-    default: DropdownRole.menu,
-    validator: (value) => Object.values(DropdownRole).includes(value)
-  }
-};
-function useUniqueId(id) {
-  return computed(() => String(id?.value || useId()));
-}
-function useDropdownProvideTrigger({
-  reference,
-  id,
-  expanded,
-  aria
-}) {
-  const bus = mitt();
-  const component = defineComponent({
-    name: "VvDropdownTriggerProvider",
-    setup() {
-      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
-        reference,
-        id,
-        expanded,
-        aria,
-        bus
-      });
-    },
-    render() {
-      return h(Fragment, {}, this.$slots.default?.());
-    }
-  });
-  return {
-    bus,
-    component
-  };
-}
-function useDropdownProvideItem({
-  role,
-  ...others
-}) {
-  const itemRole = computed(
-    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
-  );
-  provide(INJECTION_KEY_DROPDOWN_ITEM, {
-    role: itemRole,
-    ...others
-  });
-  return { itemRole };
-}
-function useModifiers(prefix, modifiers, others) {
-  return computed(() => {
-    const toReturn = {
-      [prefix]: true
-    };
-    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : 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: false
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: VvDropdownProps,
-  emits: [
-    "update:modelValue",
-    "beforeEnter",
-    "afterLeave",
-    "beforeExpand",
-    "beforeCollapse",
-    "afterExpand",
-    "afterCollapse",
-    "before-enter",
-    "after-leave",
-    "enter",
-    "afterEnter",
-    "enterCancelled",
-    "beforeLeave",
-    "leave",
-    "leaveCancelled"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { id } = toRefs(props);
-    const hasId = useUniqueId(id);
-    const attrs = useAttrs();
-    const maxWidth = ref("auto");
-    const maxHeight = ref("auto");
-    const localReferenceEl = ref();
-    const floatingEl = ref();
-    const arrowEl = ref();
-    const listEl = ref();
-    const referenceEl = computed({
-      get: () => props.reference ?? localReferenceEl.value,
-      set: (newValue) => {
-        localReferenceEl.value = newValue;
-      }
-    });
-    const hasCustomPosition = ref(false);
-    onMounted(() => {
-      useMutationObserver(
-        floatingEl.value,
-        () => {
-          hasCustomPosition.value = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")?.trim() === "true";
-        },
-        {
-          attributeFilter: ["style"],
-          window
-        }
-      );
-    });
-    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({ fallbackStrategy: "initialPlacement" }));
-        } else {
-          toReturn.push(flip(props.flip));
-        }
-      }
-      if (props.shift) {
-        if (typeof props.shift === "boolean") {
-          toReturn.push(shift());
-        } else {
-          toReturn.push(shift(props.shift));
-        }
-      }
-      if (props.size) {
-        const apply = ({
-          availableWidth,
-          availableHeight
-        }) => {
-          maxWidth.value = `${availableWidth}px`;
-          maxHeight.value = `${availableHeight}px`;
-        };
-        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 toReturn;
-    });
-    const { x, y, middlewareData, placement, strategy } = useFloating(
-      referenceEl,
-      floatingEl,
-      {
-        whileElementsMounted: (...args) => {
-          return autoUpdate(...args, {
-            animationFrame: props.strategy === Strategy.fixed
-          });
-        },
-        placement: computed(() => props.placement),
-        strategy: computed(() => props.strategy),
-        middleware
-      }
-    );
-    const dropdownPlacement = computed(() => {
-      if (hasCustomPosition.value) {
-        return void 0;
-      }
-      const width = props.triggerWidth && referenceEl.value ? `${referenceEl.value?.offsetWidth}px` : void 0;
-      return {
-        position: strategy.value,
-        top: `${y.value ?? 0}px`,
-        left: `${x.value ?? 0}px`,
-        maxWidth: width ? void 0 : maxWidth.value,
-        maxHeight: maxHeight.value,
-        width
-      };
-    });
-    const side = computed(
-      () => placement.value.split("-")[0]
-    );
-    const arrowPlacement = computed(() => {
-      if (hasCustomPosition.value) {
-        return void 0;
-      }
-      const staticSide = {
-        [Side.top]: Side.bottom,
-        [Side.right]: Side.left,
-        [Side.bottom]: Side.top,
-        [Side.left]: Side.right
-      }[side.value];
-      return {
-        left: middlewareData.value.arrow?.x !== void 0 ? `${middlewareData.value.arrow?.x}px` : void 0,
-        top: middlewareData.value.arrow?.y !== void 0 ? `${middlewareData.value.arrow?.y}px` : void 0,
-        [staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`
-      };
-    });
-    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;
-        }
-        modelValue.value = newValue;
-      }
-    });
-    function show() {
-      expanded.value = true;
-    }
-    function hide() {
-      expanded.value = false;
-    }
-    function toggle() {
-      expanded.value = !expanded.value;
-    }
-    function init(el) {
-      referenceEl.value = el;
-    }
-    onClickOutside(
-      floatingEl,
-      () => {
-        if (!props.keepOpen && expanded.value) {
-          expanded.value = false;
-        }
-      },
-      { ignore: [referenceEl] }
-    );
-    const hasAriaLabelledby = computed(() => {
-      return referenceEl.value?.getAttribute?.("id") ?? void 0;
-    });
-    const referenceAria = computed(() => ({
-      "aria-controls": hasId.value,
-      "aria-haspopup": true,
-      "aria-expanded": expanded.value
-    }));
-    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
-      reference: referenceEl,
-      id: hasId,
-      expanded,
-      aria: referenceAria
-    });
-    bus.on("click", toggle);
-    const { role, modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers(
-      "vv-dropdown",
-      modifiers,
-      computed(() => ({
-        arrow: props.arrow
-      }))
-    );
-    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(
-        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
-      );
-    }
-    function focusFirst() {
-      nextTick(() => {
-        const focusableElements = getKeyboardFocusableElements(
-          floatingEl.value
-        );
-        if (focusableElements.length > 0) {
-          focusableElements[0].focus({
-            preventScroll: true
-          });
-        }
-      });
-    }
-    function focusFirstListElement() {
-      nextTick(() => {
-        const focusableElements = getKeyboardFocusableElements(
-          listEl.value
-        );
-        if (focusableElements.length > 0) {
-          focusableElements[0].focus({
-            preventScroll: true
-          });
-        }
-      });
-    }
-    function focusNext() {
-      nextTick(() => {
-        if (focused.value) {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length === 0 || !document.activeElement) {
-            return;
-          }
-          const activeElementIndex = focusableElements.indexOf(
-            document.activeElement
-          );
-          if (activeElementIndex < focusableElements.length - 1) {
-            focusableElements[activeElementIndex + 1].focus({
-              preventScroll: true
-            });
-          } else {
-            focusableElements[0].focus({
-              preventScroll: true
-            });
-          }
-        }
-      });
-    }
-    function focusPrev() {
-      nextTick(() => {
-        if (focused.value) {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length === 0 || !document.activeElement) {
-            return;
-          }
-          const activeElementIndex = focusableElements.indexOf(
-            document.activeElement
-          );
-          if (activeElementIndex > 0) {
-            focusableElements[activeElementIndex - 1].focus({
-              preventScroll: true
-            });
-          } else {
-            focusableElements[focusableElements.length - 1].focus({
-              preventScroll: true
-            });
-          }
-        }
-      });
-    }
-    watch(expanded, (newValue) => {
-      if (newValue && props.autofocusFirst) {
-        focusFirst();
-      }
-    });
-    __expose({
-      toggle,
-      show,
-      hide,
-      init,
-      focusFirst,
-      focusFirstListElement,
-      focusNext,
-      focusPrev,
-      customPosition: hasCustomPosition
-    });
-    const hovered = useElementHover(floatingEl);
-    const { itemRole } = useDropdownProvideItem({
-      role,
-      expanded,
-      focused,
-      hovered
-    });
-    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) => {
-      const htmlEl = e.target;
-      if (expanded.value && focused.value && htmlEl) {
-        htmlEl?.click();
-      }
-    });
-    const dropdownTransitionHandlers = {
-      "before-enter": () => {
-        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("beforeEnter");
-      },
-      "after-leave": () => {
-        emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("afterLeave");
-      },
-      "enter": () => {
-        emit("enter");
-      },
-      "after-enter": () => {
-        emit("afterEnter");
-      },
-      "enter-cancelled": () => {
-        emit("enterCancelled");
-      },
-      "before-leave": () => {
-        emit("beforeLeave");
-      },
-      "leave": () => {
-        emit("leave");
-      },
-      "leave-cancelled": () => {
-        emit("leaveCancelled");
-      }
-    };
-    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
-            /* FORWARDED */
-          }),
-          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
-            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
-                    /* STYLE */
-                  )) : createCommentVNode("v-if", true),
-                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-                  createElementVNode("div", 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
-                /* CLASS, STYLE */
-              ), [
-                [vShow, unref(expanded)]
-              ])
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 16, ["name"])
-        ],
-        64
-        /* STABLE_FRAGMENT */
-      );
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
+import{computed as e,useId as t,defineComponent as o,h as a,Fragment as l,provide as r,unref as n,toRefs as u,useAttrs as i,ref as s,onMounted as f,watch as d,createElementBlock as p,openBlock as v,createVNode as c,withCtx as b,renderSlot as m,normalizeProps as g,guardReactiveProps as h,Transition as y,mergeProps as x,toHandlers as w,withDirectives as E,createElementVNode as S,normalizeClass as $,normalizeStyle as O,createCommentVNode as k,vShow as j,nextTick as A}from"vue";import{autoPlacement as B,flip as C,shift as P,size as _,offset as D,arrow as L,useFloating as N,autoUpdate as F}from"@floating-ui/vue";import{useMutationObserver as V,useVModel as W,onClickOutside as z,useFocusWithin as H,useElementHover as R,onKeyStroke as T}from"@vueuse/core";import q from"mitt";var I=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(I||{}),M=/* @__PURE__ */(e=>(e.absolute="absolute",e.fixed="fixed",e))(M||{}),U=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(U||{}),G=/* @__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))(G||{}),J=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(J||{}),K=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(K||{}),Q=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(Q||{}),X=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(X||{}),Y=/* @__PURE__ */(e=>(e.option="option",e.presentation="presentation",e))(Y||{});const Z=/* @__PURE__ */Symbol.for("dropdownTrigger"),ee=/* @__PURE__ */Symbol.for("dropdownItem"),te={modifiers:{type:[String,Array],default:void 0}};J.before;const oe={id:[String,Number]},ae={placement:{type:String,default:U.bottom,validator:e=>Object.values(U).includes(e)||Object.values(G).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(M).includes(e)},transitionName:{type:String,default:void 0},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},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}};K.button,Q.button,I.local;const le={...oe,...ae,...te,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:X.menu,validator:e=>Object.values(X).includes(e)}};const re=["id","tabindex","role","aria-labelledby"],ne=/* @__PURE__ */o({name:"VvDropdown",inheritAttrs:!1,props:le,emits:["update:modelValue","beforeEnter","afterLeave","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(I,{expose:G,emit:J}){const K=I,Q=J,{id:te}=u(K),oe=function(o){return e(()=>String(o?.value||t()))}(te),ae=i(),le=s("auto"),ne=s("auto"),ue=s(),ie=s(),se=s(),fe=s(),de=e({get:()=>K.reference??ue.value,set:e=>{ue.value=e}}),pe=s(!1);f(()=>{V(ie.value,()=>{pe.value="true"===window.getComputedStyle(ie.value).getPropertyValue("--dropdown-custom-position")?.trim()},{attributeFilter:["style"],window:window})});const ve=e(()=>{const e=[];if(K.autoPlacement?"boolean"==typeof K.autoPlacement?e.push(B()):e.push(B(K.autoPlacement)):K.flip&&("boolean"==typeof K.flip?e.push(C({fallbackStrategy:"initialPlacement"})):e.push(C(K.flip))),K.shift&&("boolean"==typeof K.shift?e.push(P()):e.push(P(K.shift))),K.size){const t=({availableWidth:e,availableHeight:t})=>{le.value=`${e}px`,ne.value=`${t}px`};"boolean"==typeof K.size?e.push(_({apply:t})):e.push(_({...K.size,apply:t}))}return K.offset&&(e.push(D(Number(K.offset))),["string","number"].includes(typeof K.offset)?e.push(D(Number(K.offset))):e.push(D(K.offset))),K.arrow&&e.push(L({element:se})),e}),{x:ce,y:be,middlewareData:me,placement:ge,strategy:he}=N(de,ie,{whileElementsMounted:(...e)=>F(...e,{animationFrame:K.strategy===M.fixed}),placement:e(()=>K.placement),strategy:e(()=>K.strategy),middleware:ve}),ye=e(()=>{if(pe.value)return;const e=K.triggerWidth&&de.value?`${de.value?.offsetWidth}px`:void 0;return{position:he.value,top:`${be.value??0}px`,left:`${ce.value??0}px`,maxWidth:e?void 0:le.value,maxHeight:ne.value,width:e}}),xe=e(()=>ge.value.split("-")[0]),we=e(()=>{if(pe.value)return;const e={[U.top]:U.bottom,[U.right]:U.left,[U.bottom]:U.top,[U.left]:U.right}[xe.value];return{left:void 0!==me.value.arrow?.x?`${me.value.arrow?.x}px`:void 0,top:void 0!==me.value.arrow?.y?`${me.value.arrow?.y}px`:void 0,[e]:-(se.value?.offsetWidth??0)/2+"px"}}),Ee=W(K,"modelValue",Q),Se=s(!1),$e=e({get:()=>Ee.value??Se.value,set:e=>{void 0!==Ee.value?Ee.value=e:Se.value=e}});function Oe(){$e.value=!0}function ke(){$e.value=!1}function je(){$e.value=!$e.value}function Ae(e){de.value=e}z(ie,()=>{!K.keepOpen&&$e.value&&($e.value=!1)},{ignore:[de]});const Be=e(()=>de.value?.getAttribute?.("id")??void 0),Ce=e(()=>({"aria-controls":oe.value,"aria-haspopup":!0,"aria-expanded":$e.value})),{component:Pe,bus:_e}=function({reference:e,id:t,expanded:n,aria:u}){const i=q(),s=o({name:"VvDropdownTriggerProvider",setup(){r(Z,{reference:e,id:t,expanded:n,aria:u,bus:i})},render(){return a(l,{},this.$slots.default?.())}});return{bus:i,component:s}}({reference:de,id:oe,expanded:$e,aria:Ce});_e.on("click",je);const{role:De,modifiers:Le}=u(K),Ne=function(t,o,a){return e(()=>{const e={[t]:!0},l="string"==typeof o?.value?o.value.split(" "):o?.value;return l&&Array.isArray(l)&&l.forEach(o=>{o&&(e[`${t}--${o}`]=!0)}),a&&Object.keys(a.value).forEach(o=>{e[`${t}--${o}`]=n(a.value[o])}),e})}("vv-dropdown",Le,e(()=>({arrow:K.arrow}))),{focused:Fe}=H(ie);function Ve(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter(e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden")):[]}function We(){A(()=>{const e=Ve(ie.value);e.length>0&&e[0].focus({preventScroll:!0})})}function ze(){A(()=>{if(Fe.value){const e=Ve(ie.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})}function He(){A(()=>{if(Fe.value){const e=Ve(ie.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})}d($e,e=>{e&&K.autofocusFirst&&We()}),G({toggle:je,show:Oe,hide:ke,init:Ae,focusFirst:We,focusFirstListElement:function(){A(()=>{const e=Ve(fe.value);e.length>0&&e[0].focus({preventScroll:!0})})},focusNext:ze,focusPrev:He,customPosition:pe});const Re=R(ie),{itemRole:Te}=function({role:t,...o}){const a=e(()=>t.value===X.listbox?Y.option:Y.presentation);return r(ee,{role:a,...o}),{itemRole:a}}({role:De,expanded:$e,focused:Fe,hovered:Re});T("Escape",e=>{$e.value&&(e.preventDefault(),ke())}),T("ArrowDown",e=>{$e.value&&Fe.value&&(e.preventDefault(),ze())}),T("ArrowUp",e=>{$e.value&&Fe.value&&(e.preventDefault(),He())}),T([" ","Enter"],e=>{const t=e.target;$e.value&&Fe.value&&t&&t?.click()});const qe={"before-enter":()=>{Q($e.value?"beforeExpand":"beforeCollapse"),Q("beforeEnter")},"after-leave":()=>{Q($e.value?"afterExpand":"afterCollapse"),Q("afterLeave")},enter:()=>{Q("enter")},"after-enter":()=>{Q("afterEnter")},"enter-cancelled":()=>{Q("enterCancelled")},"before-leave":()=>{Q("beforeLeave")},leave:()=>{Q("leave")},"leave-cancelled":()=>{Q("leaveCancelled")}};return(e,t)=>(v(),p(l,null,[c(n(Pe),null,{default:b(()=>[m(e.$slots,"default",g(h({init:Ae,show:Oe,hide:ke,toggle:je,expanded:n($e),aria:n(Ce)})))]),_:3}),c(y,x({name:e.transitionName},w(qe),{persisted:""}),{default:b(()=>[E(S("div",{ref_key:"floatingEl",ref:ie,style:O(n(ye)),class:$(n(Ne))},[K.arrow?(v(),p("div",{key:0,ref_key:"arrowEl",ref:se,style:O(n(we)),class:"vv-dropdown__arrow"},null,4)):k("v-if",!0),m(e.$slots,"before",g(h({expanded:n($e)}))),S("div",x(n(ae),{id:n(oe),ref_key:"listEl",ref:fe,tabindex:n($e)?void 0:-1,role:n(De),"aria-labelledby":n(Be),class:"vv-dropdown__list"}),[m(e.$slots,"items",g(h({role:n(Te)})))],16,re),m(e.$slots,"after",g(h({expanded:n($e)})))],6),[[j,n($e)]])]),_:3},16,["name"])],64))}});export{ne as default};