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

package/dist/index.es.js

@@ -1,200 +1,46 @@
-var Rt = Object.defineProperty;
-var Lt = (l, t, e) => t in l ? Rt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e;
-var ke = (l, t, e) => (Lt(l, typeof t != "symbol" ? t + "" : t, e), e);
-import { addCollection as Dt, addIcon as ut, addAPIProvider as Tt, iconExists as De, Icon as Bt } from "@iconify/vue";
-import { unref as a, computed as i, inject as Xe, toRef as Nt, toRefs as F, defineComponent as D, useAttrs as dt, ref as G, openBlock as m, createElementBlock as _, normalizeClass as K, withModifiers as Ze, createElementVNode as E, renderSlot as A, normalizeProps as W, guardReactiveProps as te, createTextVNode as X, toDisplayString as L, isRef as $e, provide as xt, watchEffect as Ye, Fragment as ge, renderList as Ce, createBlock as T, mergeProps as R, withCtx as we, resolveDynamicComponent as ct, createCommentVNode as I, useSlots as ce, h as Q, watch as Ae, onMounted as Ht, withDirectives as Se, vModelCheckbox as Mt, createVNode as oe, vModelSelect as Gt, withKeys as ot, vModelText as vt, Transition as Ut, toHandlers as jt, vShow as Kt, vModelDynamic as Ft, vModelRadio as Wt } from "vue";
-import { useToggle as zt, toReactive as qt, useVModel as Je, useFocus as Xt, useElementVisibility as Qe, refDebounced as Zt, onClickOutside as pt } from "@vueuse/core";
-import { nanoid as ve } from "nanoid";
-const Ne = "ds";
-class Yt {
+var rt = Object.defineProperty;
+var it = (o, s, e) => s in o ? rt(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e;
+var he = (o, s, e) => (it(o, typeof s != "symbol" ? s + "" : s, e), e);
+import { addCollection as ut, addIcon as Ue, addAPIProvider as dt, iconExists as $e, Icon as ct } from "@iconify/vue";
+import { defineComponent as N, openBlock as m, createElementBlock as _, unref as t, normalizeClass as U, withModifiers as Be, createElementVNode as R, renderSlot as k, normalizeProps as F, guardReactiveProps as Y, createTextVNode as q, toDisplayString as B, Fragment as de, renderList as fe, createBlock as D, mergeProps as O, withCtx as ge, resolveDynamicComponent as Fe, createCommentVNode as I, withDirectives as ve, isRef as be, vModelCheckbox as pt, createVNode as Z, vModelSelect as vt, withKeys as Ne, vModelText as Ke, Transition as mt, toHandlers as ft, vShow as bt, vModelDynamic as ht, vModelRadio as gt } from "vue";
+import { nanoid as ne } from "nanoid";
+const Ae = "ds";
+class yt {
   constructor({
-    fetchWithCredentials: t = !1,
+    fetchWithCredentials: s = !1,
     fetchOptions: e = {},
     iconsCollections: n = [],
-    nuxt: o = !1
+    nuxt: l = !1
   } = {}) {
-    ke(this, "fetchOptions");
-    ke(this, "iconsCollections");
-    ke(this, "provider");
-    ke(this, "nuxt");
-    t && (e = { ...e, credentials: "include" }), this.provider = Ne, this.fetchOptions = e, this.iconsCollections = n, this.iconsCollections.forEach((r) => {
-      this.addCollection(r, this.provider);
-    }), this.nuxt = o;
+    he(this, "fetchOptions");
+    he(this, "iconsCollections");
+    he(this, "provider");
+    he(this, "nuxt");
+    s && (e = { ...e, credentials: "include" }), this.provider = Ae, this.fetchOptions = e, this.iconsCollections = n, this.iconsCollections.forEach((i) => {
+      this.addCollection(i, this.provider);
+    }), this.nuxt = l;
   }
-  addCollection(t, e) {
-    return Dt(t, e);
+  addCollection(s, e) {
+    return ut(s, e);
   }
-  addIcon(t, e) {
-    return ut(t, e);
+  addIcon(s, e) {
+    return Ue(s, e);
   }
-  addAPIProvider(t, e) {
-    return Tt(t, e);
+  addAPIProvider(s, e) {
+    return dt(s, e);
   }
-  fetchIcon(t, e = { cache: "force-cache" }) {
-    return new Promise((n, o) => {
-      fetch(t, { ...this.fetchOptions, ...e }).catch((r) => o(r)).then((r) => r == null ? void 0 : r.text()).then((r) => n(r));
+  fetchIcon(s, e = { cache: "force-cache" }) {
+    return new Promise((n, l) => {
+      fetch(s, { ...this.fetchOptions, ...e }).catch((i) => l(i)).then((i) => i == null ? void 0 : i.text()).then((i) => n(i));
     });
   }
 }
-const so = {
-  install(l, t) {
-    const e = new Yt(t);
-    l.config.globalProperties.$ds = e, l.provide(Ne, e);
+const As = {
+  install(o, s) {
+    const e = new yt(s);
+    o.config.globalProperties.$ds = e, o.provide(Ae, e);
   }
-};
-function he(l, t, e) {
-  return e ? Be(l, e) === Be(t, e) : qe(l, t);
-}
-function qe(l, t) {
-  if (l === t)
-    return !0;
-  if (l && t && typeof l == "object" && typeof t == "object") {
-    const e = Array.isArray(l), n = Array.isArray(t);
-    let o, r, s;
-    if (e && n) {
-      if (r = l.length, r != t.length)
-        return !1;
-      for (o = r; o-- !== 0; )
-        if (!qe(l[o], t[o]))
-          return !1;
-      return !0;
-    }
-    if (e != n)
-      return !1;
-    const b = l instanceof Date, c = t instanceof Date;
-    if (b != c)
-      return !1;
-    if (b && c)
-      return l.getTime() == t.getTime();
-    const d = l instanceof RegExp, u = t instanceof RegExp;
-    if (d != u)
-      return !1;
-    if (d && u)
-      return l.toString() == t.toString();
-    const p = Object.keys(l);
-    if (r = p.length, r !== Object.keys(t).length)
-      return !1;
-    for (o = r; o-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(t, p[o]))
-        return !1;
-    for (o = r; o-- !== 0; )
-      if (s = p[o], !qe(l[s], t[s]))
-        return !1;
-    return !0;
-  }
-  return l !== l && t !== t;
-}
-function Be(l, t) {
-  if (l && Object.keys(l).length && t) {
-    if (t.indexOf(".") === -1)
-      return l[t];
-    {
-      const e = t.split(".");
-      let n = l;
-      for (let o = 0, r = e.length; o < r; ++o) {
-        if (l == null)
-          return null;
-        n = n[e[o]];
-      }
-      return n;
-    }
-  } else
-    return null;
-}
-function Jt(l, t) {
-  let e = -1;
-  if (t) {
-    for (let n = 0; n < t.length; n++)
-      if (he(t[n], l)) {
-        e = n;
-        break;
-      }
-  }
-  return e;
-}
-function me(l, t) {
-  if (l != null && t && t.length) {
-    for (const e of t)
-      if (he(l, e))
-        return !0;
-  }
-  return !1;
-}
-function ee(l) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(a(l));
-}
-function Qt(l, t) {
-  const e = Jt(l, t);
-  return e > -1 ? t.filter((n, o) => o !== e) : t;
-}
-function el(l) {
-  return typeof l == "string" || l instanceof String;
-}
-function nt(l) {
-  var t, e;
-  if (l)
-    return (e = (t = l.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 H(l, t) {
-  const e = { [`${l}`]: !0 };
-  return {
-    bemCssClasses: i(() => Object.keys(t).reduce((o, r) => {
-      const s = a(t[r]) || !1;
-      if (!s)
-        return o;
-      if (r === "modifiers") {
-        const b = Array.isArray(s) ? s : s.split(" ");
-        return {
-          ...o,
-          ...b.reduce(
-            (c, d) => ({
-              ...c,
-              [`${l}--${nt(d)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...o,
-          [`${l}--${nt(r)}`]: s
-        };
-    }, e) || {})
-  };
-}
-function xe(l) {
-  const t = Xe(l, void 0), e = i(() => !ee(t));
-  function n(o, r, s) {
-    if (t != null && t.value) {
-      const c = a(t.value)[o];
-      return i({
-        get() {
-          return c == null ? void 0 : c.value;
-        },
-        set(d) {
-          c.value = d;
-        }
-      });
-    }
-    const b = Nt(r, o);
-    return i({
-      get() {
-        return b.value;
-      },
-      set(c) {
-        s && s(`update:${o}`, c);
-      }
-    });
-  }
-  return {
-    group: t,
-    isInGroup: e,
-    getGroupOrLocalRef: n
-  };
-}
-const ft = "VV_BUTTON_GROUP", mt = "VV_RADIO_GROUP", bt = "VV_CHECK_GROUP", ht = "VV_ACCORDION_GROUP", tl = {
+}, We = "VV_BUTTON_GROUP", qe = "VV_RADIO_GROUP", je = "VV_CHECK_GROUP", ze = "VV_ACCORDION_GROUP", _t = {
   name: String,
   title: String,
   content: String,
@@ -204,99 +50,88 @@ const ft = "VV_BUTTON_GROUP", mt = "VV_RADIO_GROUP", bt = "VV_CHECK_GROUP", ht =
   },
   modifiers: [String, Array],
   disabled: Boolean
-}, ll = ["update:modelValue"];
-function al(l, t) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: o } = xe(ht), { title: r, content: s } = F(l), b = o("modelValue", l, t), c = o("disabled", l), d = o("collapse", l), u = o("modifiers", l);
+}, St = ["update:modelValue"];
+function Vt(o, s) {
+  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(ze), { title: i, content: r } = toRefs(o), f = l("modelValue", o, s), p = l("disabled", o), u = l("collapse", o), a = l("modifiers", o);
   return {
-    modelValue: b,
-    disabled: c,
+    modelValue: f,
+    disabled: p,
     isInGroup: n,
     group: e,
-    collapse: d,
-    modifiers: u,
-    title: r,
-    content: s
+    collapse: u,
+    modifiers: a,
+    title: i,
+    content: r
   };
 }
-const ol = ["id", "open"], nl = ["aria-controls", "aria-expanded"], sl = ["aria-hidden"], rl = {
+const Ct = ["id", "open"], $t = ["aria-controls", "aria-expanded"], kt = ["aria-hidden"], At = {
   name: "VvAccordion"
-}, il = /* @__PURE__ */ D({
-  ...rl,
-  props: tl,
-  emits: ll,
-  setup(l, { emit: t }) {
-    const e = l, n = dt(), o = e.name || (n == null ? void 0 : n.id) || ve(), {
-      modifiers: r,
-      title: s,
-      content: b,
-      disabled: c,
-      collapse: d,
-      modelValue: u,
-      isInGroup: p
-    } = al(e, t), v = G(!1), h = i({
-      get: () => p.value ? d.value && Array.isArray(u.value) ? u.value.includes(o) : u.value === o : u.value === void 0 ? v.value : u.value,
-      set: (f) => {
-        if (p.value) {
-          if (d.value && Array.isArray(u.value)) {
-            if (f) {
-              u.value.push(o);
+}, Pt = /* @__PURE__ */ N({
+  ...At,
+  props: _t,
+  emits: St,
+  setup(o, { emit: s }) {
+    const e = o, n = useAttrs(), l = e.name || (n == null ? void 0 : n.id) || ne(), {
+      modifiers: i,
+      title: r,
+      content: f,
+      disabled: p,
+      collapse: u,
+      modelValue: a,
+      isInGroup: c
+    } = Vt(e, s), d = ref(!1), b = computed({
+      get: () => c.value ? u.value && Array.isArray(a.value) ? a.value.includes(l) : a.value === l : a.value === void 0 ? d.value : a.value,
+      set: (v) => {
+        if (c.value) {
+          if (u.value && Array.isArray(a.value)) {
+            if (v) {
+              a.value.push(l);
               return;
             }
-            u.value = u.value.filter(
-              (V) => V !== o
+            a.value = a.value.filter(
+              (V) => V !== l
             );
             return;
           }
-          u.value = f ? o : null;
+          a.value = v ? l : null;
           return;
         }
-        if (u.value === void 0 && typeof f == "boolean") {
-          v.value = f;
+        if (a.value === void 0 && typeof v == "boolean") {
+          d.value = v;
           return;
         }
-        u.value = f;
+        a.value = v;
       }
-    }), { bemCssClasses: g } = H("vv-accordion", {
-      modifiers: r,
-      disabled: c
-    }), y = zt(h);
-    return (f, V) => (m(), _("details", {
-      id: a(o),
-      class: K(a(g)),
-      open: a(h),
-      onClick: V[0] || (V[0] = Ze((P) => a(y)(), ["prevent"]))
+    }), { bemCssClasses: g } = useBemModifiers("vv-accordion", {
+      modifiers: i,
+      disabled: p
+    }), y = useToggle(b);
+    return (v, V) => (m(), _("details", {
+      id: t(l),
+      class: U(t(g)),
+      open: t(b),
+      onClick: V[0] || (V[0] = Be((w) => t(y)(), ["prevent"]))
     }, [
-      E("summary", {
-        "aria-controls": a(o),
-        "aria-expanded": a(h),
+      R("summary", {
+        "aria-controls": t(l),
+        "aria-expanded": t(b),
         class: "vv-collapse__summary"
       }, [
-        A(f.$slots, "summary", W(te({ open: a(h) })), () => [
-          X(L(a(s)), 1)
+        k(v.$slots, "summary", F(Y({ open: t(b) })), () => [
+          q(B(t(r)), 1)
         ])
-      ], 8, nl),
-      E("div", {
-        "aria-hidden": !a(h),
+      ], 8, $t),
+      R("div", {
+        "aria-hidden": !t(b),
         class: "vv-collapse__content"
       }, [
-        A(f.$slots, "details", W(te({ open: a(h) })), () => [
-          X(L(a(b)), 1)
+        k(v.$slots, "details", F(Y({ open: t(b) })), () => [
+          q(B(t(f)), 1)
         ])
-      ], 8, sl)
-    ], 10, ol));
+      ], 8, kt)
+    ], 10, Ct));
   }
-});
-function He(l) {
-  if (Object.keys(l).some(
-    (t) => t !== "key" && !$e(l[t])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  xt(
-    l.key,
-    i(() => l)
-  );
-}
-const ul = {
+}), wt = {
   modelValue: [String, Array],
   items: { type: Array, default: () => [] },
   collapse: Boolean,
@@ -306,235 +141,263 @@ const ul = {
     default: ""
   },
   disabled: Boolean
-}, dl = ["update:modelValue"], cl = {
+}, It = ["update:modelValue"], Et = {
   name: "VvAccordionGroup"
-}, ro = /* @__PURE__ */ D({
-  ...cl,
-  props: ul,
-  emits: dl,
-  setup(l, { emit: t }) {
-    const e = l, { disabled: n, collapse: o, modifiers: r, itemModifiers: s, items: b } = F(e);
-    Ye(() => {
-      typeof e.modelValue == "string" && o.value && console.warn(
+}, Ps = /* @__PURE__ */ N({
+  ...Et,
+  props: wt,
+  emits: It,
+  setup(o, { emit: s }) {
+    const e = o, { disabled: n, collapse: l, modifiers: i, itemModifiers: r, items: f } = toRefs(e);
+    watchEffect(() => {
+      typeof e.modelValue == "string" && l.value && console.warn(
         "[VvAccordionGroup]: modelValue is a string but collapse is true."
       );
     });
-    const c = G([]), d = i({
+    const p = ref([]), u = computed({
       get: () => {
-        var v;
-        return e.modelValue !== void 0 ? o.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : o.value ? c.value : (v = c.value) == null ? void 0 : v[0];
+        var d;
+        return e.modelValue !== void 0 ? l.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : l.value ? p.value : (d = p.value) == null ? void 0 : d[0];
       },
-      set: (v) => {
+      set: (d) => {
         if (e.modelValue !== void 0)
-          return (Array.isArray(e.modelValue) || o.value) && !Array.isArray(v) && (v = [v]), t("update:modelValue", v);
-        c.value = Array.isArray(v) ? v : [v];
+          return (Array.isArray(e.modelValue) || l.value) && !Array.isArray(d) && (d = [d]), s("update:modelValue", d);
+        p.value = Array.isArray(d) ? d : [d];
       }
-    });
-    He({
-      key: ht,
-      modelValue: d,
+    }), a = {
+      key: ze,
+      modelValue: u,
       disabled: n,
-      collapse: o,
-      modifiers: s
-    });
-    const { bemCssClasses: p } = H("vv-accordion-group", {
-      modifiers: r,
+      collapse: l,
+      modifiers: r
+    };
+    useProvideGroupState(a);
+    const { bemCssClasses: c } = useBemModifiers("vv-accordion-group", {
+      modifiers: i,
       disabled: n
     });
-    return (v, h) => (m(), _("div", {
-      class: K(a(p))
+    return (d, b) => (m(), _("div", {
+      class: U(t(c))
     }, [
-      A(v.$slots, "default", {}, () => [
-        (m(!0), _(ge, null, Ce(a(b), (g) => (m(), T(il, R({
+      k(d.$slots, "default", {}, () => [
+        (m(!0), _(de, null, fe(t(f), (g) => (m(), D(Pt, O({
           key: g.title
         }, {
           name: g.name,
           title: g.title,
           content: g.content
         }), {
-          header: we((y) => [
-            A(v.$slots, `header::${g.name}`, W(te(y)))
+          header: ge((y) => [
+            k(d.$slots, `header::${g.name}`, F(Y(y)))
           ]),
-          details: we((y) => [
-            A(v.$slots, `details::${g.name}`, W(te(y)))
+          details: ge((y) => [
+            k(d.$slots, `details::${g.name}`, F(Y(y)))
           ]),
           _: 2
         }, 1040))), 128))
       ])
     ], 2));
   }
-}), Pe = {
+}), ye = {
   valid: Boolean,
   validLabel: [String, Array]
-}, Ie = {
+}, _e = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, et = {
+}, De = {
   loading: Boolean,
   loadingLabel: String
-}, ye = {
+}, ce = {
   disabled: Boolean
-}, Oe = {
+}, Se = {
   readonly: Boolean
-}, pe = {
+}, re = {
   modifiers: [String, Array]
-}, Ee = {
+}, Ve = {
   hintLabel: { type: String, default: "" }
-}, Me = {
+}, Pe = {
   options: {
     type: Array,
     default: () => []
   },
   labelKey: { type: [String, Function], default: "label" },
   valueKey: { type: [String, Function], default: "value" }
-}, vl = {
+}, Rt = {
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (l) => [!0, !1, "limit", "countdown"].includes(l)
+    validator: (o) => [!0, !1, "limit", "countdown"].includes(o)
   }
-}, pl = {
+}, Ot = {
   debounce: [Number, String]
-}, st = {
+}, He = {
   LEFT: "left",
   RIGHT: "right"
-}, tt = {
+}, Te = {
   icon: { type: [String, Object] },
   iconPosition: {
     type: String,
-    validation: (l) => Object.values(st).includes(l),
-    default: st.RIGHT
+    validation: (o) => Object.values(He).includes(o),
+    default: He.RIGHT
   }
-}, Ge = {
+}, we = {
   tabindex: { type: [String, Number], default: 0 }
-}, lt = {
+}, Le = {
   floating: Boolean
-}, Ue = {
+}, Ie = {
   unselectable: { type: Boolean, default: !0 }
-}, Re = {
+}, Ce = {
   id: [String, Number],
   name: { type: String, required: !0 }
-}, gt = {
+}, Xe = {
   autofocus: Boolean
-}, yt = {
+}, Ye = {
   autocomplete: { type: String, default: "off" }
-}, _t = {
-  ...Re,
-  ...gt,
-  ...yt,
-  ...Ge,
+}, Je = {
+  ...Ce,
+  ...Xe,
+  ...Ye,
+  ...we,
+  ...ce,
+  ...Se,
   ...ye,
-  ...Oe,
-  ...Pe,
-  ...Ie,
-  ...Ee,
-  ...et,
-  ...pe,
-  ...vl,
-  ...pl,
-  ...tt,
-  ...lt,
+  ..._e,
+  ...Ve,
+  ...De,
+  ...re,
+  ...Rt,
+  ...Ot,
+  ...Te,
+  ...Le,
   minlength: Number,
   maxlength: Number,
   placeholder: String,
   required: Boolean,
   label: String
-}, St = {
-  ...Re,
-  ...Ge,
-  ...Pe,
-  ...Ie,
-  ...Ee,
+}, Qe = {
+  ...Ce,
+  ...we,
   ...ye,
-  ...Oe,
+  ..._e,
+  ...Ve,
+  ...ce,
+  ...Se,
   value: [String, Number, Boolean],
   modelValue: [Object, Number, Boolean, String],
   label: String
-}, Vt = {
-  ...Pe,
-  ...Ie,
-  ...Me,
-  ...Ee,
+}, Ze = {
   ...ye,
-  ...Oe,
+  ..._e,
+  ...Pe,
+  ...Ve,
+  ...ce,
+  ...Se,
   modelValue: [String, Array],
   label: String,
   name: { type: String, required: !0 },
   vertical: Boolean
-}, fl = {
-  ...pe,
+}, Bt = {
+  ...re,
   value: [String, Number]
-}, ml = {
+}, Dt = {
   name: "VvBadge"
-}, io = /* @__PURE__ */ D({
-  ...ml,
-  props: fl,
-  setup(l) {
-    const t = l, { bemCssClasses: e } = H("vv-badge", {
-      modifiers: t.modifiers
+}, ws = /* @__PURE__ */ N({
+  ...Dt,
+  props: Bt,
+  setup(o) {
+    const s = o, { bemCssClasses: e } = useBemModifiers("vv-badge", {
+      modifiers: s.modifiers
     });
-    return (n, o) => (m(), _("span", {
-      class: K(a(e)),
+    return (n, l) => (m(), _("span", {
+      class: U(t(e)),
       role: "status"
     }, [
-      A(n.$slots, "default", {}, () => [
-        X(L(n.value), 1)
+      k(n.$slots, "default", {}, () => [
+        q(B(n.value), 1)
       ])
     ], 2));
   }
-}), bl = {
-  ...pe,
+});
+function Tt(o, s) {
+  const e = { [`${o}`]: !0 };
+  return {
+    bemCssClasses: computed(() => Object.keys(s).reduce((l, i) => {
+      const r = unref(s[i]) || !1;
+      if (!r)
+        return l;
+      if (i === "modifiers") {
+        const f = Array.isArray(r) ? r : r.split(" ");
+        return {
+          ...l,
+          ...f.reduce(
+            (p, u) => ({
+              ...p,
+              [`${o}--${kebabCase(u)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...l,
+          [`${o}--${kebabCase(i)}`]: r
+        };
+    }, e) || {})
+  };
+}
+const Lt = {
+  ...re,
   routes: Array
-}, hl = { class: "vv-breadcrumb__list" }, gl = ["content"], yl = {
+}, Mt = { class: "vv-breadcrumb__list" }, Nt = ["content"], Ht = {
   name: "VvBreadcrumb"
-}, uo = /* @__PURE__ */ D({
-  ...yl,
-  props: bl,
-  setup(l) {
-    const t = l, { bemCssClasses: e } = H("vv-breadcrumb", {
-      modifiers: t.modifiers
+}, Is = /* @__PURE__ */ N({
+  ...Ht,
+  props: Lt,
+  setup(o) {
+    const s = o, { bemCssClasses: e } = Tt("vv-breadcrumb", {
+      modifiers: s.modifiers
     });
-    return (n, o) => (m(), _("nav", {
-      class: K(a(e)),
+    return (n, l) => (m(), _("nav", {
+      class: U(t(e)),
       "aria-label": "breadcrumbs"
     }, [
-      E("ol", hl, [
-        (m(!0), _(ge, null, Ce(n.routes, (r, s) => {
-          var b, c, d, u;
+      R("ol", Mt, [
+        (m(!0), _(de, null, fe(n.routes, (i, r) => {
+          var f, p, u, a;
           return m(), _("li", {
-            key: `${r.label}-${s}`,
-            class: K({
-              "vv-breadcrumb__item": s < Number((b = n.routes) == null ? void 0 : b.length) - 1,
-              "vv-breadcrumb__item-active": s === Number((c = n.routes) == null ? void 0 : c.length) - 1
+            key: `${i.label}-${r}`,
+            class: U({
+              "vv-breadcrumb__item": r < Number((f = n.routes) == null ? void 0 : f.length) - 1,
+              "vv-breadcrumb__item-active": r === Number((p = n.routes) == null ? void 0 : p.length) - 1
             }),
             itemprop: "itemListElement",
             itemtype: "https://schema.org/ListItem",
             itemscope: ""
           }, [
-            (m(), T(ct(r.to ? "router-link" : r.href ? "a" : "span"), R(r, {
+            (m(), D(Fe(i.to ? "router-link" : i.href ? "a" : "span"), O(i, {
               class: {
-                "vv-breadcrumb__link": s < Number((d = n.routes) == null ? void 0 : d.length) - 1
+                "vv-breadcrumb__link": r < Number((u = n.routes) == null ? void 0 : u.length) - 1
               },
-              "aria-current": s === Number((u = n.routes) == null ? void 0 : u.length) - 1 ? "page" : void 0,
+              "aria-current": r === Number((a = n.routes) == null ? void 0 : a.length) - 1 ? "page" : void 0,
               itemprop: "item"
             }), {
-              default: we(() => [
-                A(n.$slots, "label", W(te({ route: r, index: s })), () => [
-                  X(L(r.label), 1)
+              default: ge(() => [
+                k(n.$slots, "label", F(Y({ route: i, index: r })), () => [
+                  q(B(i.label), 1)
                 ])
               ]),
               _: 2
             }, 1040, ["class", "aria-current"])),
-            E("meta", {
+            R("meta", {
               itemprop: "position",
-              content: `${s + 1}`
-            }, null, 8, gl)
+              content: `${r + 1}`
+            }, null, 8, Nt)
           ], 2);
         }), 128))
       ])
     ], 2));
   }
-}), _l = {
+}), xt = {
   color: String,
   width: {
     type: [String, Number]
@@ -565,64 +428,64 @@ const ul = {
   modifiers: {
     type: [String, Array]
   }
-}, Sl = {
+}, Gt = {
   name: "VvIcon"
-}, U = /* @__PURE__ */ D({
-  ...Sl,
-  props: _l,
-  setup(l) {
-    const t = l, e = G(!0), { modifiers: n } = F(t), o = Xe(Ne), { bemCssClasses: r } = H("vv-icon", {
+}, x = /* @__PURE__ */ N({
+  ...Gt,
+  props: xt,
+  setup(o) {
+    const s = o, e = ref(!0), { modifiers: n } = toRefs(s), l = inject(Ae), { bemCssClasses: i } = useBemModifiers("vv-icon", {
       modifiers: n
-    }), s = i(() => t.provider || (o == null ? void 0 : o.provider)), b = i(() => {
-      const u = t.name ?? "", p = `@${s.value}:${t.prefix}:${t.name}`;
-      return De(u) ? u : De(p) ? p : (o == null ? void 0 : o.iconsCollections.find((v) => {
-        const h = `@${s.value}:${v.prefix}:${u}`;
-        if (De(h))
-          return h;
-      })) || u;
+    }), r = computed(() => s.provider || (l == null ? void 0 : l.provider)), f = computed(() => {
+      const a = s.name ?? "", c = `@${r.value}:${s.prefix}:${s.name}`;
+      return $e(a) ? a : $e(c) ? c : (l == null ? void 0 : l.iconsCollections.find((d) => {
+        const b = `@${r.value}:${d.prefix}:${a}`;
+        if ($e(b))
+          return b;
+      })) || a;
     });
-    function c(u) {
-      let p = null;
+    function p(a) {
+      let c = null;
       if (typeof window > "u") {
         const { JSDOM: y } = require("jsdom");
-        p = new y().window;
+        c = new y().window;
       }
-      return (p ? new p.DOMParser() : new window.DOMParser()).parseFromString(u, "text/html").querySelector("svg");
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(a, "text/html").querySelector("svg");
     }
-    function d(u) {
-      const p = c(u), v = (p == null ? void 0 : p.innerHTML.trim()) || "";
-      p && v && ut(`@${s.value}:${t.prefix}:${t.name}`, {
-        body: v,
-        height: p.viewBox.baseVal.height,
-        width: p.viewBox.baseVal.width
+    function u(a) {
+      const c = p(a), d = (c == null ? void 0 : c.innerHTML.trim()) || "";
+      c && d && Ue(`@${r.value}:${s.prefix}:${s.name}`, {
+        body: d,
+        height: c.viewBox.baseVal.height,
+        width: c.viewBox.baseVal.width
       });
     }
-    return o && (t.src && !De(`@${s.value}:${t.prefix}:${t.name}`) ? (e.value = !1, o.fetchIcon(t.src).then((u) => {
-      u && (d(u), e.value = !0);
-    }).catch((u) => {
-      throw new Error(`During fetch icon: ${u == null ? void 0 : u.message}`);
-    })) : t.svg && d(t.svg)), (u, p) => e.value ? (m(), T(a(Bt), R({
+    return l && (s.src && !$e(`@${r.value}:${s.prefix}:${s.name}`) ? (e.value = !1, l.fetchIcon(s.src).then((a) => {
+      a && (u(a), e.value = !0);
+    }).catch((a) => {
+      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
+    })) : s.svg && u(s.svg)), (a, c) => t(e) ? (m(), D(t(ct), O({
       key: 0,
-      class: a(r)
+      class: t(i)
     }, {
-      inline: u.inline,
-      width: u.width,
-      height: u.height,
-      horizontalFlip: u.horizontalFlip,
-      verticalFlip: u.verticalFlip,
-      flip: u.flip,
-      rotate: u.rotate,
-      color: u.color,
-      onLoad: u.onLoad,
-      icon: a(b)
+      inline: a.inline,
+      width: a.width,
+      height: a.height,
+      horizontalFlip: a.horizontalFlip,
+      verticalFlip: a.verticalFlip,
+      flip: a.flip,
+      rotate: a.rotate,
+      color: a.color,
+      onLoad: a.onLoad,
+      icon: t(f)
     }), null, 16, ["class"])) : I("", !0);
   }
 });
-var Ve = /* @__PURE__ */ ((l) => (l.left = "left", l.right = "right", l.top = "top", l.bottom = "bottom", l))(Ve || {}), $t = /* @__PURE__ */ ((l) => (l.button = "button", l.submit = "submit", l.reset = "reset", l))($t || {}), de = /* @__PURE__ */ ((l) => (l.nuxtLink = "nuxt-link", l.routerLink = "router-link", l.a = "a", l.button = "button", l))(de || {}), Ct = /* @__PURE__ */ ((l) => (l._blank = "_blank", l._self = "_self", l._parent = "_parent", l._top = "_top", l))(Ct || {});
-const Vl = ["update:modelValue"], $l = {
-  ...pe,
-  ...ye,
-  ...Ue,
+var me = /* @__PURE__ */ ((o) => (o.left = "left", o.right = "right", o.top = "top", o.bottom = "bottom", o))(me || {}), et = /* @__PURE__ */ ((o) => (o.button = "button", o.submit = "submit", o.reset = "reset", o))(et || {}), ae = /* @__PURE__ */ ((o) => (o.nuxtLink = "nuxt-link", o.routerLink = "router-link", o.a = "a", o.button = "button", o))(ae || {}), tt = /* @__PURE__ */ ((o) => (o._blank = "_blank", o._self = "_self", o._parent = "_parent", o._top = "_top", o))(tt || {});
+const Ut = ["update:modelValue"], Ft = {
+  ...re,
+  ...ce,
+  ...Ie,
   icon: {
     type: [String, Object],
     default: ""
@@ -630,7 +493,7 @@ const Vl = ["update:modelValue"], $l = {
   iconPosition: {
     type: String,
     default: "left",
-    validator: (l) => l in Ve
+    validator: (o) => o in me
   },
   label: [String, Number],
   loading: Boolean,
@@ -645,7 +508,7 @@ const Vl = ["update:modelValue"], $l = {
   href: String,
   target: {
     type: String,
-    validator: (l) => l in Ct
+    validator: (o) => o in tt
   },
   active: Boolean,
   pressed: Boolean,
@@ -656,7 +519,7 @@ const Vl = ["update:modelValue"], $l = {
   type: {
     type: String,
     default: "button",
-    validator: (l) => l in $t
+    validator: (o) => o in et
   },
   toggle: {
     type: Boolean,
@@ -664,306 +527,306 @@ const Vl = ["update:modelValue"], $l = {
   },
   modelValue: String
 };
-function Cl(l, t) {
-  var f;
-  const { group: e, isInGroup: n, getGroupOrLocalRef: o } = xe(ft), {
-    iconPosition: r,
-    icon: s,
-    label: b,
-    pressed: c,
-    modifiers: d
-  } = F(l), u = o("modelValue", l, t), p = o("disabled", l), v = o("toggle", l), h = o(
+function Kt(o, s) {
+  var v;
+  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(We), {
+    iconPosition: i,
+    icon: r,
+    label: f,
+    pressed: p,
+    modifiers: u
+  } = toRefs(o), a = l("modelValue", o, s), c = l("disabled", o), d = l("toggle", o), b = l(
     "unselectable",
-    l
-  ), g = ((f = e == null ? void 0 : e.value) == null ? void 0 : f.multiple) ?? G(!1), y = i(() => {
-    var $;
-    const V = d != null && d.value ? Array.isArray(d.value) ? d.value : [d.value] : [], P = ($ = e == null ? void 0 : e.value.itemModifiers) != null && $.value ? Array.isArray(e.value.itemModifiers.value) ? e.value.itemModifiers.value : [e.value.itemModifiers.value] : [];
-    return [...V, ...P];
+    o
+  ), g = ((v = e == null ? void 0 : e.value) == null ? void 0 : v.multiple) ?? ref(!1), y = computed(() => {
+    var C;
+    const V = u != null && u.value ? Array.isArray(u.value) ? u.value : [u.value] : [], w = (C = e == null ? void 0 : e.value.itemModifiers) != null && C.value ? Array.isArray(e.value.itemModifiers.value) ? e.value.itemModifiers.value : [e.value.itemModifiers.value] : [];
+    return [...V, ...w];
   });
   return {
     group: e,
     isInGroup: n,
-    modelValue: u,
-    disabled: p,
-    toggle: v,
-    unselectable: h,
+    modelValue: a,
+    disabled: c,
+    toggle: d,
+    unselectable: b,
     multiple: g,
     modifiers: y,
-    pressed: c,
-    iconPosition: r,
-    icon: s,
-    label: b
+    pressed: p,
+    iconPosition: i,
+    icon: r,
+    label: f
   };
 }
-const Al = {
+const Wt = {
   key: 1,
   class: "vv-button__label"
-}, kl = {
+}, qt = {
   key: 1,
   class: "vv-button__label"
-}, wl = {
+}, jt = {
   name: "VvButton"
-}, co = /* @__PURE__ */ D({
-  ...wl,
-  props: $l,
-  emits: Vl,
-  setup(l, { emit: t }) {
-    const e = l, n = dt(), o = ce(), r = (n == null ? void 0 : n.name) || ve(), {
-      modifiers: s,
-      iconPosition: b,
-      icon: c,
-      label: d,
-      modelValue: u,
-      disabled: p,
-      toggle: v,
-      unselectable: h
-    } = Cl(e, t), g = Xe(Ne), y = i(() => {
+}, Es = /* @__PURE__ */ N({
+  ...jt,
+  props: Ft,
+  emits: Ut,
+  setup(o, { emit: s }) {
+    const e = o, n = useAttrs(), l = useSlots(), i = (n == null ? void 0 : n.name) || ne(), {
+      modifiers: r,
+      iconPosition: f,
+      icon: p,
+      label: u,
+      modelValue: a,
+      disabled: c,
+      toggle: d,
+      unselectable: b
+    } = Kt(e, s), g = inject(Ae), y = computed(() => {
       switch (!0) {
-        case p.value:
-          return de.button;
+        case c.value:
+          return ae.button;
         case e.to !== void 0:
-          return g != null && g.nuxt ? de.nuxtLink : de.routerLink;
+          return g != null && g.nuxt ? ae.nuxtLink : ae.routerLink;
         case e.href !== void 0:
-          return de.a;
+          return ae.a;
         default:
-          return de.button;
+          return ae.button;
       }
-    }), f = i(() => v.value ? Array.isArray(u.value) ? me(r, u.value) : he(r, u.value) : e.pressed), { bemCssClasses: V } = H("vv-button", {
-      modifiers: s,
+    }), v = computed(() => d.value ? Array.isArray(a.value) ? contains(i, a.value) : equals(i, a.value) : e.pressed), { bemCssClasses: V } = useBemModifiers("vv-button", {
+      modifiers: r,
       active: e.active,
-      pressed: f,
-      disabled: p,
-      reverse: i(
-        () => [Ve.right, Ve.bottom].includes(
-          b.value
+      pressed: v,
+      disabled: c,
+      reverse: computed(
+        () => [me.right, me.bottom].includes(
+          f.value
         )
       ),
-      column: i(
-        () => [Ve.top, Ve.bottom].includes(
-          b.value
+      column: computed(
+        () => [me.top, me.bottom].includes(
+          f.value
         )
       ),
-      iconOnly: i(
-        () => (c == null ? void 0 : c.value) && !(d != null && d.value) && !o.default
+      iconOnly: computed(
+        () => (p == null ? void 0 : p.value) && !(u != null && u.value) && !l.default
       )
-    }), P = i(
-      () => typeof (c == null ? void 0 : c.value) == "string" ? { name: c == null ? void 0 : c.value } : c == null ? void 0 : c.value
-    ), $ = i(() => {
-      const C = {
+    }), w = computed(
+      () => typeof (p == null ? void 0 : p.value) == "string" ? { name: p == null ? void 0 : p.value } : p == null ? void 0 : p.value
+    ), C = computed(() => {
+      const $ = {
         class: V.value,
-        "aria-pressed": f.value ? !0 : void 0
+        "aria-pressed": v.value ? !0 : void 0
       };
       switch (y.value) {
-        case de.a:
+        case ae.a:
           return {
-            ...C,
+            ...$,
             role: "button",
             href: e.href,
             target: e.target,
             rel: e.rel
           };
-        case de.routerLink:
-        case de.nuxtLink:
+        case ae.routerLink:
+        case ae.nuxtLink:
           return {
-            ...C,
+            ...$,
             role: "button",
             to: e.to,
             target: e.target
           };
         default:
           return {
-            ...C,
+            ...$,
             type: e.type,
-            disabled: p.value
+            disabled: c.value
           };
       }
-    }), x = () => {
-      if (v.value) {
-        if (Array.isArray(u.value)) {
-          if (me(r, u.value)) {
-            h.value && (u.value = u.value.filter(
-              (C) => C !== r
+    }), M = () => {
+      if (d.value) {
+        if (Array.isArray(a.value)) {
+          if (contains(i, a.value)) {
+            b.value && (a.value = a.value.filter(
+              ($) => $ !== i
             ));
             return;
           }
-          u.value.push(r);
+          a.value.push(i);
           return;
         }
-        if (he(r, u.value) && h.value) {
-          u.value = void 0;
+        if (equals(i, a.value) && b.value) {
+          a.value = void 0;
           return;
         }
-        u.value = r;
+        a.value = i;
       }
     };
-    return (C, M) => (m(), T(ct(a(y)), R(a($), { onClickPassive: x }), {
-      default: we(() => [
-        A(C.$slots, "default", {}, () => [
-          C.loading ? A(C.$slots, "loading", { key: 0 }, () => [
-            C.loadingIcon ? (m(), T(U, {
+    return ($, H) => (m(), D(Fe(t(y)), O(t(C), { onClickPassive: M }), {
+      default: ge(() => [
+        k($.$slots, "default", {}, () => [
+          $.loading ? k($.$slots, "loading", { key: 0 }, () => [
+            $.loadingIcon ? (m(), D(x, {
               key: 0,
               class: "vv-button__loading-icon",
-              name: C.loadingIcon
+              name: $.loadingIcon
             }, null, 8, ["name"])) : I("", !0),
-            C.loadingLabel ? (m(), _("span", Al, L(C.loadingLabel), 1)) : I("", !0)
-          ]) : (m(), _(ge, { key: 1 }, [
-            A(C.$slots, "before"),
-            a(c) ? (m(), T(U, R({
+            $.loadingLabel ? (m(), _("span", Wt, B($.loadingLabel), 1)) : I("", !0)
+          ]) : (m(), _(de, { key: 1 }, [
+            k($.$slots, "before"),
+            t(p) ? (m(), D(x, O({
               key: 0,
               class: "vv-button__icon"
-            }, a(P)), null, 16)) : I("", !0),
-            a(d) ? (m(), _("span", kl, [
-              A(C.$slots, "label", {}, () => [
-                X(L(a(d)), 1)
+            }, t(w)), null, 16)) : I("", !0),
+            t(u) ? (m(), _("span", qt, [
+              k($.$slots, "label", {}, () => [
+                q(B(t(u)), 1)
               ])
             ])) : I("", !0),
-            A(C.$slots, "after")
+            k($.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), Pl = {
-  ...pe,
-  ...ye,
-  ...Ue,
+}), zt = {
+  ...re,
+  ...ce,
+  ...Ie,
   itemModifiers: { type: [String, Array], default: void 0 },
   toggle: { type: Boolean, default: !1 },
   multiple: { type: Boolean, default: !1 },
   modelValue: { type: [String, Array], default: void 0 }
-}, Il = ["update:modelValue"], Ol = {
+}, Xt = ["update:modelValue"], Yt = {
   name: "VvButtonGroup"
-}, vo = /* @__PURE__ */ D({
-  ...Ol,
-  props: Pl,
-  emits: Il,
-  setup(l, { emit: t }) {
-    const e = l, {
+}, Rs = /* @__PURE__ */ N({
+  ...Yt,
+  props: zt,
+  emits: Xt,
+  setup(o, { emit: s }) {
+    const e = o, {
       disabled: n,
-      toggle: o,
-      modifiers: r,
-      multiple: s,
-      unselectable: b,
-      itemModifiers: c
-    } = F(e);
-    Ye(() => {
-      typeof e.modelValue == "string" && s.value && console.warn(
+      toggle: l,
+      modifiers: i,
+      multiple: r,
+      unselectable: f,
+      itemModifiers: p
+    } = toRefs(e);
+    watchEffect(() => {
+      typeof e.modelValue == "string" && r.value && console.warn(
         "[VvButtonGroup]: modelValue is a string but multiple is true."
       );
     });
-    const d = i({
-      get: () => s.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
-      set: (v) => (v !== void 0 && (Array.isArray(e.modelValue) || s.value) && !Array.isArray(v) && (v = [v]), t("update:modelValue", v))
-    });
-    He({
-      key: ft,
-      modelValue: d,
+    const u = computed({
+      get: () => r.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
+      set: (d) => (d !== void 0 && (Array.isArray(e.modelValue) || r.value) && !Array.isArray(d) && (d = [d]), s("update:modelValue", d))
+    }), a = {
+      key: We,
+      modelValue: u,
       disabled: n,
-      toggle: o,
-      multiple: s,
-      unselectable: b,
-      itemModifiers: c
-    });
-    const { bemCssClasses: p } = H("vv-button-group", {
-      modifiers: r
+      toggle: l,
+      multiple: r,
+      unselectable: f,
+      itemModifiers: p
+    };
+    useProvideGroupState(a);
+    const { bemCssClasses: c } = useBemModifiers("vv-button-group", {
+      modifiers: i
     });
-    return (v, h) => (m(), _("div", {
-      class: K(a(p)),
+    return (d, b) => (m(), _("div", {
+      class: U(t(c)),
       role: "group"
     }, [
-      A(v.$slots, "default")
+      k(d.$slots, "default")
     ], 2));
   }
-}), El = {
+}), Jt = {
   title: String,
   modifiers: [String, Array]
-}, Rl = {
+}, Qt = {
   key: 0,
   class: "vv-card__header"
-}, Ll = {
+}, Zt = {
   key: 1,
   class: "vv-card__content"
-}, Dl = {
+}, eo = {
   key: 2,
   class: "vv-card__footer"
-}, Tl = {
+}, to = {
   name: "VvCard"
-}, po = /* @__PURE__ */ D({
-  ...Tl,
-  props: El,
-  setup(l) {
-    const t = l, { bemCssClasses: e } = H("vv-card", {
-      modifiers: t.modifiers
+}, Os = /* @__PURE__ */ N({
+  ...to,
+  props: Jt,
+  setup(o) {
+    const s = o, { bemCssClasses: e } = useBemModifiers("vv-card", {
+      modifiers: s.modifiers
     });
-    return (n, o) => (m(), _("article", {
-      class: K(a(e))
+    return (n, l) => (m(), _("article", {
+      class: U(t(e))
     }, [
-      n.$slots.header || n.title ? (m(), _("header", Rl, [
-        A(n.$slots, "header", {}, () => [
-          X(L(n.title), 1)
+      n.$slots.header || n.title ? (m(), _("header", Qt, [
+        k(n.$slots, "header", {}, () => [
+          q(B(n.title), 1)
         ])
       ])) : I("", !0),
-      A(n.$slots, "default"),
-      n.$slots.content ? (m(), _("div", Ll, [
-        A(n.$slots, "content")
+      k(n.$slots, "default"),
+      n.$slots.content ? (m(), _("div", Zt, [
+        k(n.$slots, "content")
       ])) : I("", !0),
-      n.$slots.footer ? (m(), _("footer", Dl, [
-        A(n.$slots, "footer")
+      n.$slots.footer ? (m(), _("footer", eo, [
+        k(n.$slots, "footer")
       ])) : I("", !0)
     ], 2));
   }
-}), Bl = {
-  ...St,
+}), oo = {
+  ...Qe,
   indeterminate: Boolean,
   uncheckedValue: [String, Number, Boolean],
   switch: Boolean
-}, Nl = ["click", "update:modelValue", "change", "blur"];
-function xl(l, t) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: o } = xe(bt), { switch: r, indeterminate: s } = F(l), b = o("modelValue", l, t), c = o("readonly", l), d = o("disabled", l), u = o("valid", l), p = o("invalid", l);
+}, so = ["click", "update:modelValue", "change", "blur"];
+function lo(o, s) {
+  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(je), { switch: i, indeterminate: r } = toRefs(o), f = l("modelValue", o, s), p = l("readonly", o), u = l("disabled", o), a = l("valid", o), c = l("invalid", o);
   return {
-    propsSwitch: r,
-    indeterminate: s,
+    propsSwitch: i,
+    indeterminate: r,
     group: e,
     isInGroup: n,
-    modelValue: b,
-    readonly: c,
-    disabled: d,
-    valid: u,
-    invalid: p
+    modelValue: f,
+    readonly: p,
+    disabled: u,
+    valid: a,
+    invalid: c
   };
 }
-function Te(l) {
-  return Array.isArray(l) ? l.filter((t) => el(t)).join(" ") : l;
+function ke(o) {
+  return Array.isArray(o) ? o.filter((s) => isString(s)).join(" ") : o;
 }
-function _e(l, t) {
+function pe(o, s) {
   const {
     invalid: e,
     valid: n,
-    hint: o,
-    loading: r
-  } = t, {
-    hintLabel: s,
-    modelValue: b,
-    valid: c,
-    validLabel: d,
-    invalid: u,
-    invalidLabel: p,
-    ...v
-  } = F(l), h = Be(v, "loading"), g = Be(v, "loadingLabel"), y = i(() => u.value ? !!(u.value && e || p != null && p.value && Array.isArray(p.value) && p.value.length > 0 || p != null && p.value && !ee(p)) : !1), f = i(
-    () => !!(s && s.value || o)
-  ), V = i(
-    () => !!(d && d.value || n)
-  ), P = i(
-    () => !!(h != null && h.value && r || h != null && h.value && (g != null && g.value))
-  ), $ = i(
-    () => f.value || V.value || y.value || P.value
+    hint: l,
+    loading: i
+  } = s, {
+    hintLabel: r,
+    modelValue: f,
+    valid: p,
+    validLabel: u,
+    invalid: a,
+    invalidLabel: c,
+    ...d
+  } = toRefs(o), b = resolveFieldData(d, "loading"), g = resolveFieldData(d, "loadingLabel"), y = computed(() => a.value ? !!(a.value && e || c != null && c.value && Array.isArray(c.value) && c.value.length > 0 || c != null && c.value && !isEmpty(c)) : !1), v = computed(
+    () => !!(r && r.value || l)
+  ), V = computed(
+    () => !!(u && u.value || n)
+  ), w = computed(
+    () => !!(b != null && b.value && i || b != null && b.value && (g != null && g.value))
+  ), C = computed(
+    () => v.value || V.value || y.value || w.value
   );
   return {
     hasInvalid: y,
-    hasHint: f,
+    hasHint: v,
     hasValid: V,
-    hasLoading: P,
+    hasLoading: w,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -972,31 +835,31 @@ function _e(l, t) {
           default: () => ({})
         }
       },
-      setup(x) {
-        const C = i(() => {
-          const M = qt({
-            hintLabel: s,
-            modelValue: b,
-            valid: c,
-            validLabel: d,
-            invalid: u,
-            invalidLabel: p,
-            loading: h,
+      setup(M) {
+        const $ = computed(() => {
+          const H = toReactive({
+            hintLabel: r,
+            modelValue: f,
+            valid: p,
+            validLabel: u,
+            invalid: a,
+            invalidLabel: c,
+            loading: b,
             loadingLabel: g,
-            ...x.params
+            ...M.params
           });
-          return u != null && u.value ? (e == null ? void 0 : e(M)) || Te(p == null ? void 0 : p.value) || (s == null ? void 0 : s.value) : c != null && c.value ? (n == null ? void 0 : n(M)) || Te(d == null ? void 0 : d.value) || (s == null ? void 0 : s.value) : h != null && h.value ? (r == null ? void 0 : r(M)) || Te(g == null ? void 0 : g.value) || (s == null ? void 0 : s.value) : (o == null ? void 0 : o(M)) || Te(s == null ? void 0 : s.value) || (s == null ? void 0 : s.value);
+          return a != null && a.value ? (e == null ? void 0 : e(H)) || ke(c == null ? void 0 : c.value) || (r == null ? void 0 : r.value) : p != null && p.value ? (n == null ? void 0 : n(H)) || ke(u == null ? void 0 : u.value) || (r == null ? void 0 : r.value) : b != null && b.value ? (i == null ? void 0 : i(H)) || ke(g == null ? void 0 : g.value) || (r == null ? void 0 : r.value) : (l == null ? void 0 : l(H)) || ke(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
         });
         return {
-          isVisible: $,
+          isVisible: C,
           hasInvalid: y,
           hasValid: V,
-          hintContent: C
+          hintContent: $
         };
       },
       render() {
         if (this.isVisible)
-          return Q(
+          return h(
             "small",
             {
               role: this.hasInvalid || this.hasValid ? "alert" : void 0
@@ -1007,179 +870,143 @@ function _e(l, t) {
     }
   };
 }
-const Hl = ["for"], Ml = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Gl = {
+const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ro = {
   name: "VvCheckbox"
-}, Ul = /* @__PURE__ */ D({
-  ...Gl,
-  props: Bl,
-  emits: Nl,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), {
-      disabled: o,
-      readonly: r,
-      valid: s,
-      invalid: b,
-      propsSwitch: c,
-      modelValue: d,
-      indeterminate: u,
-      isInGroup: p
-    } = xl(e, t), v = i(() => String(e.id || ve())), h = i(() => f.value ? -1 : e.tabindex), g = G(), y = i(
-      () => e.uncheckedValue !== void 0 && !p.value
-    ), f = i(() => o.value || r.value), V = i(() => {
-      if (b.value === !0)
+}, io = /* @__PURE__ */ N({
+  ...ro,
+  props: oo,
+  emits: so,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), {
+      disabled: l,
+      readonly: i,
+      valid: r,
+      invalid: f,
+      propsSwitch: p,
+      modelValue: u,
+      indeterminate: a,
+      isInGroup: c
+    } = lo(e, s), d = computed(() => String(e.id || ne())), b = computed(() => v.value ? -1 : e.tabindex), g = ref(), y = computed(
+      () => e.uncheckedValue !== void 0 && !c.value
+    ), v = computed(() => l.value || i.value), V = computed(() => {
+      if (f.value === !0)
         return !0;
-      if (s.value === !0)
+      if (r.value === !0)
         return !1;
-    }), P = i(() => y.value ? d.value === e.value : Array.isArray(d.value) ? me(e.value, d.value) : he(e.value, d.value)), $ = i(() => !!(u.value || !P.value && y.value && e.uncheckedValue !== d.value)), x = i(() => {
+    }), w = computed(() => y.value ? u.value === e.value : Array.isArray(u.value) ? contains(e.value, u.value) : equals(e.value, u.value)), C = computed(() => !!(a.value || !w.value && y.value && e.uncheckedValue !== u.value)), M = computed(() => {
       if (!y.value)
         return ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0;
-    }), C = i({
+    }), $ = computed({
       get() {
-        return P.value;
+        return w.value;
       },
-      set(B) {
+      set(T) {
         if (y.value)
-          d.value = B ? e.value : e.uncheckedValue;
-        else if (Array.isArray(d.value) || p.value) {
-          const j = new Set(
-            Array.isArray(d.value) ? d.value : d.value !== void 0 ? [d.value] : []
+          u.value = T ? e.value : e.uncheckedValue;
+        else if (Array.isArray(u.value) || c.value) {
+          const G = new Set(
+            Array.isArray(u.value) ? u.value : u.value !== void 0 ? [u.value] : []
           );
-          B ? j.add(e.value) : j.delete(e.value), d.value = [...j];
+          T ? G.add(e.value) : G.delete(e.value), u.value = [...G];
         } else
-          d.value = B ? e.value : void 0;
-        t("change", B);
+          u.value = T ? e.value : void 0;
+        s("change", T);
       }
-    }), { bemCssClasses: M } = H("vv-checkbox", {
-      switch: c,
-      valid: s,
-      invalid: b,
-      disabled: o,
-      readonly: r,
-      indeterminate: u
+    }), { bemCssClasses: H } = useBemModifiers("vv-checkbox", {
+      switch: p,
+      valid: r,
+      invalid: f,
+      disabled: l,
+      readonly: i,
+      indeterminate: a
     });
-    Ye(() => {
-      y.value && Array.isArray(d.value) && console.warn(
+    watchEffect(() => {
+      y.value && Array.isArray(u.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
-    }), Ae(
-      () => $.value,
-      (B) => {
-        B ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
+    }), watch(
+      () => C.value,
+      (T) => {
+        T ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
       }
-    ), Ht(() => {
-      $.value && (g.value.indeterminate = !0);
+    ), onMounted(() => {
+      C.value && (g.value.indeterminate = !0);
     });
-    const { HintSlot: J } = _e(e, n);
-    return (B, j) => (m(), _("label", {
-      class: K(a(M)),
-      for: a(v)
+    const { HintSlot: X } = pe(e, n);
+    return (T, G) => (m(), _("label", {
+      class: U(t(H)),
+      for: t(d)
     }, [
-      Se(E("input", {
-        id: a(v),
+      ve(R("input", {
+        id: t(d),
         ref_key: "input",
         ref: g,
-        "onUpdate:modelValue": j[0] || (j[0] = (le) => $e(C) ? C.value = le : null),
+        "onUpdate:modelValue": G[0] || (G[0] = (J) => be($) ? $.value = J : null),
         type: "checkbox",
         class: "vv-checkbox__input",
-        name: B.name,
-        disabled: a(f),
-        value: a(x),
-        tabindex: a(h),
-        "aria-invalid": a(V)
-      }, null, 8, Ml), [
-        [Mt, a(C)]
+        name: T.name,
+        disabled: t(v),
+        value: t(M),
+        tabindex: t(b),
+        "aria-invalid": t(V)
+      }, null, 8, no), [
+        [pt, t($)]
       ]),
-      A(B.$slots, "default", { value: a(d) }, () => [
-        X(L(B.label), 1)
+      k(T.$slots, "default", { value: t(u) }, () => [
+        q(B(T.label), 1)
       ]),
-      oe(a(J), {
+      Z(t(X), {
         class: "vv-checkbox__hint",
-        params: { value: a(d) }
+        params: { value: t(u) }
       }, null, 8, ["params"])
-    ], 10, Hl));
+    ], 10, ao));
   }
-});
-function Le(l) {
-  const { options: t, labelKey: e, valueKey: n } = F(l);
-  return {
-    options: t,
-    getOptionLabel: (s) => typeof s != "object" && s !== null ? s : typeof e.value == "function" ? e.value(s) : s[e.value],
-    getOptionValue: (s) => typeof s != "object" && s !== null ? s : typeof n.value == "function" ? n.value(s) : s[n.value]
-  };
-}
-const jl = Vt, Kl = ["update:modelValue", "change"], Fl = ["textContent"], Wl = { class: "vv-checkbox-group__wrapper" }, zl = {
+}), uo = Ze, co = ["update:modelValue", "change"], po = ["textContent"], vo = { class: "vv-checkbox-group__wrapper" }, mo = {
   name: "VvCheckboxGroup"
-}, fo = /* @__PURE__ */ D({
-  ...zl,
-  props: jl,
-  emits: Kl,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), o = Je(e, "modelValue", t), { disabled: r, readonly: s, vertical: b, valid: c, invalid: d } = F(e);
-    He({
-      key: bt,
-      modelValue: o,
-      disabled: r,
-      readonly: s,
-      valid: c,
-      invalid: d
-    });
-    const { getOptionLabel: p, getOptionValue: v } = Le(e), { bemCssClasses: h } = H("vv-checkbox-group", {
-      disabled: r,
-      readonly: s,
-      horizontal: i(() => !b.value),
-      valid: c,
-      invalid: d
-    }), g = (f, V) => ({
+}, Bs = /* @__PURE__ */ N({
+  ...mo,
+  props: uo,
+  emits: co,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), l = useVModel(e, "modelValue", s), { disabled: i, readonly: r, vertical: f, valid: p, invalid: u } = toRefs(e), a = {
+      key: je,
+      modelValue: l,
+      disabled: i,
+      readonly: r,
+      valid: p,
+      invalid: u
+    };
+    useProvideGroupState(a);
+    const { getOptionLabel: c, getOptionValue: d } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-checkbox-group", {
+      disabled: i,
+      readonly: r,
+      horizontal: computed(() => !f.value),
+      valid: p,
+      invalid: u
+    }), g = (v, V) => ({
       id: `${e.name}_opt${V}`,
       name: e.name,
-      label: p(f),
-      value: v(f)
-    }), { HintSlot: y } = _e(e, n);
-    return (f, V) => (m(), _("fieldset", {
-      class: K(a(h))
+      label: c(v),
+      value: d(v)
+    }), { HintSlot: y } = pe(e, n);
+    return (v, V) => (m(), _("fieldset", {
+      class: U(t(b))
     }, [
-      f.label ? (m(), _("legend", {
+      v.label ? (m(), _("legend", {
         key: 0,
-        textContent: L(f.label)
-      }, null, 8, Fl)) : I("", !0),
-      E("div", Wl, [
-        f.options.length > 0 ? (m(!0), _(ge, { key: 0 }, Ce(f.options, (P, $) => (m(), T(Ul, R({ key: $ }, g(P, $)), null, 16))), 128)) : A(f.$slots, "default", { key: 1 })
+        textContent: B(v.label)
+      }, null, 8, po)) : I("", !0),
+      R("div", vo, [
+        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, C) => (m(), D(io, O({ key: C }, g(w, C)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
       ]),
-      oe(a(y), { class: "vv-checkbox-group__hint" })
+      Z(t(y), { class: "vv-checkbox-group__hint" })
     ], 2));
   }
-});
-function je(l, t, e) {
-  const n = i(
-    () => !!(l != null && l.value && t.value === "left" || e != null && e.iconLeft)
-  ), o = i(
-    () => !!(l != null && l.value && t.value === "right" || e != null && e.iconRight)
-  ), r = i(
-    () => !!(l != null && l.value && t.value === "top" || e != null && e.iconTop)
-  ), s = i(
-    () => !!(l != null && l.value && t.value === "bottom" || e != null && e.iconBottom)
-  );
-  return {
-    hasIcon: i(() => typeof (l == null ? void 0 : l.value) == "string" ? { name: l == null ? void 0 : l.value } : l == null ? void 0 : l.value),
-    hasIconLeft: n,
-    hasIconRight: o,
-    hasIconTop: r,
-    hasIconBottom: s
-  };
-}
-function Ke(l, t) {
-  const { focused: e } = Xt(l);
-  return Ae(e, (n) => {
-    t(n ? "focus" : "blur", a(l));
-  }), {
-    focused: e
-  };
-}
-const ql = {
-  ...Re,
-  ...Me,
-  ...ye,
-  ...pe,
+}), fo = {
+  ...Ce,
+  ...Pe,
+  ...ce,
+  ...re,
   modelValue: {
     type: [String, Number, Boolean, Object, Array]
   },
@@ -1187,93 +1014,93 @@ const ql = {
   multiple: Boolean,
   maxValues: [Number, String],
   unselectable: { type: Boolean, default: !0 }
-}, Xl = ["id"], Zl = {
+}, bo = ["id"], ho = {
   key: 0,
   role: "option"
-}, Yl = ["aria-selected"], Jl = ["for", "onClick"], Ql = ["id", "type", "value", "checked", "disabled", "name"], ea = {
+}, go = ["aria-selected"], yo = ["for", "onClick"], _o = ["id", "type", "value", "checked", "disabled", "name"], So = {
   name: "VvDropdown"
-}, ta = /* @__PURE__ */ D({
-  ...ea,
-  props: ql,
+}, Vo = /* @__PURE__ */ N({
+  ...So,
+  props: fo,
   emits: ["update:modelValue"],
-  setup(l, { emit: t }) {
-    const e = l, n = i(() => String(e.id || ve())), { modifiers: o, disabled: r } = F(e), { getOptionLabel: s, getOptionValue: b } = Le(e), { bemCssClasses: c } = H("vv-dropdown", {
-      modifiers: o,
-      disabled: r
+  setup(o, { emit: s }) {
+    const e = o, n = computed(() => String(e.id || ne())), { modifiers: l, disabled: i } = toRefs(e), { getOptionLabel: r, getOptionValue: f } = useOptions(e), { bemCssClasses: p } = useBemModifiers("vv-dropdown", {
+      modifiers: l,
+      disabled: i
     });
-    function d(v) {
-      return Array.isArray(e.modelValue) ? me(v, e.modelValue) || me(b(v), e.modelValue) : he(v, e.modelValue) || he(b(v), e.modelValue);
+    function u(d) {
+      return Array.isArray(e.modelValue) ? contains(d, e.modelValue) || contains(f(d), e.modelValue) : equals(d, e.modelValue) || equals(f(d), e.modelValue);
     }
-    function u(v) {
-      return typeof v == "string" || v.disabled === void 0 ? r.value : v.disabled;
+    function a(d) {
+      return typeof d == "string" || d.disabled === void 0 ? i.value : d.disabled;
     }
-    function p(v) {
+    function c(d) {
       var g;
       if (e.disabled)
         return;
-      let h = v;
+      let b = d;
       if (e.multiple)
         if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((g = e.modelValue) == null ? void 0 : g.length) >= e.maxValues && !me(v, e.modelValue))
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((g = e.modelValue) == null ? void 0 : g.length) >= e.maxValues && !contains(d, e.modelValue))
             return;
-          h = me(v, e.modelValue) ? Qt(v, e.modelValue) : [...e.modelValue, v];
+          b = contains(d, e.modelValue) ? removeFromList(d, e.modelValue) : [...e.modelValue, d];
         } else
-          h = [v];
+          b = [d];
       else
-        e.unselectable && v === e.modelValue && (h = void 0);
-      t("update:modelValue", h);
+        e.unselectable && d === e.modelValue && (b = void 0);
+      s("update:modelValue", b);
     }
-    return (v, h) => {
+    return (d, b) => {
       var g;
       return m(), _("ul", {
-        id: a(n),
-        class: K(a(c)),
+        id: t(n),
+        class: U(t(p)),
         role: "listbox"
       }, [
-        (g = v.options) != null && g.length ? I("", !0) : (m(), _("li", Zl, [
-          E("label", null, L(v.labelNoResults), 1)
+        (g = d.options) != null && g.length ? I("", !0) : (m(), _("li", ho, [
+          R("label", null, B(d.labelNoResults), 1)
         ])),
-        (m(!0), _(ge, null, Ce(v.options, (y, f) => (m(), _("li", {
-          key: f,
+        (m(!0), _(de, null, fe(d.options, (y, v) => (m(), _("li", {
+          key: v,
           role: "option",
-          "aria-selected": d(y)
+          "aria-selected": u(y)
         }, [
-          E("label", {
-            for: `dropdown-${f}-${a(n)}`,
-            onClick: Ze((V) => p(a(b)(y)), ["prevent"])
+          R("label", {
+            for: `dropdown-${v}-${t(n)}`,
+            onClick: Be((V) => c(t(f)(y)), ["prevent"])
           }, [
-            E("input", {
-              id: `dropdown-${f}-${a(n)}`,
-              type: v.multiple ? "checkbox" : "radio",
-              value: a(b)(y),
-              checked: d(y),
-              disabled: u(y),
-              name: v.name,
+            R("input", {
+              id: `dropdown-${v}-${t(n)}`,
+              type: d.multiple ? "checkbox" : "radio",
+              value: t(f)(y),
+              checked: u(y),
+              disabled: a(y),
+              name: d.name,
               tabindex: "-1",
               "aria-hidden": "true"
-            }, null, 8, Ql),
-            X(" " + L(a(s)(y)), 1)
-          ], 8, Jl)
-        ], 8, Yl))), 128))
-      ], 10, Xl);
+            }, null, 8, _o),
+            q(" " + B(t(r)(y)), 1)
+          ], 8, yo)
+        ], 8, go))), 128))
+      ], 10, bo);
     };
   }
-}), la = {
-  ...Re,
-  ...gt,
-  ...yt,
-  ...Ge,
+}), Co = {
+  ...Ce,
+  ...Xe,
+  ...Ye,
+  ...we,
+  ...ye,
+  ..._e,
+  ...Ve,
+  ...De,
+  ...ce,
+  ...Se,
+  ...re,
   ...Pe,
+  ...Te,
+  ...Le,
   ...Ie,
-  ...Ee,
-  ...et,
-  ...ye,
-  ...Oe,
-  ...pe,
-  ...Me,
-  ...tt,
-  ...lt,
-  ...Ue,
   multiple: Boolean,
   required: Boolean,
   size: [String, Number],
@@ -1283,130 +1110,130 @@ const ql = {
   },
   label: String,
   placeholder: String
-}, aa = ["update:modelValue", "focus", "blur"], oa = ["for"], na = { class: "vv-select__wrapper" }, sa = ["id"], ra = ["disabled", "hidden"], ia = ["disabled", "value"], ua = {
+}, $o = ["update:modelValue", "focus", "blur"], ko = ["for"], Ao = { class: "vv-select__wrapper" }, Po = ["id"], wo = ["disabled", "hidden"], Io = ["disabled", "value"], Eo = {
   name: "VvSelect"
-}, da = /* @__PURE__ */ D({
-  ...ua,
-  props: la,
-  emits: aa,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), o = G(), { HintSlot: r, hasHint: s, hasInvalid: b } = _e(e, n), {
-      modifiers: c,
-      disabled: d,
-      readonly: u,
-      loading: p,
-      icon: v,
-      iconPosition: h,
+}, Ro = /* @__PURE__ */ N({
+  ...Eo,
+  props: Co,
+  emits: $o,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), l = ref(), { HintSlot: i, hasHint: r, hasInvalid: f } = pe(e, n), {
+      modifiers: p,
+      disabled: u,
+      readonly: a,
+      loading: c,
+      icon: d,
+      iconPosition: b,
       invalid: g,
       valid: y,
-      floating: f,
+      floating: v,
       multiple: V
-    } = F(e), P = i(() => String(e.id || ve())), $ = i(() => `${P.value}-hint`), { focused: x } = Ke(o, t), C = Qe(o);
-    Ae(C, (w) => {
-      w && e.autofocus && (x.value = !0);
+    } = toRefs(e), w = computed(() => String(e.id || ne())), C = computed(() => `${w.value}-hint`), { focused: M } = useComponentFocus(l, s), $ = useElementVisibility(l);
+    watch($, (P) => {
+      P && e.autofocus && (M.value = !0);
     });
-    const { hasIcon: M, hasIconLeft: J, hasIconRight: B } = je(
-      v,
-      h
-    ), j = i(() => !ee(e.modelValue)), le = i(() => e.disabled || e.readonly), ne = i(() => le.value ? -1 : e.tabindex), se = i(() => {
+    const { hasIcon: H, hasIconLeft: X, hasIconRight: T } = useComponentIcon(
+      d,
+      b
+    ), G = computed(() => !isEmpty(e.modelValue)), J = computed(() => e.disabled || e.readonly), ee = computed(() => J.value ? -1 : e.tabindex), te = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { bemCssClasses: ae } = H("vv-select", {
-      modifiers: c,
+    }), { bemCssClasses: Q } = useBemModifiers("vv-select", {
+      modifiers: p,
       valid: y,
       invalid: g,
-      loading: p,
-      disabled: d,
-      readonly: u,
-      iconLeft: J,
-      iconRight: B,
-      dirty: j,
-      focus: x,
-      floating: f,
+      loading: c,
+      disabled: u,
+      readonly: a,
+      iconLeft: X,
+      iconRight: T,
+      dirty: G,
+      focus: M,
+      floating: v,
       multiple: V
-    }), fe = i(() => ({
+    }), ie = computed(() => ({
       name: e.name,
-      tabindex: ne.value,
-      disabled: le.value,
+      tabindex: ee.value,
+      disabled: J.value,
       required: e.required,
       size: e.size,
       autocomplete: e.autocomplete,
       multiple: e.multiple,
-      "aria-invalid": se.value,
-      "aria-describedby": !b.value && s.value ? $.value : void 0,
-      "aria-errormessage": b.value ? $.value : void 0
-    })), { getOptionLabel: re, getOptionValue: ie } = Le(e);
-    function ue(w) {
-      return typeof w == "string" || w.disabled === void 0 ? d.value : w.disabled;
+      "aria-invalid": te.value,
+      "aria-describedby": !f.value && r.value ? C.value : void 0,
+      "aria-errormessage": f.value ? C.value : void 0
+    })), { getOptionLabel: oe, getOptionValue: se } = useOptions(e);
+    function le(P) {
+      return typeof P == "string" || P.disabled === void 0 ? u.value : P.disabled;
     }
-    const q = i({
+    const W = computed({
       get: () => e.modelValue,
-      set: (w) => {
-        Array.isArray(w) && (w = w.filter((Z) => Z !== void 0)), t("update:modelValue", w);
+      set: (P) => {
+        Array.isArray(P) && (P = P.filter((j) => j !== void 0)), s("update:modelValue", P);
       }
     });
-    return (w, Z) => (m(), _("div", {
-      class: K(a(ae))
+    return (P, j) => (m(), _("div", {
+      class: U(t(Q))
     }, [
-      w.label ? (m(), _("label", {
+      P.label ? (m(), _("label", {
         key: 0,
-        for: a(P)
-      }, L(w.label), 9, oa)) : I("", !0),
-      E("div", na, [
-        A(w.$slots, "before", {}, () => [
-          a(J) ? (m(), T(U, W(R({ key: 0 }, a(M))), null, 16)) : I("", !0)
+        for: t(w)
+      }, B(P.label), 9, ko)) : I("", !0),
+      R("div", Ao, [
+        k(P.$slots, "before", {}, () => [
+          t(X) ? (m(), D(x, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
         ]),
-        Se(E("select", R({
-          id: a(P),
+        ve(R("select", O({
+          id: t(w),
           ref_key: "select",
-          ref: o,
-          "onUpdate:modelValue": Z[0] || (Z[0] = (k) => $e(q) ? q.value = k : null)
-        }, a(fe)), [
-          w.placeholder ? (m(), _("option", {
+          ref: l,
+          "onUpdate:modelValue": j[0] || (j[0] = (A) => be(W) ? W.value = A : null)
+        }, t(ie)), [
+          P.placeholder ? (m(), _("option", {
             key: 0,
             value: void 0,
-            disabled: !w.unselectable,
-            hidden: !w.unselectable
-          }, L(w.placeholder), 9, ra)) : I("", !0),
-          (m(!0), _(ge, null, Ce(w.options, (k, N) => (m(), _("option", {
-            key: N,
-            disabled: ue(k),
-            value: a(ie)(k)
-          }, L(a(re)(k)), 9, ia))), 128))
-        ], 16, sa), [
-          [Gt, a(q)]
+            disabled: !P.unselectable,
+            hidden: !P.unselectable
+          }, B(P.placeholder), 9, wo)) : I("", !0),
+          (m(!0), _(de, null, fe(P.options, (A, L) => (m(), _("option", {
+            key: L,
+            disabled: le(A),
+            value: t(se)(A)
+          }, B(t(oe)(A)), 9, Io))), 128))
+        ], 16, Po), [
+          [vt, t(W)]
         ]),
-        A(w.$slots, "after", {}, () => [
-          a(B) ? (m(), T(U, W(R({ key: 0 }, a(M))), null, 16)) : I("", !0)
+        k(P.$slots, "after", {}, () => [
+          t(T) ? (m(), D(x, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
         ])
       ]),
-      oe(a(r), {
-        id: a($),
+      Z(t(i), {
+        id: t(C),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), ca = [
+}), Oo = [
   "update:modelValue",
   "change:search",
   "focus",
   "blur"
-], va = {
-  ...Re,
-  ...Ge,
+], Bo = {
+  ...Ce,
+  ...we,
+  ...ye,
+  ..._e,
+  ...Ve,
+  ...De,
+  ...ce,
+  ...Se,
+  ...re,
   ...Pe,
+  ...Te,
+  ...Le,
   ...Ie,
-  ...Ee,
-  ...et,
-  ...ye,
-  ...Oe,
-  ...pe,
-  ...Me,
-  ...tt,
-  ...lt,
-  ...Ue,
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
@@ -1424,70 +1251,70 @@ const ql = {
   maxValues: [Number, String],
   separator: { type: String, default: ", " },
   native: Boolean
-}, pa = ["id"], fa = ["id", "for"], ma = ["tabindex"], ba = ["id", "placeholder"], ha = {
+}, Do = ["id"], To = ["id", "for"], Lo = ["tabindex"], Mo = ["id", "placeholder"], No = {
   name: "VvCombobox"
-}, mo = /* @__PURE__ */ D({
-  ...ha,
-  props: va,
-  emits: ca,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), { HintSlot: o } = _e(e, n), r = G(), s = G(), { focused: b } = Ke(r, t), c = i(() => String(e.id || ve())), d = G(""), u = Zt(
-      d,
+}, Ds = /* @__PURE__ */ N({
+  ...No,
+  props: Bo,
+  emits: Oo,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), { HintSlot: l } = pe(e, n), i = ref(), r = ref(), { focused: f } = useComponentFocus(i, s), p = computed(() => String(e.id || ne())), u = ref(""), a = refDebounced(
+      u,
       Number(e.debounceSearch)
-    ), p = G(!1), {
-      icon: v,
-      iconPosition: h,
+    ), c = ref(!1), {
+      icon: d,
+      iconPosition: b,
       modifiers: g,
       disabled: y,
-      readonly: f,
+      readonly: v,
       loading: V,
-      valid: P,
-      invalid: $,
-      floating: x
-    } = F(e);
-    Ae(
-      u,
-      () => t("change:search", u.value)
+      valid: w,
+      invalid: C,
+      floating: M
+    } = toRefs(e);
+    watch(
+      a,
+      () => s("change:search", a.value)
     );
-    const { hasIcon: C, hasIconLeft: M, hasIconRight: J } = je(
-      v,
-      h
-    ), B = i(() => !ee(e.modelValue)), j = i(() => y.value || f.value ? -1 : e.tabindex), { bemCssClasses: le } = H("vv-select", {
+    const { hasIcon: $, hasIconLeft: H, hasIconRight: X } = useComponentIcon(
+      d,
+      b
+    ), T = computed(() => !isEmpty(e.modelValue)), G = computed(() => y.value || v.value ? -1 : e.tabindex), { bemCssClasses: J } = useBemModifiers("vv-select", {
       modifiers: g,
       disabled: y,
       loading: V,
-      readonly: f,
-      iconLeft: M,
-      iconRight: J,
-      valid: P,
-      invalid: $,
-      dirty: B,
-      focus: b,
-      floating: x
-    }), ne = i(
-      () => e.searchable ? fe.value : e.options
-    ), { getOptionLabel: se, getOptionValue: ae } = Le(e), fe = i(() => {
-      var k;
-      return (k = e.options) == null ? void 0 : k.filter((N) => se(N).toLowerCase().includes(u.value.toLowerCase().trim()));
-    }), re = i(() => {
-      let k = [];
-      return Array.isArray(e.modelValue) ? k = e.modelValue : e.modelValue && (k = [e.modelValue]), e.options.filter(
-        (N) => k.includes(ae(N))
+      readonly: v,
+      iconLeft: H,
+      iconRight: X,
+      valid: w,
+      invalid: C,
+      dirty: T,
+      focus: f,
+      floating: M
+    }), ee = computed(
+      () => e.searchable ? ie.value : e.options
+    ), { getOptionLabel: te, getOptionValue: Q } = useOptions(e), ie = computed(() => {
+      var A;
+      return (A = e.options) == null ? void 0 : A.filter((L) => te(L).toLowerCase().includes(a.value.toLowerCase().trim()));
+    }), oe = computed(() => {
+      let A = [];
+      return Array.isArray(e.modelValue) ? A = e.modelValue : e.modelValue && (A = [e.modelValue]), e.options.filter(
+        (L) => A.includes(Q(L))
       );
-    }), ie = i(() => re.value.map((k) => se(k)).join(e.separator));
-    pt(r, () => {
-      r.value.open = !1;
+    }), se = computed(() => oe.value.map((A) => te(A)).join(e.separator));
+    onClickOutside(i, () => {
+      i.value.open = !1;
     });
-    function ue(k) {
-      const N = k.target;
-      p.value = N.open;
+    function le(A) {
+      const L = A.target;
+      c.value = L.open;
     }
-    function q(k) {
-      r.value && !e.multiple && (r.value.open = !1), t("update:modelValue", k);
+    function W(A) {
+      i.value && !e.multiple && (i.value.open = !1), s("update:modelValue", A);
     }
-    const w = i(() => ({
+    const P = computed(() => ({
       name: e.name,
-      options: ne.value,
+      options: ee.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       disabled: e.disabled,
@@ -1496,21 +1323,21 @@ const ql = {
       maxValues: e.maxValues,
       modelValue: e.modelValue,
       unselectable: e.unselectable
-    })), Z = i(() => ({
-      id: c.value,
+    })), j = computed(() => ({
+      id: p.value,
       name: e.name,
-      tabindex: j.value,
-      valid: P.value,
+      tabindex: G.value,
+      valid: w.value,
       validLabel: e.validLabel,
-      invalid: $.value,
+      invalid: C.value,
       invalidLabel: e.invalidLabel,
       hintLabel: e.hintLabel,
       loading: V.value,
       loadingLabel: e.loadingLabel,
       disabled: y.value,
-      readonly: f.value,
+      readonly: v.value,
       modifiers: e.modifiers,
-      options: ne.value,
+      options: ee.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -1522,161 +1349,141 @@ const ql = {
       placeholder: e.placeholder,
       modelValue: e.modelValue
     }));
-    return (k, N) => k.native ? (m(), T(da, R({ key: 1 }, a(Z), {
-      "onUpdate:modelValue": N[4] || (N[4] = (Y) => t("update:modelValue", Y))
+    return (A, L) => A.native ? (m(), D(Ro, O({ key: 1 }, t(j), {
+      "onUpdate:modelValue": L[4] || (L[4] = (z) => s("update:modelValue", z))
     }), null, 16)) : (m(), _("div", {
       key: 0,
-      id: a(c),
-      class: K(a(le))
+      id: t(p),
+      class: U(t(J))
     }, [
-      k.label ? (m(), _("label", {
+      A.label ? (m(), _("label", {
         key: 0,
-        id: `${a(c)}-label`,
-        for: k.searchable && p.value ? `${a(c)}-input` : void 0
-      }, L(k.label), 9, fa)) : I("", !0),
-      E("details", {
+        id: `${t(p)}-label`,
+        for: A.searchable && t(c) ? `${t(p)}-input` : void 0
+      }, B(A.label), 9, To)) : I("", !0),
+      R("details", {
         ref_key: "dropdown",
-        ref: r,
+        ref: i,
         class: "vv-select__wrapper",
-        onClick: N[2] || (N[2] = (Y) => a(y) || a(f) ? Y.preventDefault() : null),
-        onKeyup: N[3] || (N[3] = ot((Y) => r.value.open = !1, ["esc"])),
-        onToggle: ue
+        onClick: L[2] || (L[2] = (z) => t(y) || t(v) ? z.preventDefault() : null),
+        onKeyup: L[3] || (L[3] = Ne((z) => t(i).open = !1, ["esc"])),
+        onToggle: le
       }, [
-        E("summary", {
+        R("summary", {
           class: "vv-select__input",
-          tabindex: a(j),
-          onKeyup: N[1] || (N[1] = ot((Y) => k.searchable ? Y.preventDefault() : null, ["space"]))
+          tabindex: t(G),
+          onKeyup: L[1] || (L[1] = Ne((z) => A.searchable ? z.preventDefault() : null, ["space"]))
         }, [
-          A(k.$slots, "before", {}, () => [
-            a(M) ? (m(), T(U, R({
+          k(A.$slots, "before", {}, () => [
+            t(H) ? (m(), D(x, O({
               key: 0,
               class: "vv-select__icon-left"
-            }, a(C)), null, 16)) : I("", !0)
+            }, t($)), null, 16)) : I("", !0)
           ]),
-          k.searchable && p.value ? Se((m(), _("input", {
+          A.searchable && t(c) ? ve((m(), _("input", {
             key: 0,
-            id: `${a(c)}-input`,
+            id: `${t(p)}-input`,
             ref_key: "inputSearch",
-            ref: s,
-            "onUpdate:modelValue": N[0] || (N[0] = (Y) => d.value = Y),
+            ref: r,
+            "onUpdate:modelValue": L[0] || (L[0] = (z) => be(u) ? u.value = z : null),
             role: "combobox",
             type: "search",
-            placeholder: k.searchPlaceholder
-          }, null, 8, ba)), [
-            [vt, d.value]
-          ]) : (m(), _(ge, { key: 1 }, [
-            X(L(a(ie) || k.placeholder), 1)
+            placeholder: A.searchPlaceholder
+          }, null, 8, Mo)), [
+            [Ke, t(u)]
+          ]) : (m(), _(de, { key: 1 }, [
+            q(B(t(se) || A.placeholder), 1)
           ], 64)),
-          A(k.$slots, "after", {}, () => [
-            a(J) ? (m(), T(U, R({
+          k(A.$slots, "after", {}, () => [
+            t(X) ? (m(), D(x, O({
               key: 0,
               class: "vv-select__icon-right"
-            }, a(C)), null, 16)) : I("", !0)
+            }, t($)), null, 16)) : I("", !0)
           ])
-        ], 40, ma),
-        oe(ta, R({
-          id: `${a(c)}-dropdown`
-        }, a(w), { "onUpdate:modelValue": q }), null, 16, ["id"])
+        ], 40, Lo),
+        Z(Vo, O({
+          id: `${t(p)}-dropdown`
+        }, t(P), { "onUpdate:modelValue": W }), null, 16, ["id"])
       ], 544),
-      oe(a(o), { class: "vv-select__hint" })
-    ], 10, pa));
+      Z(t(l), { class: "vv-select__hint" })
+    ], 10, Do));
   }
-}), ga = ["open", "close", "update:modelValue"], ya = {
+}), Ho = ["open", "close", "update:modelValue"], xo = {
   id: { type: String, required: !0 },
   title: String,
   modelValue: Boolean,
   transition: { type: String, default: "fade-block" },
   size: String,
   autoClose: { type: Boolean, default: !0 }
-}, _a = {
+}, Go = {
   key: 0,
   class: "vv-dialog__header"
-}, Sa = ["onClick"], Va = { class: "vv-dialog__content" }, $a = {
+}, Uo = ["onClick"], Fo = { class: "vv-dialog__content" }, Ko = {
   key: 1,
   class: "vv-dialog__footer"
-}, Ca = {
+}, Wo = {
   name: "VvDialog"
-}, bo = /* @__PURE__ */ D({
-  ...Ca,
-  props: ya,
-  emits: ga,
-  setup(l, { emit: t }) {
-    const e = l, n = Je(e, "modelValue", t), o = G(!0), r = G(null), s = i(() => {
-      const { id: p } = e;
+}, Ts = /* @__PURE__ */ N({
+  ...Wo,
+  props: xo,
+  emits: Ho,
+  setup(o, { emit: s }) {
+    const e = o, n = useVModel(e, "modelValue", s), l = ref(!0), i = ref(null), r = computed(() => {
+      const { id: c } = e;
       return {
-        id: p,
-        open: o.value
+        id: c,
+        open: l.value
       };
-    }), b = i(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), c = i(() => `vv-dialog--${e.transition}`), d = {
+    }), f = computed(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), p = computed(() => `vv-dialog--${e.transition}`), u = {
       "before-enter": () => {
-        o.value = !0, t("open");
+        l.value = !0, s("open");
       },
       "after-leave": () => {
-        o.value = !1, t("close");
+        l.value = !1, s("close");
       }
     };
-    pt(r, () => {
+    onClickOutside(i, () => {
       e.autoClose && (n.value = !1);
     });
-    function u() {
+    function a() {
       n.value = !1;
     }
-    return (p, v) => (m(), T(Ut, R({ name: a(c) }, jt(d)), {
-      default: we(() => [
-        Se(E("dialog", R(a(s), { class: a(b) }), [
-          E("article", {
+    return (c, d) => (m(), D(mt, O({ name: t(p) }, ft(u)), {
+      default: ge(() => [
+        ve(R("dialog", O(t(r), { class: t(f) }), [
+          R("article", {
             ref_key: "modalWrapper",
-            ref: r,
+            ref: i,
             class: "vv-dialog__wrapper"
           }, [
-            p.$slots.header || p.title ? (m(), _("header", _a, [
-              A(p.$slots, "header", {}, () => [
-                X(L(p.title) + " ", 1),
-                E("button", {
+            c.$slots.header || c.title ? (m(), _("header", Go, [
+              k(c.$slots, "header", {}, () => [
+                q(B(c.title) + " ", 1),
+                R("button", {
                   type: "button",
                   "aria-label": "Close",
                   class: "vv-dialog__close",
-                  onClick: Ze(u, ["prevent"])
+                  onClick: Be(a, ["prevent"])
                 }, [
-                  oe(U, { name: "close" })
-                ], 8, Sa)
+                  Z(x, { name: "close" })
+                ], 8, Uo)
               ])
             ])) : I("", !0),
-            E("div", Va, [
-              A(p.$slots, "default")
+            R("div", Fo, [
+              k(c.$slots, "default")
             ]),
-            p.$slots.footer ? (m(), _("footer", $a, [
-              A(p.$slots, "footer")
+            c.$slots.footer ? (m(), _("footer", Ko, [
+              k(c.$slots, "footer")
             ])) : I("", !0)
           ], 512)
         ], 16), [
-          [Kt, a(n)]
+          [bt, t(n)]
         ])
       ]),
       _: 3
     }, 16, ["name"]));
   }
-});
-function At(l, t, e = 0) {
-  let n;
-  return typeof e == "string" && (e = parseInt(e)), i({
-    get: () => l == null ? void 0 : l.value,
-    set: (o) => {
-      n && clearTimeout(n), n = setTimeout(() => {
-        t("update:modelValue", o);
-      }, e);
-    }
-  });
-}
-function kt(l, t) {
-  const e = i(() => (a(l) ?? "").length), n = i(() => (t == null ? void 0 : t.lowerLimit) !== void 0 && e.value < (t == null ? void 0 : t.lowerLimit) ? e.value - t.lowerLimit : (t == null ? void 0 : t.upperLimit) !== void 0 && e.value < (t == null ? void 0 : t.upperLimit) ? t.upperLimit - e.value : 0), o = i(() => (t == null ? void 0 : t.mode) === !1 ? "" : (t == null ? void 0 : t.mode) === "limit" && (t != null && t.upperLimit) ? `${e.value} / ${t.lowerLimit ? `${t.lowerLimit}-` : ""}${t.upperLimit}` : (t == null ? void 0 : t.mode) === "countdown" ? n.value === 0 ? void 0 : n : e.value);
-  return {
-    length: e,
-    gap: n,
-    formatted: o
-  };
-}
-const S = {
+}), S = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -1690,20 +1497,20 @@ const S = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, be = {
+}, ue = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, Aa = ["update:modelValue", "focus", "blur", "keyup"], ka = {
-  ..._t,
+}, qo = ["update:modelValue", "focus", "blur", "keyup"], jo = {
+  ...Je,
   modelValue: [String, Number],
   type: {
     type: String,
     default: S.TEXT,
-    validator: (l) => Object.values(S).includes(l)
+    validator: (o) => Object.values(S).includes(o)
   },
   min: [Number, Date, String],
   max: [Number, Date, String],
@@ -1712,15 +1519,15 @@ const S = {
   multiple: Boolean,
   iconShowPassword: {
     type: String,
-    default: be.PASSWORD_SHOW
+    default: ue.PASSWORD_SHOW
   },
   iconHidePassword: {
     type: String,
-    default: be.PASSWORD_HIDE
+    default: ue.PASSWORD_HIDE
   },
   iconClear: {
     type: String,
-    default: be.SEARCH
+    default: ue.SEARCH
   },
   labelStepUp: {
     type: String,
@@ -1742,9 +1549,9 @@ const S = {
     type: String,
     default: "Clear"
   }
-}, rt = D({
+}, xe = defineComponent({
   components: {
-    VvIcon: U
+    VvIcon: x
   },
   props: {
     disabled: {
@@ -1761,33 +1568,33 @@ const S = {
     },
     iconShow: {
       type: String,
-      default: be.PASSWORD_SHOW
+      default: ue.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: be.PASSWORD_HIDE
+      default: ue.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(l, { emit: t }) {
-    const e = G(!1), n = i(
-      () => e.value ? l.iconHide : l.iconShow
+  setup(o, { emit: s }) {
+    const e = ref(!1), n = computed(
+      () => e.value ? o.iconHide : o.iconShow
     );
-    function o(r) {
-      r == null || r.stopPropagation(), l.disabled || (e.value = !e.value, t("toggle-password", e.value));
+    function l(i) {
+      i == null || i.stopPropagation(), o.disabled || (e.value = !e.value, s("toggle-password", e.value));
     }
     return {
       active: e,
       activeIcon: n,
-      onClick: o
+      onClick: l
     };
   },
   render() {
-    const l = Q(U, {
+    const o = h(x, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
-    return Q(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -1796,12 +1603,12 @@ const S = {
         type: "button",
         onClick: this.onClick
       },
-      l
+      o
     );
   }
-}), We = D({
+}), Re = defineComponent({
   components: {
-    VvIcon: U
+    VvIcon: x
   },
   props: {
     disabled: {
@@ -1813,22 +1620,22 @@ const S = {
     },
     mode: {
       type: String,
-      validator: (l) => ["up", "down"].includes(l),
+      validator: (o) => ["up", "down"].includes(o),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(l, { emit: t }) {
-    const e = i(() => l.mode === "up");
+  setup(o, { emit: s }) {
+    const e = computed(() => o.mode === "up");
     return {
       isUp: e,
-      onClick: (o) => {
-        o == null || o.stopPropagation(), l.disabled || t(e.value ? "step-up" : "step-down");
+      onClick: (l) => {
+        l == null || l.stopPropagation(), o.disabled || s(e.value ? "step-up" : "step-down");
       }
     };
   },
   render() {
-    return Q("button", {
+    return h("button", {
       class: [
         "vv-input-text__action-chevron",
         this.isUp && "vv-input-text__action-chevron-up"
@@ -1838,9 +1645,9 @@ const S = {
       onClick: this.onClick
     });
   }
-}), it = D({
+}), Ge = defineComponent({
   components: {
-    VvIcon: U
+    VvIcon: x
   },
   props: {
     disabled: {
@@ -1857,20 +1664,20 @@ const S = {
     }
   },
   emits: ["clear"],
-  setup(l, { emit: t }) {
+  setup(o, { emit: s }) {
     function e(n) {
-      n == null || n.stopPropagation(), l.disabled || t("clear");
+      n == null || n.stopPropagation(), o.disabled || s("clear");
     }
     return {
       onClick: e
     };
   },
   render() {
-    const l = Q(U, {
+    const o = h(x, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
-    return Q(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -1879,38 +1686,38 @@ const S = {
         type: "button",
         onClick: this.onClick
       },
-      l
+      o
     );
   }
 });
-function ze(l, t) {
+function Oe(o, s) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: U,
-      VvInputPasswordAction: rt,
-      VvInputStepAction: We,
-      VvInputClearAction: it
+      VvIcon: x,
+      VvInputPasswordAction: xe,
+      VvInputStepAction: Re,
+      VvInputClearAction: Ge
     },
     setup() {
       return {
-        isDisabled: i(() => t.disabled || t.readonly),
-        labelStepUp: t.labelStepUp,
-        labelStepDown: t.labelStepDown,
-        labelShowPassword: t.labelShowPassword,
-        labelHidePassword: t.labelHidePassword,
-        labelClear: t.labelClear,
-        iconShowPassword: t.iconShowPassword,
-        iconHidePassword: t.iconHidePassword
+        isDisabled: computed(() => s.disabled || s.readonly),
+        labelStepUp: s.labelStepUp,
+        labelStepDown: s.labelStepDown,
+        labelShowPassword: s.labelShowPassword,
+        labelHidePassword: s.labelHidePassword,
+        labelClear: s.labelClear,
+        iconShowPassword: s.iconShowPassword,
+        iconHidePassword: s.iconHidePassword
       };
     },
     render() {
       let e = null;
-      switch (l) {
+      switch (o) {
         case S.SEARCH: {
           const { onClear: n } = this.$attrs;
           e = [
-            Q(it, {
+            h(Ge, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
               onClear: n
@@ -1921,7 +1728,7 @@ function ze(l, t) {
         case S.PASSWORD: {
           const { onTogglePassword: n } = this.$attrs;
           e = [
-            Q(rt, {
+            h(xe, {
               disabled: this.isDisabled,
               onTogglePassword: n,
               labelShow: this.labelShowPassword,
@@ -1933,189 +1740,189 @@ function ze(l, t) {
           break;
         }
         case S.NUMBER: {
-          const { onStepUp: n, onStepDown: o } = this.$attrs;
+          const { onStepUp: n, onStepDown: l } = this.$attrs;
           e = [
-            Q(We, {
+            h(Re, {
               mode: "up",
-              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
+              disabled: this.isDisabled || s.max !== void 0 && s.modelValue === s.max,
               label: this.labelStepUp,
               onStepUp: n,
-              onStepDown: o
+              onStepDown: l
             }),
-            Q(We, {
+            h(Re, {
               mode: "down",
-              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
+              disabled: this.isDisabled || s.min !== void 0 && s.modelValue === s.min,
               label: this.labelStepDown,
               onStepUp: n,
-              onStepDown: o
+              onStepDown: l
             })
           ];
           break;
         }
       }
-      return Array.isArray(e) ? Q("div", { class: "vv-input-text__actions-group" }, e) : e;
+      return Array.isArray(e) ? h("div", { class: "vv-input-text__actions-group" }, e) : e;
     }
   };
 }
-const wa = ["for"], Pa = { class: "vv-input-text__wrapper" }, Ia = ["id"], Oa = {
+const zo = ["for"], Xo = { class: "vv-input-text__wrapper" }, Yo = ["id"], Jo = {
   key: 0,
   class: "vv-input-text__limit"
-}, Ea = {
+}, Qo = {
   name: "VvInputText"
-}, ho = /* @__PURE__ */ D({
-  ...Ea,
-  props: ka,
-  emits: Aa,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), o = G(), {
-      icon: r,
-      iconPosition: s,
-      label: b,
-      modelValue: c,
-      count: d,
-      valid: u,
-      invalid: p,
-      loading: v
-    } = F(e), h = i(() => String(e.id || ve())), g = i(() => `${h.value}-hint`), y = i(
-      () => e.floating && ee(e.placeholder) ? " " : e.placeholder
-    ), f = At(c, t, e.debounce), { focused: V } = Ke(o, t), P = Qe(o);
-    Ae(P, (O) => {
-      O && e.autofocus && (V.value = !0);
+}, Ls = /* @__PURE__ */ N({
+  ...Qo,
+  props: jo,
+  emits: qo,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), l = ref(), {
+      icon: i,
+      iconPosition: r,
+      label: f,
+      modelValue: p,
+      count: u,
+      valid: a,
+      invalid: c,
+      loading: d
+    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
+    ), v = useDebouncedInput(p, s, e.debounce), { focused: V } = useComponentFocus(l, s), w = useElementVisibility(l);
+    watch(w, (E) => {
+      E && e.autofocus && (V.value = !0);
     });
-    const $ = G(!1), x = i(() => e.type === S.PASSWORD), C = () => {
-      $.value = !$.value;
-    }, M = i(
+    const C = ref(!1), M = computed(() => e.type === S.PASSWORD), $ = () => {
+      C.value = !C.value;
+    }, H = computed(
       () => e.type === S.TIME || e.type === S.DATETIME_LOCAL || e.type === S.DATE || e.type === S.WEEK || e.type === S.MONTH
-    ), J = i(() => e.type === S.NUMBER), B = () => {
-      ue.value && (o.value.stepUp(), f.value = a(o).value);
-    }, j = () => {
-      ue.value && (o.value.stepDown(), f.value = a(o).value);
-    }, le = i(() => e.type === S.SEARCH), ne = () => {
-      f.value = void 0;
-    }, { hasIconLeft: se, hasIconRight: ae, hasIcon: fe } = je(
-      r,
-      s
-    ), re = i(() => {
+    ), X = computed(() => e.type === S.NUMBER), T = () => {
+      le.value && (l.value.stepUp(), v.value = unref(l).value);
+    }, G = () => {
+      le.value && (l.value.stepDown(), v.value = unref(l).value);
+    }, J = computed(() => e.type === S.SEARCH), ee = () => {
+      v.value = void 0;
+    }, { hasIconLeft: te, hasIconRight: Q, hasIcon: ie } = useComponentIcon(
+      i,
+      r
+    ), oe = computed(() => {
       switch (e.type) {
         case S.COLOR:
-          return { name: be.COLOR };
+          return { name: ue.COLOR };
         case S.DATE:
         case S.DATETIME_LOCAL:
         case S.WEEK:
         case S.MONTH:
-          return { name: be.DATE };
+          return { name: ue.DATE };
         case S.TIME:
-          return { name: be.TIME };
+          return { name: ue.TIME };
         default:
           return "";
       }
-    }), { formatted: ie } = kt(f, {
+    }), { formatted: se } = useTextCount(v, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), ue = i(() => !e.disabled && !e.readonly), q = i(
-      () => ue.value ? e.tabindex : -1
-    ), w = i(() => !ee(c)), Z = i(() => {
-      if (p.value === !0)
+    }), le = computed(() => !e.disabled && !e.readonly), W = computed(
+      () => le.value ? e.tabindex : -1
+    ), P = computed(() => !isEmpty(p)), j = computed(() => {
+      if (c.value === !0)
         return !0;
-      if (u.value === !0)
+      if (a.value === !0)
         return !1;
-    }), { bemCssClasses: k } = H("vv-input-text", {
+    }), { bemCssClasses: A } = useBemModifiers("vv-input-text", {
       modifiers: e.modifiers,
-      valid: u,
-      invalid: p,
-      loading: v,
+      valid: a,
+      invalid: c,
+      loading: d,
       disabled: e.disabled,
       readonly: e.readonly,
-      iconLeft: se,
-      iconRight: ae.value || !ee(re),
-      floating: e.floating && !ee(e.label),
-      dirty: w,
+      iconLeft: te,
+      iconRight: Q.value || !isEmpty(oe),
+      floating: e.floating && !isEmpty(e.label),
+      dirty: P,
       focus: V
-    }), N = i(() => {
-      const O = (() => x.value && $.value || M.value && !w.value && !V.value ? S.TEXT : e.type)(), z = {
-        type: O,
+    }), L = computed(() => {
+      const E = (() => M.value && C.value || H.value && !P.value && !V.value ? S.TEXT : e.type)(), K = {
+        type: E,
         name: e.name,
-        tabindex: q.value,
+        tabindex: W.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         autocomplete: e.autocomplete,
-        "aria-invalid": Z.value,
-        "aria-describedby": !at.value && Pt.value ? g.value : void 0,
-        "aria-errormessage": at.value ? g.value : void 0
+        "aria-invalid": j.value,
+        "aria-describedby": !Me.value && st.value ? g.value : void 0,
+        "aria-errormessage": Me.value ? g.value : void 0
       };
-      return (O === S.DATE || O === S.MONTH || O === S.WEEK || O === S.TIME || O === S.DATETIME_LOCAL || O === S.NUMBER) && (z.step = e.step, z.max = String(e.max), z.min = String(e.min)), (O === S.TEXT || O === S.SEARCH || O === S.URL || O === S.TEL || O === S.EMAIL || O === S.PASSWORD || O === S.NUMBER) && (z.placeholder = y.value), (O === S.TEXT || O === S.SEARCH || O === S.URL || O === S.TEL || O === S.EMAIL || O === S.PASSWORD) && (z.minlength = e.minlength, z.maxlength = e.maxlength, z.pattern = e.pattern), O === S.EMAIL && (z.multiple = e.multiple), z;
-    }), Y = i(() => ({
+      return (E === S.DATE || E === S.MONTH || E === S.WEEK || E === S.TIME || E === S.DATETIME_LOCAL || E === S.NUMBER) && (K.step = e.step, K.max = String(e.max), K.min = String(e.min)), (E === S.TEXT || E === S.SEARCH || E === S.URL || E === S.TEL || E === S.EMAIL || E === S.PASSWORD || E === S.NUMBER) && (K.placeholder = y.value), (E === S.TEXT || E === S.SEARCH || E === S.URL || E === S.TEL || E === S.EMAIL || E === S.PASSWORD) && (K.minlength = e.minlength, K.maxlength = e.maxlength, K.pattern = e.pattern), E === S.EMAIL && (K.multiple = e.multiple), K;
+    }), z = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
-      togglePassword: C,
-      stepUp: B,
-      stepDown: j,
-      clear: ne
-    })), { HintSlot: wt, hasHint: Pt, hasInvalid: at } = _e(e, n), It = ze(
+      togglePassword: $,
+      stepUp: T,
+      stepDown: G,
+      clear: ee
+    })), { HintSlot: ot, hasHint: st, hasInvalid: Me } = pe(e, n), lt = Oe(
       S.PASSWORD,
       e
-    ), Ot = ze(
+    ), at = Oe(
       S.NUMBER,
       e
-    ), Et = ze(
+    ), nt = Oe(
       S.SEARCH,
       e
     );
-    return (O, z) => (m(), _("div", {
-      class: K(a(k))
+    return (E, K) => (m(), _("div", {
+      class: U(t(A))
     }, [
-      a(b) ? (m(), _("label", {
+      t(f) ? (m(), _("label", {
         key: 0,
-        for: a(h),
+        for: t(b),
         class: "vv-input-text__label"
-      }, L(a(b)), 9, wa)) : I("", !0),
-      E("div", Pa, [
-        A(O.$slots, "before", W(te(a(Y))), () => [
-          a(se) ? (m(), T(U, R({
+      }, B(t(f)), 9, zo)) : I("", !0),
+      R("div", Xo, [
+        k(E.$slots, "before", F(Y(t(z))), () => [
+          t(te) ? (m(), D(x, O({
             key: 0,
             class: "vv-input-text__icon-left"
-          }, a(fe)), null, 16)) : I("", !0)
+          }, t(ie)), null, 16)) : I("", !0)
         ]),
-        Se(E("input", R({
-          id: a(h),
+        ve(R("input", O({
+          id: t(b),
           ref_key: "input",
-          ref: o,
-          "onUpdate:modelValue": z[0] || (z[0] = (Fe) => $e(f) ? f.value = Fe : null)
-        }, a(N), {
-          onKeyup: z[1] || (z[1] = (Fe) => t("keyup", Fe))
-        }), null, 16, Ia), [
-          [Ft, a(f)]
+          ref: l,
+          "onUpdate:modelValue": K[0] || (K[0] = (Ee) => be(v) ? v.value = Ee : null)
+        }, t(L), {
+          onKeyup: K[1] || (K[1] = (Ee) => s("keyup", Ee))
+        }), null, 16, Yo), [
+          [ht, t(v)]
         ]),
-        A(O.$slots, "after", W(te(a(Y))), () => [
-          a(ae) || a(re) ? (m(), T(U, W(R({ key: 0 }, a(ae) ? a(fe) : a(re))), null, 16)) : a(x) ? (m(), T(a(It), {
+        k(E.$slots, "after", F(Y(t(z))), () => [
+          t(Q) || t(oe) ? (m(), D(x, F(O({ key: 0 }, t(Q) ? t(ie) : t(oe))), null, 16)) : t(M) ? (m(), D(t(lt), {
             key: 1,
-            onTogglePassword: C
-          })) : a(J) ? (m(), T(a(Ot), {
+            onTogglePassword: $
+          })) : t(X) ? (m(), D(t(at), {
             key: 2,
-            onStepUp: B,
-            onStepDown: j
-          })) : a(le) ? (m(), T(a(Et), {
+            onStepUp: T,
+            onStepDown: G
+          })) : t(J) ? (m(), D(t(nt), {
             key: 3,
-            onClear: ne
+            onClear: ee
           })) : I("", !0)
         ]),
-        a(d) ? (m(), _("span", Oa, [
-          A(O.$slots, "count", W(te(a(Y))), () => [
-            X(L(a(ie)), 1)
+        t(u) ? (m(), _("span", Jo, [
+          k(E.$slots, "count", F(Y(t(z))), () => [
+            q(B(t(se)), 1)
           ])
         ])) : I("", !0)
       ]),
-      oe(a(wt), {
-        id: a(g),
+      Z(t(ot), {
+        id: t(g),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Ra = {
-  ...pe,
+}), Zo = {
+  ...re,
   value: {
     type: [Number, String],
     default: void 0
@@ -2127,209 +1934,209 @@ const wa = ["for"], Pa = { class: "vv-input-text__wrapper" }, Ia = ["id"], Oa =
     type: String,
     required: !0
   }
-}, La = {
+}, es = {
   name: "VvProgress"
-}, go = /* @__PURE__ */ D({
-  ...La,
-  props: Ra,
-  setup(l) {
-    const t = l, { value: e, max: n, label: o } = F(t), r = i(() => t.value === void 0), { bemCssClasses: s } = H("vv-progress", {
-      modifiers: t.modifiers,
-      indeterminate: r
+}, Ms = /* @__PURE__ */ N({
+  ...es,
+  props: Zo,
+  setup(o) {
+    const s = o, { value: e, max: n, label: l } = toRefs(s), i = computed(() => s.value === void 0), { bemCssClasses: r } = useBemModifiers("vv-progress", {
+      modifiers: s.modifiers,
+      indeterminate: i
     });
-    return (b, c) => (m(), _("progress", R({ role: "progressbar" }, {
-      class: a(s),
-      ariaLabel: a(o),
-      max: a(n),
-      value: a(e)
+    return (f, p) => (m(), _("progress", O({ role: "progressbar" }, {
+      class: t(r),
+      ariaLabel: t(l),
+      max: t(n),
+      value: t(e)
     }), null, 16));
   }
-}), Da = St, Ta = ["click", "update:modelValue", "change", "blur"];
-function Ba(l, t) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: o } = xe(mt), r = o("modelValue", l, t), s = o("readonly", l), b = o("disabled", l), c = o("valid", l), d = o("invalid", l);
+}), ts = Qe, os = ["click", "update:modelValue", "change", "blur"];
+function ss(o, s) {
+  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(qe), i = l("modelValue", o, s), r = l("readonly", o), f = l("disabled", o), p = l("valid", o), u = l("invalid", o);
   return {
     group: e,
     isInGroup: n,
-    modelValue: r,
-    readonly: s,
-    disabled: b,
-    valid: c,
-    invalid: d
+    modelValue: i,
+    readonly: r,
+    disabled: f,
+    valid: p,
+    invalid: u
   };
 }
-const Na = ["for"], xa = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ha = {
+const ls = ["for"], as = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ns = {
   name: "VvRadio"
-}, Ma = /* @__PURE__ */ D({
-  ...Ha,
-  props: Da,
-  emits: Ta,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), { disabled: o, readonly: r, modelValue: s, valid: b, invalid: c } = Ba(
+}, rs = /* @__PURE__ */ N({
+  ...ns,
+  props: ts,
+  emits: os,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), { disabled: l, readonly: i, modelValue: r, valid: f, invalid: p } = ss(
       e,
-      t
-    ), d = i(() => String(e.id || ve())), u = i(() => v.value ? -1 : e.tabindex), p = G(), v = i(() => o.value || r.value), h = i(() => {
-      if (c.value === !0)
+      s
+    ), u = computed(() => String(e.id || ne())), a = computed(() => d.value ? -1 : e.tabindex), c = ref(), d = computed(() => l.value || i.value), b = computed(() => {
+      if (p.value === !0)
         return !0;
-      if (b.value === !0)
+      if (f.value === !0)
         return !1;
-    }), g = i(
-      () => Array.isArray(s.value) ? me(e.value, s.value) : he(e.value, s.value)
-    ), y = i(
+    }), g = computed(
+      () => Array.isArray(r.value) ? contains(e.value, r.value) : equals(e.value, r.value)
+    ), y = computed(
       () => ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0
-    ), f = i({
+    ), v = computed({
       get() {
         return g.value ? y.value : null;
       },
-      set($) {
-        Array.isArray(s.value) ? s.value = [e.value] : s.value = e.value, t("change", $);
+      set(C) {
+        Array.isArray(r.value) ? r.value = [e.value] : r.value = e.value, s("change", C);
       }
-    }), { bemCssClasses: V } = H("vv-radio", {
-      valid: b,
-      invalid: c,
-      disabled: o,
-      readonly: r
-    }), { HintSlot: P } = _e(e, n);
-    return ($, x) => (m(), _("label", {
-      class: K(a(V)),
-      for: a(d)
+    }), { bemCssClasses: V } = useBemModifiers("vv-radio", {
+      valid: f,
+      invalid: p,
+      disabled: l,
+      readonly: i
+    }), { HintSlot: w } = pe(e, n);
+    return (C, M) => (m(), _("label", {
+      class: U(t(V)),
+      for: t(u)
     }, [
-      Se(E("input", {
-        id: a(d),
+      ve(R("input", {
+        id: t(u),
         ref_key: "input",
-        ref: p,
-        "onUpdate:modelValue": x[0] || (x[0] = (C) => $e(f) ? f.value = C : null),
+        ref: c,
+        "onUpdate:modelValue": M[0] || (M[0] = ($) => be(v) ? v.value = $ : null),
         type: "radio",
         class: "vv-radio__input",
-        name: $.name,
-        disabled: a(v),
-        value: a(y),
-        tabindex: a(u),
-        "aria-invalid": a(h)
-      }, null, 8, xa), [
-        [Wt, a(f)]
+        name: C.name,
+        disabled: t(d),
+        value: t(y),
+        tabindex: t(a),
+        "aria-invalid": t(b)
+      }, null, 8, as), [
+        [gt, t(v)]
       ]),
-      A($.$slots, "default", { value: a(s) }, () => [
-        X(L($.label), 1)
+      k(C.$slots, "default", { value: t(r) }, () => [
+        q(B(C.label), 1)
       ]),
-      oe(a(P), {
+      Z(t(w), {
         class: "vv-radio__hint",
-        params: { value: a(s) }
+        params: { value: t(r) }
       }, null, 8, ["params"])
-    ], 10, Na));
+    ], 10, ls));
   }
-}), Ga = Vt, Ua = ["update:modelValue", "change"], ja = ["textContent"], Ka = { class: "vv-radio-group__wrapper" }, Fa = {
+}), is = Ze, us = ["update:modelValue", "change"], ds = ["textContent"], cs = { class: "vv-radio-group__wrapper" }, ps = {
   name: "VvRadioGroup"
-}, yo = /* @__PURE__ */ D({
-  ...Fa,
-  props: Ga,
-  emits: Ua,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), o = Je(e, "modelValue", t), { disabled: r, readonly: s, vertical: b, valid: c, invalid: d } = F(e);
-    He({
-      key: mt,
-      modelValue: o,
-      disabled: r,
-      readonly: s,
-      valid: c,
-      invalid: d
-    });
-    const { getOptionLabel: p, getOptionValue: v } = Le(e), { bemCssClasses: h } = H("vv-radio-group", {
-      disabled: r,
-      readonly: s,
-      horizontal: i(() => !b.value),
-      valid: c,
-      invalid: d
-    }), g = (f, V) => ({
+}, Ns = /* @__PURE__ */ N({
+  ...ps,
+  props: is,
+  emits: us,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), l = useVModel(e, "modelValue", s), { disabled: i, readonly: r, vertical: f, valid: p, invalid: u } = toRefs(e), a = {
+      key: qe,
+      modelValue: l,
+      disabled: i,
+      readonly: r,
+      valid: p,
+      invalid: u
+    };
+    useProvideGroupState(a);
+    const { getOptionLabel: c, getOptionValue: d } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-radio-group", {
+      disabled: i,
+      readonly: r,
+      horizontal: computed(() => !f.value),
+      valid: p,
+      invalid: u
+    }), g = (v, V) => ({
       id: `${e.name}_opt${V}`,
       name: e.name,
-      label: p(f),
-      value: v(f)
-    }), { HintSlot: y } = _e(e, n);
-    return (f, V) => (m(), _("fieldset", {
-      class: K(a(h))
+      label: c(v),
+      value: d(v)
+    }), { HintSlot: y } = pe(e, n);
+    return (v, V) => (m(), _("fieldset", {
+      class: U(t(b))
     }, [
-      f.label ? (m(), _("legend", {
+      v.label ? (m(), _("legend", {
         key: 0,
-        textContent: L(f.label)
-      }, null, 8, ja)) : I("", !0),
-      E("div", Ka, [
-        f.options.length > 0 ? (m(!0), _(ge, { key: 0 }, Ce(f.options, (P, $) => (m(), T(Ma, R({ key: $ }, g(P, $)), null, 16))), 128)) : A(f.$slots, "default", { key: 1 })
+        textContent: B(v.label)
+      }, null, 8, ds)) : I("", !0),
+      R("div", cs, [
+        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, C) => (m(), D(rs, O({ key: C }, g(w, C)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
       ]),
-      oe(a(y), { class: "vv-radio-group__hint" })
+      Z(t(y), { class: "vv-radio-group__hint" })
     ], 2));
   }
-}), Wa = {
+}), vs = {
   hard: "hard",
   soft: "soft"
-}, za = {
+}, ms = {
   true: !0,
   false: !1,
   default: "default"
-}, qa = ["update:modelValue", "focus", "blur", "keyup"], Xa = {
-  ..._t,
+}, fs = ["update:modelValue", "focus", "blur", "keyup"], bs = {
+  ...Je,
   modelValue: String,
   cols: { type: [String, Number], default: 20 },
   rows: { type: [String, Number], default: 2 },
-  wrap: { type: String, default: Wa.soft },
-  spellcheck: { type: [Boolean, String], default: za.default },
+  wrap: { type: String, default: vs.soft },
+  spellcheck: { type: [Boolean, String], default: ms.default },
   resizable: Boolean
-}, Za = ["for"], Ya = { class: "vv-textarea__wrapper" }, Ja = ["id"], Qa = {
+}, hs = ["for"], gs = { class: "vv-textarea__wrapper" }, ys = ["id"], _s = {
   key: 0,
   class: "vv-textarea__limit"
-}, eo = {
+}, Ss = {
   name: "VvTextarea"
-}, _o = /* @__PURE__ */ D({
-  ...eo,
-  props: Xa,
-  emits: qa,
-  setup(l, { emit: t }) {
-    const e = l, n = ce(), o = G(), {
-      icon: r,
-      iconPosition: s,
-      label: b,
-      modelValue: c,
-      count: d,
-      valid: u,
-      invalid: p,
-      loading: v
-    } = F(e), h = i(() => String(e.id || ve())), g = i(() => `${h.value}-hint`), y = i(
-      () => e.floating && ee(e.placeholder) ? " " : e.placeholder
-    ), f = At(c, t, e.debounce), { hasIcon: V, hasIconLeft: P, hasIconRight: $ } = je(
-      r,
-      s
-    ), { focused: x } = Ke(o, t), C = Qe(o);
-    Ae(C, (q) => {
-      q && e.autofocus && (x.value = !0);
+}, Hs = /* @__PURE__ */ N({
+  ...Ss,
+  props: bs,
+  emits: fs,
+  setup(o, { emit: s }) {
+    const e = o, n = useSlots(), l = ref(), {
+      icon: i,
+      iconPosition: r,
+      label: f,
+      modelValue: p,
+      count: u,
+      valid: a,
+      invalid: c,
+      loading: d
+    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
+    ), v = useDebouncedInput(p, s, e.debounce), { hasIcon: V, hasIconLeft: w, hasIconRight: C } = useComponentIcon(
+      i,
+      r
+    ), { focused: M } = useComponentFocus(l, s), $ = useElementVisibility(l);
+    watch($, (W) => {
+      W && e.autofocus && (M.value = !0);
     });
-    const { formatted: M } = kt(f, {
+    const { formatted: H } = useTextCount(v, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), J = i(() => !e.disabled && !e.readonly), B = i(
-      () => J.value ? e.tabindex : -1
-    ), j = i(() => !ee(c)), le = i(() => {
+    }), X = computed(() => !e.disabled && !e.readonly), T = computed(
+      () => X.value ? e.tabindex : -1
+    ), G = computed(() => !isEmpty(p)), J = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { HintSlot: ne, hasHint: se, hasInvalid: ae } = _e(e, n), { bemCssClasses: fe } = H("vv-textarea", {
+    }), { HintSlot: ee, hasHint: te, hasInvalid: Q } = pe(e, n), { bemCssClasses: ie } = useBemModifiers("vv-textarea", {
       modifiers: e.modifiers,
-      valid: u,
-      invalid: p,
-      loading: v,
+      valid: a,
+      invalid: c,
+      loading: d,
       disabled: e.disabled,
       readonly: e.readonly,
-      iconLeft: P,
-      iconRight: $,
-      floating: e.floating && !ee(e.label),
-      dirty: j,
-      focused: x,
+      iconLeft: w,
+      iconRight: C,
+      floating: e.floating && !isEmpty(e.label),
+      dirty: G,
+      focused: M,
       resizable: e.resizable
-    }), re = i(
+    }), oe = computed(
       () => ({
         name: e.name,
         placeholder: y.value,
-        tabindex: B.value,
+        tabindex: T.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
@@ -2340,81 +2147,81 @@ const Na = ["for"], xa = ["id", "name", "disabled", "value", "tabindex", "aria-i
         rows: e.rows,
         wrap: e.wrap,
         spellcheck: e.spellcheck,
-        "aria-invalid": le.value,
-        "aria-describedby": !ae.value && se.value ? g.value : void 0,
-        "aria-errormessage": ae.value ? g.value : void 0
+        "aria-invalid": J.value,
+        "aria-describedby": !Q.value && te.value ? g.value : void 0,
+        "aria-errormessage": Q.value ? g.value : void 0
       })
-    ), ie = i(() => ({
+    ), se = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
       hintLabel: e.hintLabel,
       maxlength: e.maxlength,
       minlength: e.minlength,
-      clear: ue
-    })), ue = () => {
-      f.value = void 0;
+      clear: le
+    })), le = () => {
+      v.value = void 0;
     };
-    return (q, w) => (m(), _("div", {
-      class: K(a(fe))
+    return (W, P) => (m(), _("div", {
+      class: U(t(ie))
     }, [
-      a(b) ? (m(), _("label", {
+      t(f) ? (m(), _("label", {
         key: 0,
-        for: a(h),
+        for: t(b),
         class: "vv-textarea__label"
-      }, L(a(b)), 9, Za)) : I("", !0),
-      E("div", Ya, [
-        A(q.$slots, "before", W(te(a(ie))), () => [
-          a(P) ? (m(), T(U, R({
+      }, B(t(f)), 9, hs)) : I("", !0),
+      R("div", gs, [
+        k(W.$slots, "before", F(Y(t(se))), () => [
+          t(w) ? (m(), D(x, O({
             key: 0,
             class: "vv-textarea__icon-left"
-          }, a(V)), null, 16)) : I("", !0)
+          }, t(V)), null, 16)) : I("", !0)
         ]),
-        Se(E("textarea", R({
-          id: a(h),
+        ve(R("textarea", O({
+          id: t(b),
           ref_key: "textarea",
-          ref: o,
-          "onUpdate:modelValue": w[0] || (w[0] = (Z) => $e(f) ? f.value = Z : null)
-        }, a(re), {
-          onKeyup: w[1] || (w[1] = (Z) => t("keyup", Z))
-        }), null, 16, Ja), [
-          [vt, a(f)]
+          ref: l,
+          "onUpdate:modelValue": P[0] || (P[0] = (j) => be(v) ? v.value = j : null)
+        }, t(oe), {
+          onKeyup: P[1] || (P[1] = (j) => s("keyup", j))
+        }), null, 16, ys), [
+          [Ke, t(v)]
         ]),
-        A(q.$slots, "after", W(te(a(ie))), () => [
-          a($) ? (m(), T(U, W(R({ key: 0 }, a(V))), null, 16)) : I("", !0)
+        k(W.$slots, "after", F(Y(t(se))), () => [
+          t(C) ? (m(), D(x, F(O({ key: 0 }, t(V))), null, 16)) : I("", !0)
         ]),
-        a(d) ? (m(), _("span", Qa, [
-          A(q.$slots, "count", W(te(a(ie))), () => [
-            X(L(a(M)), 1)
+        t(u) ? (m(), _("span", _s, [
+          k(W.$slots, "count", F(Y(t(se))), () => [
+            q(B(t(H)), 1)
           ])
         ])) : I("", !0)
       ]),
-      oe(a(ne), {
-        id: a(g),
+      Z(t(ee), {
+        id: t(g),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  so as VolverPlugin,
-  il as VvAccordion,
-  ro as VvAccordionGroup,
-  io as VvBadge,
-  uo as VvBreadcrumb,
-  co as VvButton,
-  vo as VvButtonGroup,
-  po as VvCard,
-  Ul as VvCheckbox,
-  fo as VvCheckboxGroup,
-  mo as VvCombobox,
-  bo as VvDialog,
-  ta as VvDropdown,
-  U as VvIcon,
-  ho as VvInputText,
-  go as VvProgress,
-  Ma as VvRadio,
-  yo as VvRadioGroup,
-  da as VvSelect,
-  _o as VvTextarea
+  As as VolverPlugin,
+  Pt as VvAccordion,
+  Ps as VvAccordionGroup,
+  ws as VvBadge,
+  Is as VvBreadcrumb,
+  Es as VvButton,
+  Rs as VvButtonGroup,
+  Os as VvCard,
+  io as VvCheckbox,
+  Bs as VvCheckboxGroup,
+  Ds as VvCombobox,
+  Ts as VvDialog,
+  Vo as VvDropdown,
+  x as VvIcon,
+  Ls as VvInputText,
+  Ms as VvProgress,
+  rs as VvRadio,
+  Ns as VvRadioGroup,
+  Ro as VvSelect,
+  Hs as VvTextarea
 };