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

package/dist/components/VvInputText/vv-input-text.es.js

@@ -1,725 +0,0 @@
-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 re, useSlots as ge, useAttrs as ye, onMounted as he, createElementBlock as N, toDisplayString as J, createElementVNode as K, renderSlot as M, normalizeProps as Q, createVNode as V, withDirectives as Se, isRef as Ae, vModelDynamic as be, guardReactiveProps as Ee, 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 ee } 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 = {
-  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 Fe(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: Le,
-  setup(t) {
-    const n = t, e = C(!0), { modifiers: o } = U(n), r = ve("ds"), { bemCssClasses: s } = Fe("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: E } = require("jsdom");
-        c = new E().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 Ve(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, g = A.resolveFieldData(o, "loading"), E = 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 || (g == null ? void 0 : g.value) && p || (g == null ? void 0 : g.value) && (E == null ? void 0 : E.value))), R = d(() => {
-        const _ = Te({
-          hintLabel: u,
-          modelValue: S,
-          valid: l,
-          validLabel: c,
-          error: v,
-          errorLabel: f,
-          loading: g,
-          loadingLabel: E,
-          ...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) : g != null && g.value ? (p == null ? void 0 : p(_)) || B(E == null ? void 0 : E.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 te = 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 ne(t, n) {
-  return {
-    name: "VvInputTextActions",
-    components: {
-      VvIcon: T,
-      VvInputPasswordAction: te,
-      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(te, {
-              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 je(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 Ye(t, n) {
-  const { focused: e } = _e(t);
-  return re(e, (o) => {
-    n(o ? "focus" : "blur", t.value);
-  }), {
-    focused: e
-  };
-}
-function He(t, n, e) {
-  const o = C(t == null ? void 0 : t.value), r = xe(
-    o,
-    n || 0
-  );
-  return re(r, (s) => e("update:modelValue", s)), o;
-}
-function qe(t, n) {
-  const e = d(() => {
-    const s = i(t);
-    return ee(s) ? s.length : 0;
-  }), o = d(() => {
-    const s = i(t) || "";
-    return !ee(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 Ue = ["for"], We = { class: "vv-input-text__wrapper" }, ze = {
-  key: 2,
-  class: "vv-input-text__limit"
-}, Ze = {
-  inheritAttrs: !1
-}, Ke = /* @__PURE__ */ L({
-  ...Ze,
-  __name: "VvInputText",
-  props: $e,
-  emits: ke,
-  setup(t, { emit: n }) {
-    const e = t, o = ge(), r = ye(), 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`, g = `${e.name}-hint`, E = d(
-      () => e.floating && A.isEmpty(e.placeholder) ? " " : e.placeholder
-    ), I = He(S, e.debounce, n), D = C(!1), R = d(() => e.type === h.TYPES.PASSWORD), _ = d(() => e.type === h.TYPES.NUMBER);
-    function oe() {
-      const y = e.max;
-      !G.value && I.value + 1 <= y && (s.value.stepUp(), I.value = i(s.value).value);
-    }
-    function se() {
-      const y = e.min;
-      !G.value && I.value - 1 <= y && (s.value.stepDown(), I.value = i(s.value).value);
-    }
-    const { hasIconLeft: W, hasIconRight: z } = je(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: ie, formattedTextLimitLength: ae } = qe(I, {
-      mode: e.limit,
-      upperLimit: e.maxlength || 0
-    }), { focused: Z } = Ye(s, n), G = d(() => e.disabled || e.readonly), ue = d(() => {
-      const y = z.value || A.isNotEmpty(F.value), m = e.floating && A.isNotEmpty(e.label), b = 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: y,
-          floating: m,
-          dirty: b
-        }),
-        r.class
-      ];
-    }), le = d(() => {
-      const { style: y } = r, m = A.pickBy(
-        r,
-        (b) => b.startsWith("data-")
-      );
-      return {
-        style: y,
-        ...m
-      };
-    }), ce = d(() => {
-      const y = R.value && D.value ? "text" : e.type, m = A.pickBy(
-        r,
-        (b) => b.startsWith("aria-")
-      );
-      return {
-        id: v,
-        type: y,
-        placeholder: E.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": g,
-        "aria-errormessage": g,
-        ...m
-      };
-    }), X = d(() => {
-      const { modelValue: y, valid: m, error: b } = e;
-      return {
-        valid: m,
-        error: b,
-        modelValue: y
-      };
-    }), de = Ve(e, o), fe = ne(
-      h.TYPES.PASSWORD,
-      e
-    ), pe = ne(h.TYPES.NUMBER, e);
-    function me() {
-      I.value = null;
-    }
-    return he(() => {
-      e.autofocus && (Z.value = !0), console.log("Focused", Z.value);
-    }), (y, m) => (O(), N("div", $(i(le), { class: i(ue) }), [
-      i(u) ? (O(), N("label", {
-        key: 0,
-        for: i(v)
-      }, J(i(u)), 9, Ue)) : x("", !0),
-      K("div", We, [
-        i(W) ? M(y.$slots, "icon-left", Q($({ key: 0 }, i(X))), () => [
-          V(T, {
-            class: "vv-input-text__icon-left",
-            name: i(a)
-          }, null, 8, ["name"])
-        ]) : x("", !0),
-        Se(K("input", $({
-          ref_key: "input",
-          ref: s
-        }, i(ce), {
-          "onUpdate:modelValue": m[0] || (m[0] = (b) => Ae(I) ? I.value = b : null),
-          onInput: m[1] || (m[1] = (b) => n("input", b))
-        }), null, 16), [
-          [be, i(I)]
-        ]),
-        i(l) && i(ie) > 0 ? (O(), N("button", {
-          key: 1,
-          class: "vv-button vv-button--ghost",
-          onClick: me
-        }, [
-          V(T, { name: "clear-field" })
-        ])) : x("", !0),
-        M(y.$slots, "icon-right", Q(Ee(i(X))), () => [
-          i(R) ? (O(), k(i(fe), {
-            key: 0,
-            onActionPasswordOn: m[2] || (m[2] = (b) => D.value = !0),
-            onActionPasswordOff: m[3] || (m[3] = (b) => D.value = !1)
-          })) : i(_) ? (O(), k(i(pe), {
-            key: 1,
-            onActionStepUp: oe,
-            onActionStepDown: se
-          })) : 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, [
-          M(y.$slots, "limit", {}, () => [
-            Ie(J(i(ae)), 1)
-          ])
-        ])) : x("", !0)
-      ]),
-      V(i(de), {
-        id: g,
-        class: "vv-input-text__hint"
-      })
-    ], 16));
-  }
-});
-export {
-  Ke as default
-};