@volverjs/ui-vue 0.0.1-beta.11

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

@@ -0,0 +1,727 @@
+import { computed as d, unref as i, defineComponent as L, ref as C, toRefs as U, inject as ve, openBlock as O, createBlock as k, mergeProps as $, createCommentVNode as x, h as P, watch as ne, useSlots as ye, useAttrs as ge, onMounted as he, createElementBlock as N, toDisplayString as G, createElementVNode as J, renderSlot as V, normalizeProps as K, createVNode as M, withDirectives as Se, isRef as Ae, vModelDynamic as Ee, guardReactiveProps as be, createTextVNode as Ie } from "vue";
+import { iconExists as j, Icon as Oe, addIcon as Pe } from "@iconify/vue";
+import { toReactive as Te, useFocus as _e, refDebounced as xe, isString as Q } from "@vueuse/core";
+const A = {
+  equals(t, n, e) {
+    return e ? this.resolveFieldData(t, e) === this.resolveFieldData(n, e) : this.deepEquals(t, n);
+  },
+  deepEquals(t, n) {
+    if (t === n)
+      return !0;
+    if (t && n && typeof t == "object" && typeof n == "object") {
+      const e = Array.isArray(t), o = Array.isArray(n);
+      let r, s, a;
+      if (e && o) {
+        if (s = t.length, s != n.length)
+          return !1;
+        for (r = s; r-- !== 0; )
+          if (!this.deepEquals(t[r], n[r]))
+            return !1;
+        return !0;
+      }
+      if (e != o)
+        return !1;
+      const p = t instanceof Date, u = n instanceof Date;
+      if (p != u)
+        return !1;
+      if (p && u)
+        return t.getTime() == n.getTime();
+      const S = t instanceof RegExp, l = n instanceof RegExp;
+      if (S != l)
+        return !1;
+      if (S && l)
+        return t.toString() == n.toString();
+      const c = Object.keys(t);
+      if (s = c.length, s !== Object.keys(n).length)
+        return !1;
+      for (r = s; r-- !== 0; )
+        if (!Object.prototype.hasOwnProperty.call(n, c[r]))
+          return !1;
+      for (r = s; r-- !== 0; )
+        if (a = c[r], !this.deepEquals(t[a], n[a]))
+          return !1;
+      return !0;
+    }
+    return t !== t && n !== n;
+  },
+  resolveFieldData(t, n) {
+    if (t && Object.keys(t).length && n) {
+      if (n.indexOf(".") === -1)
+        return t[n];
+      {
+        const e = n.split(".");
+        let o = t;
+        for (let r = 0, s = e.length; r < s; ++r) {
+          if (t == null)
+            return null;
+          o = o[e[r]];
+        }
+        return o;
+      }
+    } else
+      return null;
+  },
+  isFunction(t) {
+    return !!(t && t.constructor && t.call && t.apply);
+  },
+  findIndexInList(t, n) {
+    let e = -1;
+    if (n) {
+      for (let o = 0; o < n.length; o++)
+        if (this.equals(n[o], t)) {
+          e = o;
+          break;
+        }
+    }
+    return e;
+  },
+  contains(t, n) {
+    if (t != null && n && n.length) {
+      for (const e of n)
+        if (this.equals(t, e))
+          return !0;
+    }
+    return !1;
+  },
+  isEmpty(t) {
+    return t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0;
+  },
+  isNotEmpty(t) {
+    return !this.isEmpty(t);
+  },
+  pickBy(t, n) {
+    return Object.fromEntries(
+      Object.entries(t).filter(([e]) => n(e))
+    );
+  },
+  removeFromList(t, n) {
+    const e = this.findIndexInList(t, n);
+    return e > -1 ? n.filter((o, r) => r !== e) : n;
+  },
+  isString(t) {
+    return typeof t == "string" || t instanceof String;
+  },
+  propsToObject(t) {
+    return Object.keys(t).reduce((n, e) => {
+      var o, r, s, a, p;
+      return this.isFunction(t[e]) ? n[e] = t[e]() : Array.isArray(t[e]) ? n[e] = t[e][0]() : (o = t[e]) != null && o.type && (Array.isArray(t[e].type) ? n[e] = ((r = t[e]) == null ? void 0 : r.default) || ((s = t[e]) == null ? void 0 : s.type[0]()) : n[e] = ((a = t[e]) == null ? void 0 : a.default) || ((p = t[e]) == null ? void 0 : p.type())), n;
+    }, {});
+  },
+  filterArray(t, n, e) {
+    return t.filter((o) => n.some((r) => typeof r == "string" ? o[e] == r : this.equals(
+      o[e],
+      r[e]
+    )));
+  },
+  kebabCase(t) {
+    var n, e;
+    if (t)
+      return (e = (n = t.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 : n.join("-")) == null ? void 0 : e.toLowerCase();
+  }
+}, De = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, Ce = {
+  error: Boolean,
+  errorLabel: [String, Array]
+}, we = {
+  loading: Boolean,
+  loadingLabel: String
+}, Re = {
+  modifiers: [String, Array]
+}, Ne = {
+  hintLabel: { type: String, default: "" }
+}, Be = {
+  limit: {
+    type: [Boolean, String],
+    default: !1,
+    validator: (t) => [!0, !1, "countdown"].includes(t)
+  }
+}, w = {
+  TEXT: "text",
+  PASSWORD: "password",
+  DATE: "date",
+  DATETIME_LOCAL: "datetime-local",
+  NUMBER: "number",
+  TIME: "time",
+  EMAIL: "email",
+  TEL: "tel",
+  URL: "url",
+  COLOR: "color",
+  SEARCH: "search",
+  FILE: "file"
+}, H = {
+  LEFT: "left",
+  RIGHT: "right"
+}, q = {
+  PASSWORD_ON: "eye-on",
+  PASSWORD_OFF: "eye-off",
+  DATE: "calendar",
+  TIME: "time",
+  COLOR: "color",
+  SEARCH: "search"
+}, h = {
+  TYPES: w,
+  ICON_POSITIONS: H,
+  TYPES_ICON: q
+}, ke = ["update:modelValue", "focus", "blur"], $e = {
+  ...De,
+  ...Ce,
+  ...Ne,
+  ...we,
+  ...Re,
+  ...Be,
+  modelValue: null,
+  type: {
+    type: String,
+    default: w.TEXT,
+    validator: (t) => Object.values(w).includes(t)
+  },
+  id: String,
+  name: { type: String, required: !0 },
+  autocomplete: { type: String, default: "off" },
+  autofocus: Boolean,
+  minlength: Number,
+  maxlength: Number,
+  min: [Number, Date],
+  max: [Number, Date],
+  step: Number,
+  label: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  placeholder: String,
+  icon: { type: String, default: "" },
+  iconPosition: {
+    type: String,
+    validation: (t) => Object.values(H).includes(t),
+    default: H.RIGHT
+  },
+  floating: Boolean,
+  debounce: Number,
+  autoclear: Boolean
+}, Le = "ds", Fe = {
+  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]
+  }
+};
+function Ve(t, n) {
+  const e = { [`${t}`]: !0 };
+  return {
+    bemCssClasses: d(() => Object.keys(n).reduce((r, s) => {
+      const a = i(n[s]) || !1;
+      if (!a)
+        return r;
+      if (s === "modifiers") {
+        const p = Array.isArray(a) ? a : [a];
+        return {
+          ...r,
+          ...p.reduce(
+            (u, S) => ({
+              ...u,
+              [`${t}--${A.kebabCase(
+                S
+              )}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...r,
+          [`${t}--${A.kebabCase(s)}`]: a
+        };
+    }, e) || {})
+  };
+}
+function Me(t, n) {
+  const e = { [`${t}`]: !0 };
+  return Object.keys(n).reduce((o, r) => {
+    const s = i(n[r]) || !1;
+    if (!s)
+      return o;
+    if (r === "modifiers") {
+      const a = Array.isArray(s) ? s : [s];
+      return {
+        ...o,
+        ...a.reduce(
+          (p, u) => ({
+            ...p,
+            [`${t}--${A.kebabCase(
+              u
+            )}`]: !0
+          }),
+          {}
+        )
+      };
+    } else
+      return {
+        ...o,
+        [`${t}--${A.kebabCase(r)}`]: s
+      };
+  }, e) || {};
+}
+const T = /* @__PURE__ */ L({
+  __name: "VvIcon",
+  props: Fe,
+  setup(t) {
+    const n = t, e = C(!0), { modifiers: o } = U(n), r = ve(Le), { bemCssClasses: s } = Ve("vv-icon", {
+      modifiers: o
+    }), a = d(() => n.provider || (r == null ? void 0 : r.provider)), p = d(() => {
+      const l = n.name || "", c = `@${a.value}:${n.prefix}:${n.name}`;
+      return j(l) ? l : j(c) ? c : (r == null ? void 0 : r.iconsCollections.find((v) => {
+        const f = `@${a.value}:${v.prefix}:${l}`;
+        if (j(f))
+          return f;
+      })) || l;
+    });
+    function u(l) {
+      let c = null;
+      if (typeof window > "u") {
+        const { JSDOM: b } = require("jsdom");
+        c = new b().window;
+      }
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(l, "text/html").querySelector("svg");
+    }
+    function S(l) {
+      const c = u(l), v = (c == null ? void 0 : c.innerHTML.trim()) || "";
+      c && v && Pe(`@${a.value}:${n.prefix}:${n.name}`, {
+        body: v,
+        height: c.viewBox.baseVal.height,
+        width: c.viewBox.baseVal.width
+      });
+    }
+    return r && (n.src ? (e.value = !1, r.fetchIcon(n.src).then((l) => {
+      l && (S(l), e.value = !0);
+    }).catch((l) => {
+      throw new Error(`During fetch icon: ${l == null ? void 0 : l.message}`);
+    })) : n.svg && S(n.svg)), (l, c) => e.value ? (O(), k(i(Oe), $({
+      key: 0,
+      class: i(s)
+    }, {
+      ...l.$props,
+      provider: i(a),
+      icon: i(p)
+    }), null, 16, ["class"])) : x("", !0);
+  }
+});
+function B(t) {
+  return Array.isArray(t) ? t.filter((n) => A.isString(n)).reduce((n, e) => n.length > 0 ? n + `
+` + e : e, "") : t;
+}
+function je(t, n) {
+  return {
+    name: "HintSlot",
+    props: {
+      params: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    setup(e) {
+      const o = U(t), {
+        error: r,
+        valid: s,
+        hint: a,
+        loading: p
+      } = n, {
+        hintLabel: u,
+        modelValue: S,
+        valid: l,
+        validLabel: c,
+        error: v,
+        errorLabel: f
+      } = o, y = A.resolveFieldData(o, "loading"), b = A.resolveFieldData(
+        o,
+        "loadingLabel"
+      ), I = d(() => v.value ? !!(v.value && r || (f == null ? void 0 : f.value) && Array.isArray(f.value) && f.value.length > 0 || (f == null ? void 0 : f.value) && A.isNotEmpty(f.value)) : !1), D = d(() => !!(u && u.value || a || s || c && c.value || I.value || (y == null ? void 0 : y.value) && p || (y == null ? void 0 : y.value) && (b == null ? void 0 : b.value))), R = d(() => {
+        const _ = Te({
+          hintLabel: u,
+          modelValue: S,
+          valid: l,
+          validLabel: c,
+          error: v,
+          errorLabel: f,
+          loading: y,
+          loadingLabel: b,
+          ...e.params
+        });
+        return v != null && v.value ? (r == null ? void 0 : r(_)) || B(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : l != null && l.value ? (s == null ? void 0 : s(_)) || B(c == null ? void 0 : c.value) || (u == null ? void 0 : u.value) : y != null && y.value ? (p == null ? void 0 : p(_)) || B(b == null ? void 0 : b.value) || (u == null ? void 0 : u.value) : (a == null ? void 0 : a(_)) || B(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
+      });
+      return {
+        hasHint: D,
+        hintContent: R
+      };
+    },
+    render() {
+      if (this.hasHint)
+        return P(
+          "pre",
+          { style: { "white-space": "pre" } },
+          this.hintContent
+        );
+    }
+  };
+}
+const ee = L({
+  components: {
+    VvIcon: T
+  },
+  props: {
+    disabled: Boolean
+  },
+  setup(t, { emit: n }) {
+    const e = C(!1), o = d(
+      () => e.value ? q.PASSWORD_OFF : q.PASSWORD_ON
+    );
+    function r() {
+      t.disabled || (e.value = !e.value, n(
+        e.value ? "action-password-on" : "action-password-off"
+      ));
+    }
+    return {
+      activeIcon: o,
+      onClick: r
+    };
+  },
+  render() {
+    const t = P(T, { name: this.activeIcon });
+    return P(
+      "button",
+      {
+        disabled: this.disabled,
+        class: ["vv-input-text__action"],
+        onClick: this.onClick
+      },
+      t
+    );
+  }
+}), Y = L({
+  components: {
+    VvIcon: T
+  },
+  props: {
+    disabled: Boolean,
+    mode: {
+      type: String,
+      validator: (t) => ["up", "down"].includes(t),
+      default: "up"
+    }
+  },
+  setup(t, { emit: n }) {
+    function e() {
+      t.disabled || n(
+        t.mode === "up" ? "action-step-up" : "action-step-down"
+      );
+    }
+    return {
+      onClick: e
+    };
+  },
+  render() {
+    return P("button", {
+      class: [
+        "vv-input-text__action-chevron",
+        this.mode === "up" && "vv-input-text__action-chevron-up"
+      ],
+      disabled: this.disabled,
+      onClick: this.onClick
+    });
+  }
+});
+function te(t, n) {
+  return {
+    name: "VvInputTextActions",
+    components: {
+      VvIcon: T,
+      VvInputPasswordAction: ee,
+      VvInputStepAction: Y
+    },
+    setup() {
+      return {
+        isDisabled: d(() => n.disabled || n.readonly)
+      };
+    },
+    render() {
+      let e = null;
+      switch (t) {
+        case w.PASSWORD: {
+          const { onActionPasswordOn: o, onActionPasswordOff: r } = this.$attrs;
+          e = [
+            P(ee, {
+              disabled: this.isDisabled,
+              onActionPasswordOn: o,
+              onActionPasswordOff: r
+            })
+          ];
+          break;
+        }
+        case w.NUMBER: {
+          const { onActionStepUp: o, onActionStepDown: r } = this.$attrs;
+          e = [
+            P(Y, {
+              mode: "up",
+              disabled: this.isDisabled,
+              onActionStepUp: o,
+              onActionStepDown: r
+            }),
+            P(Y, {
+              mode: "down",
+              disabled: this.isDisabled,
+              onActionStepUp: o,
+              onActionStepDown: r
+            })
+          ];
+          break;
+        }
+        default: {
+          e = null;
+          break;
+        }
+      }
+      return Array.isArray(e) ? P("div", { class: "vv-input-text__actions-group" }, e) : e;
+    }
+  };
+}
+function Ye(t, n, e) {
+  const o = d(
+    () => !!(t.value && n.value === "left" || e.iconLeft)
+  ), r = d(
+    () => !!(t.value && n.value === "right" || e.iconRight)
+  ), s = d(
+    () => !!(t.value && n.value === "top" || e.iconTop)
+  ), a = d(
+    () => !!(t.value && n.value === "bottom" || e.iconBottom)
+  );
+  return {
+    hasIconLeft: o,
+    hasIconRight: r,
+    hasIconTop: s,
+    hasIconBottom: a
+  };
+}
+function He(t, n) {
+  const { focused: e } = _e(t);
+  return ne(e, (o) => {
+    n(o ? "focus" : "blur", t.value);
+  }), {
+    focused: e
+  };
+}
+function qe(t, n, e) {
+  const o = C(t == null ? void 0 : t.value), r = xe(
+    o,
+    n || 0
+  );
+  return ne(r, (s) => e("update:modelValue", s)), o;
+}
+function Ue(t, n) {
+  const e = d(() => {
+    const s = i(t);
+    return Q(s) ? s.length : 0;
+  }), o = d(() => {
+    const s = i(t) || "";
+    return !Q(s) || n.mode === !1 ? 0 : n.mode === !0 ? s.length : i(n.upperLimit) - s.length;
+  }), r = d(() => n.mode === !1 ? "" : n.mode === !0 && n.upperLimit && n.upperLimit > 0 ? `${o.value}/${i(n.upperLimit)}` : o.value);
+  return {
+    textLength: e,
+    textLimitLength: o,
+    formattedTextLimitLength: r
+  };
+}
+const We = ["for"], ze = { class: "vv-input-text__wrapper" }, Ze = {
+  key: 2,
+  class: "vv-input-text__limit"
+}, Xe = {
+  inheritAttrs: !1
+}, Qe = /* @__PURE__ */ L({
+  ...Xe,
+  __name: "VvInputText",
+  props: $e,
+  emits: ke,
+  setup(t, { emit: n }) {
+    const e = t, o = ye(), r = ge(), s = C(), { icon: a, iconPosition: p, label: u, modelValue: S, autoclear: l, limit: c } = U(e), v = e.id || e.name, f = `${e.name}-label`, y = `${e.name}-hint`, b = d(
+      () => e.floating && A.isEmpty(e.placeholder) ? " " : e.placeholder
+    ), I = qe(S, e.debounce, n), D = C(!1), R = d(() => e.type === h.TYPES.PASSWORD), _ = d(() => e.type === h.TYPES.NUMBER);
+    function re() {
+      const g = e.max;
+      !Z.value && I.value + 1 <= g && (s.value.stepUp(), I.value = i(s.value).value);
+    }
+    function oe() {
+      const g = e.min;
+      !Z.value && I.value - 1 <= g && (s.value.stepDown(), I.value = i(s.value).value);
+    }
+    const { hasIconLeft: W, hasIconRight: z } = Ye(a, p, {
+      iconLeft: o["icon-left"],
+      iconRight: o["icon-right"]
+    }), F = d(() => {
+      switch (e.type) {
+        case h.TYPES.PASSWORD:
+          return h.TYPES_ICON.PASSWORD_OFF;
+        case h.TYPES.COLOR:
+          return h.TYPES_ICON.COLOR;
+        case h.TYPES.DATE:
+        case h.TYPES.DATETIME_LOCAL:
+          return h.TYPES_ICON.DATE;
+        case h.TYPES.TIME:
+          return h.TYPES_ICON.TIME;
+        case h.TYPES.SEARCH:
+          return h.TYPES_ICON.SEARCH;
+        default:
+          return "";
+      }
+    }), { textLength: se, formattedTextLimitLength: ie } = Ue(I, {
+      mode: e.limit,
+      upperLimit: e.maxlength || 0
+    }), { focused: ae } = He(s, n), Z = d(() => e.disabled || e.readonly), ue = d(() => {
+      const g = z.value || A.isNotEmpty(F.value), m = e.floating && A.isNotEmpty(e.label), E = A.isNotEmpty(S == null ? void 0 : S.value);
+      return [
+        Me("vv-input-text", {
+          modifiers: e.modifiers,
+          readonly: e.readonly,
+          valid: e.valid,
+          invalid: e.error,
+          loading: e.loading,
+          iconLeft: W,
+          iconRight: g,
+          floating: m,
+          dirty: E
+        }),
+        r.class
+      ];
+    }), le = d(() => {
+      const { style: g } = r, m = A.pickBy(
+        r,
+        (E) => E.startsWith("data-")
+      );
+      return {
+        style: g,
+        ...m
+      };
+    }), ce = d(() => {
+      const g = R.value && D.value ? "text" : e.type, m = A.pickBy(
+        r,
+        (E) => E.startsWith("aria-")
+      );
+      return {
+        id: v,
+        type: g,
+        placeholder: b.value,
+        name: e.name,
+        autocomplete: e.autocomplete,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        minlength: e.minlength,
+        maxlength: e.maxlength,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        "aria-invalid": e.error,
+        "aria-valid": !e.valid,
+        "aria-labeledby": f,
+        "aria-describedby": y,
+        "aria-errormessage": y,
+        ...m
+      };
+    }), X = d(() => {
+      const { modelValue: g, valid: m, error: E } = e;
+      return {
+        valid: m,
+        error: E,
+        modelValue: g
+      };
+    }), de = je(e, o), fe = te(
+      h.TYPES.PASSWORD,
+      e
+    ), pe = te(h.TYPES.NUMBER, e);
+    function me() {
+      I.value = null;
+    }
+    return he(() => {
+      e.autofocus && (ae.value = !0);
+    }), (g, m) => (O(), N("div", $(i(le), { class: i(ue) }), [
+      i(u) ? (O(), N("label", {
+        key: 0,
+        for: i(v)
+      }, G(i(u)), 9, We)) : x("", !0),
+      J("div", ze, [
+        i(W) ? V(g.$slots, "icon-left", K($({ key: 0 }, i(X))), () => [
+          M(T, {
+            class: "vv-input-text__icon-left",
+            name: i(a)
+          }, null, 8, ["name"])
+        ]) : x("", !0),
+        Se(J("input", $({
+          ref_key: "input",
+          ref: s
+        }, i(ce), {
+          "onUpdate:modelValue": m[0] || (m[0] = (E) => Ae(I) ? I.value = E : null),
+          onInput: m[1] || (m[1] = (E) => n("input", E))
+        }), null, 16), [
+          [Ee, i(I)]
+        ]),
+        i(l) && i(se) > 0 ? (O(), N("button", {
+          key: 1,
+          class: "vv-button vv-button--ghost",
+          onClick: me
+        }, [
+          M(T, { name: "clear-field" })
+        ])) : x("", !0),
+        V(g.$slots, "icon-right", K(be(i(X))), () => [
+          i(R) ? (O(), k(i(fe), {
+            key: 0,
+            onActionPasswordOn: m[2] || (m[2] = (E) => D.value = !0),
+            onActionPasswordOff: m[3] || (m[3] = (E) => D.value = !1)
+          })) : i(_) ? (O(), k(i(pe), {
+            key: 1,
+            onActionStepUp: re,
+            onActionStepDown: oe
+          })) : i(z) || i(F) ? (O(), k(T, {
+            key: 2,
+            name: i(a) || i(F)
+          }, null, 8, ["name"])) : x("", !0)
+        ]),
+        i(c) ? (O(), N("span", Ze, [
+          V(g.$slots, "limit", {}, () => [
+            Ie(G(i(ie)), 1)
+          ])
+        ])) : x("", !0)
+      ]),
+      M(i(de), {
+        id: y,
+        class: "vv-input-text__hint"
+      })
+    ], 16));
+  }
+});
+export {
+  Qe as default
+};