@volverjs/ui-vue 0.0.1-beta.2

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

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

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

@@ -0,0 +1,2 @@
+(function(e,P){typeof exports=="object"&&typeof module<"u"?module.exports=P(require("vue"),require("@iconify/vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],P):(e=typeof globalThis<"u"?globalThis:e||self,e.VvInputText=P(e.vue,e.vue$1,e.core))})(this,function(e,P,D){"use strict";const E={equals(t,n,r){return r?this.resolveFieldData(t,r)===this.resolveFieldData(n,r):this.deepEquals(t,n)},deepEquals(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const r=Array.isArray(t),s=Array.isArray(n);let o,c,a;if(r&&s){if(c=t.length,c!=n.length)return!1;for(o=c;o--!==0;)if(!this.deepEquals(t[o],n[o]))return!1;return!0}if(r!=s)return!1;const i=t instanceof Date,p=n instanceof Date;if(i!=p)return!1;if(i&&p)return t.getTime()==n.getTime();const m=t instanceof RegExp,l=n instanceof RegExp;if(m!=l)return!1;if(m&&l)return t.toString()==n.toString();const u=Object.keys(t);if(c=u.length,c!==Object.keys(n).length)return!1;for(o=c;o--!==0;)if(!Object.prototype.hasOwnProperty.call(n,u[o]))return!1;for(o=c;o--!==0;)if(a=u[o],!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 r=n.split(".");let s=t;for(let o=0,c=r.length;o<c;++o){if(t==null)return null;s=s[r[o]]}return s}}else return null},isFunction(t){return!!(t&&t.constructor&&t.call&&t.apply)},findIndexInList(t,n){let r=-1;if(n){for(let s=0;s<n.length;s++)if(this.equals(n[s],t)){r=s;break}}return r},contains(t,n){if(t!=null&&n&&n.length){for(const r of n)if(this.equals(t,r))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(([r])=>n(r)))},removeFromList(t,n){const r=this.findIndexInList(t,n);return r>-1?n.filter((s,o)=>o!==r):n},isString(t){return typeof t=="string"||t instanceof String},propsToObject(t){return Object.keys(t).reduce((n,r)=>{var s,o,c,a,i;return this.isFunction(t[r])?n[r]=t[r]():Array.isArray(t[r])?n[r]=t[r][0]():(s=t[r])!=null&&s.type&&(Array.isArray(t[r].type)?n[r]=((o=t[r])==null?void 0:o.default)||((c=t[r])==null?void 0:c.type[0]()):n[r]=((a=t[r])==null?void 0:a.default)||((i=t[r])==null?void 0:i.type())),n},{})},filterArray(t,n,r){return t.filter(s=>n.some(o=>typeof o=="string"?s[r]==o:this.equals(s[r],o[r])))},kebabCase(t){var n,r;if(t)return(r=(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:r.toLowerCase()}},j={valid:Boolean,validLabel:[String,Array]},H={error:Boolean,errorLabel:[String,Array]},q={loading:Boolean,loadingLabel:String},U={hintLabel:{type:String,default:""}},N={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"},b={LEFT:"left",RIGHT:"right"},S={TYPES:N,ICON_POSITIONS:b,TYPES_ICON:{PASSWORD_ON:"eye-on",PASSWORD_OFF:"eye-off",DATE:"calendar",TIME:"time",COLOR:"color",SEARCH:"search"}},W=["update:modelValue","focus","blur"],L={...j,...H,...U,...q,modelValue:null,type:{type:String,default:N.TEXT,validator:t=>Object.values(N).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(b).includes(t),default:b.RIGHT},floating:Boolean,debounce:Number},z={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 B(t,n){const r={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((o,c)=>{const a=e.unref(n[c])||!1;if(!a)return o;if(c==="modifiers"){const i=Array.isArray(a)?a:[a];return{...o,...i.reduce((p,m)=>({...p,[`${t}--${E.kebabCase(m)}`]:!0}),{})}}else return{...o,[`${t}--${E.kebabCase(c)}`]:a}},r)||{})}}const w=e.defineComponent({__name:"VvIcon",props:z,setup(t){const n=t,r=e.ref(!0),{modifiers:s}=e.toRefs(n),o=e.inject("ds"),{bemCssClasses:c}=B("vv-icon",{modifiers:s}),a=e.computed(()=>n.provider||(o==null?void 0:o.provider)),i=e.computed(()=>{const l=n.name||"",u=`@${a.value}:${n.prefix}:${n.name}`;return P.iconExists(l)?l:P.iconExists(u)?u:(o==null?void 0:o.iconsCollections.find(d=>{const y=`@${a.value}:${d.prefix}:${l}`;if(P.iconExists(y))return y}))||l});function p(l){let u=null;if(typeof window>"u"){const{JSDOM:T}=require("jsdom");u=new T().window}return(u?new u.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function m(l){const u=p(l),d=(u==null?void 0:u.innerHTML.trim())||"";u&&d&&P.addIcon(`@${a.value}:${n.prefix}:${n.name}`,{body:d,height:u.viewBox.baseVal.height,width:u.viewBox.baseVal.width})}return o&&(n.src?(r.value=!1,o.fetchIcon(n.src).then(l=>{l&&(m(l),r.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):n.svg&&m(n.svg)),(l,u)=>r.value?(e.openBlock(),e.createBlock(e.unref(P.Icon),e.mergeProps({key:0,class:e.unref(c)},{...l.$props,provider:e.unref(a),icon:e.unref(i)}),null,16,["class"])):e.createCommentVNode("",!0)}});function Z(t){return Array.isArray(t)?t.filter(n=>E.isString(n)).reduce((n,r)=>n.length>0?n+`
+`+r:r,""):t}function G(t,n){return{name:"HintSlot",setup(){const r=e.toRefs(t),{error:s,valid:o,hint:c,loading:a}=n,{hintLabel:i,modelValue:p,valid:m,validLabel:l,error:u,errorLabel:d}=r,y=E.resolveFieldData(r,"loading"),_=E.resolveFieldData(r,"loadingLabel"),T=e.computed(()=>u.value?!!(u.value&&s||(d==null?void 0:d.value)&&Array.isArray(d.value)&&d.value.length>0||(d==null?void 0:d.value)&&E.isNotEmpty(d.value)):!1),A=e.computed(()=>!!(i&&i.value||c||o||l&&l.value||T.value||(y==null?void 0:y.value)&&a||(y==null?void 0:y.value)&&(_==null?void 0:_.value))),C=e.computed(()=>Array.isArray(d==null?void 0:d.value)?Z((d==null?void 0:d.value)||""):d==null?void 0:d.value),O=e.computed(()=>{const I={modelValue:p,error:u,valid:m};return u!=null&&u.value?(s==null?void 0:s(I))||(C==null?void 0:C.value)||(i==null?void 0:i.value):m!=null&&m.value?(o==null?void 0:o(I))||(l==null?void 0:l.value)||(i==null?void 0:i.value):y!=null&&y.value?(a==null?void 0:a(I))||(_==null?void 0:_.value)||(i==null?void 0:i.value):(c==null?void 0:c(I))||(i==null?void 0:i.value)||(i==null?void 0:i.value)});return{hasHint:A,hintContent:O}},render(){if(this.hasHint)return e.h("span",null,this.hintContent)}}}function X(t){const{type:n,disabled:r,readonly:s}=t,o=e.ref(!0),c=e.computed(()=>n.value===S.TYPES.PASSWORD),a=e.computed(()=>!o.value),i=e.computed(()=>a.value?S.TYPES_ICON.PASSWORD_OFF:S.TYPES_ICON.PASSWORD_ON);function p(){!r.value&&!s.value&&(o.value=!o.value)}return{isPassword:c,isPasswordVisible:a,passwordButtonIcon:i,toggleShowHidePassword:p}}function J(t,n){const{type:r,disabled:s,readonly:o,inputTemplateRef:c}=n,a=e.computed(()=>r.value===S.TYPES.NUMBER);function i(){!s.value&&!o.value&&(c.value.stepUp(),t.value=e.unref(c.value).value)}function p(){!s.value&&!o.value&&(c.value.stepDown(),t.value=e.unref(c.value).value)}return{isNumber:a,stepUp:i,stepDown:p}}function K(t,n){const{icon:r,iconPosition:s}=t,o=e.computed(()=>!!(r.value&&s.value==="left"||n.iconLeft)),c=e.computed(()=>!!(r.value&&s.value==="right"||n.iconRight)),a=e.computed(()=>!!(r.value&&s.value==="top"||n.iconTop)),i=e.computed(()=>!!(r.value&&s.value==="bottom"||n.iconBottom));return{icon:r,iconPosition:s,hasIconLeft:o,hasIconRight:c,hasIconTop:a,hasIconBottom:i}}function Q(t,n){const{focused:r}=D.useFocus(t);return e.watch(r,s=>{n(s?"focus":"blur",t.value)}),{focused:r}}const ee=["for"],te={class:"vv-input-text__wrapper"},ne={key:0,class:"vv-input-text__actions-group"},re=["disabled"],oe={key:1,class:"vv-input-text__actions-group"},se=["disabled"],ie=["disabled"],ce={inheritAttrs:!1};return e.defineComponent({...ce,__name:"VvInputText",props:L,emits:W,setup(t,{emit:n}){const r=t,s=e.useSlots(),o=e.useAttrs(),c=e.ref(),a=e.ref(r.modelValue),{disabled:i,readonly:p,type:m,icon:l,iconPosition:u,valid:d,error:y,loading:_,floating:T,label:A,modelValue:C}=e.toRefs(r),O=e.computed(()=>i.value||p.value),I=D.refDebounced(a,r.debounce||0);e.watch(I,g=>n("update:modelValue",g));const ae={icon:l,iconPosition:u},le={iconLeft:s["icon-left"],iconRight:s["icon-right"]},{hasIconLeft:v,hasIconRight:ue}=K(ae,le),x=e.computed(()=>{if(ue.value)return r.icon;switch(r.type){case S.TYPES.PASSWORD:return pe.value;case S.TYPES.COLOR:return S.TYPES_ICON.COLOR;case S.TYPES.DATE:case S.TYPES.DATETIME_LOCAL:return S.TYPES_ICON.DATE;case S.TYPES.TIME:return S.TYPES_ICON.TIME;case S.TYPES.SEARCH:return S.TYPES_ICON.SEARCH;default:return""}}),de={type:m,disabled:i,readonly:p},{isPassword:k,isPasswordVisible:fe,passwordButtonIcon:pe,toggleShowHidePassword:R}=X(de),me={disabled:i,readonly:p,type:m,inputTemplateRef:c},{isNumber:ye,stepUp:ge,stepDown:he}=J(a,me),{focused:V}=Q(c,n),{bemCssClasses:Se}=B("vv-input-text",{readonly:p,valid:d,invalid:y,loading:_,iconLeft:v,iconRight:e.computed(()=>E.isNotEmpty(x.value)),floating:e.computed(()=>T.value&&E.isNotEmpty(A==null?void 0:A.value)),dirty:e.computed(()=>E.isNotEmpty(C))}),Ee=e.computed(()=>{const{class:g}=o;return{class:g,...Se.value}}),Pe=e.computed(()=>{const{style:g}=o,f=E.pickBy(o,h=>h.startsWith("data-"));return{style:g,...f}}),F=e.computed(()=>{const{id:g,name:f,type:h,autocomplete:Ae,minlength:Ie,maxlength:Te,min:Ce,max:Oe,step:Ne,disabled:be,readonly:we,floating:xe,placeholder:Y}=r,De=g||f,Be=k.value&&fe.value?"text":h,ve=xe&&E.isEmpty(Y)?" ":Y;return{id:De,type:Be,placeholder:ve,name:f,autocomplete:Ae,disabled:be,readonly:we,minlength:Ie,maxlength:Te,min:Ce,max:Oe,step:Ne,...$.value}}),$=e.computed(()=>{const{name:g}=o,f=E.pickBy(o,h=>h.startsWith("aria-"));return{"aria-label":g,"aria-describedby":`${g}-hint`,"aria-invalid":r.error,...f}}),M=e.computed(()=>{const{modelValue:g,valid:f,error:h}=r;return{valid:f,error:h,modelValue:g}}),_e=G(r,s);return e.onMounted(()=>{r.autofocus&&(V.value=!0),console.log("Focused",V.value)}),(g,f)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps(e.unref(Pe),{class:e.unref(Ee)}),[e.unref(A)?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(F).id},e.toDisplayString(e.unref(A)),9,ee)):e.createCommentVNode("",!0),e.createElementVNode("div",te,[e.unref(v)?e.renderSlot(g.$slots,"icon-left",e.normalizeProps(e.mergeProps({key:0},e.unref(M))),()=>[e.createVNode(w,{class:"vv-input-text__icon-left",name:e.unref(l)},null,8,["name"])]):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"input",ref:c},e.unref(F),{"onUpdate:modelValue":f[0]||(f[0]=h=>a.value=h),onInput:f[1]||(f[1]=h=>n("input",h))}),null,16),[[e.vModelDynamic,a.value]]),e.renderSlot(g.$slots,"icon-right",e.normalizeProps(e.guardReactiveProps(e.unref(M))),()=>[e.unref(k)?(e.openBlock(),e.createElementBlock("div",ne,[e.createElementVNode("button",{class:"vv-input-text__action",disabled:e.unref(O),onClick:f[2]||(f[2]=e.withModifiers((...h)=>e.unref(R)&&e.unref(R)(...h),["prevent"]))},[e.createVNode(w,{name:e.unref(x)},null,8,["name"])],8,re)])):e.unref(ye)?(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("button",{type:"button",class:"vv-input-text__action-chevron vv-input-text__action-chevron-up",disabled:e.unref(O),onClick:f[3]||(f[3]=e.withModifiers(h=>e.unref(ge)(),["prevent"]))},null,8,se),e.createElementVNode("button",{type:"button",class:"vv-input-text__action-chevron",disabled:e.unref(O),onClick:f[4]||(f[4]=e.withModifiers(h=>e.unref(he)(),["prevent"]))},null,8,ie)])):(e.openBlock(),e.createBlock(w,{key:2,name:e.unref(x)},null,8,["name"]))])]),e.createVNode(e.unref(_e),{id:e.unref($)["aria-describedby"],class:"vv-input-text__hint"},null,8,["id"])],16))}})});

package/dist/components/VvNativeSelect/VvNativeSelect.d.ts

@@ -0,0 +1,70 @@
+import type { PropType } from 'vue';
+export interface Option {
+    [key: string]: any;
+}
+export declare const VvNativeSelectProps: {
+    /**
+     * modelValue can be an Object, a String or an Array of Object/String
+     */
+    modelValue: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: boolean;
+    };
+    /**
+     * Select input label
+     */
+    label: StringConstructor;
+    /**
+     * Select input placeholder
+     */
+    placeholder: StringConstructor;
+    /**
+     * Select options, can be an Array of string or an array of objects
+     */
+    options: {
+        type: PropType<(string | Option)[]>;
+        required: boolean;
+    };
+    /**
+     * Use objects as modelValue (object or object[])
+     */
+    useObject: BooleanConstructor;
+    /**
+     * Used when options are objects: key to use for option label
+     */
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Used when options are objects: key to use for option label
+     */
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Icon name of icon in left position
+     */
+    iconLeft: StringConstructor;
+    /**
+     * Icon name of icon in right position
+     */
+    iconRight: StringConstructor;
+    /**
+     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-native-select--'
+     */
+    modifiers: (StringConstructor | ArrayConstructor)[];
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: BooleanConstructor;
+    errorLabel: (StringConstructor | ArrayConstructor)[];
+    valid: BooleanConstructor;
+    validLabel: (StringConstructor | ArrayConstructor)[];
+};