@volverjs/ui-vue 0.0.4 → 0.0.5-beta.1

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

@@ -1,8 +1,8 @@
-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 = {
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, h, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, Fragment, renderList, vModelSelect, createVNode } from "vue";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { toReactive, useFocus, useElementVisibility } from "@vueuse/core";
+import { nanoid } from "nanoid";
+const VvIconProps = {
   /**
    * Color
    */
@@ -26,7 +26,7 @@ const ke = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -96,131 +96,240 @@ const ke = {
     type: [String, Array]
   }
 };
-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);
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-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;
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const Ne = {
+const __default__$1 = {
   name: "VvIcon"
-}, 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;
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
-    function s(o) {
-      let l = null;
-      if (typeof window > "u") {
-        const { JSDOM: h } = require("jsdom");
-        l = new h().window;
+    const icon = computed(() => {
+      const _name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+    });
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    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
-      });
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    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: c(d)
-    }, {
-      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);
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
 });
-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)
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
           return null;
-        n = n[r[i]];
+        }
+        value = value[fields[i]];
       }
-      return n;
+      return value;
     }
-  } else
+  } 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 isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
-function Ce(e) {
-  return typeof e == "string" || e instanceof String;
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
 }
-function E(e) {
-  return Array.isArray(e) ? e.filter((t) => Ce(t)).join(" ") : e;
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function ze(e, t) {
+function HintSlotFactory(parentProps, parentSlots) {
+  const {
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
   const {
-    invalid: r,
-    valid: n,
-    hint: i,
-    loading: d
-  } = t, {
-    hintLabel: a,
-    modelValue: m,
-    valid: s,
-    validLabel: p,
-    invalid: o,
-    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
+    hintLabel,
+    modelValue,
+    valid,
+    validLabel,
+    invalid,
+    invalidLabel,
+    ...otherProps
+  } = toRefs(parentProps);
+  const loading = resolveFieldData(otherProps, "loading");
+  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
+  const hasInvalid = computed(() => {
+    if (!invalid.value) {
+      return false;
+    }
+    if (invalid.value && invalidSlot) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
+      return true;
+    }
+    return false;
+  });
+  const hasHint = computed(
+    () => !!(hintLabel && hintLabel.value || hintSlot)
+  );
+  const hasValid = computed(
+    () => !!(validLabel && validLabel.value || validSlot)
+  );
+  const hasLoading = computed(
+    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  );
+  const isVisible = computed(
+    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
   );
   return {
-    hasInvalid: h,
-    hasHint: w,
-    hasValid: I,
-    hasLoading: A,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -229,42 +338,50 @@ function ze(e, t) {
           default: () => ({})
         }
       },
-      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
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          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);
+          if (invalid == null ? void 0 : invalid.value) {
+            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          }
+          if (valid == null ? void 0 : valid.value)
+            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          if (loading == null ? void 0 : loading.value)
+            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
         });
         return {
-          isVisible: V,
-          hasInvalid: h,
-          hasValid: I,
-          hintContent: F
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
-          return be(
+        if (this.isVisible) {
+          return h(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const qe = {
+const LinkProps = {
   /**
    * 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/)
@@ -281,7 +398,7 @@ const qe = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(re).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -290,7 +407,8 @@ const qe = {
     type: String,
     default: "noopener noreferrer"
   }
-}, He = {
+};
+const ValidProps = {
   /**
    * Valid status
    */
@@ -299,7 +417,8 @@ const qe = {
    * Valid label
    */
   validLabel: [String, Array]
-}, Me = {
+};
+const InvalidProps = {
   /**
    * Invalid status
    */
@@ -308,7 +427,8 @@ const qe = {
    * Invalid label
    */
   invalidLabel: [String, Array]
-}, Ke = {
+};
+const LoadingProps = {
   /**
    * Loading status
    */
@@ -320,39 +440,47 @@ const qe = {
     type: String,
     default: "Loading..."
   }
-}, le = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Re = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, Le = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, ae = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, Ue = {
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, Je = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, We = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, Ye = {
+};
+const OptionsProps = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -372,7 +500,8 @@ const qe = {
    * Used when options are objects: key to use for option disabled
    */
   disabledKey: { type: [String, Function], default: "disabled" }
-}, Ge = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -383,48 +512,139 @@ const qe = {
    */
   iconPosition: {
     type: String,
-    default: P.before,
-    validation: (e) => Object.values(P).includes(e)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, Qe = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, Xe = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, Ze = {
+};
+const UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
-}, Te = {
+  unselectable: { type: Boolean, default: true }
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-_.bottom;
-const xe = {
-  ...Te,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const IdNameProps = {
+  ...IdProps,
   /**
    * 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 }
-}, et = {
+  name: { type: String, required: true }
+};
+const AutofocusProps = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, tt = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
@@ -432,33 +652,37 @@ const xe = {
   autocomplete: { type: String, default: "off" }
 };
 ({
-  ...le,
-  ...ae,
-  ...Le,
-  ...Re,
-  ...qe,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: K.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const rt = {
-  ...xe,
-  ...et,
-  ...tt,
-  ...Qe,
-  ...He,
-  ...Me,
-  ...We,
-  ...Ke,
-  ...le,
-  ...Ue,
-  ...Je,
-  ...Ye,
-  ...Ge,
-  ...Xe,
-  ...Ze,
-  ...ae,
+const VvSelectProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...LabelProps,
   /**
    * 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.
@@ -489,174 +713,247 @@ const rt = {
    * Select placeholder
    */
   placeholder: String
-}, 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
+};
+const VvSelectEmits = ["update:modelValue", "focus", "blur"];
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
   };
 }
-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)
+function useComponentIcon(icon, iconPosition) {
+  const hasIconBefore = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+  );
+  const hasIconAfter = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
   );
+  const hasIconLeft = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
+  );
+  const hasIconRight = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+  );
+  const hasIconTop = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+  );
+  const hasIconBottom = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+  );
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
   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
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-function st(e) {
-  const { options: t, labelKey: r, valueKey: n, disabledKey: i } = C(e);
+function useOptions(props) {
+  const { options, labelKey, valueKey, disabledKey } = toRefs(props);
+  const getOptionLabel = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value];
+  };
+  const getOptionValue = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof valueKey.value === "function" ? valueKey.value(option) : option[valueKey.value];
+  };
+  const getOptionDisabled = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return false;
+    return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
+  };
   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]
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled
   };
 }
-const ut = ["for"], it = { class: "vv-select__wrapper" }, ct = {
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { class: "vv-select__wrapper" };
+const _hoisted_3 = {
   key: 0,
   class: "vv-select__input-before"
-}, dt = { class: "vv-select__inner" }, ft = ["id"], vt = ["disabled", "hidden"], pt = ["disabled", "value"], gt = {
+};
+const _hoisted_4 = { class: "vv-select__inner" };
+const _hoisted_5 = ["id"];
+const _hoisted_6 = ["disabled", "hidden"];
+const _hoisted_7 = ["disabled", "value"];
+const _hoisted_8 = {
   key: 1,
   class: "vv-select__input-after"
-}, yt = {
+};
+const __default__ = {
   name: "VvSelect"
-}, 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 _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvSelectProps,
+  emits: VvSelectEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const select = ref();
+    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      id,
+      modifiers,
+      disabled,
+      readonly,
+      loading,
+      icon,
+      iconPosition,
+      invalid,
+      valid,
+      floating,
+      multiple
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const { focused } = useComponentFocus(select, emit);
+    const isVisible = useElementVisibility(select);
+    watch(isVisible, (newValue) => {
+      if (newValue && props.autofocus) {
+        focused.value = true;
+      }
+    });
+    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
+      icon,
+      iconPosition
+    );
+    const isDirty = computed(() => !isEmpty(props.modelValue));
+    const isDisabled = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabled.value ? -1 : props.tabindex;
     });
-    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 (r.valid === !0)
-        return !1;
-    }), ce = oe(
+    const isInvalid = computed(() => {
+      if (props.invalid === true) {
+        return true;
+      }
+      if (props.valid === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const bemCssClasses = useModifiers(
       "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
+      modifiers,
+      computed(() => ({
+        valid: valid.value,
+        invalid: invalid.value,
+        loading: loading.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        "icon-before": hasIconBefore.value,
+        "icon-after": hasIconAfter.value,
+        dirty: isDirty.value,
+        focus: focused.value,
+        floating: floating.value,
+        multiple: multiple.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);
+    );
+    const hasAttrs = computed(() => {
+      return {
+        name: props.name,
+        tabindex: hasTabindex.value,
+        disabled: isDisabled.value,
+        required: props.required,
+        size: props.size,
+        autocomplete: props.autocomplete,
+        multiple: props.multiple,
+        "aria-invalid": isInvalid.value,
+        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
+        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+      };
+    });
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue
+    }));
+    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+        }
+        emit("update:modelValue", newValue);
       }
     });
-    return (f, k) => (b(), S("div", {
-      class: he(c(ce))
-    }, [
-      f.label ? (b(), S("label", {
-        key: 0,
-        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,
-            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", {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: unref(hasId)
+        }, toDisplayString(_ctx.label), 9, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4, [
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
               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)]
+              class: "vv-select__icon"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
+            withDirectives(createElementVNode("select", mergeProps({
+              id: unref(hasId),
+              ref_key: "select",
+              ref: select,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+            }, unref(hasAttrs)), [
+              _ctx.placeholder ? (openBlock(), createElementBlock("option", {
+                key: 0,
+                value: void 0,
+                disabled: !_ctx.unselectable,
+                hidden: !_ctx.unselectable
+              }, toDisplayString(_ctx.placeholder), 9, _hoisted_6)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+                return openBlock(), createElementBlock("option", {
+                  key: index,
+                  disabled: unref(getOptionDisabled)(option),
+                  value: unref(getOptionValue)(option)
+                }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7);
+              }), 128))
+            ], 16, _hoisted_5), [
+              [vModelSelect, unref(localModelValue)]
+            ]),
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 1,
+              class: "vv-select__icon vv-select__icon-after"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
           ]),
-          c(U) ? (b(), M(X, N({
-            key: 1,
-            class: "vv-select__icon vv-select__icon-after"
-          }, c(R)), null, 16)) : B("", !0)
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true)
         ]),
-        f.$slots.after ? (b(), S("div", gt, [
-          Y(f.$slots, "after", G(Q(c(W))))
-        ])) : B("", !0)
-      ]),
-      Ve(c(d), {
-        id: c(j),
-        class: "vv-select__hint"
-      }, null, 8, ["id"])
-    ], 2));
+        createVNode(unref(HintSlot), {
+          id: unref(hasDescribedBy),
+          class: "vv-select__hint"
+        }, null, 8, ["id"])
+      ], 2);
+    };
   }
 });
 export {
-  Bt as default
+  _sfc_main as default
 };