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

package/dist/components/VvTextarea/VvTextarea.es.js

@@ -1,68 +1,37 @@
-import { unref as s, toRefs as j, computed as i, h as ie, watch as J, defineComponent as U, ref as W, inject as ue, openBlock as w, createBlock as R, mergeProps as k, createCommentVNode as C, useSlots as se, createElementBlock as D, normalizeClass as ce, toDisplayString as z, createElementVNode as M, renderSlot as O, normalizeProps as _, guardReactiveProps as E, withDirectives as de, isRef as fe, vModelText as ve, createTextVNode as me, createVNode as ge } from "vue";
-import { nanoid as he } from "nanoid";
-import { toReactive as pe, useFocus as ye, useElementVisibility as be } from "@vueuse/core";
-import { iconExists as B, Icon as Se, addIcon as we } from "@iconify/vue";
-function q(r, t) {
-  if (r && Object.keys(r).length && t) {
-    if (t.indexOf(".") === -1)
-      return r[t];
-    {
-      const e = t.split(".");
-      let u = r;
-      for (let l = 0, d = e.length; l < d; ++l) {
-        if (r == null)
-          return null;
-        u = u[e[l]];
-      }
-      return u;
-    }
-  } else
-    return null;
-}
-function N(r) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(s(r));
-}
-function Ie(r) {
-  return typeof r == "string" || r instanceof String;
+import { defineComponent as L, unref as r, openBlock as P, createBlock as H, mergeProps as F, createCommentVNode as x, createElementBlock as R, normalizeClass as ee, toDisplayString as M, createElementVNode as z, renderSlot as T, normalizeProps as C, guardReactiveProps as A, withDirectives as te, isRef as oe, vModelText as ne, createTextVNode as re, createVNode as ae } from "vue";
+import { nanoid as se } from "nanoid";
+import { iconExists as $, Icon as ie, addIcon as le } from "@iconify/vue";
+function N(l) {
+  return Array.isArray(l) ? l.filter((a) => isString(a)).join(" ") : l;
 }
-function Z(r) {
-  var t, e;
-  if (r)
-    return (e = (t = r.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 A(r) {
-  return Array.isArray(r) ? r.filter((t) => Ie(t)).join(" ") : r;
-}
-function Pe(r, t) {
+function ue(l, a) {
   const {
     invalid: e,
-    valid: u,
-    hint: l,
-    loading: d
-  } = t, {
-    hintLabel: a,
-    modelValue: h,
     valid: m,
-    validLabel: f,
-    invalid: n,
+    hint: i,
+    loading: f
+  } = a, {
+    hintLabel: n,
+    modelValue: y,
+    valid: p,
+    validLabel: c,
+    invalid: t,
     invalidLabel: o,
-    ...g
-  } = j(r), c = q(g, "loading"), v = q(g, "loadingLabel"), y = i(() => n.value ? !!(n.value && e || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !N(o)) : !1), p = i(
-    () => !!(a && a.value || l)
-  ), b = i(
-    () => !!(f && f.value || u)
-  ), I = i(
-    () => !!(c != null && c.value && d || c != null && c.value && (v != null && v.value))
-  ), $ = i(
-    () => p.value || b.value || y.value || I.value
+    ...d
+  } = toRefs(l), s = resolveFieldData(d, "loading"), u = resolveFieldData(d, "loadingLabel"), g = computed(() => t.value ? !!(t.value && e || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !isEmpty(o)) : !1), v = computed(
+    () => !!(n && n.value || i)
+  ), S = computed(
+    () => !!(c && c.value || m)
+  ), w = computed(
+    () => !!(s != null && s.value && f || s != null && s.value && (u != null && u.value))
+  ), I = computed(
+    () => v.value || S.value || g.value || w.value
   );
   return {
-    hasInvalid: y,
-    hasHint: p,
-    hasValid: b,
-    hasLoading: I,
+    hasInvalid: g,
+    hasHint: v,
+    hasValid: S,
+    hasLoading: w,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -71,31 +40,31 @@ function Pe(r, t) {
           default: () => ({})
         }
       },
-      setup(x) {
-        const F = i(() => {
-          const S = pe({
-            hintLabel: a,
-            modelValue: h,
-            valid: m,
-            validLabel: f,
-            invalid: n,
+      setup(B) {
+        const E = computed(() => {
+          const b = toReactive({
+            hintLabel: n,
+            modelValue: y,
+            valid: p,
+            validLabel: c,
+            invalid: t,
             invalidLabel: o,
-            loading: c,
-            loadingLabel: v,
-            ...x.params
+            loading: s,
+            loadingLabel: u,
+            ...B.params
           });
-          return n != null && n.value ? (e == null ? void 0 : e(S)) || A(o == null ? void 0 : o.value) || (a == null ? void 0 : a.value) : m != null && m.value ? (u == null ? void 0 : u(S)) || A(f == null ? void 0 : f.value) || (a == null ? void 0 : a.value) : c != null && c.value ? (d == null ? void 0 : d(S)) || A(v == null ? void 0 : v.value) || (a == null ? void 0 : a.value) : (l == null ? void 0 : l(S)) || A(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
+          return t != null && t.value ? (e == null ? void 0 : e(b)) || N(o == null ? void 0 : o.value) || (n == null ? void 0 : n.value) : p != null && p.value ? (m == null ? void 0 : m(b)) || N(c == null ? void 0 : c.value) || (n == null ? void 0 : n.value) : s != null && s.value ? (f == null ? void 0 : f(b)) || N(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : (i == null ? void 0 : i(b)) || N(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
         });
         return {
-          isVisible: $,
-          hasInvalid: y,
-          hasValid: b,
-          hintContent: F
+          isVisible: I,
+          hasInvalid: g,
+          hasValid: S,
+          hintContent: E
         };
       },
       render() {
         if (this.isVisible)
-          return ie(
+          return h(
             "small",
             {
               role: this.hasInvalid || this.hasValid ? "alert" : void 0
@@ -106,79 +75,7 @@ function Pe(r, t) {
     }
   };
 }
-function Ce(r, t, e) {
-  const u = i(
-    () => !!(r != null && r.value && t.value === "left" || e != null && e.iconLeft)
-  ), l = i(
-    () => !!(r != null && r.value && t.value === "right" || e != null && e.iconRight)
-  ), d = i(
-    () => !!(r != null && r.value && t.value === "top" || e != null && e.iconTop)
-  ), a = i(
-    () => !!(r != null && r.value && t.value === "bottom" || e != null && e.iconBottom)
-  );
-  return {
-    hasIcon: i(() => typeof (r == null ? void 0 : r.value) == "string" ? { name: r == null ? void 0 : r.value } : r == null ? void 0 : r.value),
-    hasIconLeft: u,
-    hasIconRight: l,
-    hasIconTop: d,
-    hasIconBottom: a
-  };
-}
-function $e(r, t) {
-  const { focused: e } = ye(r);
-  return J(e, (u) => {
-    t(u ? "focus" : "blur", s(r));
-  }), {
-    focused: e
-  };
-}
-function xe(r, t, e = 0) {
-  let u;
-  return typeof e == "string" && (e = parseInt(e)), i({
-    get: () => r == null ? void 0 : r.value,
-    set: (l) => {
-      u && clearTimeout(u), u = setTimeout(() => {
-        t("update:modelValue", l);
-      }, e);
-    }
-  });
-}
-function Ve(r, t) {
-  const e = i(() => (s(r) ?? "").length), u = i(() => (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), l = i(() => (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" ? u.value === 0 ? void 0 : u : e.value);
-  return {
-    length: e,
-    gap: u,
-    formatted: l
-  };
-}
-function X(r, t) {
-  const e = { [`${r}`]: !0 };
-  return {
-    bemCssClasses: i(() => Object.keys(t).reduce((l, d) => {
-      const a = s(t[d]) || !1;
-      if (!a)
-        return l;
-      if (d === "modifiers") {
-        const h = Array.isArray(a) ? a : a.split(" ");
-        return {
-          ...l,
-          ...h.reduce(
-            (m, f) => ({
-              ...m,
-              [`${r}--${Z(f)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...l,
-          [`${r}--${Z(d)}`]: a
-        };
-    }, e) || {})
-  };
-}
-const _e = "ds", Be = {
+const ce = "ds", de = {
   color: String,
   width: {
     type: [String, Number]
@@ -209,197 +106,197 @@ const _e = "ds", Be = {
   modifiers: {
     type: [String, Array]
   }
-}, Ae = {
+}, pe = {
   name: "VvIcon"
-}, G = /* @__PURE__ */ U({
-  ...Ae,
-  props: Be,
-  setup(r) {
-    const t = r, e = W(!0), { modifiers: u } = j(t), l = ue(_e), { bemCssClasses: d } = X("vv-icon", {
-      modifiers: u
-    }), a = i(() => t.provider || (l == null ? void 0 : l.provider)), h = i(() => {
-      const n = t.name ?? "", o = `@${a.value}:${t.prefix}:${t.name}`;
-      return B(n) ? n : B(o) ? o : (l == null ? void 0 : l.iconsCollections.find((g) => {
-        const c = `@${a.value}:${g.prefix}:${n}`;
-        if (B(c))
-          return c;
-      })) || n;
+}, q = /* @__PURE__ */ L({
+  ...pe,
+  props: de,
+  setup(l) {
+    const a = l, e = ref(!0), { modifiers: m } = toRefs(a), i = inject(ce), { bemCssClasses: f } = useBemModifiers("vv-icon", {
+      modifiers: m
+    }), n = computed(() => a.provider || (i == null ? void 0 : i.provider)), y = computed(() => {
+      const t = a.name ?? "", o = `@${n.value}:${a.prefix}:${a.name}`;
+      return $(t) ? t : $(o) ? o : (i == null ? void 0 : i.iconsCollections.find((d) => {
+        const s = `@${n.value}:${d.prefix}:${t}`;
+        if ($(s))
+          return s;
+      })) || t;
     });
-    function m(n) {
+    function p(t) {
       let o = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        o = new y().window;
+        const { JSDOM: g } = require("jsdom");
+        o = new g().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
     }
-    function f(n) {
-      const o = m(n), g = (o == null ? void 0 : o.innerHTML.trim()) || "";
-      o && g && we(`@${a.value}:${t.prefix}:${t.name}`, {
-        body: g,
+    function c(t) {
+      const o = p(t), d = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && d && le(`@${n.value}:${a.prefix}:${a.name}`, {
+        body: d,
         height: o.viewBox.baseVal.height,
         width: o.viewBox.baseVal.width
       });
     }
-    return l && (t.src && !B(`@${a.value}:${t.prefix}:${t.name}`) ? (e.value = !1, l.fetchIcon(t.src).then((n) => {
-      n && (f(n), e.value = !0);
-    }).catch((n) => {
-      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
-    })) : t.svg && f(t.svg)), (n, o) => e.value ? (w(), R(s(Se), k({
+    return i && (a.src && !$(`@${n.value}:${a.prefix}:${a.name}`) ? (e.value = !1, i.fetchIcon(a.src).then((t) => {
+      t && (c(t), e.value = !0);
+    }).catch((t) => {
+      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
+    })) : a.svg && c(a.svg)), (t, o) => r(e) ? (P(), H(r(ie), F({
       key: 0,
-      class: s(d)
+      class: r(f)
     }, {
-      inline: n.inline,
-      width: n.width,
-      height: n.height,
-      horizontalFlip: n.horizontalFlip,
-      verticalFlip: n.verticalFlip,
-      flip: n.flip,
-      rotate: n.rotate,
-      color: n.color,
-      onLoad: n.onLoad,
-      icon: s(h)
-    }), null, 16, ["class"])) : C("", !0);
+      inline: t.inline,
+      width: t.width,
+      height: t.height,
+      horizontalFlip: t.horizontalFlip,
+      verticalFlip: t.verticalFlip,
+      flip: t.flip,
+      rotate: t.rotate,
+      color: t.color,
+      onLoad: t.onLoad,
+      icon: r(y)
+    }), null, 16, ["class"])) : x("", !0);
   }
-}), ke = {
+}), me = {
   valid: Boolean,
   validLabel: [String, Array]
-}, Ne = {
+}, fe = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, Fe = {
+}, ve = {
   loading: Boolean,
   loadingLabel: String
-}, Le = {
+}, ge = {
   disabled: Boolean
-}, Te = {
+}, he = {
   readonly: Boolean
-}, De = {
+}, ye = {
   modifiers: [String, Array]
-}, Oe = {
+}, Se = {
   hintLabel: { type: String, default: "" }
-}, Ee = {
+}, be = {
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (r) => [!0, !1, "limit", "countdown"].includes(r)
+    validator: (l) => [!0, !1, "limit", "countdown"].includes(l)
   }
-}, Re = {
+}, Pe = {
   debounce: [Number, String]
-}, K = {
+}, j = {
   LEFT: "left",
   RIGHT: "right"
-}, je = {
+}, we = {
   icon: { type: [String, Object] },
   iconPosition: {
     type: String,
-    validation: (r) => Object.values(K).includes(r),
-    default: K.RIGHT
+    validation: (l) => Object.values(j).includes(l),
+    default: j.RIGHT
   }
-}, He = {
+}, Ve = {
   tabindex: { type: [String, Number], default: 0 }
-}, ze = {
+}, xe = {
   floating: Boolean
-}, Me = {
+}, Ie = {
   id: [String, Number],
   name: { type: String, required: !0 }
-}, qe = {
+}, Be = {
   autofocus: Boolean
-}, Ze = {
+}, _e = {
   autocomplete: { type: String, default: "off" }
-}, Ge = {
-  ...Me,
-  ...qe,
-  ...Ze,
-  ...He,
-  ...Le,
-  ...Te,
-  ...ke,
-  ...Ne,
-  ...Oe,
-  ...Fe,
-  ...De,
-  ...Ee,
-  ...Re,
-  ...je,
-  ...ze,
+}, Ce = {
+  ...Ie,
+  ...Be,
+  ..._e,
+  ...Ve,
+  ...ge,
+  ...he,
+  ...me,
+  ...fe,
+  ...Se,
+  ...ve,
+  ...ye,
+  ...be,
+  ...Pe,
+  ...we,
+  ...xe,
   minlength: Number,
   maxlength: Number,
   placeholder: String,
   required: Boolean,
   label: String
-}, Ke = {
+}, $e = {
   hard: "hard",
   soft: "soft"
-}, Je = {
+}, Ne = {
   true: !0,
   false: !1,
   default: "default"
-}, Ue = ["update:modelValue", "focus", "blur", "keyup"], We = {
-  ...Ge,
+}, Fe = ["update:modelValue", "focus", "blur", "keyup"], Ee = {
+  ...Ce,
   modelValue: String,
   cols: { type: [String, Number], default: 20 },
   rows: { type: [String, Number], default: 2 },
-  wrap: { type: String, default: Ke.soft },
-  spellcheck: { type: [Boolean, String], default: Je.default },
+  wrap: { type: String, default: $e.soft },
+  spellcheck: { type: [Boolean, String], default: Ne.default },
   resizable: Boolean
-}, Xe = ["for"], Qe = { class: "vv-textarea__wrapper" }, Ye = ["id"], et = {
+}, ke = ["for"], De = { class: "vv-textarea__wrapper" }, Re = ["id"], Te = {
   key: 0,
   class: "vv-textarea__limit"
-}, tt = {
+}, Ae = {
   name: "VvTextarea"
-}, ot = /* @__PURE__ */ U({
-  ...tt,
-  props: We,
-  emits: Ue,
-  setup(r, { emit: t }) {
-    const e = r, u = se(), l = W(), {
-      icon: d,
-      iconPosition: a,
-      label: h,
-      modelValue: m,
-      count: f,
-      valid: n,
+}, ze = /* @__PURE__ */ L({
+  ...Ae,
+  props: Ee,
+  emits: Fe,
+  setup(l, { emit: a }) {
+    const e = l, m = useSlots(), i = ref(), {
+      icon: f,
+      iconPosition: n,
+      label: y,
+      modelValue: p,
+      count: c,
+      valid: t,
       invalid: o,
-      loading: g
-    } = j(e), c = i(() => String(e.id || he())), v = i(() => `${c.value}-hint`), y = i(
-      () => e.floating && N(e.placeholder) ? " " : e.placeholder
-    ), p = xe(m, t, e.debounce), { hasIcon: b, hasIconLeft: I, hasIconRight: $ } = Ce(
-      d,
-      a
-    ), { focused: x } = $e(l, t), F = be(l);
-    J(F, (P) => {
-      P && e.autofocus && (x.value = !0);
+      loading: d
+    } = toRefs(e), s = computed(() => String(e.id || se())), u = computed(() => `${s.value}-hint`), g = computed(
+      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
+    ), v = useDebouncedInput(p, a, e.debounce), { hasIcon: S, hasIconLeft: w, hasIconRight: I } = useComponentIcon(
+      f,
+      n
+    ), { focused: B } = useComponentFocus(i, a), E = useElementVisibility(i);
+    watch(E, (V) => {
+      V && e.autofocus && (B.value = !0);
     });
-    const { formatted: S } = Ve(p, {
+    const { formatted: b } = useTextCount(v, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), Q = i(() => !e.disabled && !e.readonly), Y = i(
-      () => Q.value ? e.tabindex : -1
-    ), ee = i(() => !N(m)), te = i(() => {
+    }), G = computed(() => !e.disabled && !e.readonly), K = computed(
+      () => G.value ? e.tabindex : -1
+    ), J = computed(() => !isEmpty(p)), U = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { HintSlot: re, hasHint: ne, hasInvalid: H } = Pe(e, u), { bemCssClasses: ae } = X("vv-textarea", {
+    }), { HintSlot: W, hasHint: X, hasInvalid: O } = ue(e, m), { bemCssClasses: Q } = useBemModifiers("vv-textarea", {
       modifiers: e.modifiers,
-      valid: n,
+      valid: t,
       invalid: o,
-      loading: g,
+      loading: d,
       disabled: e.disabled,
       readonly: e.readonly,
-      iconLeft: I,
-      iconRight: $,
-      floating: e.floating && !N(e.label),
-      dirty: ee,
-      focused: x,
+      iconLeft: w,
+      iconRight: I,
+      floating: e.floating && !isEmpty(e.label),
+      dirty: J,
+      focused: B,
       resizable: e.resizable
-    }), le = i(
+    }), Y = computed(
       () => ({
         name: e.name,
-        placeholder: y.value,
-        tabindex: Y.value,
+        placeholder: g.value,
+        tabindex: K.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
@@ -410,62 +307,62 @@ const _e = "ds", Be = {
         rows: e.rows,
         wrap: e.wrap,
         spellcheck: e.spellcheck,
-        "aria-invalid": te.value,
-        "aria-describedby": !H.value && ne.value ? v.value : void 0,
-        "aria-errormessage": H.value ? v.value : void 0
+        "aria-invalid": U.value,
+        "aria-describedby": !O.value && X.value ? u.value : void 0,
+        "aria-errormessage": O.value ? u.value : void 0
       })
-    ), L = i(() => ({
+    ), k = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
       hintLabel: e.hintLabel,
       maxlength: e.maxlength,
       minlength: e.minlength,
-      clear: oe
-    })), oe = () => {
-      p.value = void 0;
+      clear: Z
+    })), Z = () => {
+      v.value = void 0;
     };
-    return (P, V) => (w(), D("div", {
-      class: ce(s(ae))
+    return (V, _) => (P(), R("div", {
+      class: ee(r(Q))
     }, [
-      s(h) ? (w(), D("label", {
+      r(y) ? (P(), R("label", {
         key: 0,
-        for: s(c),
+        for: r(s),
         class: "vv-textarea__label"
-      }, z(s(h)), 9, Xe)) : C("", !0),
-      M("div", Qe, [
-        O(P.$slots, "before", _(E(s(L))), () => [
-          s(I) ? (w(), R(G, k({
+      }, M(r(y)), 9, ke)) : x("", !0),
+      z("div", De, [
+        T(V.$slots, "before", C(A(r(k))), () => [
+          r(w) ? (P(), H(q, F({
             key: 0,
             class: "vv-textarea__icon-left"
-          }, s(b)), null, 16)) : C("", !0)
+          }, r(S)), null, 16)) : x("", !0)
         ]),
-        de(M("textarea", k({
-          id: s(c),
+        te(z("textarea", F({
+          id: r(s),
           ref_key: "textarea",
-          ref: l,
-          "onUpdate:modelValue": V[0] || (V[0] = (T) => fe(p) ? p.value = T : null)
-        }, s(le), {
-          onKeyup: V[1] || (V[1] = (T) => t("keyup", T))
-        }), null, 16, Ye), [
-          [ve, s(p)]
+          ref: i,
+          "onUpdate:modelValue": _[0] || (_[0] = (D) => oe(v) ? v.value = D : null)
+        }, r(Y), {
+          onKeyup: _[1] || (_[1] = (D) => a("keyup", D))
+        }), null, 16, Re), [
+          [ne, r(v)]
         ]),
-        O(P.$slots, "after", _(E(s(L))), () => [
-          s($) ? (w(), R(G, _(k({ key: 0 }, s(b))), null, 16)) : C("", !0)
+        T(V.$slots, "after", C(A(r(k))), () => [
+          r(I) ? (P(), H(q, C(F({ key: 0 }, r(S))), null, 16)) : x("", !0)
         ]),
-        s(f) ? (w(), D("span", et, [
-          O(P.$slots, "count", _(E(s(L))), () => [
-            me(z(s(S)), 1)
+        r(c) ? (P(), R("span", Te, [
+          T(V.$slots, "count", C(A(r(k))), () => [
+            re(M(r(b)), 1)
           ])
-        ])) : C("", !0)
+        ])) : x("", !0)
       ]),
-      ge(s(re), {
-        id: s(v),
+      ae(r(W), {
+        id: r(u),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  ot as default
+  ze as default
 };