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

package/dist/components/VvRadioGroup/index.d.ts

@@ -1,5 +1,5 @@
 export declare const VvRadioGroupProps: {
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: (StringConstructor | ArrayConstructor)[];
     label: StringConstructor;
     name: {
         type: StringConstructor;
@@ -25,8 +25,8 @@ export declare const VvRadioGroupProps: {
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    invalidLabel: (StringConstructor | ArrayConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (ArrayConstructor | StringConstructor)[];
+    validLabel: (StringConstructor | ArrayConstructor)[];
 };
 export declare const VvRadioGroupEvents: string[];

package/dist/components/VvSelect/VvSelect.es.js

@@ -1,99 +1,7 @@
-import { unref as c, computed as i, toRefs as j, watch as J, defineComponent as X, ref as Q, inject as ae, openBlock as y, createBlock as R, mergeProps as D, createCommentVNode as O, h as ue, useSlots as ce, createElementBlock as B, normalizeClass as de, toDisplayString as E, createElementVNode as T, renderSlot as q, normalizeProps as L, withDirectives as fe, isRef as ve, Fragment as pe, renderList as me, vModelSelect as ge, createVNode as he } from "vue";
-import { nanoid as ye } from "nanoid";
-import { useFocus as be, toReactive as Se, useElementVisibility as Ie } from "@vueuse/core";
-import { iconExists as F, Icon as Ve, addIcon as Pe } from "@iconify/vue";
-function K(e, r) {
-  if (e && Object.keys(e).length && r) {
-    if (r.indexOf(".") === -1)
-      return e[r];
-    {
-      const t = r.split(".");
-      let a = e;
-      for (let l = 0, d = t.length; l < d; ++l) {
-        if (e == null)
-          return null;
-        a = a[t[l]];
-      }
-      return a;
-    }
-  } else
-    return null;
-}
-function W(e) {
-  return ((r) => r == null || r === "" || Array.isArray(r) && r.length === 0 || !(r instanceof Date) && typeof r == "object" && Object.keys(r).length === 0)(c(e));
-}
-function Ae(e) {
-  return typeof e == "string" || e instanceof String;
-}
-function Z(e) {
-  var r, t;
-  if (e)
-    return (t = (r = 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 : r.join("-")) == null ? void 0 : t.toLowerCase();
-}
-function Y(e, r) {
-  const t = { [`${e}`]: !0 };
-  return {
-    bemCssClasses: i(() => Object.keys(r).reduce((l, d) => {
-      const n = c(r[d]) || !1;
-      if (!n)
-        return l;
-      if (d === "modifiers") {
-        const h = Array.isArray(n) ? n : n.split(" ");
-        return {
-          ...l,
-          ...h.reduce(
-            (p, v) => ({
-              ...p,
-              [`${e}--${Z(v)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...l,
-          [`${e}--${Z(d)}`]: n
-        };
-    }, t) || {})
-  };
-}
-function Be(e, r, t) {
-  const a = i(
-    () => !!(e != null && e.value && r.value === "left" || t != null && t.iconLeft)
-  ), l = i(
-    () => !!(e != null && e.value && r.value === "right" || t != null && t.iconRight)
-  ), d = i(
-    () => !!(e != null && e.value && r.value === "top" || t != null && t.iconTop)
-  ), n = i(
-    () => !!(e != null && e.value && r.value === "bottom" || t != null && t.iconBottom)
-  );
-  return {
-    hasIcon: i(() => typeof (e == null ? void 0 : e.value) == "string" ? { name: e == null ? void 0 : e.value } : e == null ? void 0 : e.value),
-    hasIconLeft: a,
-    hasIconRight: l,
-    hasIconTop: d,
-    hasIconBottom: n
-  };
-}
-function Oe(e) {
-  const { options: r, labelKey: t, valueKey: a } = j(e);
-  return {
-    options: r,
-    getOptionLabel: (n) => typeof n != "object" && n !== null ? n : typeof t.value == "function" ? t.value(n) : n[t.value],
-    getOptionValue: (n) => typeof n != "object" && n !== null ? n : typeof a.value == "function" ? a.value(n) : n[a.value]
-  };
-}
-function $e(e, r) {
-  const { focused: t } = be(e);
-  return J(t, (a) => {
-    r(a ? "focus" : "blur", c(e));
-  }), {
-    focused: t
-  };
-}
-const Ce = "ds", we = {
+import { defineComponent as U, unref as l, openBlock as g, createBlock as k, mergeProps as N, createCommentVNode as F, createElementBlock as w, normalizeClass as te, toDisplayString as R, createElementVNode as j, renderSlot as q, normalizeProps as T, withDirectives as oe, isRef as ne, Fragment as re, renderList as ie, vModelSelect as se, createVNode as le } from "vue";
+import { nanoid as ae } from "nanoid";
+import { iconExists as O, Icon as ue, addIcon as ce } from "@iconify/vue";
+const de = "ds", pe = {
   color: String,
   width: {
     type: [String, Number]
@@ -124,90 +32,90 @@ const Ce = "ds", we = {
   modifiers: {
     type: [String, Array]
   }
-}, Fe = {
+}, ve = {
   name: "VvIcon"
-}, G = /* @__PURE__ */ X({
-  ...Fe,
-  props: we,
-  setup(e) {
-    const r = e, t = Q(!0), { modifiers: a } = j(r), l = ae(Ce), { bemCssClasses: d } = Y("vv-icon", {
-      modifiers: a
-    }), n = i(() => r.provider || (l == null ? void 0 : l.provider)), h = i(() => {
-      const o = r.name ?? "", s = `@${n.value}:${r.prefix}:${r.name}`;
-      return F(o) ? o : F(s) ? s : (l == null ? void 0 : l.iconsCollections.find((m) => {
-        const f = `@${n.value}:${m.prefix}:${o}`;
-        if (F(f))
-          return f;
-      })) || o;
+}, G = /* @__PURE__ */ U({
+  ...ve,
+  props: pe,
+  setup(c) {
+    const r = c, o = ref(!0), { modifiers: v } = toRefs(r), s = inject(de), { bemCssClasses: f } = useBemModifiers("vv-icon", {
+      modifiers: v
+    }), n = computed(() => r.provider || (s == null ? void 0 : s.provider)), b = computed(() => {
+      const e = r.name ?? "", t = `@${n.value}:${r.prefix}:${r.name}`;
+      return O(e) ? e : O(t) ? t : (s == null ? void 0 : s.iconsCollections.find((d) => {
+        const a = `@${n.value}:${d.prefix}:${e}`;
+        if (O(a))
+          return a;
+      })) || e;
     });
-    function p(o) {
-      let s = null;
+    function m(e) {
+      let t = null;
       if (typeof window > "u") {
-        const { JSDOM: b } = require("jsdom");
-        s = new b().window;
+        const { JSDOM: y } = require("jsdom");
+        t = new y().window;
       }
-      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+      return (t ? new t.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
     }
-    function v(o) {
-      const s = p(o), m = (s == null ? void 0 : s.innerHTML.trim()) || "";
-      s && m && Pe(`@${n.value}:${r.prefix}:${r.name}`, {
-        body: m,
-        height: s.viewBox.baseVal.height,
-        width: s.viewBox.baseVal.width
+    function u(e) {
+      const t = m(e), d = (t == null ? void 0 : t.innerHTML.trim()) || "";
+      t && d && ce(`@${n.value}:${r.prefix}:${r.name}`, {
+        body: d,
+        height: t.viewBox.baseVal.height,
+        width: t.viewBox.baseVal.width
       });
     }
-    return l && (r.src && !F(`@${n.value}:${r.prefix}:${r.name}`) ? (t.value = !1, l.fetchIcon(r.src).then((o) => {
-      o && (v(o), t.value = !0);
-    }).catch((o) => {
-      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
-    })) : r.svg && v(r.svg)), (o, s) => t.value ? (y(), R(c(Ve), D({
+    return s && (r.src && !O(`@${n.value}:${r.prefix}:${r.name}`) ? (o.value = !1, s.fetchIcon(r.src).then((e) => {
+      e && (u(e), o.value = !0);
+    }).catch((e) => {
+      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+    })) : r.svg && u(r.svg)), (e, t) => l(o) ? (g(), k(l(ue), N({
       key: 0,
-      class: c(d)
+      class: l(f)
     }, {
-      inline: o.inline,
-      width: o.width,
-      height: o.height,
-      horizontalFlip: o.horizontalFlip,
-      verticalFlip: o.verticalFlip,
-      flip: o.flip,
-      rotate: o.rotate,
-      color: o.color,
-      onLoad: o.onLoad,
-      icon: c(h)
-    }), null, 16, ["class"])) : O("", !0);
+      inline: e.inline,
+      width: e.width,
+      height: e.height,
+      horizontalFlip: e.horizontalFlip,
+      verticalFlip: e.verticalFlip,
+      flip: e.flip,
+      rotate: e.rotate,
+      color: e.color,
+      onLoad: e.onLoad,
+      icon: l(b)
+    }), null, 16, ["class"])) : F("", !0);
   }
 });
-function _(e) {
-  return Array.isArray(e) ? e.filter((r) => Ae(r)).join(" ") : e;
+function C(c) {
+  return Array.isArray(c) ? c.filter((r) => isString(r)).join(" ") : c;
 }
-function _e(e, r) {
+function fe(c, r) {
   const {
-    invalid: t,
-    valid: a,
-    hint: l,
-    loading: d
+    invalid: o,
+    valid: v,
+    hint: s,
+    loading: f
   } = r, {
     hintLabel: n,
-    modelValue: h,
-    valid: p,
-    validLabel: v,
-    invalid: o,
-    invalidLabel: s,
-    ...m
-  } = j(e), f = K(m, "loading"), g = K(m, "loadingLabel"), b = i(() => o.value ? !!(o.value && t || s != null && s.value && Array.isArray(s.value) && s.value.length > 0 || s != null && s.value && !W(s)) : !1), $ = i(
-    () => !!(n && n.value || l)
-  ), V = i(
-    () => !!(v && v.value || a)
-  ), I = i(
-    () => !!(f != null && f.value && d || f != null && f.value && (g != null && g.value))
-  ), P = i(
-    () => $.value || V.value || b.value || I.value
+    modelValue: b,
+    valid: m,
+    validLabel: u,
+    invalid: e,
+    invalidLabel: t,
+    ...d
+  } = toRefs(c), a = resolveFieldData(d, "loading"), p = resolveFieldData(d, "loadingLabel"), y = computed(() => e.value ? !!(e.value && o || t != null && t.value && Array.isArray(t.value) && t.value.length > 0 || t != null && t.value && !isEmpty(t)) : !1), $ = computed(
+    () => !!(n && n.value || s)
+  ), V = computed(
+    () => !!(u && u.value || v)
+  ), P = computed(
+    () => !!(a != null && a.value && f || a != null && a.value && (p != null && p.value))
+  ), I = computed(
+    () => $.value || V.value || y.value || P.value
   );
   return {
-    hasInvalid: b,
+    hasInvalid: y,
     hasHint: $,
     hasValid: V,
-    hasLoading: I,
+    hasLoading: P,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -216,31 +124,31 @@ function _e(e, r) {
           default: () => ({})
         }
       },
-      setup(C) {
-        const k = i(() => {
-          const S = Se({
+      setup(A) {
+        const _ = computed(() => {
+          const S = toReactive({
             hintLabel: n,
-            modelValue: h,
-            valid: p,
-            validLabel: v,
-            invalid: o,
-            invalidLabel: s,
-            loading: f,
-            loadingLabel: g,
-            ...C.params
+            modelValue: b,
+            valid: m,
+            validLabel: u,
+            invalid: e,
+            invalidLabel: t,
+            loading: a,
+            loadingLabel: p,
+            ...A.params
           });
-          return o != null && o.value ? (t == null ? void 0 : t(S)) || _(s == null ? void 0 : s.value) || (n == null ? void 0 : n.value) : p != null && p.value ? (a == null ? void 0 : a(S)) || _(v == null ? void 0 : v.value) || (n == null ? void 0 : n.value) : f != null && f.value ? (d == null ? void 0 : d(S)) || _(g == null ? void 0 : g.value) || (n == null ? void 0 : n.value) : (l == null ? void 0 : l(S)) || _(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
+          return e != null && e.value ? (o == null ? void 0 : o(S)) || C(t == null ? void 0 : t.value) || (n == null ? void 0 : n.value) : m != null && m.value ? (v == null ? void 0 : v(S)) || C(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : a != null && a.value ? (f == null ? void 0 : f(S)) || C(p == null ? void 0 : p.value) || (n == null ? void 0 : n.value) : (s == null ? void 0 : s(S)) || C(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
         });
         return {
-          isVisible: P,
-          hasInvalid: b,
+          isVisible: I,
+          hasInvalid: y,
           hasValid: V,
-          hintContent: k
+          hintContent: _
         };
       },
       render() {
         if (this.isVisible)
-          return ue(
+          return h(
             "small",
             {
               role: this.hasInvalid || this.hasValid ? "alert" : void 0
@@ -251,69 +159,69 @@ function _e(e, r) {
     }
   };
 }
-const De = {
+const me = {
   valid: Boolean,
   validLabel: [String, Array]
-}, je = {
+}, ge = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, ke = {
+}, he = {
   loading: Boolean,
   loadingLabel: String
-}, Ne = {
+}, ye = {
   disabled: Boolean
-}, Ee = {
+}, Se = {
   readonly: Boolean
-}, Re = {
+}, be = {
   modifiers: [String, Array]
-}, ze = {
+}, Pe = {
   hintLabel: { type: String, default: "" }
-}, He = {
+}, Ve = {
   options: {
     type: Array,
     default: () => []
   },
   labelKey: { type: [String, Function], default: "label" },
   valueKey: { type: [String, Function], default: "value" }
-}, U = {
+}, K = {
   LEFT: "left",
   RIGHT: "right"
-}, Me = {
+}, Ie = {
   icon: { type: [String, Object] },
   iconPosition: {
     type: String,
-    validation: (e) => Object.values(U).includes(e),
-    default: U.RIGHT
+    validation: (c) => Object.values(K).includes(c),
+    default: K.RIGHT
   }
-}, Te = {
+}, Be = {
   tabindex: { type: [String, Number], default: 0 }
-}, qe = {
+}, we = {
   floating: Boolean
-}, Le = {
+}, Fe = {
   unselectable: { type: Boolean, default: !0 }
-}, Ke = {
+}, $e = {
   id: [String, Number],
   name: { type: String, required: !0 }
-}, Ze = {
+}, Ae = {
   autofocus: Boolean
-}, Ge = {
+}, De = {
   autocomplete: { type: String, default: "off" }
-}, Ue = {
-  ...Ke,
-  ...Ze,
-  ...Ge,
-  ...Te,
+}, Oe = {
+  ...$e,
+  ...Ae,
   ...De,
-  ...je,
-  ...ze,
-  ...ke,
-  ...Ne,
-  ...Ee,
-  ...Re,
-  ...He,
-  ...Me,
-  ...qe,
-  ...Le,
+  ...Be,
+  ...me,
+  ...ge,
+  ...Pe,
+  ...he,
+  ...ye,
+  ...Se,
+  ...be,
+  ...Ve,
+  ...Ie,
+  ...we,
+  ...Fe,
   multiple: Boolean,
   required: Boolean,
   size: [String, Number],
@@ -323,112 +231,112 @@ const De = {
   },
   label: String,
   placeholder: String
-}, Je = ["update:modelValue", "focus", "blur"], Xe = ["for"], Qe = { class: "vv-select__wrapper" }, We = ["id"], Ye = ["disabled", "hidden"], xe = ["disabled", "value"], et = {
+}, Ce = ["update:modelValue", "focus", "blur"], Ne = ["for"], _e = { class: "vv-select__wrapper" }, Ee = ["id"], Re = ["disabled", "hidden"], ke = ["disabled", "value"], He = {
   name: "VvSelect"
-}, st = /* @__PURE__ */ X({
-  ...et,
-  props: Ue,
-  emits: Je,
-  setup(e, { emit: r }) {
-    const t = e, a = ce(), l = Q(), { HintSlot: d, hasHint: n, hasInvalid: h } = _e(t, a), {
-      modifiers: p,
-      disabled: v,
-      readonly: o,
-      loading: s,
-      icon: m,
-      iconPosition: f,
-      invalid: g,
-      valid: b,
+}, qe = /* @__PURE__ */ U({
+  ...He,
+  props: Oe,
+  emits: Ce,
+  setup(c, { emit: r }) {
+    const o = c, v = useSlots(), s = ref(), { HintSlot: f, hasHint: n, hasInvalid: b } = fe(o, v), {
+      modifiers: m,
+      disabled: u,
+      readonly: e,
+      loading: t,
+      icon: d,
+      iconPosition: a,
+      invalid: p,
+      valid: y,
       floating: $,
       multiple: V
-    } = j(t), I = i(() => String(t.id || ye())), P = i(() => `${I.value}-hint`), { focused: C } = $e(l, r), k = Ie(l);
-    J(k, (u) => {
-      u && t.autofocus && (C.value = !0);
+    } = toRefs(o), P = computed(() => String(o.id || ae())), I = computed(() => `${P.value}-hint`), { focused: A } = useComponentFocus(s, r), _ = useElementVisibility(s);
+    watch(_, (i) => {
+      i && o.autofocus && (A.value = !0);
     });
-    const { hasIcon: S, hasIconLeft: z, hasIconRight: H } = Be(
-      m,
-      f
-    ), x = i(() => !W(t.modelValue)), M = i(() => t.disabled || t.readonly), ee = i(() => M.value ? -1 : t.tabindex), te = i(() => {
-      if (t.invalid === !0)
+    const { hasIcon: S, hasIconLeft: H, hasIconRight: M } = useComponentIcon(
+      d,
+      a
+    ), J = computed(() => !isEmpty(o.modelValue)), z = computed(() => o.disabled || o.readonly), X = computed(() => z.value ? -1 : o.tabindex), L = computed(() => {
+      if (o.invalid === !0)
         return !0;
-      if (t.valid === !0)
+      if (o.valid === !0)
         return !1;
-    }), { bemCssClasses: re } = Y("vv-select", {
-      modifiers: p,
-      valid: b,
-      invalid: g,
-      loading: s,
-      disabled: v,
-      readonly: o,
-      iconLeft: z,
-      iconRight: H,
-      dirty: x,
-      focus: C,
+    }), { bemCssClasses: Q } = useBemModifiers("vv-select", {
+      modifiers: m,
+      valid: y,
+      invalid: p,
+      loading: t,
+      disabled: u,
+      readonly: e,
+      iconLeft: H,
+      iconRight: M,
+      dirty: J,
+      focus: A,
       floating: $,
       multiple: V
-    }), ne = i(() => ({
-      name: t.name,
-      tabindex: ee.value,
-      disabled: M.value,
-      required: t.required,
-      size: t.size,
-      autocomplete: t.autocomplete,
-      multiple: t.multiple,
-      "aria-invalid": te.value,
-      "aria-describedby": !h.value && n.value ? P.value : void 0,
-      "aria-errormessage": h.value ? P.value : void 0
-    })), { getOptionLabel: oe, getOptionValue: se } = Oe(t);
-    function le(u) {
-      return typeof u == "string" || u.disabled === void 0 ? v.value : u.disabled;
+    }), W = computed(() => ({
+      name: o.name,
+      tabindex: X.value,
+      disabled: z.value,
+      required: o.required,
+      size: o.size,
+      autocomplete: o.autocomplete,
+      multiple: o.multiple,
+      "aria-invalid": L.value,
+      "aria-describedby": !b.value && n.value ? I.value : void 0,
+      "aria-errormessage": b.value ? I.value : void 0
+    })), { getOptionLabel: Y, getOptionValue: Z } = useOptions(o);
+    function x(i) {
+      return typeof i == "string" || i.disabled === void 0 ? u.value : i.disabled;
     }
-    const N = i({
-      get: () => t.modelValue,
-      set: (u) => {
-        Array.isArray(u) && (u = u.filter((w) => w !== void 0)), r("update:modelValue", u);
+    const E = computed({
+      get: () => o.modelValue,
+      set: (i) => {
+        Array.isArray(i) && (i = i.filter((D) => D !== void 0)), r("update:modelValue", i);
       }
     });
-    return (u, w) => (y(), B("div", {
-      class: de(c(re))
+    return (i, D) => (g(), w("div", {
+      class: te(l(Q))
     }, [
-      u.label ? (y(), B("label", {
+      i.label ? (g(), w("label", {
         key: 0,
-        for: c(I)
-      }, E(u.label), 9, Xe)) : O("", !0),
-      T("div", Qe, [
-        q(u.$slots, "before", {}, () => [
-          c(z) ? (y(), R(G, L(D({ key: 0 }, c(S))), null, 16)) : O("", !0)
+        for: l(P)
+      }, R(i.label), 9, Ne)) : F("", !0),
+      j("div", _e, [
+        q(i.$slots, "before", {}, () => [
+          l(H) ? (g(), k(G, T(N({ key: 0 }, l(S))), null, 16)) : F("", !0)
         ]),
-        fe(T("select", D({
-          id: c(I),
+        oe(j("select", N({
+          id: l(P),
           ref_key: "select",
-          ref: l,
-          "onUpdate:modelValue": w[0] || (w[0] = (A) => ve(N) ? N.value = A : null)
-        }, c(ne)), [
-          u.placeholder ? (y(), B("option", {
+          ref: s,
+          "onUpdate:modelValue": D[0] || (D[0] = (B) => ne(E) ? E.value = B : null)
+        }, l(W)), [
+          i.placeholder ? (g(), w("option", {
             key: 0,
             value: void 0,
-            disabled: !u.unselectable,
-            hidden: !u.unselectable
-          }, E(u.placeholder), 9, Ye)) : O("", !0),
-          (y(!0), B(pe, null, me(u.options, (A, ie) => (y(), B("option", {
-            key: ie,
-            disabled: le(A),
-            value: c(se)(A)
-          }, E(c(oe)(A)), 9, xe))), 128))
-        ], 16, We), [
-          [ge, c(N)]
+            disabled: !i.unselectable,
+            hidden: !i.unselectable
+          }, R(i.placeholder), 9, Re)) : F("", !0),
+          (g(!0), w(re, null, ie(i.options, (B, ee) => (g(), w("option", {
+            key: ee,
+            disabled: x(B),
+            value: l(Z)(B)
+          }, R(l(Y)(B)), 9, ke))), 128))
+        ], 16, Ee), [
+          [se, l(E)]
         ]),
-        q(u.$slots, "after", {}, () => [
-          c(H) ? (y(), R(G, L(D({ key: 0 }, c(S))), null, 16)) : O("", !0)
+        q(i.$slots, "after", {}, () => [
+          l(M) ? (g(), k(G, T(N({ key: 0 }, l(S))), null, 16)) : F("", !0)
         ])
       ]),
-      he(c(d), {
-        id: c(P),
+      le(l(f), {
+        id: l(I),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  st as default
+  qe as default
 };