@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -0,0 +1,775 @@
+import { unref as a, computed as c, toRefs as T, watch as ie, defineComponent as Y, openBlock as y, createElementBlock as I, normalizeClass as ue, createElementVNode as B, toDisplayString as N, createCommentVNode as w, Fragment as de, renderList as $e, withModifiers as Te, createTextVNode as Ie, ref as j, inject as Ee, createBlock as F, mergeProps as P, h as Ke, useSlots as ke, renderSlot as J, normalizeProps as he, withDirectives as Ae, isRef as xe, vModelSelect as He, createVNode as ae, withKeys as ye, vModelText as Me } from "vue";
+import { nanoid as ce } from "nanoid";
+import { useFocus as ze, toReactive as qe, useElementVisibility as Ue, refDebounced as Ze, onClickOutside as Ge } from "@vueuse/core";
+import { iconExists as U, Icon as Je, addIcon as Xe } from "@iconify/vue";
+function X(n, t, e) {
+  return e ? Q(n, e) === Q(t, e) : se(n, t);
+}
+function se(n, t) {
+  if (n === t)
+    return !0;
+  if (n && t && typeof n == "object" && typeof t == "object") {
+    const e = Array.isArray(n), i = Array.isArray(t);
+    let r, u, l;
+    if (e && i) {
+      if (u = n.length, u != t.length)
+        return !1;
+      for (r = u; r-- !== 0; )
+        if (!se(n[r], t[r]))
+          return !1;
+      return !0;
+    }
+    if (e != i)
+      return !1;
+    const b = n instanceof Date, m = t instanceof Date;
+    if (b != m)
+      return !1;
+    if (b && m)
+      return n.getTime() == t.getTime();
+    const p = n instanceof RegExp, o = t instanceof RegExp;
+    if (p != o)
+      return !1;
+    if (p && o)
+      return n.toString() == t.toString();
+    const s = Object.keys(n);
+    if (u = s.length, u !== Object.keys(t).length)
+      return !1;
+    for (r = u; r-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, s[r]))
+        return !1;
+    for (r = u; r-- !== 0; )
+      if (l = s[r], !se(n[l], t[l]))
+        return !1;
+    return !0;
+  }
+  return n !== n && t !== t;
+}
+function Q(n, t) {
+  if (n && Object.keys(n).length && t) {
+    if (t.indexOf(".") === -1)
+      return n[t];
+    {
+      const e = t.split(".");
+      let i = n;
+      for (let r = 0, u = e.length; r < u; ++r) {
+        if (n == null)
+          return null;
+        i = i[e[r]];
+      }
+      return i;
+    }
+  } else
+    return null;
+}
+function Qe(n, t) {
+  let e = -1;
+  if (t) {
+    for (let i = 0; i < t.length; i++)
+      if (X(t[i], n)) {
+        e = i;
+        break;
+      }
+  }
+  return e;
+}
+function Z(n, t) {
+  if (n != null && t && t.length) {
+    for (const e of t)
+      if (X(n, e))
+        return !0;
+  }
+  return !1;
+}
+function fe(n) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(a(n));
+}
+function We(n, t) {
+  const e = Qe(n, t);
+  return e > -1 ? t.filter((i, r) => r !== e) : t;
+}
+function Ye(n) {
+  return typeof n == "string" || n instanceof String;
+}
+function Ve(n) {
+  var t, e;
+  if (n)
+    return (e = (t = n.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : t.join("-")) == null ? void 0 : e.toLowerCase();
+}
+function ee(n, t) {
+  const e = { [`${n}`]: !0 };
+  return {
+    bemCssClasses: c(() => Object.keys(t).reduce((r, u) => {
+      const l = a(t[u]) || !1;
+      if (!l)
+        return r;
+      if (u === "modifiers") {
+        const b = Array.isArray(l) ? l : l.split(" ");
+        return {
+          ...r,
+          ...b.reduce(
+            (m, p) => ({
+              ...m,
+              [`${n}--${Ve(p)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...r,
+          [`${n}--${Ve(u)}`]: l
+        };
+    }, e) || {})
+  };
+}
+function Oe(n, t, e) {
+  const i = c(
+    () => !!(n != null && n.value && t.value === "left" || e != null && e.iconLeft)
+  ), r = c(
+    () => !!(n != null && n.value && t.value === "right" || e != null && e.iconRight)
+  ), u = c(
+    () => !!(n != null && n.value && t.value === "top" || e != null && e.iconTop)
+  ), l = c(
+    () => !!(n != null && n.value && t.value === "bottom" || e != null && e.iconBottom)
+  );
+  return {
+    hasIcon: c(() => typeof (n == null ? void 0 : n.value) == "string" ? { name: n == null ? void 0 : n.value } : n == null ? void 0 : n.value),
+    hasIconLeft: i,
+    hasIconRight: r,
+    hasIconTop: u,
+    hasIconBottom: l
+  };
+}
+function pe(n) {
+  const { options: t, labelKey: e, valueKey: i } = T(n);
+  return {
+    options: t,
+    getOptionLabel: (l) => typeof l != "object" && l !== null ? l : typeof e.value == "function" ? e.value(l) : l[e.value],
+    getOptionValue: (l) => typeof l != "object" && l !== null ? l : typeof i.value == "function" ? i.value(l) : l[i.value]
+  };
+}
+function we(n, t) {
+  const { focused: e } = ze(n);
+  return ie(e, (i) => {
+    t(i ? "focus" : "blur", a(n));
+  }), {
+    focused: e
+  };
+}
+const Ce = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, _e = {
+  invalid: Boolean,
+  invalidLabel: [String, Array]
+}, Pe = {
+  loading: Boolean,
+  loadingLabel: String
+}, ve = {
+  disabled: Boolean
+}, Be = {
+  readonly: Boolean
+}, me = {
+  modifiers: [String, Array]
+}, Ne = {
+  hintLabel: { type: String, default: "" }
+}, ge = {
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: { type: [String, Function], default: "label" },
+  valueKey: { type: [String, Function], default: "value" }
+}, Se = {
+  LEFT: "left",
+  RIGHT: "right"
+}, De = {
+  icon: { type: [String, Object] },
+  iconPosition: {
+    type: String,
+    validation: (n) => Object.values(Se).includes(n),
+    default: Se.RIGHT
+  }
+}, Le = {
+  tabindex: { type: [String, Number], default: 0 }
+}, Re = {
+  floating: Boolean
+}, je = {
+  unselectable: { type: Boolean, default: !0 }
+}, be = {
+  id: [String, Number],
+  name: { type: String, required: !0 }
+}, et = {
+  autofocus: Boolean
+}, tt = {
+  autocomplete: { type: String, default: "off" }
+}, nt = {
+  ...be,
+  ...ge,
+  ...ve,
+  ...me,
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array]
+  },
+  labelNoResults: { type: String, default: "No results" },
+  multiple: Boolean,
+  maxValues: [Number, String],
+  unselectable: { type: Boolean, default: !0 }
+}, lt = ["id"], rt = {
+  key: 0,
+  role: "option"
+}, ot = ["aria-selected"], at = ["for", "onClick"], st = ["id", "type", "value", "checked", "disabled", "name"], it = {
+  name: "VvDropdown"
+}, ut = /* @__PURE__ */ Y({
+  ...it,
+  props: nt,
+  emits: ["update:modelValue"],
+  setup(n, { emit: t }) {
+    const e = n, i = c(() => String(e.id || ce())), { modifiers: r, disabled: u } = T(e), { getOptionLabel: l, getOptionValue: b } = pe(e), { bemCssClasses: m } = ee("vv-dropdown", {
+      modifiers: r,
+      disabled: u
+    });
+    function p(d) {
+      return Array.isArray(e.modelValue) ? Z(d, e.modelValue) || Z(b(d), e.modelValue) : X(d, e.modelValue) || X(b(d), e.modelValue);
+    }
+    function o(d) {
+      return typeof d == "string" || d.disabled === void 0 ? u.value : d.disabled;
+    }
+    function s(d) {
+      var V;
+      if (e.disabled)
+        return;
+      let v = d;
+      if (e.multiple)
+        if (Array.isArray(e.modelValue)) {
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((V = e.modelValue) == null ? void 0 : V.length) >= e.maxValues && !Z(d, e.modelValue))
+            return;
+          v = Z(d, e.modelValue) ? We(d, e.modelValue) : [...e.modelValue, d];
+        } else
+          v = [d];
+      else
+        e.unselectable && d === e.modelValue && (v = void 0);
+      t("update:modelValue", v);
+    }
+    return (d, v) => {
+      var V;
+      return y(), I("ul", {
+        id: a(i),
+        class: ue(a(m)),
+        role: "listbox"
+      }, [
+        (V = d.options) != null && V.length ? w("", !0) : (y(), I("li", rt, [
+          B("label", null, N(d.labelNoResults), 1)
+        ])),
+        (y(!0), I(de, null, $e(d.options, (h, $) => (y(), I("li", {
+          key: $,
+          role: "option",
+          "aria-selected": p(h)
+        }, [
+          B("label", {
+            for: `dropdown-${$}-${a(i)}`,
+            onClick: Te((A) => s(a(b)(h)), ["prevent"])
+          }, [
+            B("input", {
+              id: `dropdown-${$}-${a(i)}`,
+              type: d.multiple ? "checkbox" : "radio",
+              value: a(b)(h),
+              checked: p(h),
+              disabled: o(h),
+              name: d.name,
+              tabindex: "-1",
+              "aria-hidden": "true"
+            }, null, 8, st),
+            Ie(" " + N(a(l)(h)), 1)
+          ], 8, at)
+        ], 8, ot))), 128))
+      ], 10, lt);
+    };
+  }
+}), dt = "ds", ct = {
+  color: String,
+  width: {
+    type: [String, Number]
+  },
+  height: {
+    type: [String, Number]
+  },
+  name: {
+    type: String,
+    required: !0
+  },
+  provider: {
+    type: String
+  },
+  prefix: {
+    type: String,
+    default: "normal"
+  },
+  src: String,
+  horizontalFlip: Boolean,
+  verticalFlip: Boolean,
+  flip: String,
+  mode: String,
+  inline: Boolean,
+  rotate: [Number, String],
+  onLoad: Function,
+  svg: String,
+  modifiers: {
+    type: [String, Array]
+  }
+}, ft = {
+  name: "VvIcon"
+}, W = /* @__PURE__ */ Y({
+  ...ft,
+  props: ct,
+  setup(n) {
+    const t = n, e = j(!0), { modifiers: i } = T(t), r = Ee(dt), { bemCssClasses: u } = ee("vv-icon", {
+      modifiers: i
+    }), l = c(() => t.provider || (r == null ? void 0 : r.provider)), b = c(() => {
+      const o = t.name ?? "", s = `@${l.value}:${t.prefix}:${t.name}`;
+      return U(o) ? o : U(s) ? s : (r == null ? void 0 : r.iconsCollections.find((d) => {
+        const v = `@${l.value}:${d.prefix}:${o}`;
+        if (U(v))
+          return v;
+      })) || o;
+    });
+    function m(o) {
+      let s = null;
+      if (typeof window > "u") {
+        const { JSDOM: h } = require("jsdom");
+        s = new h().window;
+      }
+      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+    }
+    function p(o) {
+      const s = m(o), d = (s == null ? void 0 : s.innerHTML.trim()) || "";
+      s && d && Xe(`@${l.value}:${t.prefix}:${t.name}`, {
+        body: d,
+        height: s.viewBox.baseVal.height,
+        width: s.viewBox.baseVal.width
+      });
+    }
+    return r && (t.src && !U(`@${l.value}:${t.prefix}:${t.name}`) ? (e.value = !1, r.fetchIcon(t.src).then((o) => {
+      o && (p(o), e.value = !0);
+    }).catch((o) => {
+      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
+    })) : t.svg && p(t.svg)), (o, s) => e.value ? (y(), F(a(Je), P({
+      key: 0,
+      class: a(u)
+    }, {
+      inline: o.inline,
+      width: o.width,
+      height: o.height,
+      horizontalFlip: o.horizontalFlip,
+      verticalFlip: o.verticalFlip,
+      flip: o.flip,
+      rotate: o.rotate,
+      color: o.color,
+      onLoad: o.onLoad,
+      icon: a(b)
+    }), null, 16, ["class"])) : w("", !0);
+  }
+});
+function G(n) {
+  return Array.isArray(n) ? n.filter((t) => Ye(t)).join(" ") : n;
+}
+function Fe(n, t) {
+  const {
+    invalid: e,
+    valid: i,
+    hint: r,
+    loading: u
+  } = t, {
+    hintLabel: l,
+    modelValue: b,
+    valid: m,
+    validLabel: p,
+    invalid: o,
+    invalidLabel: s,
+    ...d
+  } = T(n), v = Q(d, "loading"), V = Q(d, "loadingLabel"), h = c(() => o.value ? !!(o.value && e || s != null && s.value && Array.isArray(s.value) && s.value.length > 0 || s != null && s.value && !fe(s)) : !1), $ = c(
+    () => !!(l && l.value || r)
+  ), A = c(
+    () => !!(p && p.value || i)
+  ), O = c(
+    () => !!(v != null && v.value && u || v != null && v.value && (V != null && V.value))
+  ), C = c(
+    () => $.value || A.value || h.value || O.value
+  );
+  return {
+    hasInvalid: h,
+    hasHint: $,
+    hasValid: A,
+    hasLoading: O,
+    HintSlot: {
+      name: "HintSlot",
+      props: {
+        params: {
+          type: Object,
+          default: () => ({})
+        }
+      },
+      setup(D) {
+        const L = c(() => {
+          const k = qe({
+            hintLabel: l,
+            modelValue: b,
+            valid: m,
+            validLabel: p,
+            invalid: o,
+            invalidLabel: s,
+            loading: v,
+            loadingLabel: V,
+            ...D.params
+          });
+          return o != null && o.value ? (e == null ? void 0 : e(k)) || G(s == null ? void 0 : s.value) || (l == null ? void 0 : l.value) : m != null && m.value ? (i == null ? void 0 : i(k)) || G(p == null ? void 0 : p.value) || (l == null ? void 0 : l.value) : v != null && v.value ? (u == null ? void 0 : u(k)) || G(V == null ? void 0 : V.value) || (l == null ? void 0 : l.value) : (r == null ? void 0 : r(k)) || G(l == null ? void 0 : l.value) || (l == null ? void 0 : l.value);
+        });
+        return {
+          isVisible: C,
+          hasInvalid: h,
+          hasValid: A,
+          hintContent: L
+        };
+      },
+      render() {
+        if (this.isVisible)
+          return Ke(
+            "small",
+            {
+              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+            },
+            this.hintContent
+          );
+      }
+    }
+  };
+}
+const pt = {
+  ...be,
+  ...et,
+  ...tt,
+  ...Le,
+  ...Ce,
+  ..._e,
+  ...Ne,
+  ...Pe,
+  ...ve,
+  ...Be,
+  ...me,
+  ...ge,
+  ...De,
+  ...Re,
+  ...je,
+  multiple: Boolean,
+  required: Boolean,
+  size: [String, Number],
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  label: String,
+  placeholder: String
+}, vt = ["update:modelValue", "focus", "blur"], mt = ["for"], gt = { class: "vv-select__wrapper" }, bt = ["id"], ht = ["disabled", "hidden"], yt = ["disabled", "value"], Vt = {
+  name: "VvSelect"
+}, St = /* @__PURE__ */ Y({
+  ...Vt,
+  props: pt,
+  emits: vt,
+  setup(n, { emit: t }) {
+    const e = n, i = ke(), r = j(), { HintSlot: u, hasHint: l, hasInvalid: b } = Fe(e, i), {
+      modifiers: m,
+      disabled: p,
+      readonly: o,
+      loading: s,
+      icon: d,
+      iconPosition: v,
+      invalid: V,
+      valid: h,
+      floating: $,
+      multiple: A
+    } = T(e), O = c(() => String(e.id || ce())), C = c(() => `${O.value}-hint`), { focused: D } = we(r, t), L = Ue(r);
+    ie(L, (g) => {
+      g && e.autofocus && (D.value = !0);
+    });
+    const { hasIcon: k, hasIconLeft: E, hasIconRight: x } = Oe(
+      d,
+      v
+    ), H = c(() => !fe(e.modelValue)), M = c(() => e.disabled || e.readonly), z = c(() => M.value ? -1 : e.tabindex), q = c(() => {
+      if (e.invalid === !0)
+        return !0;
+      if (e.valid === !0)
+        return !1;
+    }), { bemCssClasses: te } = ee("vv-select", {
+      modifiers: m,
+      valid: h,
+      invalid: V,
+      loading: s,
+      disabled: p,
+      readonly: o,
+      iconLeft: E,
+      iconRight: x,
+      dirty: H,
+      focus: D,
+      floating: $,
+      multiple: A
+    }), ne = c(() => ({
+      name: e.name,
+      tabindex: z.value,
+      disabled: M.value,
+      required: e.required,
+      size: e.size,
+      autocomplete: e.autocomplete,
+      multiple: e.multiple,
+      "aria-invalid": q.value,
+      "aria-describedby": !b.value && l.value ? C.value : void 0,
+      "aria-errormessage": b.value ? C.value : void 0
+    })), { getOptionLabel: le, getOptionValue: re } = pe(e);
+    function oe(g) {
+      return typeof g == "string" || g.disabled === void 0 ? p.value : g.disabled;
+    }
+    const K = c({
+      get: () => e.modelValue,
+      set: (g) => {
+        Array.isArray(g) && (g = g.filter((R) => R !== void 0)), t("update:modelValue", g);
+      }
+    });
+    return (g, R) => (y(), I("div", {
+      class: ue(a(te))
+    }, [
+      g.label ? (y(), I("label", {
+        key: 0,
+        for: a(O)
+      }, N(g.label), 9, mt)) : w("", !0),
+      B("div", gt, [
+        J(g.$slots, "before", {}, () => [
+          a(E) ? (y(), F(W, he(P({ key: 0 }, a(k))), null, 16)) : w("", !0)
+        ]),
+        Ae(B("select", P({
+          id: a(O),
+          ref_key: "select",
+          ref: r,
+          "onUpdate:modelValue": R[0] || (R[0] = (f) => xe(K) ? K.value = f : null)
+        }, a(ne)), [
+          g.placeholder ? (y(), I("option", {
+            key: 0,
+            value: void 0,
+            disabled: !g.unselectable,
+            hidden: !g.unselectable
+          }, N(g.placeholder), 9, ht)) : w("", !0),
+          (y(!0), I(de, null, $e(g.options, (f, S) => (y(), I("option", {
+            key: S,
+            disabled: oe(f),
+            value: a(re)(f)
+          }, N(a(le)(f)), 9, yt))), 128))
+        ], 16, bt), [
+          [He, a(K)]
+        ]),
+        J(g.$slots, "after", {}, () => [
+          a(x) ? (y(), F(W, he(P({ key: 0 }, a(k))), null, 16)) : w("", !0)
+        ])
+      ]),
+      ae(a(u), {
+        id: a(C),
+        class: "vv-select__hint"
+      }, null, 8, ["id"])
+    ], 2));
+  }
+}), $t = [
+  "update:modelValue",
+  "change:search",
+  "focus",
+  "blur"
+], It = {
+  ...be,
+  ...Le,
+  ...Ce,
+  ..._e,
+  ...Ne,
+  ...Pe,
+  ...ve,
+  ...Be,
+  ...me,
+  ...ge,
+  ...De,
+  ...Re,
+  ...je,
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  label: String,
+  labelNoResults: { type: String, default: "No results" },
+  placeholder: String,
+  searchable: Boolean,
+  searchPlaceholder: String,
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
+  },
+  multiple: Boolean,
+  maxValues: [Number, String],
+  separator: { type: String, default: ", " },
+  native: Boolean
+}, kt = ["id"], At = ["id", "for"], Ot = ["tabindex"], wt = ["id", "placeholder"], Ct = {
+  name: "VvCombobox"
+}, Dt = /* @__PURE__ */ Y({
+  ...Ct,
+  props: It,
+  emits: $t,
+  setup(n, { emit: t }) {
+    const e = n, i = ke(), { HintSlot: r } = Fe(e, i), u = j(), l = j(), { focused: b } = we(u, t), m = c(() => String(e.id || ce())), p = j(""), o = Ze(
+      p,
+      Number(e.debounceSearch)
+    ), s = j(!1), {
+      icon: d,
+      iconPosition: v,
+      modifiers: V,
+      disabled: h,
+      readonly: $,
+      loading: A,
+      valid: O,
+      invalid: C,
+      floating: D
+    } = T(e);
+    ie(
+      o,
+      () => t("change:search", o.value)
+    );
+    const { hasIcon: L, hasIconLeft: k, hasIconRight: E } = Oe(
+      d,
+      v
+    ), x = c(() => !fe(e.modelValue)), H = c(() => h.value || $.value ? -1 : e.tabindex), { bemCssClasses: M } = ee("vv-select", {
+      modifiers: V,
+      disabled: h,
+      loading: A,
+      readonly: $,
+      iconLeft: k,
+      iconRight: E,
+      valid: O,
+      invalid: C,
+      dirty: x,
+      focus: b,
+      floating: D
+    }), z = c(
+      () => e.searchable ? ne.value : e.options
+    ), { getOptionLabel: q, getOptionValue: te } = pe(e), ne = c(() => {
+      var f;
+      return (f = e.options) == null ? void 0 : f.filter((S) => q(S).toLowerCase().includes(o.value.toLowerCase().trim()));
+    }), le = c(() => {
+      let f = [];
+      return Array.isArray(e.modelValue) ? f = e.modelValue : e.modelValue && (f = [e.modelValue]), e.options.filter(
+        (S) => f.includes(te(S))
+      );
+    }), re = c(() => le.value.map((f) => q(f)).join(e.separator));
+    Ge(u, () => {
+      u.value.open = !1;
+    });
+    function oe(f) {
+      const S = f.target;
+      s.value = S.open;
+    }
+    function K(f) {
+      u.value && !e.multiple && (u.value.open = !1), t("update:modelValue", f);
+    }
+    const g = c(() => ({
+      name: e.name,
+      options: z.value,
+      labelKey: e.labelKey,
+      valueKey: e.valueKey,
+      disabled: e.disabled,
+      labelNoResults: e.labelNoResults,
+      multiple: e.multiple,
+      maxValues: e.maxValues,
+      modelValue: e.modelValue,
+      unselectable: e.unselectable
+    })), R = c(() => ({
+      id: m.value,
+      name: e.name,
+      tabindex: H.value,
+      valid: O.value,
+      validLabel: e.validLabel,
+      invalid: C.value,
+      invalidLabel: e.invalidLabel,
+      hintLabel: e.hintLabel,
+      loading: A.value,
+      loadingLabel: e.loadingLabel,
+      disabled: h.value,
+      readonly: $.value,
+      modifiers: e.modifiers,
+      options: z.value,
+      labelKey: e.labelKey,
+      valueKey: e.valueKey,
+      icon: e.icon,
+      iconPosition: e.iconPosition,
+      floating: e.floating,
+      unselectable: e.unselectable,
+      multiple: e.multiple,
+      label: e.label,
+      placeholder: e.placeholder,
+      modelValue: e.modelValue
+    }));
+    return (f, S) => f.native ? (y(), F(St, P({ key: 1 }, a(R), {
+      "onUpdate:modelValue": S[4] || (S[4] = (_) => t("update:modelValue", _))
+    }), null, 16)) : (y(), I("div", {
+      key: 0,
+      id: a(m),
+      class: ue(a(M))
+    }, [
+      f.label ? (y(), I("label", {
+        key: 0,
+        id: `${a(m)}-label`,
+        for: f.searchable && s.value ? `${a(m)}-input` : void 0
+      }, N(f.label), 9, At)) : w("", !0),
+      B("details", {
+        ref_key: "dropdown",
+        ref: u,
+        class: "vv-select__wrapper",
+        onClick: S[2] || (S[2] = (_) => a(h) || a($) ? _.preventDefault() : null),
+        onKeyup: S[3] || (S[3] = ye((_) => u.value.open = !1, ["esc"])),
+        onToggle: oe
+      }, [
+        B("summary", {
+          class: "vv-select__input",
+          tabindex: a(H),
+          onKeyup: S[1] || (S[1] = ye((_) => f.searchable ? _.preventDefault() : null, ["space"]))
+        }, [
+          J(f.$slots, "before", {}, () => [
+            a(k) ? (y(), F(W, P({
+              key: 0,
+              class: "vv-select__icon-left"
+            }, a(L)), null, 16)) : w("", !0)
+          ]),
+          f.searchable && s.value ? Ae((y(), I("input", {
+            key: 0,
+            id: `${a(m)}-input`,
+            ref_key: "inputSearch",
+            ref: l,
+            "onUpdate:modelValue": S[0] || (S[0] = (_) => p.value = _),
+            role: "combobox",
+            type: "search",
+            placeholder: f.searchPlaceholder
+          }, null, 8, wt)), [
+            [Me, p.value]
+          ]) : (y(), I(de, { key: 1 }, [
+            Ie(N(a(re) || f.placeholder), 1)
+          ], 64)),
+          J(f.$slots, "after", {}, () => [
+            a(E) ? (y(), F(W, P({
+              key: 0,
+              class: "vv-select__icon-right"
+            }, a(L)), null, 16)) : w("", !0)
+          ])
+        ], 40, Ot),
+        ae(ut, P({
+          id: `${a(m)}-dropdown`
+        }, a(g), { "onUpdate:modelValue": K }), null, 16, ["id"])
+      ], 544),
+      ae(a(r), { class: "vv-select__hint" })
+    ], 10, kt));
+  }
+});
+export {
+  Dt as default
+};