@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

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

@@ -0,0 +1,772 @@
+import { unref as l, toRefs as Y, computed as s, h as g, watch as pe, defineComponent as H, ref as $, inject as Ce, openBlock as E, createBlock as P, mergeProps as B, createCommentVNode as O, useSlots as De, createElementBlock as z, normalizeClass as Pe, toDisplayString as ie, createElementVNode as le, renderSlot as X, normalizeProps as N, guardReactiveProps as K, withDirectives as _e, isRef as Oe, vModelDynamic as Re, createTextVNode as He, createVNode as Le } from "vue";
+import { toReactive as xe, useFocus as Ve, useElementVisibility as Ne } from "@vueuse/core";
+import { nanoid as ke } from "nanoid";
+import { iconExists as k, Icon as Me, addIcon as Be } from "@iconify/vue";
+function oe(n, t) {
+  if (n && Object.keys(n).length && t) {
+    if (t.indexOf(".") === -1)
+      return n[t];
+    {
+      const e = t.split(".");
+      let i = n;
+      for (let r = 0, p = e.length; r < p; ++r) {
+        if (n == null)
+          return null;
+        i = i[e[r]];
+      }
+      return i;
+    }
+  } else
+    return null;
+}
+function R(n) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(l(n));
+}
+function $e(n) {
+  return typeof n == "string" || n instanceof String;
+}
+function se(n) {
+  var t, e;
+  if (n)
+    return (e = (t = n.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : t.join("-")) == null ? void 0 : e.toLowerCase();
+}
+function M(n) {
+  return Array.isArray(n) ? n.filter((t) => $e(t)).join(" ") : n;
+}
+function Ue(n, t) {
+  const {
+    invalid: e,
+    valid: i,
+    hint: r,
+    loading: p
+  } = t, {
+    hintLabel: u,
+    modelValue: w,
+    valid: h,
+    validLabel: m,
+    invalid: o,
+    invalidLabel: c,
+    ...b
+  } = Y(n), v = oe(b, "loading"), S = oe(b, "loadingLabel"), T = s(() => o.value ? !!(o.value && e || c != null && c.value && Array.isArray(c.value) && c.value.length > 0 || c != null && c.value && !R(c)) : !1), y = s(
+    () => !!(u && u.value || r)
+  ), C = s(
+    () => !!(m && m.value || i)
+  ), L = s(
+    () => !!(v != null && v.value && p || v != null && v.value && (S != null && S.value))
+  ), _ = s(
+    () => y.value || C.value || T.value || L.value
+  );
+  return {
+    hasInvalid: T,
+    hasHint: y,
+    hasValid: C,
+    hasLoading: L,
+    HintSlot: {
+      name: "HintSlot",
+      props: {
+        params: {
+          type: Object,
+          default: () => ({})
+        }
+      },
+      setup(x) {
+        const V = s(() => {
+          const D = xe({
+            hintLabel: u,
+            modelValue: w,
+            valid: h,
+            validLabel: m,
+            invalid: o,
+            invalidLabel: c,
+            loading: v,
+            loadingLabel: S,
+            ...x.params
+          });
+          return o != null && o.value ? (e == null ? void 0 : e(D)) || M(c == null ? void 0 : c.value) || (u == null ? void 0 : u.value) : h != null && h.value ? (i == null ? void 0 : i(D)) || M(m == null ? void 0 : m.value) || (u == null ? void 0 : u.value) : v != null && v.value ? (p == null ? void 0 : p(D)) || M(S == null ? void 0 : S.value) || (u == null ? void 0 : u.value) : (r == null ? void 0 : r(D)) || M(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
+        });
+        return {
+          isVisible: _,
+          hasInvalid: T,
+          hasValid: C,
+          hintContent: V
+        };
+      },
+      render() {
+        if (this.isVisible)
+          return g(
+            "small",
+            {
+              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+            },
+            this.hintContent
+          );
+      }
+    }
+  };
+}
+function We(n, t, e) {
+  const i = s(
+    () => !!(n != null && n.value && t.value === "left" || e != null && e.iconLeft)
+  ), r = s(
+    () => !!(n != null && n.value && t.value === "right" || e != null && e.iconRight)
+  ), p = s(
+    () => !!(n != null && n.value && t.value === "top" || e != null && e.iconTop)
+  ), u = s(
+    () => !!(n != null && n.value && t.value === "bottom" || e != null && e.iconBottom)
+  );
+  return {
+    hasIcon: s(() => typeof (n == null ? void 0 : n.value) == "string" ? { name: n == null ? void 0 : n.value } : n == null ? void 0 : n.value),
+    hasIconLeft: i,
+    hasIconRight: r,
+    hasIconTop: p,
+    hasIconBottom: u
+  };
+}
+function Fe(n, t) {
+  const { focused: e } = Ve(n);
+  return pe(e, (i) => {
+    t(i ? "focus" : "blur", l(n));
+  }), {
+    focused: e
+  };
+}
+function je(n, t, e = 0) {
+  let i;
+  return typeof e == "string" && (e = parseInt(e)), s({
+    get: () => n == null ? void 0 : n.value,
+    set: (r) => {
+      i && clearTimeout(i), i = setTimeout(() => {
+        t("update:modelValue", r);
+      }, e);
+    }
+  });
+}
+function qe(n, t) {
+  const e = s(() => (l(n) ?? "").length), i = s(() => (t == null ? void 0 : t.lowerLimit) !== void 0 && e.value < (t == null ? void 0 : t.lowerLimit) ? e.value - t.lowerLimit : (t == null ? void 0 : t.upperLimit) !== void 0 && e.value < (t == null ? void 0 : t.upperLimit) ? t.upperLimit - e.value : 0), r = s(() => (t == null ? void 0 : t.mode) === !1 ? "" : (t == null ? void 0 : t.mode) === "limit" && (t != null && t.upperLimit) ? `${e.value} / ${t.lowerLimit ? `${t.lowerLimit}-` : ""}${t.upperLimit}` : (t == null ? void 0 : t.mode) === "countdown" ? i.value === 0 ? void 0 : i : e.value);
+  return {
+    length: e,
+    gap: i,
+    formatted: r
+  };
+}
+function ve(n, t) {
+  const e = { [`${n}`]: !0 };
+  return {
+    bemCssClasses: s(() => Object.keys(t).reduce((r, p) => {
+      const u = l(t[p]) || !1;
+      if (!u)
+        return r;
+      if (p === "modifiers") {
+        const w = Array.isArray(u) ? u : u.split(" ");
+        return {
+          ...r,
+          ...w.reduce(
+            (h, m) => ({
+              ...h,
+              [`${n}--${se(m)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...r,
+          [`${n}--${se(p)}`]: u
+        };
+    }, e) || {})
+  };
+}
+const ze = "ds", Xe = {
+  color: String,
+  width: {
+    type: [String, Number]
+  },
+  height: {
+    type: [String, Number]
+  },
+  name: {
+    type: String,
+    required: !0
+  },
+  provider: {
+    type: String
+  },
+  prefix: {
+    type: String,
+    default: "normal"
+  },
+  src: String,
+  horizontalFlip: Boolean,
+  verticalFlip: Boolean,
+  flip: String,
+  mode: String,
+  inline: Boolean,
+  rotate: [Number, String],
+  onLoad: Function,
+  svg: String,
+  modifiers: {
+    type: [String, Array]
+  }
+}, Ke = {
+  name: "VvIcon"
+}, A = /* @__PURE__ */ H({
+  ...Ke,
+  props: Xe,
+  setup(n) {
+    const t = n, e = $(!0), { modifiers: i } = Y(t), r = Ce(ze), { bemCssClasses: p } = ve("vv-icon", {
+      modifiers: i
+    }), u = s(() => t.provider || (r == null ? void 0 : r.provider)), w = s(() => {
+      const o = t.name ?? "", c = `@${u.value}:${t.prefix}:${t.name}`;
+      return k(o) ? o : k(c) ? c : (r == null ? void 0 : r.iconsCollections.find((b) => {
+        const v = `@${u.value}:${b.prefix}:${o}`;
+        if (k(v))
+          return v;
+      })) || o;
+    });
+    function h(o) {
+      let c = null;
+      if (typeof window > "u") {
+        const { JSDOM: T } = require("jsdom");
+        c = new T().window;
+      }
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+    }
+    function m(o) {
+      const c = h(o), b = (c == null ? void 0 : c.innerHTML.trim()) || "";
+      c && b && Be(`@${u.value}:${t.prefix}:${t.name}`, {
+        body: b,
+        height: c.viewBox.baseVal.height,
+        width: c.viewBox.baseVal.width
+      });
+    }
+    return r && (t.src && !k(`@${u.value}:${t.prefix}:${t.name}`) ? (e.value = !1, r.fetchIcon(t.src).then((o) => {
+      o && (m(o), e.value = !0);
+    }).catch((o) => {
+      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
+    })) : t.svg && m(t.svg)), (o, c) => e.value ? (E(), P(l(Me), B({
+      key: 0,
+      class: l(p)
+    }, {
+      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: l(w)
+    }), null, 16, ["class"])) : O("", !0);
+  }
+}), Ze = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, Ge = {
+  invalid: Boolean,
+  invalidLabel: [String, Array]
+}, Ye = {
+  loading: Boolean,
+  loadingLabel: String
+}, Je = {
+  disabled: Boolean
+}, Qe = {
+  readonly: Boolean
+}, et = {
+  modifiers: [String, Array]
+}, tt = {
+  hintLabel: { type: String, default: "" }
+}, nt = {
+  count: {
+    type: [Boolean, String],
+    default: !1,
+    validator: (n) => [!0, !1, "limit", "countdown"].includes(n)
+  }
+}, rt = {
+  debounce: [Number, String]
+}, ue = {
+  LEFT: "left",
+  RIGHT: "right"
+}, at = {
+  icon: { type: [String, Object] },
+  iconPosition: {
+    type: String,
+    validation: (n) => Object.values(ue).includes(n),
+    default: ue.RIGHT
+  }
+}, it = {
+  tabindex: { type: [String, Number], default: 0 }
+}, lt = {
+  floating: Boolean
+}, ot = {
+  id: [String, Number],
+  name: { type: String, required: !0 }
+}, st = {
+  autofocus: Boolean
+}, ut = {
+  autocomplete: { type: String, default: "off" }
+}, ct = {
+  ...ot,
+  ...st,
+  ...ut,
+  ...it,
+  ...Je,
+  ...Qe,
+  ...Ze,
+  ...Ge,
+  ...tt,
+  ...Ye,
+  ...et,
+  ...nt,
+  ...rt,
+  ...at,
+  ...lt,
+  minlength: Number,
+  maxlength: Number,
+  placeholder: String,
+  required: Boolean,
+  label: String
+}, a = {
+  TEXT: "text",
+  PASSWORD: "password",
+  NUMBER: "number",
+  EMAIL: "email",
+  TEL: "tel",
+  URL: "url",
+  COLOR: "color",
+  SEARCH: "search",
+  DATE: "date",
+  TIME: "time",
+  DATETIME_LOCAL: "datetime-local",
+  MONTH: "month",
+  WEEK: "week"
+}, I = {
+  PASSWORD_SHOW: "eye-on",
+  PASSWORD_HIDE: "eye-off",
+  DATE: "calendar",
+  TIME: "time",
+  COLOR: "color",
+  SEARCH: "close"
+}, dt = ["update:modelValue", "focus", "blur", "keyup"], pt = {
+  ...ct,
+  modelValue: [String, Number],
+  type: {
+    type: String,
+    default: a.TEXT,
+    validator: (n) => Object.values(a).includes(n)
+  },
+  min: [Number, Date, String],
+  max: [Number, Date, String],
+  step: { type: [String, Number], default: 1 },
+  pattern: String,
+  multiple: Boolean,
+  iconShowPassword: {
+    type: String,
+    default: I.PASSWORD_SHOW
+  },
+  iconHidePassword: {
+    type: String,
+    default: I.PASSWORD_HIDE
+  },
+  iconClear: {
+    type: String,
+    default: I.SEARCH
+  },
+  labelStepUp: {
+    type: String,
+    default: "Increase value"
+  },
+  labelStepDown: {
+    type: String,
+    default: "Decrease value"
+  },
+  labelShowPassword: {
+    type: String,
+    default: "Show password"
+  },
+  labelHidePassword: {
+    type: String,
+    default: "Hide password"
+  },
+  labelClear: {
+    type: String,
+    default: "Clear"
+  }
+}, ce = H({
+  components: {
+    VvIcon: A
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    labelShow: {
+      type: String,
+      default: "Show password"
+    },
+    labelHide: {
+      type: String,
+      default: "Hide password"
+    },
+    iconShow: {
+      type: String,
+      default: I.PASSWORD_SHOW
+    },
+    iconHide: {
+      type: String,
+      default: I.PASSWORD_HIDE
+    }
+  },
+  emits: ["toggle-password"],
+  setup(n, { emit: t }) {
+    const e = $(!1), i = s(
+      () => e.value ? n.iconHide : n.iconShow
+    );
+    function r(p) {
+      p == null || p.stopPropagation(), n.disabled || (e.value = !e.value, t("toggle-password", e.value));
+    }
+    return {
+      active: e,
+      activeIcon: i,
+      onClick: r
+    };
+  },
+  render() {
+    const n = g(A, {
+      name: this.activeIcon,
+      class: "vv-input-text__action-icon"
+    });
+    return g(
+      "button",
+      {
+        disabled: this.disabled,
+        class: "vv-input-text__action",
+        ariaLabel: this.active ? this.labelHide : this.labelShow,
+        type: "button",
+        onClick: this.onClick
+      },
+      n
+    );
+  }
+}), Z = H({
+  components: {
+    VvIcon: A
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String
+    },
+    mode: {
+      type: String,
+      validator: (n) => ["up", "down"].includes(n),
+      default: "up"
+    }
+  },
+  emits: ["step-up", "step-down"],
+  setup(n, { emit: t }) {
+    const e = s(() => n.mode === "up");
+    return {
+      isUp: e,
+      onClick: (r) => {
+        r == null || r.stopPropagation(), n.disabled || t(e.value ? "step-up" : "step-down");
+      }
+    };
+  },
+  render() {
+    return g("button", {
+      class: [
+        "vv-input-text__action-chevron",
+        this.isUp && "vv-input-text__action-chevron-up"
+      ],
+      disabled: this.disabled,
+      ariaLabel: this.label,
+      onClick: this.onClick
+    });
+  }
+}), de = H({
+  components: {
+    VvIcon: A
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: String,
+      default: "close"
+    }
+  },
+  emits: ["clear"],
+  setup(n, { emit: t }) {
+    function e(i) {
+      i == null || i.stopPropagation(), n.disabled || t("clear");
+    }
+    return {
+      onClick: e
+    };
+  },
+  render() {
+    const n = g(A, {
+      name: this.icon,
+      class: "vv-input-text__action-icon"
+    });
+    return g(
+      "button",
+      {
+        disabled: this.disabled,
+        class: "vv-input-text__action",
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      n
+    );
+  }
+});
+function G(n, t) {
+  return {
+    name: "VvInputTextActions",
+    components: {
+      VvIcon: A,
+      VvInputPasswordAction: ce,
+      VvInputStepAction: Z,
+      VvInputClearAction: de
+    },
+    setup() {
+      return {
+        isDisabled: s(() => t.disabled || t.readonly),
+        labelStepUp: t.labelStepUp,
+        labelStepDown: t.labelStepDown,
+        labelShowPassword: t.labelShowPassword,
+        labelHidePassword: t.labelHidePassword,
+        labelClear: t.labelClear,
+        iconShowPassword: t.iconShowPassword,
+        iconHidePassword: t.iconHidePassword
+      };
+    },
+    render() {
+      let e = null;
+      switch (n) {
+        case a.SEARCH: {
+          const { onClear: i } = this.$attrs;
+          e = [
+            g(de, {
+              disabled: this.isDisabled,
+              label: this.labelShowPassword,
+              onClear: i
+            })
+          ];
+          break;
+        }
+        case a.PASSWORD: {
+          const { onTogglePassword: i } = this.$attrs;
+          e = [
+            g(ce, {
+              disabled: this.isDisabled,
+              onTogglePassword: i,
+              labelShow: this.labelShowPassword,
+              labelHide: this.labelHidePassword,
+              iconShow: this.iconShowPassword,
+              iconHide: this.iconHidePassword
+            })
+          ];
+          break;
+        }
+        case a.NUMBER: {
+          const { onStepUp: i, onStepDown: r } = this.$attrs;
+          e = [
+            g(Z, {
+              mode: "up",
+              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
+              label: this.labelStepUp,
+              onStepUp: i,
+              onStepDown: r
+            }),
+            g(Z, {
+              mode: "down",
+              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
+              label: this.labelStepDown,
+              onStepUp: i,
+              onStepDown: r
+            })
+          ];
+          break;
+        }
+      }
+      return Array.isArray(e) ? g("div", { class: "vv-input-text__actions-group" }, e) : e;
+    }
+  };
+}
+const vt = ["for"], ft = { class: "vv-input-text__wrapper" }, mt = ["id"], St = {
+  key: 0,
+  class: "vv-input-text__limit"
+}, ht = {
+  name: "VvInputText"
+}, Et = /* @__PURE__ */ H({
+  ...ht,
+  props: pt,
+  emits: dt,
+  setup(n, { emit: t }) {
+    const e = n, i = De(), r = $(), {
+      icon: p,
+      iconPosition: u,
+      label: w,
+      modelValue: h,
+      count: m,
+      valid: o,
+      invalid: c,
+      loading: b
+    } = Y(e), v = s(() => String(e.id || ke())), S = s(() => `${v.value}-hint`), T = s(
+      () => e.floating && R(e.placeholder) ? " " : e.placeholder
+    ), y = je(h, t, e.debounce), { focused: C } = Fe(r, t), L = Ne(r);
+    pe(L, (d) => {
+      d && e.autofocus && (C.value = !0);
+    });
+    const _ = $(!1), x = s(() => e.type === a.PASSWORD), V = () => {
+      _.value = !_.value;
+    }, D = s(
+      () => e.type === a.TIME || e.type === a.DATETIME_LOCAL || e.type === a.DATE || e.type === a.WEEK || e.type === a.MONTH
+    ), fe = s(() => e.type === a.NUMBER), J = () => {
+      F.value && (r.value.stepUp(), y.value = l(r).value);
+    }, Q = () => {
+      F.value && (r.value.stepDown(), y.value = l(r).value);
+    }, me = s(() => e.type === a.SEARCH), ee = () => {
+      y.value = void 0;
+    }, { hasIconLeft: te, hasIconRight: U, hasIcon: ne } = We(
+      p,
+      u
+    ), W = s(() => {
+      switch (e.type) {
+        case a.COLOR:
+          return { name: I.COLOR };
+        case a.DATE:
+        case a.DATETIME_LOCAL:
+        case a.WEEK:
+        case a.MONTH:
+          return { name: I.DATE };
+        case a.TIME:
+          return { name: I.TIME };
+        default:
+          return "";
+      }
+    }), { formatted: Se } = qe(y, {
+      mode: e.count,
+      upperLimit: e.maxlength,
+      lowerLimit: e.minlength
+    }), F = s(() => !e.disabled && !e.readonly), he = s(
+      () => F.value ? e.tabindex : -1
+    ), re = s(() => !R(h)), ge = s(() => {
+      if (c.value === !0)
+        return !0;
+      if (o.value === !0)
+        return !1;
+    }), { bemCssClasses: be } = ve("vv-input-text", {
+      modifiers: e.modifiers,
+      valid: o,
+      invalid: c,
+      loading: b,
+      disabled: e.disabled,
+      readonly: e.readonly,
+      iconLeft: te,
+      iconRight: U.value || !R(W),
+      floating: e.floating && !R(e.label),
+      dirty: re,
+      focus: C
+    }), ye = s(() => {
+      const d = (() => x.value && _.value || D.value && !re.value && !C.value ? a.TEXT : e.type)(), f = {
+        type: d,
+        name: e.name,
+        tabindex: he.value,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        autocomplete: e.autocomplete,
+        "aria-invalid": ge.value,
+        "aria-describedby": !ae.value && Ee.value ? S.value : void 0,
+        "aria-errormessage": ae.value ? S.value : void 0
+      };
+      return (d === a.DATE || d === a.MONTH || d === a.WEEK || d === a.TIME || d === a.DATETIME_LOCAL || d === a.NUMBER) && (f.step = e.step, f.max = String(e.max), f.min = String(e.min)), (d === a.TEXT || d === a.SEARCH || d === a.URL || d === a.TEL || d === a.EMAIL || d === a.PASSWORD || d === a.NUMBER) && (f.placeholder = T.value), (d === a.TEXT || d === a.SEARCH || d === a.URL || d === a.TEL || d === a.EMAIL || d === a.PASSWORD) && (f.minlength = e.minlength, f.maxlength = e.maxlength, f.pattern = e.pattern), d === a.EMAIL && (f.multiple = e.multiple), f;
+    }), j = s(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue,
+      togglePassword: V,
+      stepUp: J,
+      stepDown: Q,
+      clear: ee
+    })), { HintSlot: we, hasHint: Ee, hasInvalid: ae } = Ue(e, i), Ie = G(
+      a.PASSWORD,
+      e
+    ), Ae = G(
+      a.NUMBER,
+      e
+    ), Te = G(
+      a.SEARCH,
+      e
+    );
+    return (d, f) => (E(), z("div", {
+      class: Pe(l(be))
+    }, [
+      l(w) ? (E(), z("label", {
+        key: 0,
+        for: l(v),
+        class: "vv-input-text__label"
+      }, ie(l(w)), 9, vt)) : O("", !0),
+      le("div", ft, [
+        X(d.$slots, "before", N(K(l(j))), () => [
+          l(te) ? (E(), P(A, B({
+            key: 0,
+            class: "vv-input-text__icon-left"
+          }, l(ne)), null, 16)) : O("", !0)
+        ]),
+        _e(le("input", B({
+          id: l(v),
+          ref_key: "input",
+          ref: r,
+          "onUpdate:modelValue": f[0] || (f[0] = (q) => Oe(y) ? y.value = q : null)
+        }, l(ye), {
+          onKeyup: f[1] || (f[1] = (q) => t("keyup", q))
+        }), null, 16, mt), [
+          [Re, l(y)]
+        ]),
+        X(d.$slots, "after", N(K(l(j))), () => [
+          l(U) || l(W) ? (E(), P(A, N(B({ key: 0 }, l(U) ? l(ne) : l(W))), null, 16)) : l(x) ? (E(), P(l(Ie), {
+            key: 1,
+            onTogglePassword: V
+          })) : l(fe) ? (E(), P(l(Ae), {
+            key: 2,
+            onStepUp: J,
+            onStepDown: Q
+          })) : l(me) ? (E(), P(l(Te), {
+            key: 3,
+            onClear: ee
+          })) : O("", !0)
+        ]),
+        l(m) ? (E(), z("span", St, [
+          X(d.$slots, "count", N(K(l(j))), () => [
+            He(ie(l(Se)), 1)
+          ])
+        ])) : O("", !0)
+      ]),
+      Le(l(we), {
+        id: l(S),
+        class: "vv-input-text__hint"
+      }, null, 8, ["id"])
+    ], 2));
+  }
+});
+export {
+  Et as default
+};