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

package/dist/components/VvInputText/VvInputText.es.js

@@ -1,37 +1,36 @@
-import { defineComponent as se, unref as a, openBlock as y, createBlock as D, mergeProps as M, createCommentVNode as R, createElementBlock as W, normalizeClass as be, toDisplayString as ee, createElementVNode as te, renderSlot as F, normalizeProps as V, guardReactiveProps as j, withDirectives as ge, isRef as ye, vModelDynamic as we, createTextVNode as Ee, createVNode as Ie } from "vue";
-import { nanoid as Pe } from "nanoid";
-import { iconExists as x, Icon as Te, addIcon as Ae } from "@iconify/vue";
-function N(i) {
-  return Array.isArray(i) ? i.filter((o) => isString(o)).join(" ") : i;
+import { defineComponent as ie, unref as i, openBlock as g, createBlock as C, mergeProps as V, createCommentVNode as _, createElementBlock as O, normalizeClass as Ee, toDisplayString as ne, createElementVNode as W, renderSlot as F, normalizeProps as j, guardReactiveProps as q, withDirectives as Ae, isRef as Ie, vModelDynamic as _e, createTextVNode as De, createVNode as Ce } from "vue";
+import { iconExists as x, Icon as Te, addIcon as Pe } from "@iconify/vue";
+function B(t) {
+  return Array.isArray(t) ? t.filter((n) => isString(n)).join(" ") : t;
 }
-function De(i, o) {
+function Oe(t, n) {
   const {
     invalid: e,
-    valid: c,
-    hint: l,
-    loading: m
-  } = o, {
+    valid: l,
+    hint: d,
+    loading: v
+  } = n, {
     hintLabel: u,
     modelValue: T,
-    valid: g,
+    valid: y,
     validLabel: f,
-    invalid: n,
-    invalidLabel: s,
+    invalid: s,
+    invalidLabel: a,
     ...S
-  } = toRefs(i), d = resolveFieldData(S, "loading"), v = resolveFieldData(S, "loadingLabel"), I = computed(() => n.value ? !!(n.value && e || s != null && s.value && Array.isArray(s.value) && s.value.length > 0 || s != null && s.value && !isEmpty(s)) : !1), b = computed(
-    () => !!(u && u.value || l)
-  ), P = computed(
-    () => !!(f && f.value || c)
-  ), _ = computed(
-    () => !!(d != null && d.value && m || d != null && d.value && (v != null && v.value))
-  ), C = computed(
-    () => b.value || P.value || I.value || _.value
+  } = toRefs(t), c = resolveFieldData(S, "loading"), m = resolveFieldData(S, "loadingLabel"), w = computed(() => s.value ? !!(s.value && e || a != null && a.value && Array.isArray(a.value) && a.value.length > 0 || a != null && a.value && !isEmpty(a)) : !1), H = computed(
+    () => !!(u && u.value || d)
+  ), b = computed(
+    () => !!(f && f.value || l)
+  ), D = computed(
+    () => !!(c != null && c.value && v || c != null && c.value && (m != null && m.value))
+  ), N = computed(
+    () => H.value || b.value || w.value || D.value
   );
   return {
-    hasInvalid: I,
-    hasHint: b,
-    hasValid: P,
-    hasLoading: _,
+    hasInvalid: w,
+    hasHint: H,
+    hasValid: b,
+    hasLoading: D,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -40,26 +39,26 @@ function De(i, o) {
           default: () => ({})
         }
       },
-      setup(H) {
-        const O = computed(() => {
-          const A = toReactive({
+      setup(P) {
+        const R = computed(() => {
+          const I = toReactive({
             hintLabel: u,
             modelValue: T,
-            valid: g,
+            valid: y,
             validLabel: f,
-            invalid: n,
-            invalidLabel: s,
-            loading: d,
-            loadingLabel: v,
-            ...H.params
+            invalid: s,
+            invalidLabel: a,
+            loading: c,
+            loadingLabel: m,
+            ...P.params
           });
-          return n != null && n.value ? (e == null ? void 0 : e(A)) || N(s == null ? void 0 : s.value) || (u == null ? void 0 : u.value) : g != null && g.value ? (c == null ? void 0 : c(A)) || N(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : d != null && d.value ? (m == null ? void 0 : m(A)) || N(v == null ? void 0 : v.value) || (u == null ? void 0 : u.value) : (l == null ? void 0 : l(A)) || N(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
+          return s != null && s.value ? (e == null ? void 0 : e(I)) || B(a == null ? void 0 : a.value) || (u == null ? void 0 : u.value) : y != null && y.value ? (l == null ? void 0 : l(I)) || B(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : c != null && c.value ? (v == null ? void 0 : v(I)) || B(m == null ? void 0 : m.value) || (u == null ? void 0 : u.value) : (d == null ? void 0 : d(I)) || B(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
         });
         return {
-          isVisible: C,
-          hasInvalid: I,
-          hasValid: P,
-          hintContent: O
+          isVisible: N,
+          hasInvalid: w,
+          hasValid: b,
+          hintContent: R
         };
       },
       render() {
@@ -67,7 +66,7 @@ function De(i, o) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -75,157 +74,296 @@ function De(i, o) {
     }
   };
 }
-const Ce = "ds", Re = {
+const He = {
+  /**
+   * 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]
   }
-}, _e = {
+}, Re = {
   name: "VvIcon"
-}, E = /* @__PURE__ */ se({
-  ..._e,
-  props: Re,
-  setup(i) {
-    const o = i, e = ref(!0), { modifiers: c } = toRefs(o), l = inject(Ce), { bemCssClasses: m } = useBemModifiers("vv-icon", {
-      modifiers: c
-    }), u = computed(() => o.provider || (l == null ? void 0 : l.provider)), T = computed(() => {
-      const n = o.name ?? "", s = `@${u.value}:${o.prefix}:${o.name}`;
-      return x(n) ? n : x(s) ? s : (l == null ? void 0 : l.iconsCollections.find((S) => {
-        const d = `@${u.value}:${S.prefix}:${n}`;
-        if (x(d))
-          return d;
-      })) || n;
+}, A = /* @__PURE__ */ ie({
+  ...Re,
+  props: He,
+  setup(t) {
+    const n = t, e = ref(!0), l = useVolver(), { modifiers: d } = toRefs(n), v = useBemModifiers("vv-icon", d), u = computed(() => n.provider || (l == null ? void 0 : l.provider)), T = computed(() => {
+      const s = n.name ?? "", a = `@${u.value}:${n.prefix}:${n.name}`;
+      return x(s) ? s : x(a) ? a : (l == null ? void 0 : l.iconsCollections.find(
+        (S) => {
+          const c = `@${u.value}:${S.prefix}:${s}`;
+          if (x(c))
+            return c;
+        }
+      )) || s;
     });
-    function g(n) {
-      let s = null;
+    function y(s) {
+      let a = null;
       if (typeof window > "u") {
-        const { JSDOM: I } = require("jsdom");
-        s = new I().window;
+        const { JSDOM: w } = require("jsdom");
+        a = new w().window;
       }
-      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+      return (a ? new a.DOMParser() : new window.DOMParser()).parseFromString(s, "text/html").querySelector("svg");
     }
-    function f(n) {
-      const s = g(n), S = (s == null ? void 0 : s.innerHTML.trim()) || "";
-      s && S && Ae(`@${u.value}:${o.prefix}:${o.name}`, {
+    function f(s) {
+      const a = y(s), S = (a == null ? void 0 : a.innerHTML.trim()) || "";
+      a && S && Pe(`@${u.value}:${n.prefix}:${n.name}`, {
         body: S,
-        height: s.viewBox.baseVal.height,
-        width: s.viewBox.baseVal.width
+        // Set height and width from svg content
+        height: a.viewBox.baseVal.height,
+        width: a.viewBox.baseVal.width
       });
     }
-    return l && (o.src && !x(`@${u.value}:${o.prefix}:${o.name}`) ? (e.value = !1, l.fetchIcon(o.src).then((n) => {
-      n && (f(n), e.value = !0);
-    }).catch((n) => {
-      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
-    })) : o.svg && f(o.svg)), (n, s) => a(e) ? (y(), D(a(Te), M({
+    return l && (n.src && !x(`@${u.value}:${n.prefix}:${n.name}`) ? (e.value = !1, l.fetchIcon(n.src).then((s) => {
+      s && (f(s), e.value = !0);
+    }).catch((s) => {
+      throw new Error(`During fetch icon: ${s == null ? void 0 : s.message}`);
+    })) : n.svg && f(n.svg)), (s, a) => i(e) ? (g(), C(i(Te), V({
       key: 0,
-      class: a(m)
+      class: i(v)
     }, {
-      inline: n.inline,
-      width: n.width,
-      height: n.height,
-      horizontalFlip: n.horizontalFlip,
-      verticalFlip: n.verticalFlip,
-      flip: n.flip,
-      rotate: n.rotate,
-      color: n.color,
-      onLoad: n.onLoad,
-      icon: a(T)
-    }), null, 16, ["class"])) : R("", !0);
+      inline: s.inline,
+      width: s.width,
+      height: s.height,
+      horizontalFlip: s.horizontalFlip,
+      verticalFlip: s.verticalFlip,
+      flip: s.flip,
+      rotate: s.rotate,
+      color: s.color,
+      onLoad: s.onLoad,
+      icon: i(T)
+    }), null, 16, ["class"])) : _("", !0);
   }
-}), He = {
+});
+var K = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(K || {}), le = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(le || {}), Y = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(Y || {});
+const xe = {
   valid: Boolean,
   validLabel: [String, Array]
-}, Oe = {
+}, Be = {
   invalid: Boolean,
   invalidLabel: [String, Array]
 }, Ve = {
   loading: Boolean,
   loadingLabel: String
-}, xe = {
-  disabled: Boolean
 }, Ne = {
-  readonly: Boolean
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
 }, Me = {
+  /**
+   * The value is not editable
+   */
+  readonly: Boolean
+}, ke = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Be = {
+}, $e = {
   hintLabel: { type: String, default: "" }
-}, ke = {
+}, Le = {
+  /**
+   * Show character limit
+   */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (i) => [!0, !1, "limit", "countdown"].includes(i)
+    validator: (t) => [!0, !1, "limit", "countdown"].includes(t)
   }
-}, Le = {
+}, Ue = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
   debounce: [Number, String]
-}, oe = {
-  LEFT: "left",
-  RIGHT: "right"
-}, $e = {
+}, We = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (i) => Object.values(oe).includes(i),
-    default: oe.RIGHT
+    default: Y.before,
+    validation: (t) => Object.values(Y).includes(t)
   }
-}, Ue = {
+}, Fe = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, We = {
+}, je = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Fe = {
-  id: [String, Number],
+}, qe = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+K.bottom;
+const ze = {
+  ...qe,
+  /**
+   * 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 }
-}, je = {
+}, Xe = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, qe = {
+}, Ke = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Xe = {
+}, Ye = {
+  ...ze,
+  ...Xe,
+  ...Ke,
   ...Fe,
-  ...je,
-  ...qe,
-  ...Ue,
-  ...xe,
   ...Ne,
-  ...He,
-  ...Oe,
+  ...Me,
+  ...xe,
   ...Be,
+  ...$e,
   ...Ve,
-  ...Me,
   ...ke,
   ...Le,
-  ...$e,
+  ...Ue,
   ...We,
+  ...je,
+  /**
+   * Input / Textarea minlength
+   * Minimum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
   minlength: Number,
+  /**
+   * Input / Textarea maxlength
+   * Maximum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
   maxlength: Number,
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
   placeholder: String,
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
   required: Boolean,
+  /**
+   * <label> value for the Input / Textarea
+   */
   label: String
-}, t = {
+}, o = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -239,61 +377,121 @@ const Ce = "ds", Re = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, w = {
+}, E = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, ze = ["update:modelValue", "focus", "blur", "keyup"], Ke = {
-  ...Xe,
+}, Je = ["update:modelValue", "focus", "blur", "keyup"], Ge = {
+  ...Ye,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   modelValue: [String, Number],
+  /**
+   * Type of form control
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+   */
   type: {
     type: String,
-    default: t.TEXT,
-    validator: (i) => Object.values(t).includes(i)
+    default: o.TEXT,
+    validator: (t) => Object.values(o).includes(t)
   },
+  /**
+   * Minimum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
   min: [Number, Date, String],
+  /**
+   * Maximum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
   max: [Number, Date, String],
+  /**
+   * Incremental values that are valid
+   * Available for input types: date, month, week, time, datetime-local and number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+   */
   step: { type: [String, Number], default: 1 },
+  /**
+   * Pattern the value must match to be valid
+   * Available for input types: text, search, url, tel, email and password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
   pattern: String,
+  /**
+   * Whether to allow multiple values
+   * Available for input type email
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
   multiple: Boolean,
+  /**
+   * VvIcon name for show password button
+   * @see VVIcon
+   */
   iconShowPassword: {
     type: String,
-    default: w.PASSWORD_SHOW
+    default: E.PASSWORD_SHOW
   },
+  /**
+   * VvIcon name for hide password button
+   * @see VVIcon
+   */
   iconHidePassword: {
     type: String,
-    default: w.PASSWORD_HIDE
+    default: E.PASSWORD_HIDE
   },
+  /**
+   * VvIcon name for clear button
+   * @see VVIcon
+   */
   iconClear: {
     type: String,
-    default: w.SEARCH
+    default: E.SEARCH
   },
+  /**
+   * Label for step up button
+   */
   labelStepUp: {
     type: String,
     default: "Increase value"
   },
+  /**
+   * Label for step down button
+   */
   labelStepDown: {
     type: String,
     default: "Decrease value"
   },
+  /**
+   * Label for show password button
+   */
   labelShowPassword: {
     type: String,
     default: "Show password"
   },
+  /**
+   * Label for hide password button
+   */
   labelHidePassword: {
     type: String,
     default: "Hide password"
   },
+  /**
+   * Label for clear button
+   */
   labelClear: {
     type: String,
     default: "Clear"
   }
-}, ne = defineComponent({
+}, se = defineComponent({
   components: {
-    VvIcon: E
+    VvIcon: A
   },
   props: {
     disabled: {
@@ -310,29 +508,29 @@ const Ce = "ds", Re = {
     },
     iconShow: {
       type: String,
-      default: w.PASSWORD_SHOW
+      default: E.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: w.PASSWORD_HIDE
+      default: E.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(i, { emit: o }) {
-    const e = ref(!1), c = computed(
-      () => e.value ? i.iconHide : i.iconShow
+  setup(t, { emit: n }) {
+    const e = ref(!1), l = computed(
+      () => e.value ? t.iconHide : t.iconShow
     );
-    function l(m) {
-      m == null || m.stopPropagation(), i.disabled || (e.value = !e.value, o("toggle-password", e.value));
+    function d(v) {
+      v == null || v.stopPropagation(), t.disabled || (e.value = !e.value, n("toggle-password", e.value));
     }
     return {
       active: e,
-      activeIcon: c,
-      onClick: l
+      activeIcon: l,
+      onClick: d
     };
   },
   render() {
-    const i = h(E, {
+    const t = h(A, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
@@ -345,12 +543,12 @@ const Ce = "ds", Re = {
         type: "button",
         onClick: this.onClick
       },
-      i
+      t
     );
   }
-}), q = defineComponent({
+}), z = defineComponent({
   components: {
-    VvIcon: E
+    VvIcon: A
   },
   props: {
     disabled: {
@@ -362,17 +560,17 @@ const Ce = "ds", Re = {
     },
     mode: {
       type: String,
-      validator: (i) => ["up", "down"].includes(i),
+      validator: (t) => ["up", "down"].includes(t),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(i, { emit: o }) {
-    const e = computed(() => i.mode === "up");
+  setup(t, { emit: n }) {
+    const e = computed(() => t.mode === "up");
     return {
       isUp: e,
-      onClick: (l) => {
-        l == null || l.stopPropagation(), i.disabled || o(e.value ? "step-up" : "step-down");
+      onClick: (d) => {
+        d == null || d.stopPropagation(), t.disabled || n(e.value ? "step-up" : "step-down");
       }
     };
   },
@@ -387,9 +585,9 @@ const Ce = "ds", Re = {
       onClick: this.onClick
     });
   }
-}), ie = defineComponent({
+}), ae = defineComponent({
   components: {
-    VvIcon: E
+    VvIcon: A
   },
   props: {
     disabled: {
@@ -406,16 +604,16 @@ const Ce = "ds", Re = {
     }
   },
   emits: ["clear"],
-  setup(i, { emit: o }) {
-    function e(c) {
-      c == null || c.stopPropagation(), i.disabled || o("clear");
+  setup(t, { emit: n }) {
+    function e(l) {
+      l == null || l.stopPropagation(), t.disabled || n("clear");
     }
     return {
       onClick: e
     };
   },
   render() {
-    const i = h(E, {
+    const t = h(A, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
@@ -428,51 +626,51 @@ const Ce = "ds", Re = {
         type: "button",
         onClick: this.onClick
       },
-      i
+      t
     );
   }
 });
-function X(i, o) {
+function X(t, n) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: E,
-      VvInputPasswordAction: ne,
-      VvInputStepAction: q,
-      VvInputClearAction: ie
+      VvIcon: A,
+      VvInputPasswordAction: se,
+      VvInputStepAction: z,
+      VvInputClearAction: ae
     },
     setup() {
       return {
-        isDisabled: computed(() => o.disabled || o.readonly),
-        labelStepUp: o.labelStepUp,
-        labelStepDown: o.labelStepDown,
-        labelShowPassword: o.labelShowPassword,
-        labelHidePassword: o.labelHidePassword,
-        labelClear: o.labelClear,
-        iconShowPassword: o.iconShowPassword,
-        iconHidePassword: o.iconHidePassword
+        isDisabled: computed(() => n.disabled || n.readonly),
+        labelStepUp: n.labelStepUp,
+        labelStepDown: n.labelStepDown,
+        labelShowPassword: n.labelShowPassword,
+        labelHidePassword: n.labelHidePassword,
+        labelClear: n.labelClear,
+        iconShowPassword: n.iconShowPassword,
+        iconHidePassword: n.iconHidePassword
       };
     },
     render() {
       let e = null;
-      switch (i) {
-        case t.SEARCH: {
-          const { onClear: c } = this.$attrs;
+      switch (t) {
+        case o.SEARCH: {
+          const { onClear: l } = this.$attrs;
           e = [
-            h(ie, {
+            h(ae, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: c
+              onClear: l
             })
           ];
           break;
         }
-        case t.PASSWORD: {
-          const { onTogglePassword: c } = this.$attrs;
+        case o.PASSWORD: {
+          const { onTogglePassword: l } = this.$attrs;
           e = [
-            h(ne, {
+            h(se, {
               disabled: this.isDisabled,
-              onTogglePassword: c,
+              onTogglePassword: l,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -481,22 +679,22 @@ function X(i, o) {
           ];
           break;
         }
-        case t.NUMBER: {
-          const { onStepUp: c, onStepDown: l } = this.$attrs;
+        case o.NUMBER: {
+          const { onStepUp: l, onStepDown: d } = this.$attrs;
           e = [
-            h(q, {
+            h(z, {
               mode: "up",
-              disabled: this.isDisabled || o.max !== void 0 && o.modelValue === o.max,
+              disabled: this.isDisabled || n.max !== void 0 && n.modelValue === n.max,
               label: this.labelStepUp,
-              onStepUp: c,
-              onStepDown: l
+              onStepUp: l,
+              onStepDown: d
             }),
-            h(q, {
+            h(z, {
               mode: "down",
-              disabled: this.isDisabled || o.min !== void 0 && o.modelValue === o.min,
+              disabled: this.isDisabled || n.min !== void 0 && n.modelValue === n.min,
               label: this.labelStepDown,
-              onStepUp: c,
-              onStepDown: l
+              onStepUp: l,
+              onStepDown: d
             })
           ];
           break;
@@ -506,164 +704,181 @@ function X(i, o) {
     }
   };
 }
-const Ge = ["for"], Ye = { class: "vv-input-text__wrapper" }, Je = ["id"], Qe = {
+const Qe = ["for"], Ze = { class: "vv-input-text__wrapper" }, et = {
   key: 0,
+  class: "vv-input-text__input-before"
+}, tt = { class: "vv-input-text__inner" }, ot = ["id"], nt = {
+  key: 1,
+  class: "vv-input-text__input-after"
+}, st = {
+  key: 2,
   class: "vv-input-text__limit"
-}, Ze = {
+}, at = {
   name: "VvInputText"
-}, nt = /* @__PURE__ */ se({
-  ...Ze,
-  props: Ke,
-  emits: ze,
-  setup(i, { emit: o }) {
-    const e = i, c = useSlots(), l = ref(), {
-      icon: m,
-      iconPosition: u,
-      label: T,
-      modelValue: g,
-      count: f,
-      valid: n,
-      invalid: s,
-      loading: S
-    } = toRefs(e), d = computed(() => String(e.id || Pe())), v = computed(() => `${d.value}-hint`), I = computed(
+}, rt = /* @__PURE__ */ ie({
+  ...at,
+  props: Ge,
+  emits: Je,
+  setup(t, { emit: n }) {
+    const e = t, l = useSlots(), d = ref(), {
+      id: v,
+      icon: u,
+      iconPosition: T,
+      label: y,
+      modelValue: f,
+      count: s,
+      valid: a,
+      invalid: S,
+      loading: c
+    } = toRefs(e), m = useUniqueId(v), w = computed(() => `${m.value}-hint`), H = computed(
       () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), b = useDebouncedInput(g, o, e.debounce), { focused: P } = useComponentFocus(l, o), _ = useElementVisibility(l);
-    watch(_, (r) => {
-      r && e.autofocus && (P.value = !0);
+    ), b = useDebouncedInput(f, n, e.debounce), { focused: D } = useComponentFocus(d, n), N = useElementVisibility(d);
+    watch(N, (r) => {
+      r && e.autofocus && (D.value = !0);
     });
-    const C = ref(!1), H = computed(() => e.type === t.PASSWORD), O = () => {
-      C.value = !C.value;
-    }, A = computed(
-      () => e.type === t.TIME || e.type === t.DATETIME_LOCAL || e.type === t.DATE || e.type === t.WEEK || e.type === t.MONTH
-    ), ae = computed(() => e.type === t.NUMBER), z = () => {
-      L.value && (l.value.stepUp(), b.value = unref(l).value);
-    }, K = () => {
-      L.value && (l.value.stepDown(), b.value = unref(l).value);
-    }, le = computed(() => e.type === t.SEARCH), G = () => {
+    const P = ref(!1), R = computed(() => e.type === o.PASSWORD), I = () => {
+      P.value = !P.value;
+    }, re = computed(
+      () => e.type === o.TIME || e.type === o.DATETIME_LOCAL || e.type === o.DATE || e.type === o.WEEK || e.type === o.MONTH
+    ), ue = computed(() => e.type === o.NUMBER), J = () => {
+      $.value && (d.value.stepUp(), b.value = unref(d).value);
+    }, G = () => {
+      $.value && (d.value.stepDown(), b.value = unref(d).value);
+    }, de = computed(() => e.type === o.SEARCH), Q = () => {
       b.value = void 0;
-    }, { hasIconLeft: Y, hasIconRight: B, hasIcon: J } = useComponentIcon(
-      m,
-      u
+    }, { hasIcon: Z, hasIconBefore: ee, hasIconAfter: M } = useComponentIcon(
+      u,
+      T
     ), k = computed(() => {
       switch (e.type) {
-        case t.COLOR:
-          return { name: w.COLOR };
-        case t.DATE:
-        case t.DATETIME_LOCAL:
-        case t.WEEK:
-        case t.MONTH:
-          return { name: w.DATE };
-        case t.TIME:
-          return { name: w.TIME };
+        case o.COLOR:
+          return { name: E.COLOR };
+        case o.DATE:
+        case o.DATETIME_LOCAL:
+        case o.WEEK:
+        case o.MONTH:
+          return { name: E.DATE };
+        case o.TIME:
+          return { name: E.TIME };
         default:
           return "";
       }
-    }), { formatted: re } = useTextCount(b, {
+    }), { formatted: ce } = useTextCount(b, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), L = computed(() => !e.disabled && !e.readonly), ue = computed(
-      () => L.value ? e.tabindex : -1
-    ), Q = computed(() => !isEmpty(g)), ce = computed(() => {
-      if (s.value === !0)
+    }), $ = computed(() => !e.disabled && !e.readonly), pe = computed(
+      () => $.value ? e.tabindex : -1
+    ), te = computed(() => !isEmpty(f)), ve = computed(() => {
+      if (S.value === !0)
         return !0;
-      if (n.value === !0)
+      if (a.value === !0)
         return !1;
-    }), { bemCssClasses: de } = useBemModifiers("vv-input-text", {
-      modifiers: e.modifiers,
-      valid: n,
-      invalid: s,
-      loading: S,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      iconLeft: Y,
-      iconRight: B.value || !isEmpty(k),
-      floating: e.floating && !isEmpty(e.label),
-      dirty: Q,
-      focus: P
-    }), pe = computed(() => {
-      const r = (() => H.value && C.value || A.value && !Q.value && !P.value ? t.TEXT : e.type)(), p = {
+    }), { modifiers: fe } = toRefs(e), me = useBemModifiers(
+      "vv-input-text",
+      fe,
+      computed(() => ({
+        valid: a.value,
+        invalid: S.value,
+        loading: c.value,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "icon-before": ee.value,
+        "icon-after": M.value || !isEmpty(k),
+        floating: e.floating && !isEmpty(e.label),
+        dirty: te.value,
+        focus: D.value
+      }))
+    ), he = computed(() => {
+      const r = (() => R.value && P.value || re.value && !te.value && !D.value ? o.TEXT : e.type)(), p = {
         type: r,
         name: e.name,
-        tabindex: ue.value,
+        tabindex: pe.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         autocomplete: e.autocomplete,
-        "aria-invalid": ce.value,
-        "aria-describedby": !Z.value && ve.value ? v.value : void 0,
-        "aria-errormessage": Z.value ? v.value : void 0
+        "aria-invalid": ve.value,
+        "aria-describedby": !oe.value && be.value ? w.value : void 0,
+        "aria-errormessage": oe.value ? w.value : void 0
       };
-      return (r === t.DATE || r === t.MONTH || r === t.WEEK || r === t.TIME || r === t.DATETIME_LOCAL || r === t.NUMBER) && (p.step = e.step, p.max = String(e.max), p.min = String(e.min)), (r === t.TEXT || r === t.SEARCH || r === t.URL || r === t.TEL || r === t.EMAIL || r === t.PASSWORD || r === t.NUMBER) && (p.placeholder = I.value), (r === t.TEXT || r === t.SEARCH || r === t.URL || r === t.TEL || r === t.EMAIL || r === t.PASSWORD) && (p.minlength = e.minlength, p.maxlength = e.maxlength, p.pattern = e.pattern), r === t.EMAIL && (p.multiple = e.multiple), p;
-    }), $ = computed(() => ({
+      return (r === o.DATE || r === o.MONTH || r === o.WEEK || r === o.TIME || r === o.DATETIME_LOCAL || r === o.NUMBER) && (p.step = e.step, p.max = String(e.max), p.min = String(e.min)), (r === o.TEXT || r === o.SEARCH || r === o.URL || r === o.TEL || r === o.EMAIL || r === o.PASSWORD || r === o.NUMBER) && (p.placeholder = H.value), (r === o.TEXT || r === o.SEARCH || r === o.URL || r === o.TEL || r === o.EMAIL || r === o.PASSWORD) && (p.minlength = e.minlength, p.maxlength = e.maxlength, p.pattern = e.pattern), r === o.EMAIL && (p.multiple = e.multiple), p;
+    }), L = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
-      togglePassword: O,
-      stepUp: z,
-      stepDown: K,
-      clear: G
-    })), { HintSlot: me, hasHint: ve, hasInvalid: Z } = De(e, c), fe = X(
-      t.PASSWORD,
+      togglePassword: I,
+      stepUp: J,
+      stepDown: G,
+      clear: Q
+    })), { HintSlot: Se, hasHint: be, hasInvalid: oe } = Oe(e, l), ge = X(
+      o.PASSWORD,
       e
-    ), Se = X(
-      t.NUMBER,
+    ), ye = X(
+      o.NUMBER,
       e
-    ), he = X(
-      t.SEARCH,
+    ), we = X(
+      o.SEARCH,
       e
     );
-    return (r, p) => (y(), W("div", {
-      class: be(a(de))
+    return (r, p) => (g(), O("div", {
+      class: Ee(i(me))
     }, [
-      a(T) ? (y(), W("label", {
+      i(y) ? (g(), O("label", {
         key: 0,
-        for: a(d),
+        for: i(m),
         class: "vv-input-text__label"
-      }, ee(a(T)), 9, Ge)) : R("", !0),
-      te("div", Ye, [
-        F(r.$slots, "before", V(j(a($))), () => [
-          a(Y) ? (y(), D(E, M({
+      }, ne(i(y)), 9, Qe)) : _("", !0),
+      W("div", Ze, [
+        r.$slots.before ? (g(), O("div", et, [
+          F(r.$slots, "before", j(q(i(L))))
+        ])) : _("", !0),
+        W("div", tt, [
+          i(ee) ? (g(), C(A, V({
             key: 0,
-            class: "vv-input-text__icon-left"
-          }, a(J)), null, 16)) : R("", !0)
-        ]),
-        ge(te("input", M({
-          id: a(d),
-          ref_key: "input",
-          ref: l,
-          "onUpdate:modelValue": p[0] || (p[0] = (U) => ye(b) ? b.value = U : null)
-        }, a(pe), {
-          onKeyup: p[1] || (p[1] = (U) => o("keyup", U))
-        }), null, 16, Je), [
-          [we, a(b)]
-        ]),
-        F(r.$slots, "after", V(j(a($))), () => [
-          a(B) || a(k) ? (y(), D(E, V(M({ key: 0 }, a(B) ? a(J) : a(k))), null, 16)) : a(H) ? (y(), D(a(fe), {
+            class: "vv-input-text__icon"
+          }, i(Z)), null, 16)) : _("", !0),
+          Ae(W("input", V({
+            id: i(m),
+            ref_key: "input",
+            ref: d,
+            "onUpdate:modelValue": p[0] || (p[0] = (U) => Ie(b) ? b.value = U : null)
+          }, i(he), {
+            onKeyup: p[1] || (p[1] = (U) => n("keyup", U))
+          }), null, 16, ot), [
+            [_e, i(b)]
+          ]),
+          i(M) || i(k) ? (g(), C(A, V({
             key: 1,
-            onTogglePassword: O
-          })) : a(ae) ? (y(), D(a(Se), {
+            class: "vv-input-text__icon vv-input-text__icon-after"
+          }, i(M) ? i(Z) : i(k)), null, 16)) : i(R) ? (g(), C(i(ge), {
             key: 2,
-            onStepUp: z,
-            onStepDown: K
-          })) : a(le) ? (y(), D(a(he), {
+            onTogglePassword: I
+          })) : i(ue) ? (g(), C(i(ye), {
             key: 3,
-            onClear: G
-          })) : R("", !0)
+            onStepUp: J,
+            onStepDown: G
+          })) : i(de) ? (g(), C(i(we), {
+            key: 4,
+            onClear: Q
+          })) : _("", !0)
         ]),
-        a(f) ? (y(), W("span", Qe, [
-          F(r.$slots, "count", V(j(a($))), () => [
-            Ee(ee(a(re)), 1)
+        r.$slots.after ? (g(), O("div", nt, [
+          F(r.$slots, "after", j(q(i(L))))
+        ])) : _("", !0),
+        i(s) ? (g(), O("span", st, [
+          F(r.$slots, "count", j(q(i(L))), () => [
+            De(ne(i(ce)), 1)
           ])
-        ])) : R("", !0)
+        ])) : _("", !0)
       ]),
-      Ie(a(me), {
-        id: a(v),
+      Ce(i(Se), {
+        id: i(w),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  nt as default
+  rt as default
 };