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

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

@@ -1,121 +1,183 @@
-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 { defineComponent as X, unref as i, openBlock as f, createBlock as z, mergeProps as N, createCommentVNode as S, createElementBlock as b, normalizeClass as ie, toDisplayString as E, createElementVNode as k, renderSlot as J, normalizeProps as W, guardReactiveProps as G, withDirectives as ae, isRef as le, Fragment as ue, renderList as de, vModelSelect as ce, createVNode as pe } from "vue";
+import { iconExists as D, Icon as ve, addIcon as fe } from "@iconify/vue";
+const me = {
+  /**
+   * 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 = {
+}, ge = {
   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;
+}, Q = /* @__PURE__ */ X({
+  ...ge,
+  props: me,
+  setup(e) {
+    const s = e, r = ref(!0), u = useVolver(), { modifiers: c } = toRefs(s), m = useBemModifiers("vv-icon", c), n = computed(() => s.provider || (u == null ? void 0 : u.provider)), B = computed(() => {
+      const t = s.name ?? "", o = `@${n.value}:${s.prefix}:${s.name}`;
+      return D(t) ? t : D(o) ? o : (u == null ? void 0 : u.iconsCollections.find(
+        (p) => {
+          const l = `@${n.value}:${p.prefix}:${t}`;
+          if (D(l))
+            return l;
+        }
+      )) || t;
     });
-    function m(e) {
-      let t = null;
+    function g(t) {
+      let o = null;
       if (typeof window > "u") {
         const { JSDOM: y } = require("jsdom");
-        t = new y().window;
+        o = new y().window;
       }
-      return (t ? new t.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "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 d(t) {
+      const o = g(t), p = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && p && fe(`@${n.value}:${s.prefix}:${s.name}`, {
+        body: p,
+        // Set height and width from svg content
+        height: o.viewBox.baseVal.height,
+        width: o.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 u && (s.src && !D(`@${n.value}:${s.prefix}:${s.name}`) ? (r.value = !1, u.fetchIcon(s.src).then((t) => {
+      t && (d(t), r.value = !0);
+    }).catch((t) => {
+      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
+    })) : s.svg && d(s.svg)), (t, o) => i(r) ? (f(), z(i(ve), N({
       key: 0,
-      class: l(f)
+      class: i(m)
     }, {
-      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: t.inline,
+      width: t.width,
+      height: t.height,
+      horizontalFlip: t.horizontalFlip,
+      verticalFlip: t.verticalFlip,
+      flip: t.flip,
+      rotate: t.rotate,
+      color: t.color,
+      onLoad: t.onLoad,
+      icon: i(B)
+    }), null, 16, ["class"])) : S("", !0);
   }
 });
-function C(c) {
-  return Array.isArray(c) ? c.filter((r) => isString(r)).join(" ") : c;
+function C(e) {
+  return Array.isArray(e) ? e.filter((s) => isString(s)).join(" ") : e;
 }
-function fe(c, r) {
+function ye(e, s) {
   const {
-    invalid: o,
-    valid: v,
-    hint: s,
-    loading: f
-  } = r, {
+    invalid: r,
+    valid: u,
+    hint: c,
+    loading: m
+  } = s, {
     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)
+    modelValue: B,
+    valid: g,
+    validLabel: d,
+    invalid: t,
+    invalidLabel: o,
+    ...p
+  } = toRefs(e), l = resolveFieldData(p, "loading"), v = resolveFieldData(p, "loadingLabel"), y = computed(() => t.value ? !!(t.value && r || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !isEmpty(o)) : !1), $ = computed(
+    () => !!(n && n.value || c)
   ), V = computed(
-    () => !!(u && u.value || v)
+    () => !!(d && d.value || u)
+  ), F = computed(
+    () => !!(l != null && l.value && m || l != null && l.value && (v != null && v.value))
   ), P = computed(
-    () => !!(a != null && a.value && f || a != null && a.value && (p != null && p.value))
-  ), I = computed(
-    () => $.value || V.value || y.value || P.value
+    () => $.value || V.value || y.value || F.value
   );
   return {
     hasInvalid: y,
     hasHint: $,
     hasValid: V,
-    hasLoading: P,
+    hasLoading: F,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -124,26 +186,26 @@ function fe(c, r) {
           default: () => ({})
         }
       },
-      setup(A) {
-        const _ = computed(() => {
-          const S = toReactive({
+      setup(w) {
+        const O = computed(() => {
+          const _ = toReactive({
             hintLabel: n,
-            modelValue: b,
-            valid: m,
-            validLabel: u,
-            invalid: e,
-            invalidLabel: t,
-            loading: a,
-            loadingLabel: p,
-            ...A.params
+            modelValue: B,
+            valid: g,
+            validLabel: d,
+            invalid: t,
+            invalidLabel: o,
+            loading: l,
+            loadingLabel: v,
+            ...w.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 t != null && t.value ? (r == null ? void 0 : r(_)) || C(o == null ? void 0 : o.value) || (n == null ? void 0 : n.value) : g != null && g.value ? (u == null ? void 0 : u(_)) || C(d == null ? void 0 : d.value) || (n == null ? void 0 : n.value) : l != null && l.value ? (m == null ? void 0 : m(_)) || C(v == null ? void 0 : v.value) || (n == null ? void 0 : n.value) : (c == null ? void 0 : c(_)) || C(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
         });
         return {
-          isVisible: I,
+          isVisible: P,
           hasInvalid: y,
           hasValid: V,
-          hintContent: _
+          hintContent: O
         };
       },
       render() {
@@ -151,7 +213,7 @@ function fe(c, r) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -159,184 +221,287 @@ function fe(c, r) {
     }
   };
 }
-const me = {
+var M = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(M || {}), Y = /* @__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))(Y || {}), q = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(q || {});
+const he = {
   valid: Boolean,
   validLabel: [String, Array]
-}, ge = {
+}, be = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, he = {
+}, Se = {
   loading: Boolean,
   loadingLabel: String
-}, ye = {
+}, Be = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, Se = {
+}, _e = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, be = {
+}, Ve = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
 }, Pe = {
   hintLabel: { type: String, default: "" }
-}, Ve = {
+}, we = {
+  /**
+   * 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"
+  /**
+   * 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" }
 }, Ie = {
+  /**
+   * 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: q.before,
+    validation: (e) => Object.values(q).includes(e)
   }
-}, Be = {
+}, $e = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, we = {
-  floating: Boolean
 }, Fe = {
+  /**
+   * If true the label will be floating
+   */
+  floating: Boolean
+}, Oe = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, $e = {
-  id: [String, Number],
-  name: { type: String, required: !0 }
 }, Ae = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+M.bottom;
+const De = {
+  ...Ae,
+  /**
+   * 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 }
+}, Ce = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, De = {
+}, Ne = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Oe = {
-  ...$e,
-  ...Ae,
+}, je = {
   ...De,
-  ...Be,
-  ...me,
-  ...ge,
-  ...Pe,
+  ...Ce,
+  ...Ne,
+  ...$e,
   ...he,
-  ...ye,
-  ...Se,
   ...be,
+  ...Pe,
+  ...Se,
+  ...Be,
+  ..._e,
   ...Ve,
-  ...Ie,
   ...we,
+  ...Ie,
   ...Fe,
+  ...Oe,
+  /**
+   * 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> value for the select
+   */
   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 = {
+}, Ee = ["update:modelValue", "focus", "blur"], ke = ["for"], ze = { class: "vv-select__wrapper" }, Me = {
+  key: 0,
+  class: "vv-select__input-before"
+}, qe = { class: "vv-select__inner" }, He = ["id"], Re = ["disabled", "hidden"], Ke = ["disabled", "value"], Te = {
+  key: 1,
+  class: "vv-select__input-after"
+}, Ue = {
   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);
+}, Ge = /* @__PURE__ */ X({
+  ...Ue,
+  props: je,
+  emits: Ee,
+  setup(e, { emit: s }) {
+    const r = e, u = useSlots(), c = ref(), { HintSlot: m, hasHint: n, hasInvalid: B } = ye(r, u), {
+      id: g,
+      modifiers: d,
+      disabled: t,
+      readonly: o,
+      loading: p,
+      icon: l,
+      iconPosition: v,
+      invalid: y,
+      valid: $,
+      floating: V,
+      multiple: F
+    } = toRefs(r), P = useUniqueId(g), w = computed(() => `${P.value}-hint`), { focused: O } = useComponentFocus(c, s), _ = useElementVisibility(c);
+    watch(_, (a) => {
+      a && r.autofocus && (O.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: H, hasIconBefore: R, hasIconAfter: K } = useComponentIcon(
+      l,
+      v
+    ), Z = computed(() => !isEmpty(r.modelValue)), T = computed(() => r.disabled || r.readonly), x = computed(() => T.value ? -1 : r.tabindex), L = computed(() => {
+      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,
+    }), ee = useBemModifiers(
+      "vv-select",
+      d,
+      computed(() => ({
+        valid: $.value,
+        invalid: y.value,
+        loading: p.value,
+        disabled: t.value,
+        readonly: o.value,
+        "icon-before": R.value,
+        "icon-after": K.value,
+        dirty: Z.value,
+        focus: O.value,
+        floating: V.value,
+        multiple: F.value
+      }))
+    ), te = computed(() => ({
+      name: r.name,
+      tabindex: x.value,
+      disabled: T.value,
+      required: r.required,
+      size: r.size,
+      autocomplete: r.autocomplete,
+      multiple: r.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);
+      "aria-describedby": !B.value && n.value ? w.value : void 0,
+      "aria-errormessage": B.value ? w.value : void 0
+    })), U = computed(() => ({
+      valid: r.valid,
+      invalid: r.invalid,
+      modelValue: r.modelValue
+    })), { getOptionLabel: oe, getOptionValue: re, getOptionDisabled: ne } = useOptions(r), j = computed({
+      get: () => r.modelValue,
+      set: (a) => {
+        Array.isArray(a) && (a = a.filter((A) => A !== void 0)), s("update:modelValue", a);
       }
     });
-    return (i, D) => (g(), w("div", {
-      class: te(l(Q))
+    return (a, A) => (f(), b("div", {
+      class: ie(i(ee))
     }, [
-      i.label ? (g(), w("label", {
+      a.label ? (f(), b("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: i(P)
+      }, E(a.label), 9, ke)) : S("", !0),
+      k("div", ze, [
+        a.$slots.before ? (f(), b("div", Me, [
+          J(a.$slots, "before", W(G(i(U))))
+        ])) : S("", !0),
+        k("div", qe, [
+          i(R) ? (f(), z(Q, 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"
+          }, i(H)), null, 16)) : S("", !0),
+          ae(k("select", N({
+            id: i(P),
+            ref_key: "select",
+            ref: c,
+            "onUpdate:modelValue": A[0] || (A[0] = (I) => le(j) ? j.value = I : null)
+          }, i(te)), [
+            a.placeholder ? (f(), b("option", {
+              key: 0,
+              value: void 0,
+              disabled: !a.unselectable,
+              hidden: !a.unselectable
+            }, E(a.placeholder), 9, Re)) : S("", !0),
+            (f(!0), b(ue, null, de(a.options, (I, se) => (f(), b("option", {
+              key: se,
+              disabled: i(ne)(I),
+              value: i(re)(I)
+            }, E(i(oe)(I)), 9, Ke))), 128))
+          ], 16, He), [
+            [ce, i(j)]
+          ]),
+          i(K) ? (f(), z(Q, N({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, i(H)), null, 16)) : S("", !0)
         ]),
-        q(i.$slots, "after", {}, () => [
-          l(M) ? (g(), k(G, T(N({ key: 0 }, l(S))), null, 16)) : F("", !0)
-        ])
+        a.$slots.after ? (f(), b("div", Te, [
+          J(a.$slots, "after", W(G(i(U))))
+        ])) : S("", !0)
       ]),
-      le(l(f), {
-        id: l(I),
+      pe(i(m), {
+        id: i(w),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  qe as default
+  Ge as default
 };