@volverjs/ui-vue 0.0.2 → 0.0.3-beta.3

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

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