@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/dist/components/VvDropdownAction/VvDropdownAction.es.js

@@ -0,0 +1,251 @@
+import { inject as p, defineComponent as g, ref as I, watch as N, computed as f, openBlock as O, createBlock as D, resolveDynamicComponent as W, unref as i, mergeProps as h, withCtx as b, renderSlot as k, createTextVNode as A, toDisplayString as J, provide as K, createElementBlock as T, toRefs as Y, createVNode as F } from "vue";
+import "mitt";
+import { useElementHover as G, useFocus as z, useFocusWithin as H } from "@vueuse/core";
+var m = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(m || {}), E = /* @__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))(E || {}), _ = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(_ || {}), y = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(y || {}), l = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(l || {}), C = /* @__PURE__ */ ((e) => (e.button = "button", e.link = "link", e.menuitem = "menuitem", e))(C || {}), P = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(P || {});
+const q = Symbol.for("volver"), Q = Symbol.for("dropdownTrigger"), U = Symbol.for("dropdownItem"), $ = Symbol.for("dropdownAction"), X = {
+  /**
+   * 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: (e) => Object.values(P).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, Z = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, x = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, ee = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, te = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, re = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+_.before;
+m.bottom;
+const w = {
+  ...Z,
+  ...te,
+  ...ee,
+  ...x,
+  ...X,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: y.button,
+    validator: (e) => Object.values(y).includes(e)
+  }
+}, oe = ["click", "mouseover", "mouseleave"], ne = w;
+function se() {
+  return p(q);
+}
+function ae() {
+  return p(Q, {});
+}
+function ue() {
+  return p(U, {});
+}
+function le() {
+  return p($, {});
+}
+const ie = {
+  name: "VvAction"
+}, ce = /* @__PURE__ */ g({
+  ...ie,
+  props: ne,
+  emits: oe,
+  setup(e, { expose: n, emit: u }) {
+    const t = e, o = se(), a = I(null);
+    n({ $el: a });
+    const {
+      reference: c,
+      bus: s,
+      aria: d,
+      expanded: v
+    } = ae();
+    N(
+      () => a.value,
+      (r) => {
+        c && (c.value = r);
+      }
+    );
+    const S = f(() => t.pressed || (v == null ? void 0 : v.value)), { role: V } = le(), j = f(() => {
+      switch (!0) {
+        case t.disabled:
+          return l.button;
+        case t.to !== void 0:
+          return o != null && o.nuxt ? l.nuxtLink : l.routerLink;
+        case t.href !== void 0:
+          return l.a;
+        default:
+          return l.button;
+      }
+    }), L = f(() => {
+      const r = {
+        ...d == null ? void 0 : d.value,
+        "aria-pressed": S.value ? !0 : void 0,
+        role: V
+      };
+      switch (j.value) {
+        case l.a:
+          return {
+            ...r,
+            href: t.href,
+            target: t.target,
+            rel: t.rel
+          };
+        case l.routerLink:
+        case l.nuxtLink:
+          return {
+            ...r,
+            to: t.to,
+            target: t.target
+          };
+        default:
+          return {
+            ...r,
+            type: t.type,
+            disabled: t.disabled
+          };
+      }
+    }), B = (r) => {
+      if (t.disabled) {
+        r.preventDefault();
+        return;
+      }
+      s == null || s.emit("click", r), u("click", r);
+    }, R = (r) => {
+      s == null || s.emit("mouseover", r), u("mouseover", r);
+    }, M = (r) => {
+      s == null || s.emit("mouseleave", r), u("mouseleave", r);
+    };
+    return (r, me) => (O(), D(W(i(j)), h(i(L), {
+      ref_key: "element",
+      ref: a,
+      class: {
+        active: r.active,
+        pressed: i(S),
+        disabled: r.disabled
+      },
+      onClickPassive: B,
+      onMouseoverPassive: R,
+      onMouseleavePassive: M
+    }), {
+      default: b(() => [
+        k(r.$slots, "default", {}, () => [
+          A(J(r.label), 1)
+        ])
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+function de({
+  expanded: e
+}) {
+  K($, {
+    role: C.menuitem,
+    expanded: e
+  });
+}
+const fe = {
+  name: "VvDropdownItem"
+}, pe = /* @__PURE__ */ g({
+  ...fe,
+  setup(e) {
+    const { role: n, expanded: u } = ue(), t = I(null);
+    de({ expanded: u });
+    const o = G(t), { focused: a } = z(t), { focused: c } = H(t);
+    return N(o, (s) => {
+      s && (a.value = !0);
+    }), (s, d) => (O(), T("li", h({ role: i(n) }, {
+      ref_key: "element",
+      ref: t,
+      class: ["vv-dropdown__item", { "focus-visible": i(a) || i(c) }]
+    }), [
+      k(s.$slots, "default")
+    ], 16));
+  }
+});
+function ve(e, n, u) {
+  return f(() => {
+    const t = {
+      [e]: !0
+    }, o = typeof (n == null ? void 0 : n.value) == "string" ? n.value.split(" ") : n == null ? void 0 : n.value;
+    return o && Array.isArray(o) && o.forEach((a) => {
+      t[`${e}--${a}`] = !0;
+    }), u && Object.keys(u.value).forEach((a) => {
+      t[`${e}--${a}`] = i(u.value[a]);
+    }), t;
+  });
+}
+const be = {
+  name: "VvDropdownAction"
+}, Oe = /* @__PURE__ */ g({
+  ...be,
+  props: {
+    ...w,
+    ...re
+  },
+  setup(e) {
+    const n = e, { modifiers: u } = Y(n), t = ve("vv-dropdown-action", u);
+    return (o, a) => (O(), D(pe, null, {
+      default: b(() => [
+        F(ce, h({
+          disabled: o.disabled,
+          pressed: o.pressed,
+          active: o.active,
+          type: o.type,
+          to: o.to,
+          href: o.href,
+          target: o.target,
+          rel: o.rel
+        }, { class: i(t) }), {
+          default: b(() => [
+            k(o.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["class"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  Oe as default
+};

package/dist/components/VvDropdownAction/VvDropdownAction.umd.js

@@ -0,0 +1 @@
+(function(t,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("mitt"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","mitt","@vueuse/core"],c):(t=typeof globalThis<"u"?globalThis:t||self,t.VvDropdownAction=c(t.vue,null,t.core))})(this,function(t,c,p){"use strict";var b=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(b||{}),g=(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||{}),m=(e=>(e.before="before",e.after="after",e))(m||{}),_=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(_||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),h=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(h||{}),k=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(k||{});const C=Symbol.for("volver"),D=Symbol.for("dropdownTrigger"),I=Symbol.for("dropdownItem"),v=Symbol.for("dropdownAction"),N={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(k).includes(e)},rel:{type:String,default:"noopener noreferrer"}},w={disabled:Boolean},E={active:Boolean},P={pressed:Boolean},$={label:[String,Number]},B={modifiers:[String,Array]};m.before,b.bottom;const O={...w,...$,...P,...E,...N,type:{type:String,default:_.button,validator:e=>Object.values(_).includes(e)}},V=["click","mouseover","mouseleave"],L=O;function R(){return t.inject(C)}function M(){return t.inject(D,{})}function A(){return t.inject(I,{})}function T(){return t.inject(v,{})}const W={name:"VvAction"},J=t.defineComponent({...W,props:L,emits:V,setup(e,{expose:s,emit:i}){const r=e,n=R(),l=t.ref(null);s({$el:l});const{reference:d,bus:a,aria:f,expanded:y}=M();t.watch(()=>l.value,o=>{d&&(d.value=o)});const j=t.computed(()=>r.pressed||(y==null?void 0:y.value)),{role:z}=T(),S=t.computed(()=>{switch(!0){case r.disabled:return u.button;case r.to!==void 0:return n!=null&&n.nuxt?u.nuxtLink:u.routerLink;case r.href!==void 0:return u.a;default:return u.button}}),H=t.computed(()=>{const o={...f==null?void 0:f.value,"aria-pressed":j.value?!0:void 0,role:z};switch(S.value){case u.a:return{...o,href:r.href,target:r.target,rel:r.rel};case u.routerLink:case u.nuxtLink:return{...o,to:r.to,target:r.target};default:return{...o,type:r.type,disabled:r.disabled}}}),Q=o=>{if(r.disabled){o.preventDefault();return}a==null||a.emit("click",o),i("click",o)},U=o=>{a==null||a.emit("mouseover",o),i("mouseover",o)},X=o=>{a==null||a.emit("mouseleave",o),i("mouseleave",o)};return(o,x)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(S)),t.mergeProps(t.unref(H),{ref_key:"element",ref:l,class:{active:o.active,pressed:t.unref(j),disabled:o.disabled},onClickPassive:Q,onMouseoverPassive:U,onMouseleavePassive:X}),{default:t.withCtx(()=>[t.renderSlot(o.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(o.label),1)])]),_:3},16,["class"]))}});function K({expanded:e}){t.provide(v,{role:h.menuitem,expanded:e})}const Y={name:"VvDropdownItem"},q=t.defineComponent({...Y,setup(e){const{role:s,expanded:i}=A(),r=t.ref(null);K({expanded:i});const n=p.useElementHover(r),{focused:l}=p.useFocus(r),{focused:d}=p.useFocusWithin(r);return t.watch(n,a=>{a&&(l.value=!0)}),(a,f)=>(t.openBlock(),t.createElementBlock("li",t.mergeProps({role:t.unref(s)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":t.unref(l)||t.unref(d)}]}),[t.renderSlot(a.$slots,"default")],16))}});function F(e,s,i){return t.computed(()=>{const r={[e]:!0},n=typeof(s==null?void 0:s.value)=="string"?s.value.split(" "):s==null?void 0:s.value;return n&&Array.isArray(n)&&n.forEach(l=>{r[`${e}--${l}`]=!0}),i&&Object.keys(i.value).forEach(l=>{r[`${e}--${l}`]=t.unref(i.value[l])}),r})}const G={name:"VvDropdownAction"};return t.defineComponent({...G,props:{...O,...B},setup(e){const s=e,{modifiers:i}=t.toRefs(s),r=F("vv-dropdown-action",i);return(n,l)=>(t.openBlock(),t.createBlock(q,null,{default:t.withCtx(()=>[t.createVNode(J,t.mergeProps({disabled:n.disabled,pressed:n.pressed,active:n.active,type:n.type,to:n.to,href:n.href,target:n.target,rel:n.rel},{class:t.unref(r)}),{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default")]),_:3},16,["class"])]),_:3}))}})});

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

@@ -0,0 +1,38 @@
+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 "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, {});
+}
+function k({
+  expanded: e
+}) {
+  l(b, {
+    role: u.menuitem,
+    expanded: e
+  });
+}
+const C = {
+  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));
+  }
+});
+export {
+  S as default
+};

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

@@ -0,0 +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))}})});

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

@@ -0,0 +1,176 @@
+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 "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, {});
+}
+function J({
+  expanded: e
+}) {
+  E(M, {
+    role: O.menuitem,
+    expanded: e
+  });
+}
+const K = {
+  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));
+  }
+}), U = {
+  /**
+   * 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: (e) => Object.values(S).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, h = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, q = {
+  /**
+   * Whether the item is selected
+   */
+  selected: Boolean
+}, G = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Q = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, T = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, X = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+p.before;
+const Z = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: !0 }
+};
+c.bottom;
+({
+  ...h,
+  ...T,
+  ...Q,
+  ...G,
+  ...U,
+  /**
+   * Button type
+   */
+  type: b.button
+});
+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;
+  });
+}
+const ee = { class: "vv-dropdown-option__hint" }, te = {
+  name: "VvDropdownOption"
+}, ae = /* @__PURE__ */ y({
+  ...te,
+  props: {
+    ...h,
+    ...q,
+    ...Z,
+    ...X,
+    deselectHintLabel: {
+      type: String
+    },
+    selectHintLabel: {
+      type: String
+    },
+    selectedHintLabel: {
+      type: String
+    }
+  },
+  setup(e) {
+    const o = e, { modifiers: l } = C(o), n = x(
+      "vv-dropdown-option",
+      l,
+      g(() => ({
+        disabled: o.disabled,
+        selected: o.selected,
+        unselectable: o.unselectable && o.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"]));
+  }
+});
+export {
+  ae as default
+};

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

@@ -0,0 +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"]))}})});