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

package/dist/components/VvDropdownItem/VvDropdownItem.es.js

@@ -1,38 +1,53 @@
-import { inject as d, provide as l, defineComponent as f, ref as p, watch as _, openBlock as a, createElementBlock as v, mergeProps as I, unref as t, renderSlot as w } from "vue";
+import { inject, provide, defineComponent, ref, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
 import "mitt";
-import { useElementHover as D, useFocus as E, useFocusWithin as N } from "@vueuse/core";
-var u = /* @__PURE__ */ ((e) => (e.button = "button", e.link = "link", e.menuitem = "menuitem", e))(u || {});
-const O = Symbol.for("dropdownItem"), b = Symbol.for("dropdownAction");
-function h() {
-  return d(O, {});
+import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-function k({
-  expanded: e
+function useProvideDropdownAction({
+  expanded
 }) {
-  l(b, {
-    role: u.menuitem,
-    expanded: e
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
   });
 }
-const C = {
+const __default__ = {
   name: "VvDropdownItem"
-}, S = /* @__PURE__ */ f({
-  ...C,
-  setup(e) {
-    const { role: s, expanded: c } = h(), o = p(null);
-    k({ expanded: c });
-    const m = D(o), { focused: r } = E(o), { focused: i } = N(o);
-    return _(m, (n) => {
-      n && (r.value = !0);
-    }), (n, P) => (a(), v("li", I({ role: t(s) }, {
-      ref_key: "element",
-      ref: o,
-      class: ["vv-dropdown__item", { "focus-visible": t(r) || t(i) }]
-    }), [
-      w(n.$slots, "default")
-    ], 16));
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  setup(__props) {
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+        ref_key: "element",
+        ref: element,
+        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
   }
 });
 export {
-  S as default
+  _sfc_main as default
 };

package/dist/components/VvDropdownItem/VvDropdownItem.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDropdownItem=t(e.vue,null,e.core))})(this,function(e,t,r){"use strict";var u=(n=>(n.button="button",n.link="link",n.menuitem="menuitem",n))(u||{});const d=Symbol.for("dropdownItem"),c=Symbol.for("dropdownAction");function f(){return e.inject(d,{})}function m({expanded:n}){e.provide(c,{role:u.menuitem,expanded:n})}const l={name:"VvDropdownItem"};return e.defineComponent({...l,setup(n){const{role:p,expanded:_}=f(),o=e.ref(null);m({expanded:_});const I=r.useElementHover(o),{focused:s}=r.useFocus(o),{focused:a}=r.useFocusWithin(o);return e.watch(I,i=>{i&&(s.value=!0)}),(i,w)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(p)},{ref_key:"element",ref:o,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(a)}]}),[e.renderSlot(i.$slots,"default")],16))}})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,n){"use strict";var t=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(t||{});const u=Symbol.for("dropdownItem"),r=Symbol.for("dropdownAction");return e.defineComponent({name:"VvDropdownItem",setup(o){const{role:i,expanded:d}=e.inject(u,{}),l=e.ref(null);!function({expanded:o}){e.provide(r,{role:t.menuitem,expanded:o})}({expanded:d});const s=n.useElementHover(l),{focused:f}=n.useFocus(l),{focused:c}=n.useFocusWithin(l);return e.watch(s,(e=>{e&&(f.value=!0)})),(o,n)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(i)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(f)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));

package/dist/components/VvDropdownOption/VvDropdownOption.es.js

@@ -1,38 +1,90 @@
-import { inject as B, provide as E, defineComponent as y, ref as N, watch as w, openBlock as s, createElementBlock as i, mergeProps as k, unref as a, renderSlot as u, computed as g, toRefs as C, createBlock as D, normalizeClass as I, withCtx as P, createElementVNode as $, normalizeProps as L, guardReactiveProps as H, Fragment as f, createTextVNode as m, toDisplayString as v, createCommentVNode as V } from "vue";
+import { inject, provide, defineComponent, ref, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
 import "mitt";
-import { useElementHover as W, useFocus as F, useFocusWithin as z } from "@vueuse/core";
-var c = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(c || {}), _ = /* @__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))(_ || {}), p = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(p || {}), b = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(b || {}), O = /* @__PURE__ */ ((e) => (e.button = "button", e.link = "link", e.menuitem = "menuitem", e))(O || {}), S = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(S || {});
-const A = Symbol.for("dropdownItem"), M = Symbol.for("dropdownAction");
-function R() {
-  return B(A, {});
+import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+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 ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-function J({
-  expanded: e
+function useProvideDropdownAction({
+  expanded
 }) {
-  E(M, {
-    role: O.menuitem,
-    expanded: e
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
   });
 }
-const K = {
+const __default__$1 = {
   name: "VvDropdownItem"
-}, Y = /* @__PURE__ */ y({
-  ...K,
-  setup(e) {
-    const { role: o, expanded: l } = R(), n = N(null);
-    J({ expanded: l });
-    const t = W(n), { focused: r } = F(n), { focused: j } = z(n);
-    return w(t, (d) => {
-      d && (r.value = !0);
-    }), (d, oe) => (s(), i("li", k({ role: a(o) }, {
-      ref_key: "element",
-      ref: n,
-      class: ["vv-dropdown__item", { "focus-visible": a(r) || a(j) }]
-    }), [
-      u(d.$slots, "default")
-    ], 16));
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  setup(__props) {
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+        ref_key: "element",
+        ref: element,
+        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
   }
-}), U = {
+});
+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/)
@@ -49,7 +101,7 @@ const K = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(S).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -58,77 +110,209 @@ const K = {
     type: String,
     default: "noopener noreferrer"
   }
-}, h = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, q = {
+};
+const SelectedProps = {
   /**
    * Whether the item is selected
    */
   selected: Boolean
-}, G = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, Q = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, T = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, X = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-p.before;
-const Z = {
+({
+  /**
+   * 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 UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
+  unselectable: { type: Boolean, default: true }
 };
-c.bottom;
 ({
-  ...h,
-  ...T,
-  ...Q,
-  ...G,
-  ...U,
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    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
+   */
+  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: 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
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: b.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-function x(e, o, l) {
-  return g(() => {
-    const n = {
-      [e]: !0
-    }, t = typeof (o == null ? void 0 : o.value) == "string" ? o.value.split(" ") : o == null ? void 0 : o.value;
-    return t && Array.isArray(t) && t.forEach((r) => {
-      n[`${e}--${r}`] = !0;
-    }), l && Object.keys(l.value).forEach((r) => {
-      n[`${e}--${r}`] = a(l.value[r]);
-    }), n;
+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 ee = { class: "vv-dropdown-option__hint" }, te = {
+const _hoisted_1 = ["title"];
+const __default__ = {
   name: "VvDropdownOption"
-}, ae = /* @__PURE__ */ y({
-  ...te,
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
-    ...h,
-    ...q,
-    ...Z,
-    ...X,
+    ...DisabledProps,
+    ...SelectedProps,
+    ...UnselectableProps,
+    ...ModifiersProps,
     deselectHintLabel: {
       type: String
     },
@@ -139,38 +323,49 @@ const ee = { class: "vv-dropdown-option__hint" }, te = {
       type: String
     }
   },
-  setup(e) {
-    const o = e, { modifiers: l } = C(o), n = x(
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
       "vv-dropdown-option",
-      l,
-      g(() => ({
-        disabled: o.disabled,
-        selected: o.selected,
-        unselectable: o.unselectable && o.selected
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
       }))
     );
-    return (t, r) => (s(), D(Y, {
-      class: I(a(n)),
-      tabindex: t.disabled ? -1 : 0,
-      "aria-selected": t.selected,
-      "aria-disabled": t.disabled
-    }, {
-      default: P(() => [
-        u(t.$slots, "default"),
-        $("span", ee, [
-          u(t.$slots, "hint", L(H({ disabled: t.disabled, selected: t.selected, unselectable: t.unselectable })), () => [
-            t.selected ? (s(), i(f, { key: 0 }, [
-              m(v(t.unselectable ? e.deselectHintLabel : e.selectedHintLabel), 1)
-            ], 64)) : t.disabled ? V("", !0) : (s(), i(f, { key: 1 }, [
-              m(v(e.selectHintLabel), 1)
-            ], 64))
-          ])
-        ])
-      ]),
-      _: 3
-    }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]));
+    const hintLabel = computed(() => {
+      if (props.selected) {
+        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
+      }
+      if (!props.disabled) {
+        return props.selectHintLabel;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        class: normalizeClass(unref(bemCssClasses)),
+        tabindex: _ctx.disabled ? -1 : 0,
+        "aria-selected": _ctx.selected,
+        "aria-disabled": _ctx.disabled
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("span", {
+            class: "vv-dropdown-option__hint",
+            title: unref(hintLabel)
+          }, [
+            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
+              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+    };
   }
 });
 export {
-  ae as default
+  _sfc_main as default
 };

package/dist/components/VvDropdownOption/VvDropdownOption.umd.js

@@ -1 +1 @@
-(function(t,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("mitt"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","mitt","@vueuse/core"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.VvDropdownOption=a(t.vue,null,t.core))})(this,function(t,a,i){"use strict";var d=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(d||{}),f=(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))(f||{}),c=(e=>(e.before="before",e.after="after",e))(c||{}),u=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(u||{}),b=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(b||{}),m=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(m||{});const g=Symbol.for("dropdownItem"),S=Symbol.for("dropdownAction");function _(){return t.inject(g,{})}function O({expanded:e}){t.provide(S,{role:b.menuitem,expanded:e})}const B={name:"VvDropdownItem"},h=t.defineComponent({...B,setup(e){const{role:o,expanded:s}=_(),r=t.ref(null);O({expanded:s});const n=i.useElementHover(r),{focused:l}=i.useFocus(r),{focused:L}=i.useFocusWithin(r);return t.watch(n,p=>{p&&(l.value=!0)}),(p,V)=>(t.openBlock(),t.createElementBlock("li",t.mergeProps({role:t.unref(o)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":t.unref(l)||t.unref(L)}]}),[t.renderSlot(p.$slots,"default")],16))}}),j={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(m).includes(e)},rel:{type:String,default:"noopener noreferrer"}},y={disabled:Boolean},k={selected:Boolean},E={active:Boolean},N={pressed:Boolean},w={label:[String,Number]},D={modifiers:[String,Array]};c.before;const C={unselectable:{type:Boolean,default:!0}};d.bottom,{...y,...w,...N,...E,...j,type:u.button};function I(e,o,s){return t.computed(()=>{const r={[e]:!0},n=typeof(o==null?void 0:o.value)=="string"?o.value.split(" "):o==null?void 0:o.value;return n&&Array.isArray(n)&&n.forEach(l=>{r[`${e}--${l}`]=!0}),s&&Object.keys(s.value).forEach(l=>{r[`${e}--${l}`]=t.unref(s.value[l])}),r})}const P={class:"vv-dropdown-option__hint"},$={name:"VvDropdownOption"};return t.defineComponent({...$,props:{...y,...k,...C,...D,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String}},setup(e){const o=e,{modifiers:s}=t.toRefs(o),r=I("vv-dropdown-option",s,t.computed(()=>({disabled:o.disabled,selected:o.selected,unselectable:o.unselectable&&o.selected})));return(n,l)=>(t.openBlock(),t.createBlock(h,{class:t.normalizeClass(t.unref(r)),tabindex:n.disabled?-1:0,"aria-selected":n.selected,"aria-disabled":n.disabled},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default"),t.createElementVNode("span",P,[t.renderSlot(n.$slots,"hint",t.normalizeProps(t.guardReactiveProps({disabled:n.disabled,selected:n.selected,unselectable:n.unselectable})),()=>[n.selected?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(n.unselectable?e.deselectHintLabel:e.selectedHintLabel),1)],64)):n.disabled?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(e.selectHintLabel),1)],64))])])]),_:3},8,["class","tabindex","aria-selected","aria-disabled"]))}})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownOption=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),s=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(s||{});const d=Symbol.for("dropdownItem"),i=Symbol.for("dropdownAction");const a=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:n,expanded:l}=e.inject(d,{}),r=e.ref(null);!function({expanded:t}){e.provide(i,{role:s.menuitem,expanded:t})}({expanded:l});const a=o.useElementHover(r),{focused:u}=o.useFocus(r),{focused:c}=o.useFocusWithin(r);return e.watch(a,(e=>{e&&(u.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(n)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":e.unref(u)||e.unref(c)}]}),[e.renderSlot(t.$slots,"default")],16))}}),u={disabled:Boolean},c={selected:Boolean},f=(Boolean,Boolean,{modifiers:[String,Array]});l.before;const p={unselectable:{type:Boolean,default:!0}};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,r.button;const b=["title"];return e.defineComponent({name:"VvDropdownOption",props:{...u,...c,...p,...f,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String}},setup(t){const o=t,{modifiers:n}=e.toRefs(o),l=function(t,o,n){return e.computed((()=>{const l={[t]:!0},r="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return r&&Array.isArray(r)&&r.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{l[`${t}--${o}`]=e.unref(n.value[o])})),l}))}("vv-dropdown-option",n,e.computed((()=>({disabled:o.disabled,selected:o.selected,unselectable:o.unselectable&&o.selected})))),r=e.computed((()=>o.selected?o.unselectable?o.deselectHintLabel:o.selectedHintLabel:o.disabled?void 0:o.selectHintLabel));return(t,o)=>(e.openBlock(),e.createBlock(a,{class:e.normalizeClass(e.unref(l)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default"),e.createElementVNode("span",{class:"vv-dropdown-option__hint",title:e.unref(r)},[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)),1)]))],8,b)])),_:3},8,["class","tabindex","aria-selected","aria-disabled"]))}})}));