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

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

@@ -1,121 +1,226 @@
-import { defineComponent as U, unref as l, openBlock as g, createBlock as k, mergeProps as N, createCommentVNode as F, createElementBlock as w, normalizeClass as te, toDisplayString as R, createElementVNode as j, renderSlot as q, normalizeProps as T, withDirectives as oe, isRef as ne, Fragment as re, renderList as ie, vModelSelect as se, createVNode as le } from "vue";
-import { nanoid as ae } from "nanoid";
-import { iconExists as O, Icon as ue, addIcon as ce } from "@iconify/vue";
-const de = "ds", pe = {
+import { inject as ye, computed as u, unref as c, defineComponent as T, ref as x, toRefs as C, openBlock as b, createBlock as M, mergeProps as N, createCommentVNode as B, h as be, watch as ee, useSlots as me, createElementBlock as S, normalizeClass as he, toDisplayString as q, createElementVNode as H, renderSlot as Y, normalizeProps as G, guardReactiveProps as Q, withDirectives as Se, isRef as Be, Fragment as _e, renderList as Oe, vModelSelect as Ie, createVNode as Ve } from "vue";
+import { iconExists as D, Icon as je, addIcon as $e } from "@iconify/vue";
+import { toReactive as Pe, useFocus as we, useElementVisibility as Ae } from "@vueuse/core";
+import { nanoid as Fe } from "nanoid";
+const ke = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, ve = {
+};
+var _ = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(_ || {}), te = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(te || {}), P = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(P || {}), K = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(K || {}), re = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(re || {});
+const De = Symbol.for("volver");
+function Ee() {
+  return ye(De);
+}
+function oe(e, t, r) {
+  return u(() => {
+    const n = {
+      [e]: !0
+    }, i = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
+    return i && Array.isArray(i) && i.forEach((d) => {
+      n[`${e}--${d}`] = !0;
+    }), r && Object.keys(r.value).forEach((d) => {
+      n[`${e}--${d}`] = c(r.value[d]);
+    }), n;
+  });
+}
+const Ne = {
   name: "VvIcon"
-}, G = /* @__PURE__ */ U({
-  ...ve,
-  props: pe,
-  setup(c) {
-    const r = c, o = ref(!0), { modifiers: v } = toRefs(r), s = inject(de), { bemCssClasses: f } = useBemModifiers("vv-icon", {
-      modifiers: v
-    }), n = computed(() => r.provider || (s == null ? void 0 : s.provider)), b = computed(() => {
-      const e = r.name ?? "", t = `@${n.value}:${r.prefix}:${r.name}`;
-      return O(e) ? e : O(t) ? t : (s == null ? void 0 : s.iconsCollections.find((d) => {
-        const a = `@${n.value}:${d.prefix}:${e}`;
-        if (O(a))
-          return a;
-      })) || e;
+}, X = /* @__PURE__ */ T({
+  ...Ne,
+  props: ke,
+  setup(e) {
+    const t = e, r = x(!0), n = Ee(), { modifiers: i } = C(t), d = oe("vv-icon", i), a = u(() => t.provider || (n == null ? void 0 : n.provider)), m = u(() => {
+      const o = t.name ?? "", l = `@${a.value}:${t.prefix}:${t.name}`;
+      return D(o) ? o : D(l) ? l : (n == null ? void 0 : n.iconsCollections.find(
+        (g) => {
+          const v = `@${a.value}:${g.prefix}:${o}`;
+          if (D(v))
+            return v;
+        }
+      )) || o;
     });
-    function m(e) {
-      let t = null;
+    function s(o) {
+      let l = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        t = new y().window;
+        const { JSDOM: h } = require("jsdom");
+        l = new h().window;
       }
-      return (t ? new t.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
     }
-    function u(e) {
-      const t = m(e), d = (t == null ? void 0 : t.innerHTML.trim()) || "";
-      t && d && ce(`@${n.value}:${r.prefix}:${r.name}`, {
-        body: d,
-        height: t.viewBox.baseVal.height,
-        width: t.viewBox.baseVal.width
+    function p(o) {
+      const l = s(o), g = (l == null ? void 0 : l.innerHTML.trim()) || "";
+      l && g && $e(`@${a.value}:${t.prefix}:${t.name}`, {
+        body: g,
+        // Set height and width from svg content
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
       });
     }
-    return s && (r.src && !O(`@${n.value}:${r.prefix}:${r.name}`) ? (o.value = !1, s.fetchIcon(r.src).then((e) => {
-      e && (u(e), o.value = !0);
-    }).catch((e) => {
-      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
-    })) : r.svg && u(r.svg)), (e, t) => l(o) ? (g(), k(l(ue), N({
+    return n && (t.src && !D(`@${a.value}:${t.prefix}:${t.name}`) ? (r.value = !1, n.fetchIcon(t.src).then((o) => {
+      o && (p(o), r.value = !0);
+    }).catch((o) => {
+      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
+    })) : t.svg && p(t.svg)), (o, l) => c(r) ? (b(), M(c(je), N({
       key: 0,
-      class: l(f)
+      class: c(d)
     }, {
-      inline: e.inline,
-      width: e.width,
-      height: e.height,
-      horizontalFlip: e.horizontalFlip,
-      verticalFlip: e.verticalFlip,
-      flip: e.flip,
-      rotate: e.rotate,
-      color: e.color,
-      onLoad: e.onLoad,
-      icon: l(b)
-    }), null, 16, ["class"])) : F("", !0);
+      inline: o.inline,
+      width: o.width,
+      height: o.height,
+      horizontalFlip: o.horizontalFlip,
+      verticalFlip: o.verticalFlip,
+      flip: o.flip,
+      rotate: o.rotate,
+      color: o.color,
+      onLoad: o.onLoad,
+      icon: c(m)
+    }), null, 16, ["class"])) : B("", !0);
   }
 });
-function C(c) {
-  return Array.isArray(c) ? c.filter((r) => isString(r)).join(" ") : c;
+function Z(e, t) {
+  if (e && Object.keys(e).length && t) {
+    if (t.indexOf(".") === -1)
+      return e[t];
+    {
+      const r = t.split(".");
+      let n = e;
+      for (let i = 0, d = r.length; i < d; ++i) {
+        if (e == null)
+          return null;
+        n = n[r[i]];
+      }
+      return n;
+    }
+  } else
+    return null;
+}
+function ne(e) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(c(e));
+}
+function Ce(e) {
+  return typeof e == "string" || e instanceof String;
 }
-function fe(c, r) {
+function E(e) {
+  return Array.isArray(e) ? e.filter((t) => Ce(t)).join(" ") : e;
+}
+function ze(e, t) {
   const {
+    invalid: r,
+    valid: n,
+    hint: i,
+    loading: d
+  } = t, {
+    hintLabel: a,
+    modelValue: m,
+    valid: s,
+    validLabel: p,
     invalid: o,
-    valid: v,
-    hint: s,
-    loading: f
-  } = r, {
-    hintLabel: n,
-    modelValue: b,
-    valid: m,
-    validLabel: u,
-    invalid: e,
-    invalidLabel: t,
-    ...d
-  } = toRefs(c), a = resolveFieldData(d, "loading"), p = resolveFieldData(d, "loadingLabel"), y = computed(() => e.value ? !!(e.value && o || t != null && t.value && Array.isArray(t.value) && t.value.length > 0 || t != null && t.value && !isEmpty(t)) : !1), $ = computed(
-    () => !!(n && n.value || s)
-  ), V = computed(
-    () => !!(u && u.value || v)
-  ), P = computed(
-    () => !!(a != null && a.value && f || a != null && a.value && (p != null && p.value))
-  ), I = computed(
-    () => $.value || V.value || y.value || P.value
+    invalidLabel: l,
+    ...g
+  } = C(e), v = Z(g, "loading"), y = Z(g, "loadingLabel"), h = u(() => o.value ? !!(o.value && r || l != null && l.value && Array.isArray(l.value) && l.value.length > 0 || l != null && l.value && !ne(l)) : !1), w = u(
+    () => !!(a && a.value || i)
+  ), I = u(
+    () => !!(p && p.value || n)
+  ), A = u(
+    () => !!(v != null && v.value && d || v != null && v.value && (y != null && y.value))
+  ), V = u(
+    () => w.value || I.value || h.value || A.value
   );
   return {
-    hasInvalid: y,
-    hasHint: $,
-    hasValid: V,
-    hasLoading: P,
+    hasInvalid: h,
+    hasHint: w,
+    hasValid: I,
+    hasLoading: A,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -124,34 +229,34 @@ function fe(c, r) {
           default: () => ({})
         }
       },
-      setup(A) {
-        const _ = computed(() => {
-          const S = toReactive({
-            hintLabel: n,
-            modelValue: b,
-            valid: m,
-            validLabel: u,
-            invalid: e,
-            invalidLabel: t,
-            loading: a,
-            loadingLabel: p,
-            ...A.params
+      setup(j) {
+        const F = u(() => {
+          const O = Pe({
+            hintLabel: a,
+            modelValue: m,
+            valid: s,
+            validLabel: p,
+            invalid: o,
+            invalidLabel: l,
+            loading: v,
+            loadingLabel: y,
+            ...j.params
           });
-          return e != null && e.value ? (o == null ? void 0 : o(S)) || C(t == null ? void 0 : t.value) || (n == null ? void 0 : n.value) : m != null && m.value ? (v == null ? void 0 : v(S)) || C(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : a != null && a.value ? (f == null ? void 0 : f(S)) || C(p == null ? void 0 : p.value) || (n == null ? void 0 : n.value) : (s == null ? void 0 : s(S)) || C(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
+          return o != null && o.value ? (r == null ? void 0 : r(O)) || E(l == null ? void 0 : l.value) || (a == null ? void 0 : a.value) : s != null && s.value ? (n == null ? void 0 : n(O)) || E(p == null ? void 0 : p.value) || (a == null ? void 0 : a.value) : v != null && v.value ? (d == null ? void 0 : d(O)) || E(y == null ? void 0 : y.value) || (a == null ? void 0 : a.value) : (i == null ? void 0 : i(O)) || E(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
         });
         return {
-          isVisible: I,
-          hasInvalid: y,
-          hasValid: V,
-          hintContent: _
+          isVisible: V,
+          hasInvalid: h,
+          hasValid: I,
+          hintContent: F
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return be(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -159,184 +264,399 @@ function fe(c, r) {
     }
   };
 }
-const me = {
+const qe = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (e) => Object.values(re).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, He = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, ge = {
+}, Me = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, he = {
+}, Ke = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, ye = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, le = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, Se = {
+}, Re = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Le = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, ae = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, Ue = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, be = {
+}, Je = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Pe = {
+}, We = {
   hintLabel: { type: String, default: "" }
-}, Ve = {
+}, Ye = {
+  /**
+   * List of options, can be string[] or object[]
+   */
   options: {
     type: Array,
     default: () => []
   },
+  /**
+   * Used when options are objects: key to use for option label
+   */
   labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, K = {
-  LEFT: "left",
-  RIGHT: "right"
-}, Ie = {
+  /**
+   * Used when options are objects: key to use for option label
+   */
+  valueKey: { type: [String, Function], default: "value" },
+  /**
+   * Used when options are objects: key to use for option disabled
+   */
+  disabledKey: { type: [String, Function], default: "disabled" }
+}, Ge = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (c) => Object.values(K).includes(c),
-    default: K.RIGHT
+    default: P.before,
+    validation: (e) => Object.values(P).includes(e)
   }
-}, Be = {
+}, Qe = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, we = {
+}, Xe = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Fe = {
+}, Ze = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, $e = {
-  id: [String, Number],
+}, Te = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+_.bottom;
+const xe = {
+  ...Te,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
   name: { type: String, required: !0 }
-}, Ae = {
+}, et = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, De = {
+}, tt = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Oe = {
-  ...$e,
-  ...Ae,
-  ...De,
-  ...Be,
-  ...me,
-  ...ge,
-  ...Pe,
-  ...he,
-  ...ye,
-  ...Se,
-  ...be,
-  ...Ve,
-  ...Ie,
-  ...we,
-  ...Fe,
+};
+({
+  ...le,
+  ...ae,
+  ...Le,
+  ...Re,
+  ...qe,
+  /**
+   * Button type
+   */
+  type: K.button
+});
+const rt = {
+  ...xe,
+  ...et,
+  ...tt,
+  ...Qe,
+  ...He,
+  ...Me,
+  ...We,
+  ...Ke,
+  ...le,
+  ...Ue,
+  ...Je,
+  ...Ye,
+  ...Ge,
+  ...Xe,
+  ...Ze,
+  ...ae,
+  /**
+   * This Boolean attribute indicates that multiple options can be selected in the list.
+   * If it is not specified, then only one option can be selected at a time.
+   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+   */
   multiple: Boolean,
+  /**
+   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+   */
   required: Boolean,
+  /**
+   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+   * this attribute represents the number of rows in the list that should be visible at one time.
+   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+   */
   size: [String, Number],
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  label: String,
+  /**
+   * Select placeholder
+   */
   placeholder: String
-}, Ce = ["update:modelValue", "focus", "blur"], Ne = ["for"], _e = { class: "vv-select__wrapper" }, Ee = ["id"], Re = ["disabled", "hidden"], ke = ["disabled", "value"], He = {
+}, ot = ["update:modelValue", "focus", "blur"], nt = (e) => u(() => String((e == null ? void 0 : e.value) || Fe()));
+function lt(e, t) {
+  const { focused: r } = we(e);
+  return ee(r, (n) => {
+    t(n ? "focus" : "blur", c(e));
+  }), {
+    focused: r
+  };
+}
+function at(e, t) {
+  const r = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === P.before)
+  ), n = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === P.after)
+  ), i = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === _.left)
+  ), d = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === _.right)
+  ), a = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === _.top)
+  ), m = u(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === _.bottom)
+  );
+  return {
+    hasIcon: u(() => typeof (e == null ? void 0 : e.value) == "string" ? { name: e == null ? void 0 : e.value } : e == null ? void 0 : e.value),
+    hasIconLeft: i,
+    hasIconRight: d,
+    hasIconTop: a,
+    hasIconBottom: m,
+    hasIconBefore: r,
+    hasIconAfter: n
+  };
+}
+function st(e) {
+  const { options: t, labelKey: r, valueKey: n, disabledKey: i } = C(e);
+  return {
+    options: t,
+    getOptionLabel: (s) => typeof s != "object" && s !== null ? s : typeof r.value == "function" ? r.value(s) : s[r.value],
+    getOptionValue: (s) => typeof s != "object" && s !== null ? s : typeof n.value == "function" ? n.value(s) : s[n.value],
+    getOptionDisabled: (s) => typeof s != "object" && s !== null ? !1 : typeof i.value == "function" ? i.value(s) : s[i.value]
+  };
+}
+const ut = ["for"], it = { class: "vv-select__wrapper" }, ct = {
+  key: 0,
+  class: "vv-select__input-before"
+}, dt = { class: "vv-select__inner" }, ft = ["id"], vt = ["disabled", "hidden"], pt = ["disabled", "value"], gt = {
+  key: 1,
+  class: "vv-select__input-after"
+}, yt = {
   name: "VvSelect"
-}, qe = /* @__PURE__ */ U({
-  ...He,
-  props: Oe,
-  emits: Ce,
-  setup(c, { emit: r }) {
-    const o = c, v = useSlots(), s = ref(), { HintSlot: f, hasHint: n, hasInvalid: b } = fe(o, v), {
-      modifiers: m,
-      disabled: u,
-      readonly: e,
-      loading: t,
-      icon: d,
-      iconPosition: a,
-      invalid: p,
-      valid: y,
-      floating: $,
-      multiple: V
-    } = toRefs(o), P = computed(() => String(o.id || ae())), I = computed(() => `${P.value}-hint`), { focused: A } = useComponentFocus(s, r), _ = useElementVisibility(s);
-    watch(_, (i) => {
-      i && o.autofocus && (A.value = !0);
+}, Bt = /* @__PURE__ */ T({
+  ...yt,
+  props: rt,
+  emits: ot,
+  setup(e, { emit: t }) {
+    const r = e, n = me(), i = x(), { HintSlot: d, hasHint: a, hasInvalid: m } = ze(r, n), {
+      id: s,
+      modifiers: p,
+      disabled: o,
+      readonly: l,
+      loading: g,
+      icon: v,
+      iconPosition: y,
+      invalid: h,
+      valid: w,
+      floating: I,
+      multiple: A
+    } = C(r), V = nt(s), j = u(() => `${V.value}-hint`), { focused: F } = lt(i, t), O = Ae(i);
+    ee(O, (f) => {
+      f && r.autofocus && (F.value = !0);
     });
-    const { hasIcon: S, hasIconLeft: H, hasIconRight: M } = useComponentIcon(
-      d,
-      a
-    ), J = computed(() => !isEmpty(o.modelValue)), z = computed(() => o.disabled || o.readonly), X = computed(() => z.value ? -1 : o.tabindex), L = computed(() => {
-      if (o.invalid === !0)
+    const { hasIcon: R, hasIconBefore: L, hasIconAfter: U } = at(
+      v,
+      y
+    ), se = u(() => !ne(r.modelValue)), J = u(() => r.disabled || r.readonly), ue = u(() => J.value ? -1 : r.tabindex), ie = u(() => {
+      if (r.invalid === !0)
         return !0;
-      if (o.valid === !0)
+      if (r.valid === !0)
         return !1;
-    }), { bemCssClasses: Q } = useBemModifiers("vv-select", {
-      modifiers: m,
-      valid: y,
-      invalid: p,
-      loading: t,
-      disabled: u,
-      readonly: e,
-      iconLeft: H,
-      iconRight: M,
-      dirty: J,
-      focus: A,
-      floating: $,
-      multiple: V
-    }), W = computed(() => ({
-      name: o.name,
-      tabindex: X.value,
-      disabled: z.value,
-      required: o.required,
-      size: o.size,
-      autocomplete: o.autocomplete,
-      multiple: o.multiple,
-      "aria-invalid": L.value,
-      "aria-describedby": !b.value && n.value ? I.value : void 0,
-      "aria-errormessage": b.value ? I.value : void 0
-    })), { getOptionLabel: Y, getOptionValue: Z } = useOptions(o);
-    function x(i) {
-      return typeof i == "string" || i.disabled === void 0 ? u.value : i.disabled;
-    }
-    const E = computed({
-      get: () => o.modelValue,
-      set: (i) => {
-        Array.isArray(i) && (i = i.filter((D) => D !== void 0)), r("update:modelValue", i);
+    }), ce = oe(
+      "vv-select",
+      p,
+      u(() => ({
+        valid: w.value,
+        invalid: h.value,
+        loading: g.value,
+        disabled: o.value,
+        readonly: l.value,
+        "icon-before": L.value,
+        "icon-after": U.value,
+        dirty: se.value,
+        focus: F.value,
+        floating: I.value,
+        multiple: A.value
+      }))
+    ), de = u(() => ({
+      name: r.name,
+      tabindex: ue.value,
+      disabled: J.value,
+      required: r.required,
+      size: r.size,
+      autocomplete: r.autocomplete,
+      multiple: r.multiple,
+      "aria-invalid": ie.value,
+      "aria-describedby": !m.value && a.value ? j.value : void 0,
+      "aria-errormessage": m.value ? j.value : void 0
+    })), W = u(() => ({
+      valid: r.valid,
+      invalid: r.invalid,
+      modelValue: r.modelValue
+    })), { getOptionLabel: fe, getOptionValue: ve, getOptionDisabled: pe } = st(r), z = u({
+      get: () => r.modelValue,
+      set: (f) => {
+        Array.isArray(f) && (f = f.filter((k) => k !== void 0)), t("update:modelValue", f);
       }
     });
-    return (i, D) => (g(), w("div", {
-      class: te(l(Q))
+    return (f, k) => (b(), S("div", {
+      class: he(c(ce))
     }, [
-      i.label ? (g(), w("label", {
+      f.label ? (b(), S("label", {
         key: 0,
-        for: l(P)
-      }, R(i.label), 9, Ne)) : F("", !0),
-      j("div", _e, [
-        q(i.$slots, "before", {}, () => [
-          l(H) ? (g(), k(G, T(N({ key: 0 }, l(S))), null, 16)) : F("", !0)
-        ]),
-        oe(j("select", N({
-          id: l(P),
-          ref_key: "select",
-          ref: s,
-          "onUpdate:modelValue": D[0] || (D[0] = (B) => ne(E) ? E.value = B : null)
-        }, l(W)), [
-          i.placeholder ? (g(), w("option", {
+        for: c(V)
+      }, q(f.label), 9, ut)) : B("", !0),
+      H("div", it, [
+        f.$slots.before ? (b(), S("div", ct, [
+          Y(f.$slots, "before", G(Q(c(W))))
+        ])) : B("", !0),
+        H("div", dt, [
+          c(L) ? (b(), M(X, N({
             key: 0,
-            value: void 0,
-            disabled: !i.unselectable,
-            hidden: !i.unselectable
-          }, R(i.placeholder), 9, Re)) : F("", !0),
-          (g(!0), w(re, null, ie(i.options, (B, ee) => (g(), w("option", {
-            key: ee,
-            disabled: x(B),
-            value: l(Z)(B)
-          }, R(l(Y)(B)), 9, ke))), 128))
-        ], 16, Ee), [
-          [se, l(E)]
+            class: "vv-select__icon"
+          }, c(R)), null, 16)) : B("", !0),
+          Se(H("select", N({
+            id: c(V),
+            ref_key: "select",
+            ref: i,
+            "onUpdate:modelValue": k[0] || (k[0] = ($) => Be(z) ? z.value = $ : null)
+          }, c(de)), [
+            f.placeholder ? (b(), S("option", {
+              key: 0,
+              value: void 0,
+              disabled: !f.unselectable,
+              hidden: !f.unselectable
+            }, q(f.placeholder), 9, vt)) : B("", !0),
+            (b(!0), S(_e, null, Oe(f.options, ($, ge) => (b(), S("option", {
+              key: ge,
+              disabled: c(pe)($),
+              value: c(ve)($)
+            }, q(c(fe)($)), 9, pt))), 128))
+          ], 16, ft), [
+            [Ie, c(z)]
+          ]),
+          c(U) ? (b(), M(X, N({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, c(R)), null, 16)) : B("", !0)
         ]),
-        q(i.$slots, "after", {}, () => [
-          l(M) ? (g(), k(G, T(N({ key: 0 }, l(S))), null, 16)) : F("", !0)
-        ])
+        f.$slots.after ? (b(), S("div", gt, [
+          Y(f.$slots, "after", G(Q(c(W))))
+        ])) : B("", !0)
       ]),
-      le(l(f), {
-        id: l(I),
+      Ve(c(d), {
+        id: c(j),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  qe as default
+  Bt as default
 };