@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/dist/components/VvSelect/VvSelect.es.js

@@ -1,248 +1,120 @@
-import { toRefs as K, computed as S, h as W, unref as v, defineComponent as q, openBlock as j, createElementBlock as C, normalizeClass as F, createElementVNode as B, toDisplayString as N, createCommentVNode as x, Fragment as R, renderList as X, createTextVNode as T, useSlots as Y, ref as E, watch as ee, withKeys as P, withDirectives as te, vModelText as re, createVNode as $, mergeProps as ne } from "vue";
-import { toReactive as se, useFocus as le, refDebounced as oe, onClickOutside as ae } from "@vueuse/core";
-import { v4 as H } from "uuid";
-const m = {
-  equals(t, r, e) {
-    return e ? this.resolveFieldData(t, e) === this.resolveFieldData(r, e) : this.deepEquals(t, r);
-  },
-  deepEquals(t, r) {
-    if (t === r)
-      return !0;
-    if (t && r && typeof t == "object" && typeof r == "object") {
-      const e = Array.isArray(t), u = Array.isArray(r);
-      let n, s, i;
-      if (e && u) {
-        if (s = t.length, s != r.length)
-          return !1;
-        for (n = s; n-- !== 0; )
-          if (!this.deepEquals(t[n], r[n]))
-            return !1;
-        return !0;
-      }
-      if (e != u)
-        return !1;
-      const p = t instanceof Date, o = r instanceof Date;
-      if (p != o)
-        return !1;
-      if (p && o)
-        return t.getTime() == r.getTime();
-      const g = t instanceof RegExp, b = r instanceof RegExp;
-      if (g != b)
-        return !1;
-      if (g && b)
-        return t.toString() == r.toString();
-      const l = Object.keys(t);
-      if (s = l.length, s !== Object.keys(r).length)
+import { unref as i, computed as g, toRefs as q, h as be, defineComponent as z, openBlock as V, createElementBlock as _, normalizeClass as W, createElementVNode as O, toDisplayString as B, createCommentVNode as C, Fragment as Y, renderList as ie, createTextVNode as ue, ref as E, inject as he, createBlock as M, mergeProps as H, useSlots as de, renderSlot as le, withDirectives as ce, isRef as Se, vModelSelect as Ve, createVNode as G, watch as $e, withKeys as oe, vModelText as Ae } from "vue";
+import { nanoid as ee } from "nanoid";
+import { toReactive as _e, useFocus as we, refDebounced as ke, onClickOutside as je } from "@vueuse/core";
+import { iconExists as I, Icon as Ce, addIcon as Oe } from "@iconify/vue";
+function R(r, t, e) {
+  return e ? L(r, e) === L(t, e) : Q(r, t);
+}
+function Q(r, t) {
+  if (r === t)
+    return !0;
+  if (r && t && typeof r == "object" && typeof t == "object") {
+    const e = Array.isArray(r), c = Array.isArray(t);
+    let n, u, l;
+    if (e && c) {
+      if (u = r.length, u != t.length)
         return !1;
-      for (n = s; n-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(r, l[n]))
-          return !1;
-      for (n = s; n-- !== 0; )
-        if (i = l[n], !this.deepEquals(t[i], r[i]))
+      for (n = u; n-- !== 0; )
+        if (!Q(r[n], t[n]))
           return !1;
       return !0;
     }
-    return t !== t && r !== r;
-  },
-  resolveFieldData(t, r) {
-    if (t && Object.keys(t).length && r) {
-      if (r.indexOf(".") === -1)
-        return t[r];
-      {
-        const e = r.split(".");
-        let u = t;
-        for (let n = 0, s = e.length; n < s; ++n) {
-          if (t == null)
-            return null;
-          u = u[e[n]];
-        }
-        return u;
-      }
-    } else
-      return null;
-  },
-  isFunction(t) {
-    return !!(t && t.constructor && t.call && t.apply);
-  },
-  findIndexInList(t, r) {
-    let e = -1;
-    if (r) {
-      for (let u = 0; u < r.length; u++)
-        if (this.equals(r[u], t)) {
-          e = u;
-          break;
-        }
-    }
-    return e;
-  },
-  contains(t, r) {
-    if (t != null && r && r.length) {
-      for (const e of r)
-        if (this.equals(t, e))
-          return !0;
-    }
-    return !1;
-  },
-  isEmpty(t) {
-    return t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0;
-  },
-  isNotEmpty(t) {
-    return !this.isEmpty(t);
-  },
-  pickBy(t, r) {
-    return Object.fromEntries(
-      Object.entries(t).filter(([e]) => r(e))
-    );
-  },
-  removeFromList(t, r) {
-    const e = this.findIndexInList(t, r);
-    return e > -1 ? r.filter((u, n) => n !== e) : r;
-  },
-  isString(t) {
-    return typeof t == "string" || t instanceof String;
-  },
-  propsToObject(t) {
-    return Object.keys(t).reduce((r, e) => {
-      var u, n, s, i, p;
-      return this.isFunction(t[e]) ? r[e] = t[e]() : Array.isArray(t[e]) ? r[e] = t[e][0]() : (u = t[e]) != null && u.type && (Array.isArray(t[e].type) ? r[e] = ((n = t[e]) == null ? void 0 : n.default) || ((s = t[e]) == null ? void 0 : s.type[0]()) : r[e] = ((i = t[e]) == null ? void 0 : i.default) || ((p = t[e]) == null ? void 0 : p.type())), r;
-    }, {});
-  },
-  filterArray(t, r, e) {
-    return t.filter((u) => r.some((n) => typeof n == "string" ? u[e] == n : this.equals(
-      u[e],
-      n[e]
-    )));
-  },
-  kebabCase(t) {
-    var r, e;
-    if (t)
-      return (e = (r = t.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 : r.join("-")) == null ? void 0 : e.toLowerCase();
+    if (e != c)
+      return !1;
+    const h = r instanceof Date, b = t instanceof Date;
+    if (h != b)
+      return !1;
+    if (h && b)
+      return r.getTime() == t.getTime();
+    const y = r instanceof RegExp, a = t instanceof RegExp;
+    if (y != a)
+      return !1;
+    if (y && a)
+      return r.toString() == t.toString();
+    const o = Object.keys(r);
+    if (u = o.length, u !== Object.keys(t).length)
+      return !1;
+    for (n = u; n-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, o[n]))
+        return !1;
+    for (n = u; n-- !== 0; )
+      if (l = o[n], !Q(r[l], t[l]))
+        return !1;
+    return !0;
   }
-}, ue = {
-  valid: Boolean,
-  validLabel: [String, Array]
-}, ie = {
-  error: Boolean,
-  errorLabel: [String, Array]
-}, ce = {
-  loading: Boolean,
-  loadingLabel: String
-}, I = {
-  disabled: Boolean
-}, de = {
-  readonly: Boolean
-}, M = {
-  modifiers: [String, Array]
-}, fe = {
-  hintLabel: { type: String, default: "" }
-}, pe = {
-  ...ue,
-  ...ie,
-  ...fe,
-  ...ce,
-  ...I,
-  ...de,
-  ...M,
-  modelValue: [String, Array, Object],
-  label: String,
-  labelNoResult: { type: String, default: "No results" },
-  placeholder: String,
-  searchable: Boolean,
-  searchPlaceholder: String,
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  options: {
-    type: Array,
-    required: !0
-  },
-  useObject: Boolean,
-  multiple: Boolean,
-  maxValues: [Number, String],
-  separator: { type: String, default: ", " },
-  labelKey: { type: String, default: "label" },
-  valueKey: { type: String, default: "value" },
-  iconLeft: String,
-  iconRight: String
-};
-function D(t) {
-  return Array.isArray(t) ? t.filter((r) => m.isString(r)).reduce((r, e) => r.length > 0 ? r + `
-` + e : e, "") : t;
+  return r !== r && t !== t;
 }
-function ye(t, r) {
-  return {
-    name: "HintSlot",
-    props: {
-      params: {
-        type: Object,
-        default: () => ({})
+function L(r, t) {
+  if (r && Object.keys(r).length && t) {
+    if (t.indexOf(".") === -1)
+      return r[t];
+    {
+      const e = t.split(".");
+      let c = r;
+      for (let n = 0, u = e.length; n < u; ++n) {
+        if (r == null)
+          return null;
+        c = c[e[n]];
       }
-    },
-    setup(e) {
-      const u = K(t), {
-        error: n,
-        valid: s,
-        hint: i,
-        loading: p
-      } = r, {
-        hintLabel: o,
-        modelValue: g,
-        valid: b,
-        validLabel: l,
-        error: h,
-        errorLabel: a
-      } = u, d = m.resolveFieldData(u, "loading"), y = m.resolveFieldData(
-        u,
-        "loadingLabel"
-      ), V = S(() => h.value ? !!(h.value && n || (a == null ? void 0 : a.value) && Array.isArray(a.value) && a.value.length > 0 || (a == null ? void 0 : a.value) && m.isNotEmpty(a.value)) : !1), k = S(() => !!(o && o.value || i || s || l && l.value || V.value || (d == null ? void 0 : d.value) && p || (d == null ? void 0 : d.value) && (y == null ? void 0 : y.value))), _ = S(() => {
-        const O = se({
-          hintLabel: o,
-          modelValue: g,
-          valid: b,
-          validLabel: l,
-          error: h,
-          errorLabel: a,
-          loading: d,
-          loadingLabel: y,
-          ...e.params
-        });
-        return h != null && h.value ? (n == null ? void 0 : n(O)) || D(a == null ? void 0 : a.value) || (o == null ? void 0 : o.value) : b != null && b.value ? (s == null ? void 0 : s(O)) || D(l == null ? void 0 : l.value) || (o == null ? void 0 : o.value) : d != null && d.value ? (p == null ? void 0 : p(O)) || D(y == null ? void 0 : y.value) || (o == null ? void 0 : o.value) : (i == null ? void 0 : i(O)) || D(o == null ? void 0 : o.value) || (o == null ? void 0 : o.value);
-      });
-      return {
-        hasHint: k,
-        hintContent: _
-      };
-    },
-    render() {
-      if (this.hasHint)
-        return W(
-          "pre",
-          { style: { "white-space": "pre" } },
-          this.hintContent
-        );
+      return c;
     }
-  };
+  } else
+    return null;
+}
+function Be(r, t) {
+  let e = -1;
+  if (t) {
+    for (let c = 0; c < t.length; c++)
+      if (R(t[c], r)) {
+        e = c;
+        break;
+      }
+  }
+  return e;
+}
+function F(r, t) {
+  if (r != null && t && t.length) {
+    for (const e of t)
+      if (R(r, e))
+        return !0;
+  }
+  return !1;
+}
+function te(r) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(i(r));
+}
+function Ne(r, t) {
+  const e = Be(r, t);
+  return e > -1 ? t.filter((c, n) => n !== e) : t;
+}
+function De(r) {
+  return typeof r == "string" || r instanceof String;
+}
+function Pe(r, t, e) {
+  return r.filter((c) => t.some((n) => typeof n == "string" ? c[e] == n : R(c[e], n[e])));
 }
-function Z(t, r) {
-  const e = { [`${t}`]: !0 };
+function se(r) {
+  var t, e;
+  if (r)
+    return (e = (t = r.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 U(r, t) {
+  const e = { [`${r}`]: !0 };
   return {
-    bemCssClasses: S(() => Object.keys(r).reduce((n, s) => {
-      const i = v(r[s]) || !1;
-      if (!i)
+    bemCssClasses: g(() => Object.keys(t).reduce((n, u) => {
+      const l = i(t[u]) || !1;
+      if (!l)
         return n;
-      if (s === "modifiers") {
-        const p = Array.isArray(i) ? i : [i];
+      if (u === "modifiers") {
+        const h = Array.isArray(l) ? l : l.split(" ");
         return {
           ...n,
-          ...p.reduce(
-            (o, g) => ({
-              ...o,
-              [`${t}--${m.kebabCase(
-                g
-              )}`]: !0
+          ...h.reduce(
+            (b, y) => ({
+              ...b,
+              [`${r}--${se(y)}`]: !0
             }),
             {}
           )
@@ -250,15 +122,109 @@ function Z(t, r) {
       } else
         return {
           ...n,
-          [`${t}--${m.kebabCase(s)}`]: i
+          [`${r}--${se(u)}`]: l
         };
     }, e) || {})
   };
 }
-const me = {
-  ...I,
-  ...M,
-  modelValue: [String, Array, Object],
+function T(r) {
+  return Array.isArray(r) ? r.filter((t) => De(t)).join(" ") : r;
+}
+function fe(r, t) {
+  const {
+    error: e,
+    valid: c,
+    hint: n,
+    loading: u
+  } = t, {
+    hintLabel: l,
+    modelValue: h,
+    valid: b,
+    validLabel: y,
+    error: a,
+    errorLabel: o,
+    ...s
+  } = q(r), m = L(s, "loading"), v = L(s, "loadingLabel"), S = g(() => a.value ? !!(a.value && e || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !te(o)) : !1), $ = g(
+    () => !!(l && l.value || n)
+  ), w = g(
+    () => !!(y && y.value || c)
+  ), k = g(
+    () => !!(m != null && m.value && u || m != null && m.value && (v != null && v.value))
+  ), N = g(
+    () => $.value || w || S.value || k.value
+  );
+  return {
+    hasErrors: S,
+    hasHint: $,
+    hasValid: w,
+    hasLoading: k,
+    HintSlot: {
+      name: "HintSlot",
+      props: {
+        params: {
+          type: Object,
+          default: () => ({})
+        }
+      },
+      setup(D) {
+        const P = g(() => {
+          const j = _e({
+            hintLabel: l,
+            modelValue: h,
+            valid: b,
+            validLabel: y,
+            error: a,
+            errorLabel: o,
+            loading: m,
+            loadingLabel: v,
+            ...D.params
+          });
+          return a != null && a.value ? (e == null ? void 0 : e(j)) || T(o == null ? void 0 : o.value) || (l == null ? void 0 : l.value) : b != null && b.value ? (c == null ? void 0 : c(j)) || T(y == null ? void 0 : y.value) || (l == null ? void 0 : l.value) : m != null && m.value ? (u == null ? void 0 : u(j)) || T(v == null ? void 0 : v.value) || (l == null ? void 0 : l.value) : (n == null ? void 0 : n(j)) || T(l == null ? void 0 : l.value) || (l == null ? void 0 : l.value);
+        });
+        return {
+          isVisible: N,
+          hasErrors: S,
+          hasValid: w,
+          hintContent: P
+        };
+      },
+      render() {
+        if (this.isVisible)
+          return be(
+            "small",
+            {
+              role: this.hasErrors || this.hasValid ? "alert" : void 0
+            },
+            this.hintContent
+          );
+      }
+    }
+  };
+}
+const pe = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, ve = {
+  error: Boolean,
+  errorLabel: [String, Array]
+}, me = {
+  loading: Boolean,
+  loadingLabel: String
+}, re = {
+  disabled: Boolean
+}, ye = {
+  readonly: Boolean
+}, ne = {
+  modifiers: [String, Array]
+}, ge = {
+  hintLabel: { type: String, default: "" }
+}, Ke = {
+  ...re,
+  ...ne,
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    required: !0
+  },
   labelNoResult: { type: String, default: "No results" },
   options: {
     type: Array,
@@ -269,179 +235,447 @@ const me = {
   maxValues: [Number, String],
   labelKey: { type: String, default: "label" },
   valueKey: { type: String, default: "value" }
-}, ge = { key: 0 }, he = ["for"], ve = ["id", "type", "value", "checked", "disabled"], be = /* @__PURE__ */ q({
-  __name: "VvDropdown",
-  props: me,
+}, xe = {
+  key: 0,
+  role: "option"
+}, Ee = ["aria-selected"], Re = ["for"], qe = ["id", "type", "value", "checked", "disabled"], Ie = {
+  name: "VvDropdown"
+}, Fe = /* @__PURE__ */ z({
+  ...Ie,
+  props: Ke,
   emits: ["update:modelValue"],
-  setup(t, { emit: r }) {
-    const e = t, u = H(), { modifiers: n, disabled: s } = K(e), { bemCssClasses: i } = Z("vv-dropdown", {
+  setup(r, { emit: t }) {
+    const e = r, c = ee(), { modifiers: n, disabled: u } = q(e), { bemCssClasses: l } = U("vv-dropdown", {
       modifiers: n,
-      disabled: s
+      disabled: u
     });
-    function p(l) {
-      return Array.isArray(e.modelValue) ? m.contains(l, e.modelValue) || m.contains(o(l), e.modelValue) : m.equals(l, e.modelValue) || m.equals(o(l), e.modelValue);
+    function h(s) {
+      return Array.isArray(e.modelValue) ? F(s, e.modelValue) || F(b(s), e.modelValue) : R(s, e.modelValue) || R(b(s), e.modelValue);
+    }
+    function b(s) {
+      return typeof s == "string" ? s : String(s[e.valueKey]);
     }
-    function o(l) {
-      return typeof l == "string" ? l : String(l[e.valueKey]);
+    function y(s) {
+      return typeof s == "string" ? s : s[e.labelKey];
     }
-    function g(l) {
-      return typeof l == "string" ? l : l[e.labelKey];
+    function a(s) {
+      return typeof s == "string" || s.disabled === void 0 ? u.value : s.disabled;
     }
-    function b(l) {
-      var y, V;
-      const h = l.target;
-      let a = h.value;
-      if (a = (e.useObject ? (y = e.options) == null ? void 0 : y.find(
-        (k) => k[e.valueKey] == a
-      ) : null) || a, e.multiple) {
-        if (typeof e.maxValues < "u" && e.maxValues >= 0 && ((V = e.modelValue) == null ? void 0 : V.length) >= e.maxValues && (Array.isArray(e.modelValue) && !m.contains(a, e.modelValue) || e.maxValues == 0)) {
-          h.checked = !1;
+    function o(s) {
+      var $, w;
+      const m = s.target;
+      let v = m.value;
+      if (v = (e.useObject ? ($ = e.options) == null ? void 0 : $.find(
+        (k) => k[e.valueKey] == v
+      ) : null) || v, e.multiple) {
+        if (typeof e.maxValues < "u" && e.maxValues >= 0 && Array.isArray(e.modelValue) && ((w = e.modelValue) == null ? void 0 : w.length) >= e.maxValues && (Array.isArray(e.modelValue) && !F(v, e.modelValue) || e.maxValues == 0)) {
+          m.checked = !1;
           return;
         }
-        Array.isArray(e.modelValue) ? a = m.contains(a, e.modelValue) ? m.removeFromList(a, e.modelValue) : [...e.modelValue, a] : a = [a];
+        Array.isArray(e.modelValue) ? v = F(v, e.modelValue) ? Ne(v, e.modelValue) : [...e.modelValue, v] : v = [v];
       }
-      r("update:modelValue", a);
+      t("update:modelValue", v);
     }
-    return (l, h) => {
-      var a;
-      return j(), C("ul", {
-        class: F(v(i)),
+    return (s, m) => {
+      var v;
+      return V(), _("ul", {
+        class: W(i(l)),
         role: "listbox"
       }, [
-        (a = l.options) != null && a.length ? x("", !0) : (j(), C("li", ge, [
-          B("label", null, N(l.labelNoResult), 1)
+        (v = s.options) != null && v.length ? C("", !0) : (V(), _("li", xe, [
+          O("label", null, B(s.labelNoResult), 1)
         ])),
-        (j(!0), C(R, null, X(l.options, (d, y) => {
-          var V;
-          return j(), C("li", { key: y }, [
-            B("label", {
-              for: `dropdown-${y}-${v(u)}`
-            }, [
-              B("input", {
-                id: `dropdown-${y}-${v(u)}`,
-                type: l.multiple ? "checkbox" : "radio",
-                value: o(d),
-                checked: p(d),
-                disabled: typeof d == "object" ? (V = d.disabled) != null ? V : v(s) : v(s),
-                onInput: b
-              }, null, 40, ve),
-              T(" " + N(g(d)), 1)
-            ], 8, he)
-          ]);
-        }), 128))
+        (V(!0), _(Y, null, ie(s.options, (S, $) => (V(), _("li", {
+          key: $,
+          role: "option",
+          "aria-selected": h(S)
+        }, [
+          O("label", {
+            for: `dropdown-${$}-${i(c)}`
+          }, [
+            O("input", {
+              id: `dropdown-${$}-${i(c)}`,
+              type: s.multiple ? "checkbox" : "radio",
+              value: b(S),
+              checked: h(S),
+              disabled: a(S),
+              tabindex: "-1",
+              "aria-hidden": "true",
+              onInput: o
+            }, null, 40, qe),
+            ue(" " + B(y(S)), 1)
+          ], 8, Re)
+        ], 8, Ee))), 128))
       ], 2);
     };
   }
-}), Ve = ["id"], Ae = {
+}), Te = "ds", Me = {
+  color: String,
+  width: {
+    type: [String, Number]
+  },
+  height: {
+    type: [String, Number]
+  },
+  name: {
+    type: String,
+    required: !0
+  },
+  provider: {
+    type: String
+  },
+  prefix: {
+    type: String,
+    default: "normal"
+  },
+  src: String,
+  horizontalFlip: Boolean,
+  verticalFlip: Boolean,
+  flip: String,
+  mode: String,
+  inline: Boolean,
+  rotate: [Number, String],
+  onLoad: Function,
+  svg: String,
+  modifiers: {
+    type: [String, Array]
+  }
+}, He = {
+  name: "VvIcon"
+}, ae = /* @__PURE__ */ z({
+  ...He,
+  props: Me,
+  setup(r) {
+    const t = r, e = E(!0), { modifiers: c } = q(t), n = he(Te), { bemCssClasses: u } = U("vv-icon", {
+      modifiers: c
+    }), l = g(() => t.provider || (n == null ? void 0 : n.provider)), h = g(() => {
+      const a = t.name || "", o = `@${l.value}:${t.prefix}:${t.name}`;
+      return I(a) ? a : I(o) ? o : (n == null ? void 0 : n.iconsCollections.find((s) => {
+        const m = `@${l.value}:${s.prefix}:${a}`;
+        if (I(m))
+          return m;
+      })) || a;
+    });
+    function b(a) {
+      let o = null;
+      if (typeof window > "u") {
+        const { JSDOM: S } = require("jsdom");
+        o = new S().window;
+      }
+      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(a, "text/html").querySelector("svg");
+    }
+    function y(a) {
+      const o = b(a), s = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && s && Oe(`@${l.value}:${t.prefix}:${t.name}`, {
+        body: s,
+        height: o.viewBox.baseVal.height,
+        width: o.viewBox.baseVal.width
+      });
+    }
+    return n && (t.src && !I(`@${l.value}:${t.prefix}:${t.name}`) ? (e.value = !1, n.fetchIcon(t.src).then((a) => {
+      a && (y(a), e.value = !0);
+    }).catch((a) => {
+      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
+    })) : t.svg && y(t.svg)), (a, o) => e.value ? (V(), M(i(Ce), H({
+      key: 0,
+      class: i(u)
+    }, {
+      ...a.$props,
+      provider: i(l),
+      icon: i(h)
+    }), null, 16, ["class"])) : C("", !0);
+  }
+}), Le = {
+  ...pe,
+  ...ve,
+  ...ge,
+  ...me,
+  ...re,
+  ...ye,
+  ...ne,
+  id: [String, Number],
+  name: { type: String, required: !0 },
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  label: String,
+  required: Boolean,
+  placeholder: String,
+  options: {
+    type: Array,
+    required: !0
+  },
+  useObject: Boolean,
+  labelKey: { type: String, default: "label" },
+  valueKey: { type: String, default: "value" },
+  iconLeft: String,
+  iconRight: String,
+  modifiers: [String, Array],
+  tabindex: { type: [String, Number], default: 0 }
+}, ze = ["update:modelValue"], Ue = ["for"], Ze = { class: "vv-select__wrapper" }, Je = ["id", "disabled", "required"], Xe = {
   key: 0,
-  for: "select"
-}, Se = ["placeholder"], ke = /* @__PURE__ */ q({
-  __name: "VvSelect",
-  props: pe,
+  value: void 0,
+  disabled: ""
+}, Ge = ["disabled", "value"], Qe = {
+  name: "VvNativeSelect"
+}, We = /* @__PURE__ */ z({
+  ...Qe,
+  props: Le,
+  emits: ze,
+  setup(r, { emit: t }) {
+    const e = r, c = de(), { HintSlot: n, hasHint: u, hasErrors: l } = fe(e, c), {
+      modifiers: h,
+      disabled: b,
+      readonly: y,
+      loading: a,
+      iconLeft: o,
+      iconRight: s,
+      error: m,
+      valid: v
+    } = q(e), S = g(() => String(e.id || ee())), $ = g(() => `${S.value}-hint`), w = g(() => !te(e.modelValue)), k = g(() => e.disabled || e.readonly), N = g(() => k.value ? -1 : e.tabindex), D = g(() => {
+      if (e.error === !0)
+        return !0;
+      if (e.valid === !0)
+        return !1;
+    }), { bemCssClasses: P } = U("vv-select", {
+      modifiers: h,
+      loading: a,
+      readonly: y,
+      iconLeft: o,
+      iconRight: s,
+      valid: v,
+      invalid: m,
+      dirty: w
+    }), j = g(() => ({
+      name: e.name,
+      tabindex: N.value,
+      "aria-invalid": D.value,
+      "aria-describedby": !l.value && u.value ? $.value : void 0,
+      "aria-errormessage": l.value ? $.value : void 0
+    }));
+    function Z(p) {
+      return typeof p == "string" ? p : p[e.valueKey];
+    }
+    function J(p) {
+      return typeof p == "string" ? p : p[e.labelKey];
+    }
+    function X(p) {
+      return typeof p == "string" || p.disabled === void 0 ? b.value : p.disabled;
+    }
+    const K = g({
+      get: () => {
+        var p;
+        return typeof e.modelValue == "object" ? (p = e.modelValue) == null ? void 0 : p[e.valueKey] : e.modelValue;
+      },
+      set: (p) => {
+        var d;
+        const f = e.useObject ? (d = e.options) == null ? void 0 : d.find(
+          (A) => A[e.valueKey] === p
+        ) : void 0;
+        t("update:modelValue", f ?? p);
+      }
+    });
+    return (p, f) => (V(), _("div", {
+      class: W(i(P))
+    }, [
+      p.label ? (V(), _("label", {
+        key: 0,
+        for: i(S)
+      }, B(p.label), 9, Ue)) : C("", !0),
+      O("div", Ze, [
+        le(p.$slots, "icon-left", {}, () => [
+          i(o) ? (V(), M(ae, {
+            key: 0,
+            name: i(o)
+          }, null, 8, ["name"])) : C("", !0)
+        ]),
+        ce(O("select", H({
+          id: i(S),
+          "onUpdate:modelValue": f[0] || (f[0] = (d) => Se(K) ? K.value = d : null)
+        }, i(j), {
+          disabled: i(k),
+          required: p.required
+        }), [
+          p.placeholder ? (V(), _("option", Xe, B(p.placeholder), 1)) : C("", !0),
+          (V(!0), _(Y, null, ie(p.options, (d, A) => (V(), _("option", {
+            key: A,
+            disabled: X(d),
+            value: Z(d)
+          }, B(J(d)), 9, Ge))), 128))
+        ], 16, Je), [
+          [Ve, i(K)]
+        ]),
+        le(p.$slots, "icon-right", {}, () => [
+          i(s) ? (V(), M(ae, {
+            key: 0,
+            name: i(s)
+          }, null, 8, ["name"])) : C("", !0)
+        ])
+      ]),
+      G(i(n), {
+        id: i($),
+        class: "vv-select__hint"
+      }, null, 8, ["id"])
+    ], 2));
+  }
+}), Ye = {
+  ...pe,
+  ...ve,
+  ...ge,
+  ...me,
+  ...re,
+  ...ye,
+  ...ne,
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  label: String,
+  labelNoResult: { type: String, default: "No results" },
+  placeholder: String,
+  searchable: Boolean,
+  searchPlaceholder: String,
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
+  },
+  options: {
+    type: Array,
+    required: !0
+  },
+  useObject: Boolean,
+  multiple: Boolean,
+  maxValues: [Number, String],
+  separator: { type: String, default: ", " },
+  labelKey: { type: String, default: "label" },
+  valueKey: { type: String, default: "value" },
+  iconLeft: String,
+  iconRight: String,
+  native: Boolean,
+  tabindex: {
+    type: [Number, String],
+    default: 0
+  }
+}, et = ["id"], tt = ["id", "for"], rt = ["tabindex"], nt = ["id", "placeholder"], lt = {
+  name: "VvSelect"
+}, ut = /* @__PURE__ */ z({
+  ...lt,
+  props: Ye,
   emits: ["update:modelValue", "change:search"],
-  setup(t, { emit: r }) {
-    const e = t, u = Y(), n = ye(e, u), s = E(), i = E();
-    le(i, { initialValue: !0 });
-    const p = H(), o = E(""), g = oe(
-      o,
+  setup(r, { emit: t }) {
+    const e = r, c = de(), { HintSlot: n } = fe(e, c), u = E(), l = E();
+    we(l, { initialValue: !0 });
+    const h = ee(), b = E(""), y = ke(
+      b,
       Number(e.debounceSearch)
-    ), b = E(!1), {
-      modifiers: l,
-      disabled: h,
-      readonly: a,
-      loading: d,
-      iconLeft: y,
-      iconRight: V,
-      valid: k,
-      error: _
-    } = K(e);
-    ee(
-      g,
-      () => r("change:search", g.value)
+    ), a = E(!1), {
+      modifiers: o,
+      disabled: s,
+      readonly: m,
+      loading: v,
+      iconLeft: S,
+      iconRight: $,
+      valid: w,
+      error: k
+    } = q(e);
+    $e(
+      y,
+      () => t("change:search", y.value)
     );
-    const { bemCssClasses: O } = Z("vv-select", {
-      modifiers: l,
-      disabled: h,
-      loading: d,
-      readonly: a,
-      iconLeft: y,
-      iconRight: V,
-      valid: k,
-      invalid: _,
-      dirty: S(() => m.isNotEmpty(e.modelValue))
-    }), z = S(
+    const N = g(() => !te(e.modelValue)), D = g(() => s.value || m.value ? -1 : e.tabindex), { bemCssClasses: P } = U("vv-select", {
+      modifiers: o,
+      disabled: s,
+      loading: v,
+      readonly: m,
+      iconLeft: S,
+      iconRight: $,
+      valid: w,
+      invalid: k,
+      dirty: N
+    }), j = g(
       () => {
-        var c;
-        return (c = e.options) == null ? void 0 : c.every((f) => typeof f == "object");
+        var f;
+        return (f = e.options) == null ? void 0 : f.every((d) => typeof d == "object");
       }
-    ), U = S(
-      () => e.searchable ? L.value : e.options
-    ), L = S(() => {
-      var c;
-      return (c = e.options) == null ? void 0 : c.filter((f) => typeof f == "string" ? f.toLowerCase().includes(g.value.toLowerCase().trim()) : f[e.labelKey].toLowerCase().includes(g.value.toLowerCase().trim()));
-    }), G = S(() => {
-      var f, A;
-      if (e.multiple && ((f = e.modelValue) == null ? void 0 : f.length) && Array.isArray(e.modelValue))
-        return z.value ? m.filterArray(
+    ), Z = g(
+      () => e.searchable ? J.value : e.options
+    ), J = g(() => {
+      var f;
+      return (f = e.options) == null ? void 0 : f.filter((d) => typeof d == "string" ? d.toLowerCase().includes(y.value.toLowerCase().trim()) : typeof d[e.labelKey] == "string" ? d[e.labelKey].toLowerCase().includes(y.value.toLowerCase().trim()) : !1);
+    }), X = g(() => {
+      var d, A;
+      if (e.multiple && Array.isArray(e.modelValue) && ((d = e.modelValue) != null && d.length))
+        return j.value ? Pe(
           e.options,
           e.modelValue,
           e.valueKey
-        ).map((w) => w[e.labelKey]).join(e.separator) : e.modelValue.join(e.separator);
-      const c = e.useObject ? e.modelValue : (A = e.options) == null ? void 0 : A.find(
-        (w) => typeof w == "object" ? w[e.valueKey] == e.modelValue : w == e.modelValue
+        ).map((x) => x[e.labelKey]).join(e.separator) : e.modelValue.join(e.separator);
+      const f = e.useObject ? e.modelValue : (A = e.options) == null ? void 0 : A.find(
+        (x) => typeof x == "object" ? x[e.valueKey] == e.modelValue : x == e.modelValue
       );
-      return typeof c == "object" ? c == null ? void 0 : c[e.labelKey] : c;
+      return typeof f == "object" ? f == null ? void 0 : f[e.labelKey] : f;
     });
-    ae(s, () => {
-      s.value.open = !1;
+    je(u, () => {
+      u.value.open = !1;
     });
-    function J(c) {
-      const f = c.target;
-      b.value = f.open;
+    function K(f) {
+      const d = f.target;
+      a.value = d.open;
     }
-    function Q(c) {
-      s.value && !e.multiple && (s.value.open = !1), r("update:modelValue", c);
+    function p(f) {
+      u.value && !e.multiple && (u.value.open = !1), t("update:modelValue", f);
     }
-    return (c, f) => (j(), C("div", {
-      id: v(p),
-      class: F(v(O))
+    return (f, d) => f.native ? (V(), M(We, H({ key: 1 }, e, {
+      "onUpdate:modelValue": d[4] || (d[4] = (A) => t("update:modelValue", A))
+    }), null, 16)) : (V(), _("div", {
+      key: 0,
+      id: i(h),
+      class: W(i(P))
     }, [
-      c.label ? (j(), C("label", Ae, N(c.label), 1)) : x("", !0),
-      B("details", {
+      f.label ? (V(), _("label", {
+        key: 0,
+        id: `${i(h)}-label`,
+        for: f.searchable && a.value ? `${i(h)}-input` : void 0
+      }, B(f.label), 9, tt)) : C("", !0),
+      O("details", {
         ref_key: "dropdown",
-        ref: s,
-        role: "list",
+        ref: u,
         class: "vv-select__wrapper",
-        onClick: f[2] || (f[2] = (A) => v(h) || v(a) ? A.preventDefault() : null),
-        onKeyup: f[3] || (f[3] = P((A) => s.value.open = !1, ["esc"])),
-        onToggle: J
+        onClick: d[2] || (d[2] = (A) => i(s) || i(m) ? A.preventDefault() : null),
+        onKeyup: d[3] || (d[3] = oe((A) => u.value.open = !1, ["esc"])),
+        onToggle: K
       }, [
-        B("summary", {
+        O("summary", {
           class: "vv-select__input",
-          "aria-haspopup": "listbox",
-          onKeyup: f[1] || (f[1] = P((A) => c.searchable ? A.preventDefault() : null, ["space"]))
+          tabindex: i(D),
+          onKeyup: d[1] || (d[1] = oe((A) => f.searchable ? A.preventDefault() : null, ["space"]))
         }, [
-          c.searchable && b.value ? te((j(), C("input", {
+          f.searchable && a.value ? ce((V(), _("input", {
             key: 0,
+            id: `${i(h)}-input`,
             ref_key: "inputSearch",
-            ref: i,
-            "onUpdate:modelValue": f[0] || (f[0] = (A) => o.value = A),
-            placeholder: c.searchPlaceholder
-          }, null, 8, Se)), [
-            [re, o.value]
-          ]) : (j(), C(R, { key: 1 }, [
-            T(N(v(G) || c.placeholder), 1)
+            ref: l,
+            "onUpdate:modelValue": d[0] || (d[0] = (A) => b.value = A),
+            role: "combobox",
+            placeholder: f.searchPlaceholder
+          }, null, 8, nt)), [
+            [Ae, b.value]
+          ]) : (V(), _(Y, { key: 1 }, [
+            ue(B(i(X) || f.placeholder), 1)
           ], 64))
-        ], 32),
-        $(be, ne({
+        ], 40, rt),
+        G(Fe, H({
+          id: `${i(h)}-dropdown`
+        }, {
           ...e,
-          options: v(U)
-        }, { "onUpdate:modelValue": Q }), null, 16)
+          options: i(Z)
+        }, { "onUpdate:modelValue": p }), null, 16, ["id"])
       ], 544),
-      $(v(n), { class: "vv-select__hint" })
-    ], 10, Ve));
+      G(i(n), { class: "vv-select__hint" })
+    ], 10, et));
   }
 });
 export {
-  ke as default
+  ut as default
 };