@volverjs/ui-vue 0.0.3-beta.2 → 0.0.3-beta.4

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js

@@ -1,163 +1,37 @@
-import { isRef as E, provide as ee, computed as c, toRefs as j, unref as f, h as te, inject as ne, toRef as re, defineComponent as w, useSlots as I, ref as oe, watchEffect as se, watch as ue, onMounted as ae, openBlock as O, createElementBlock as P, normalizeClass as H, withDirectives as le, createElementVNode as D, vModelCheckbox as ie, renderSlot as N, createTextVNode as ce, toDisplayString as K, createVNode as M, createCommentVNode as fe, Fragment as ve, renderList as de, createBlock as pe, mergeProps as ye } from "vue";
-import { toReactive as me, useVModel as he } from "@vueuse/core";
-import { nanoid as ge } from "nanoid";
-const F = "VV_CHECK_GROUP";
-function be(t) {
-  if (Object.keys(t).some(
-    (e) => e !== "key" && !E(t[e])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  ee(
-    t.key,
-    c(() => t)
-  );
-}
-function ke(t) {
-  const { options: e, labelKey: n, valueKey: a } = j(t);
-  return {
-    options: e,
-    getOptionLabel: (r) => typeof r != "object" && r !== null ? r : typeof n.value == "function" ? n.value(r) : r[n.value],
-    getOptionValue: (r) => typeof r != "object" && r !== null ? r : typeof a.value == "function" ? a.value(r) : r[a.value]
-  };
-}
-function T(t, e, n) {
-  return n ? B(t, n) === B(e, n) : G(t, e);
-}
-function G(t, e) {
-  if (t === e)
-    return !0;
-  if (t && e && typeof t == "object" && typeof e == "object") {
-    const n = Array.isArray(t), a = Array.isArray(e);
-    let o, u, r;
-    if (n && a) {
-      if (u = t.length, u != e.length)
-        return !1;
-      for (o = u; o-- !== 0; )
-        if (!G(t[o], e[o]))
-          return !1;
-      return !0;
-    }
-    if (n != a)
-      return !1;
-    const v = t instanceof Date, i = e instanceof Date;
-    if (v != i)
-      return !1;
-    if (v && i)
-      return t.getTime() == e.getTime();
-    const s = t instanceof RegExp, d = e instanceof RegExp;
-    if (s != d)
-      return !1;
-    if (s && d)
-      return t.toString() == e.toString();
-    const l = Object.keys(t);
-    if (u = l.length, u !== Object.keys(e).length)
-      return !1;
-    for (o = u; o-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(e, l[o]))
-        return !1;
-    for (o = u; o-- !== 0; )
-      if (r = l[o], !G(t[r], e[r]))
-        return !1;
-    return !0;
-  }
-  return t !== t && e !== e;
+import { defineComponent as R, openBlock as P, createElementBlock as B, normalizeClass as N, unref as c, withDirectives as U, createElementVNode as O, isRef as z, vModelCheckbox as J, renderSlot as H, createTextVNode as Q, toDisplayString as I, createVNode as w, createCommentVNode as W, Fragment as X, renderList as Y, createBlock as Z, mergeProps as L } from "vue";
+import { nanoid as ee } from "nanoid";
+const E = "VV_CHECK_GROUP";
+function A(n) {
+  return Array.isArray(n) ? n.filter((m) => isString(m)).join(" ") : n;
 }
-function B(t, e) {
-  if (t && Object.keys(t).length && e) {
-    if (e.indexOf(".") === -1)
-      return t[e];
-    {
-      const n = e.split(".");
-      let a = t;
-      for (let o = 0, u = n.length; o < u; ++o) {
-        if (t == null)
-          return null;
-        a = a[n[o]];
-      }
-      return a;
-    }
-  } else
-    return null;
-}
-function Ve(t, e) {
-  if (t != null && e && e.length) {
-    for (const n of e)
-      if (T(t, n))
-        return !0;
-  }
-  return !1;
-}
-function q(t) {
-  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(f(t));
-}
-function Ce(t) {
-  return typeof t == "string" || t instanceof String;
-}
-function $(t) {
-  var e, n;
-  if (t)
-    return (n = (e = 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 : e.join("-")) == null ? void 0 : n.toLowerCase();
-}
-function z(t, e) {
-  const n = { [`${t}`]: !0 };
-  return {
-    bemCssClasses: c(() => Object.keys(e).reduce((o, u) => {
-      const r = f(e[u]) || !1;
-      if (!r)
-        return o;
-      if (u === "modifiers") {
-        const v = Array.isArray(r) ? r : r.split(" ");
-        return {
-          ...o,
-          ...v.reduce(
-            (i, s) => ({
-              ...i,
-              [`${t}--${$(s)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...o,
-          [`${t}--${$(u)}`]: r
-        };
-    }, n) || {})
-  };
-}
-function x(t) {
-  return Array.isArray(t) ? t.filter((e) => Ce(e)).join(" ") : t;
-}
-function Z(t, e) {
+function $(n, m) {
   const {
-    invalid: n,
-    valid: a,
-    hint: o,
-    loading: u
-  } = e, {
-    hintLabel: r,
-    modelValue: v,
-    valid: i,
-    validLabel: s,
-    invalid: d,
-    invalidLabel: l,
-    ...k
-  } = j(t), p = B(k, "loading"), y = B(k, "loadingLabel"), h = c(() => d.value ? !!(d.value && n || l != null && l.value && Array.isArray(l.value) && l.value.length > 0 || l != null && l.value && !q(l)) : !1), m = c(
-    () => !!(r && r.value || o)
-  ), b = c(
-    () => !!(s && s.value || a)
-  ), V = c(
-    () => !!(p != null && p.value && u || p != null && p.value && (y != null && y.value))
-  ), C = c(
-    () => m.value || b.value || h.value || V.value
+    invalid: e,
+    valid: f,
+    hint: r,
+    loading: d
+  } = m, {
+    hintLabel: a,
+    modelValue: b,
+    valid: v,
+    validLabel: t,
+    invalid: i,
+    invalidLabel: o,
+    ...g
+  } = toRefs(n), l = resolveFieldData(g, "loading"), u = resolveFieldData(g, "loadingLabel"), p = computed(() => i.value ? !!(i.value && e || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !isEmpty(o)) : !1), s = computed(
+    () => !!(a && a.value || r)
+  ), V = computed(
+    () => !!(t && t.value || f)
+  ), k = computed(
+    () => !!(l != null && l.value && d || l != null && l.value && (u != null && u.value))
+  ), S = computed(
+    () => s.value || V.value || p.value || k.value
   );
   return {
-    hasInvalid: h,
-    hasHint: m,
-    hasValid: b,
-    hasLoading: V,
+    hasInvalid: p,
+    hasHint: s,
+    hasValid: V,
+    hasLoading: k,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -166,31 +40,31 @@ function Z(t, e) {
           default: () => ({})
         }
       },
-      setup(R) {
-        const S = c(() => {
-          const A = me({
-            hintLabel: r,
-            modelValue: v,
-            valid: i,
-            validLabel: s,
-            invalid: d,
-            invalidLabel: l,
-            loading: p,
-            loadingLabel: y,
-            ...R.params
+      setup(G) {
+        const x = computed(() => {
+          const _ = toReactive({
+            hintLabel: a,
+            modelValue: b,
+            valid: v,
+            validLabel: t,
+            invalid: i,
+            invalidLabel: o,
+            loading: l,
+            loadingLabel: u,
+            ...G.params
           });
-          return d != null && d.value ? (n == null ? void 0 : n(A)) || x(l == null ? void 0 : l.value) || (r == null ? void 0 : r.value) : i != null && i.value ? (a == null ? void 0 : a(A)) || x(s == null ? void 0 : s.value) || (r == null ? void 0 : r.value) : p != null && p.value ? (u == null ? void 0 : u(A)) || x(y == null ? void 0 : y.value) || (r == null ? void 0 : r.value) : (o == null ? void 0 : o(A)) || x(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
+          return i != null && i.value ? (e == null ? void 0 : e(_)) || A(o == null ? void 0 : o.value) || (a == null ? void 0 : a.value) : v != null && v.value ? (f == null ? void 0 : f(_)) || A(t == null ? void 0 : t.value) || (a == null ? void 0 : a.value) : l != null && l.value ? (d == null ? void 0 : d(_)) || A(u == null ? void 0 : u.value) || (a == null ? void 0 : a.value) : (r == null ? void 0 : r(_)) || A(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
         });
         return {
-          isVisible: C,
-          hasInvalid: h,
-          hasValid: b,
-          hintContent: S
+          isVisible: S,
+          hasInvalid: p,
+          hasValid: V,
+          hintContent: x
         };
       },
       render() {
         if (this.isVisible)
-          return te(
+          return h(
             "small",
             {
               role: this.hasInvalid || this.hasValid ? "alert" : void 0
@@ -201,235 +75,205 @@ function Z(t, e) {
     }
   };
 }
-function Ae(t) {
-  const e = ne(t, void 0), n = c(() => !q(e));
-  function a(o, u, r) {
-    if (e != null && e.value) {
-      const i = f(e.value)[o];
-      return c({
-        get() {
-          return i == null ? void 0 : i.value;
-        },
-        set(s) {
-          i.value = s;
-        }
-      });
-    }
-    const v = re(u, o);
-    return c({
-      get() {
-        return v.value;
-      },
-      set(i) {
-        r && r(`update:${o}`, i);
-      }
-    });
-  }
-  return {
-    group: e,
-    isInGroup: n,
-    getGroupOrLocalRef: a
-  };
-}
-const U = {
+const D = {
   valid: Boolean,
   validLabel: [String, Array]
-}, J = {
+}, F = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, Q = {
+}, M = {
   disabled: Boolean
-}, W = {
+}, j = {
   readonly: Boolean
-}, X = {
+}, K = {
   hintLabel: { type: String, default: "" }
-}, _e = {
+}, te = {
   options: {
     type: Array,
     default: () => []
   },
   labelKey: { type: [String, Function], default: "label" },
   valueKey: { type: [String, Function], default: "value" }
-}, Se = {
+}, ae = {
   tabindex: { type: [String, Number], default: 0 }
-}, Oe = {
+}, oe = {
   id: [String, Number],
   name: { type: String, required: !0 }
-}, xe = {
-  ...Oe,
-  ...Se,
-  ...U,
-  ...J,
-  ...X,
-  ...Q,
-  ...W,
+}, ne = {
+  ...oe,
+  ...ae,
+  ...D,
+  ...F,
+  ...K,
+  ...M,
+  ...j,
   value: [String, Number, Boolean],
   modelValue: [Object, Number, Boolean, String],
   label: String
-}, Pe = {
-  ...U,
-  ...J,
-  ..._e,
-  ...X,
-  ...Q,
-  ...W,
+}, re = {
+  ...D,
+  ...F,
+  ...te,
+  ...K,
+  ...M,
+  ...j,
   modelValue: [String, Array],
   label: String,
   name: { type: String, required: !0 },
   vertical: Boolean
-}, Be = {
-  ...xe,
+}, le = {
+  ...ne,
   indeterminate: Boolean,
   uncheckedValue: [String, Number, Boolean],
   switch: Boolean
-}, je = ["click", "update:modelValue", "change", "blur"];
-function Re(t, e) {
-  const { group: n, isInGroup: a, getGroupOrLocalRef: o } = Ae(F), { switch: u, indeterminate: r } = j(t), v = o("modelValue", t, e), i = o("readonly", t), s = o("disabled", t), d = o("valid", t), l = o("invalid", t);
+}, ue = ["click", "update:modelValue", "change", "blur"];
+function se(n, m) {
+  const { group: e, isInGroup: f, getGroupOrLocalRef: r } = useInjectedGroupState(E), { switch: d, indeterminate: a } = toRefs(n), b = r("modelValue", n, m), v = r("readonly", n), t = r("disabled", n), i = r("valid", n), o = r("invalid", n);
   return {
-    propsSwitch: u,
-    indeterminate: r,
-    group: n,
-    isInGroup: a,
-    modelValue: v,
-    readonly: i,
-    disabled: s,
-    valid: d,
-    invalid: l
+    propsSwitch: d,
+    indeterminate: a,
+    group: e,
+    isInGroup: f,
+    modelValue: b,
+    readonly: v,
+    disabled: t,
+    valid: i,
+    invalid: o
   };
 }
-const Ge = ["for"], $e = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ee = {
+const ie = ["for"], ce = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], de = {
   name: "VvCheckbox"
-}, we = /* @__PURE__ */ w({
-  ...Ee,
-  props: Be,
-  emits: je,
-  setup(t, { emit: e }) {
-    const n = t, a = I(), {
-      disabled: o,
-      readonly: u,
-      valid: r,
-      invalid: v,
-      propsSwitch: i,
-      modelValue: s,
-      indeterminate: d,
-      isInGroup: l
-    } = Re(n, e), k = c(() => String(n.id || ge())), p = c(() => m.value ? -1 : n.tabindex), y = oe(), h = c(
-      () => n.uncheckedValue !== void 0 && !l.value
-    ), m = c(() => o.value || u.value), b = c(() => {
-      if (v.value === !0)
+}, ve = /* @__PURE__ */ R({
+  ...de,
+  props: le,
+  emits: ue,
+  setup(n, { emit: m }) {
+    const e = n, f = useSlots(), {
+      disabled: r,
+      readonly: d,
+      valid: a,
+      invalid: b,
+      propsSwitch: v,
+      modelValue: t,
+      indeterminate: i,
+      isInGroup: o
+    } = se(e, m), g = computed(() => String(e.id || ee())), l = computed(() => s.value ? -1 : e.tabindex), u = ref(), p = computed(
+      () => e.uncheckedValue !== void 0 && !o.value
+    ), s = computed(() => r.value || d.value), V = computed(() => {
+      if (b.value === !0)
         return !0;
-      if (r.value === !0)
+      if (a.value === !0)
         return !1;
-    }), V = c(() => h.value ? s.value === n.value : Array.isArray(s.value) ? Ve(n.value, s.value) : T(n.value, s.value)), C = c(() => !!(d.value || !V.value && h.value && n.uncheckedValue !== s.value)), R = c(() => {
-      if (!h.value)
-        return ["string", "number", "boolean"].includes(typeof n.value) ? n.value : !0;
-    }), S = c({
+    }), k = computed(() => p.value ? t.value === e.value : Array.isArray(t.value) ? contains(e.value, t.value) : equals(e.value, t.value)), S = computed(() => !!(i.value || !k.value && p.value && e.uncheckedValue !== t.value)), G = computed(() => {
+      if (!p.value)
+        return ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0;
+    }), x = computed({
       get() {
-        return V.value;
+        return k.value;
       },
-      set(g) {
-        if (h.value)
-          s.value = g ? n.value : n.uncheckedValue;
-        else if (Array.isArray(s.value) || l.value) {
-          const _ = new Set(
-            Array.isArray(s.value) ? s.value : s.value !== void 0 ? [s.value] : []
+      set(y) {
+        if (p.value)
+          t.value = y ? e.value : e.uncheckedValue;
+        else if (Array.isArray(t.value) || o.value) {
+          const C = new Set(
+            Array.isArray(t.value) ? t.value : t.value !== void 0 ? [t.value] : []
           );
-          g ? _.add(n.value) : _.delete(n.value), s.value = [..._];
+          y ? C.add(e.value) : C.delete(e.value), t.value = [...C];
         } else
-          s.value = g ? n.value : void 0;
-        e("change", g);
+          t.value = y ? e.value : void 0;
+        m("change", y);
       }
-    }), { bemCssClasses: A } = z("vv-checkbox", {
-      switch: i,
-      valid: r,
-      invalid: v,
-      disabled: o,
-      readonly: u,
-      indeterminate: d
+    }), { bemCssClasses: _ } = useBemModifiers("vv-checkbox", {
+      switch: v,
+      valid: a,
+      invalid: b,
+      disabled: r,
+      readonly: d,
+      indeterminate: i
     });
-    se(() => {
-      h.value && Array.isArray(s.value) && console.warn(
+    watchEffect(() => {
+      p.value && Array.isArray(t.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
-    }), ue(
-      () => C.value,
-      (g) => {
-        g ? y.value.indeterminate = !0 : y.value.indeterminate = !1;
+    }), watch(
+      () => S.value,
+      (y) => {
+        y ? u.value.indeterminate = !0 : u.value.indeterminate = !1;
       }
-    ), ae(() => {
-      C.value && (y.value.indeterminate = !0);
+    ), onMounted(() => {
+      S.value && (u.value.indeterminate = !0);
     });
-    const { HintSlot: Y } = Z(n, a);
-    return (g, _) => (O(), P("label", {
-      class: H(f(A)),
-      for: f(k)
+    const { HintSlot: q } = $(e, f);
+    return (y, C) => (P(), B("label", {
+      class: N(c(_)),
+      for: c(g)
     }, [
-      le(D("input", {
-        id: f(k),
+      U(O("input", {
+        id: c(g),
         ref_key: "input",
-        ref: y,
-        "onUpdate:modelValue": _[0] || (_[0] = (L) => E(S) ? S.value = L : null),
+        ref: u,
+        "onUpdate:modelValue": C[0] || (C[0] = (T) => z(x) ? x.value = T : null),
         type: "checkbox",
         class: "vv-checkbox__input",
-        name: g.name,
-        disabled: f(m),
-        value: f(R),
-        tabindex: f(p),
-        "aria-invalid": f(b)
-      }, null, 8, $e), [
-        [ie, f(S)]
+        name: y.name,
+        disabled: c(s),
+        value: c(G),
+        tabindex: c(l),
+        "aria-invalid": c(V)
+      }, null, 8, ce), [
+        [J, c(x)]
       ]),
-      N(g.$slots, "default", { value: f(s) }, () => [
-        ce(K(g.label), 1)
+      H(y.$slots, "default", { value: c(t) }, () => [
+        Q(I(y.label), 1)
       ]),
-      M(f(Y), {
+      w(c(q), {
         class: "vv-checkbox__hint",
-        params: { value: f(s) }
+        params: { value: c(t) }
       }, null, 8, ["params"])
-    ], 10, Ge));
+    ], 10, ie));
   }
-}), Ie = Pe, He = ["update:modelValue", "change"], De = ["textContent"], Ne = { class: "vv-checkbox-group__wrapper" }, Ke = {
+}), pe = re, me = ["update:modelValue", "change"], fe = ["textContent"], he = { class: "vv-checkbox-group__wrapper" }, ye = {
   name: "VvCheckboxGroup"
-}, qe = /* @__PURE__ */ w({
-  ...Ke,
-  props: Ie,
-  emits: He,
-  setup(t, { emit: e }) {
-    const n = t, a = I(), o = he(n, "modelValue", e), { disabled: u, readonly: r, vertical: v, valid: i, invalid: s } = j(n);
-    be({
-      key: F,
-      modelValue: o,
-      disabled: u,
-      readonly: r,
-      valid: i,
-      invalid: s
-    });
-    const { getOptionLabel: l, getOptionValue: k } = ke(n), { bemCssClasses: p } = z("vv-checkbox-group", {
-      disabled: u,
-      readonly: r,
-      horizontal: c(() => !v.value),
-      valid: i,
-      invalid: s
-    }), y = (m, b) => ({
-      id: `${n.name}_opt${b}`,
-      name: n.name,
-      label: l(m),
-      value: k(m)
-    }), { HintSlot: h } = Z(n, a);
-    return (m, b) => (O(), P("fieldset", {
-      class: H(f(p))
+}, ge = /* @__PURE__ */ R({
+  ...ye,
+  props: pe,
+  emits: me,
+  setup(n, { emit: m }) {
+    const e = n, f = useSlots(), r = useVModel(e, "modelValue", m), { disabled: d, readonly: a, vertical: b, valid: v, invalid: t } = toRefs(e), i = {
+      key: E,
+      modelValue: r,
+      disabled: d,
+      readonly: a,
+      valid: v,
+      invalid: t
+    };
+    useProvideGroupState(i);
+    const { getOptionLabel: o, getOptionValue: g } = useOptions(e), { bemCssClasses: l } = useBemModifiers("vv-checkbox-group", {
+      disabled: d,
+      readonly: a,
+      horizontal: computed(() => !b.value),
+      valid: v,
+      invalid: t
+    }), u = (s, V) => ({
+      id: `${e.name}_opt${V}`,
+      name: e.name,
+      label: o(s),
+      value: g(s)
+    }), { HintSlot: p } = $(e, f);
+    return (s, V) => (P(), B("fieldset", {
+      class: N(c(l))
     }, [
-      m.label ? (O(), P("legend", {
+      s.label ? (P(), B("legend", {
         key: 0,
-        textContent: K(m.label)
-      }, null, 8, De)) : fe("", !0),
-      D("div", Ne, [
-        m.options.length > 0 ? (O(!0), P(ve, { key: 0 }, de(m.options, (V, C) => (O(), pe(we, ye({ key: C }, y(V, C)), null, 16))), 128)) : N(m.$slots, "default", { key: 1 })
+        textContent: I(s.label)
+      }, null, 8, fe)) : W("", !0),
+      O("div", he, [
+        s.options.length > 0 ? (P(!0), B(X, { key: 0 }, Y(s.options, (k, S) => (P(), Z(ve, L({ key: S }, u(k, S)), null, 16))), 128)) : H(s.$slots, "default", { key: 1 })
       ]),
-      M(f(h), { class: "vv-checkbox-group__hint" })
+      w(c(p), { class: "vv-checkbox-group__hint" })
     ], 2));
   }
 });
 export {
-  qe as default
+  ge as default
 };