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

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

@@ -1,37 +1,112 @@
-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;
+import { unref as d, toRefs as A, computed as c, h as se, inject as ie, toRef as ce, defineComponent as H, useSlots as K, ref as ve, watchEffect as fe, watch as de, onMounted as pe, openBlock as j, createElementBlock as x, normalizeClass as F, withDirectives as ye, createElementVNode as M, isRef as q, vModelCheckbox as be, renderSlot as z, createTextVNode as ge, toDisplayString as U, createVNode as J, provide as he, createCommentVNode as me, Fragment as ke, renderList as Se, createBlock as Oe, mergeProps as _e } from "vue";
+import { toReactive as Ve, useVModel as je } from "@vueuse/core";
+import { nanoid as Ae } from "nanoid";
+var I = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(I || {}), T = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(T || {}), R = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(R || {}), G = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(G || {}), W = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(W || {});
+const Y = Symbol.for("checkGroup");
+function Q(e, t, n) {
+  return n ? P(e, n) === P(t, n) : N(e, t);
 }
-function $(n, m) {
+function N(e, t) {
+  if (e === t)
+    return !0;
+  if (e && t && typeof e == "object" && typeof t == "object") {
+    const n = Array.isArray(e), s = Array.isArray(t);
+    let r, l, o;
+    if (n && s) {
+      if (l = e.length, l != t.length)
+        return !1;
+      for (r = l; r-- !== 0; )
+        if (!N(e[r], t[r]))
+          return !1;
+      return !0;
+    }
+    if (n != s)
+      return !1;
+    const y = e instanceof Date, a = t instanceof Date;
+    if (y != a)
+      return !1;
+    if (y && a)
+      return e.getTime() == t.getTime();
+    const v = e instanceof RegExp, u = t instanceof RegExp;
+    if (v != u)
+      return !1;
+    if (v && u)
+      return e.toString() == t.toString();
+    const i = Object.keys(e);
+    if (l = i.length, l !== Object.keys(t).length)
+      return !1;
+    for (r = l; r-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, i[r]))
+        return !1;
+    for (r = l; r-- !== 0; )
+      if (o = i[r], !N(e[o], t[o]))
+        return !1;
+    return !0;
+  }
+  return e !== e && t !== t;
+}
+function P(e, t) {
+  if (e && Object.keys(e).length && t) {
+    if (t.indexOf(".") === -1)
+      return e[t];
+    {
+      const n = t.split(".");
+      let s = e;
+      for (let r = 0, l = n.length; r < l; ++r) {
+        if (e == null)
+          return null;
+        s = s[n[r]];
+      }
+      return s;
+    }
+  } else
+    return null;
+}
+function Be(e, t) {
+  if (e != null && t && t.length) {
+    for (const n of t)
+      if (Q(e, n))
+        return !0;
+  }
+  return !1;
+}
+function X(e) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(d(e));
+}
+function Ce(e) {
+  return typeof e == "string" || e instanceof String;
+}
+function C(e) {
+  return Array.isArray(e) ? e.filter((t) => Ce(t)).join(" ") : e;
+}
+function Z(e, t) {
   const {
-    invalid: e,
-    valid: f,
+    invalid: n,
+    valid: s,
     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
+    loading: l
+  } = t, {
+    hintLabel: o,
+    modelValue: y,
+    valid: a,
+    validLabel: v,
+    invalid: u,
+    invalidLabel: i,
+    ...m
+  } = A(e), p = P(m, "loading"), b = P(m, "loadingLabel"), g = c(() => u.value ? !!(u.value && n || i != null && i.value && Array.isArray(i.value) && i.value.length > 0 || i != null && i.value && !X(i)) : !1), f = c(
+    () => !!(o && o.value || r)
+  ), k = c(
+    () => !!(v && v.value || s)
+  ), _ = c(
+    () => !!(p != null && p.value && l || p != null && p.value && (b != null && b.value))
+  ), O = c(
+    () => f.value || k.value || g.value || _.value
   );
   return {
-    hasInvalid: p,
-    hasHint: s,
-    hasValid: V,
-    hasLoading: k,
+    hasInvalid: g,
+    hasHint: f,
+    hasValid: k,
+    hasLoading: _,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -40,34 +115,34 @@ function $(n, m) {
           default: () => ({})
         }
       },
-      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
+      setup(B) {
+        const E = c(() => {
+          const S = Ve({
+            hintLabel: o,
+            modelValue: y,
+            valid: a,
+            validLabel: v,
+            invalid: u,
+            invalidLabel: i,
+            loading: p,
+            loadingLabel: b,
+            ...B.params
           });
-          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 u != null && u.value ? (n == null ? void 0 : n(S)) || C(i == null ? void 0 : i.value) || (o == null ? void 0 : o.value) : a != null && a.value ? (s == null ? void 0 : s(S)) || C(v == null ? void 0 : v.value) || (o == null ? void 0 : o.value) : p != null && p.value ? (l == null ? void 0 : l(S)) || C(b == null ? void 0 : b.value) || (o == null ? void 0 : o.value) : (r == null ? void 0 : r(S)) || C(o == null ? void 0 : o.value) || (o == null ? void 0 : o.value);
         });
         return {
-          isVisible: S,
-          hasInvalid: p,
-          hasValid: V,
-          hintContent: x
+          isVisible: O,
+          hasInvalid: g,
+          hasValid: k,
+          hintContent: E
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return se(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -75,205 +150,416 @@ function $(n, m) {
     }
   };
 }
-const D = {
+const xe = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (e) => Object.values(W).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, L = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, F = {
+}, ee = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, M = {
+}, $ = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, j = {
+}, Pe = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Ee = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, w = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, te = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, K = {
+}, D = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+}, ne = {
   hintLabel: { type: String, default: "" }
-}, te = {
+}, Ie = {
+  /**
+   * List of options, can be string[] or object[]
+   */
   options: {
     type: Array,
     default: () => []
   },
+  /**
+   * Used when options are objects: key to use for option label
+   */
   labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, ae = {
+  /**
+   * Used when options are objects: key to use for option label
+   */
+  valueKey: { type: [String, Function], default: "value" },
+  /**
+   * Used when options are objects: key to use for option disabled
+   */
+  disabledKey: { type: [String, Function], default: "disabled" }
+};
+R.before;
+const Re = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, oe = {
-  id: [String, Number],
+}, Ge = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+I.bottom;
+const Ne = {
+  ...Ge,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
   name: { type: String, required: !0 }
-}, ne = {
-  ...oe,
-  ...ae,
+}, $e = {
+  ...Ne,
+  ...Re,
+  ...L,
+  ...ee,
+  ...ne,
+  ...$,
+  ...te,
   ...D,
-  ...F,
-  ...K,
-  ...M,
-  ...j,
+  ...w,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   value: [String, Number, Boolean],
-  modelValue: [Object, Number, Boolean, String],
-  label: String
-}, re = {
-  ...D,
-  ...F,
+  /**
+   * Input value
+   */
+  modelValue: [Object, Number, Boolean, String]
+}, we = {
+  ...L,
+  ...ee,
+  ...Ie,
+  ...ne,
+  ...$,
   ...te,
-  ...K,
-  ...M,
-  ...j,
+  ...D,
+  ...w,
+  /**
+   * Input value
+   */
   modelValue: [String, Array],
-  label: String,
+  /**
+   * Input name
+   */
   name: { type: String, required: !0 },
+  /**
+   * If true, the group will be displayed in a vertical column
+   */
   vertical: Boolean
-}, le = {
-  ...ne,
+};
+({
+  ...$,
+  ...w,
+  ...Ee,
+  ...Pe,
+  ...xe,
+  /**
+   * Button type
+   */
+  type: G.button
+});
+function De(e) {
+  const t = ie(e, void 0), n = c(() => !X(t));
+  function s(r, l, o) {
+    if (t != null && t.value) {
+      const a = d(t.value)[r];
+      return c({
+        get() {
+          return a == null ? void 0 : a.value;
+        },
+        set(v) {
+          a.value = v;
+        }
+      });
+    }
+    const y = ce(l, r);
+    return c({
+      get() {
+        return y.value;
+      },
+      set(a) {
+        o && o(`update:${r}`, a);
+      }
+    });
+  }
+  return {
+    group: t,
+    isInGroup: n,
+    getGroupOrLocalRef: s
+  };
+}
+const He = {
+  ...$e,
+  ...D,
+  /**
+   * If true, the input will be indeterminated
+   */
   indeterminate: Boolean,
+  /**
+   * Value associated with the unchecked state
+   */
   uncheckedValue: [String, Number, Boolean],
+  /**
+   * If true, the input will be displayed as a switch
+   */
   switch: Boolean
-}, 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);
+}, Ke = ["click", "update:modelValue", "change", "blur"];
+function Fe(e, t) {
+  const { group: n, isInGroup: s, getGroupOrLocalRef: r } = De(Y), { id: l, switch: o, indeterminate: y } = A(e), a = r("modelValue", e, t), v = r("readonly", e), u = r("disabled", e), i = r("valid", e), m = r("invalid", e);
   return {
-    propsSwitch: d,
-    indeterminate: a,
-    group: e,
-    isInGroup: f,
-    modelValue: b,
+    // local props
+    id: l,
+    propsSwitch: o,
+    indeterminate: y,
+    // global props
+    group: n,
+    isInGroup: s,
+    modelValue: a,
     readonly: v,
-    disabled: t,
+    disabled: u,
     valid: i,
-    invalid: o
+    invalid: m
   };
 }
-const ie = ["for"], ce = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], de = {
+const Me = (e) => c(() => String((e == null ? void 0 : e.value) || Ae()));
+function re(e, t, n) {
+  return c(() => {
+    const s = {
+      [e]: !0
+    }, r = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
+    return r && Array.isArray(r) && r.forEach((l) => {
+      s[`${e}--${l}`] = !0;
+    }), n && Object.keys(n.value).forEach((l) => {
+      s[`${e}--${l}`] = d(n.value[l]);
+    }), s;
+  });
+}
+const qe = ["for"], ze = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ue = {
   name: "VvCheckbox"
-}, 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,
+}, Je = /* @__PURE__ */ H({
+  ...Ue,
+  props: He,
+  emits: Ke,
+  setup(e, { emit: t }) {
+    const n = e, s = K(), {
+      id: r,
+      disabled: l,
+      readonly: o,
+      valid: y,
+      invalid: a,
       propsSwitch: v,
-      modelValue: t,
+      modelValue: u,
       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;
+      isInGroup: m
+    } = Fe(n, t), p = Me(r), b = c(() => k.value ? -1 : n.tabindex), g = ve(), f = c(
+      () => n.uncheckedValue !== void 0 && !m.value
+    ), k = c(() => l.value || o.value), _ = c(() => {
       if (a.value === !0)
+        return !0;
+      if (y.value === !0)
         return !1;
-    }), 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({
+    }), O = c(() => f.value ? u.value === n.value : Array.isArray(u.value) ? Be(n.value, u.value) : Q(n.value, u.value)), B = c(() => !!(i.value || !O.value && f.value && n.uncheckedValue !== u.value)), E = c(() => {
+      if (!f.value)
+        return ["string", "number", "boolean"].includes(typeof n.value) ? n.value : !0;
+    }), S = c({
       get() {
-        return k.value;
+        return O.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] : []
+      set(h) {
+        if (f.value)
+          u.value = h ? n.value : n.uncheckedValue;
+        else if (Array.isArray(u.value) || m.value) {
+          const V = new Set(
+            Array.isArray(u.value) ? u.value : u.value !== void 0 ? [u.value] : []
           );
-          y ? C.add(e.value) : C.delete(e.value), t.value = [...C];
+          h ? V.add(n.value) : V.delete(n.value), u.value = [...V];
         } else
-          t.value = y ? e.value : void 0;
-        m("change", y);
+          u.value = h ? n.value : void 0;
+        t("change", h);
       }
-    }), { bemCssClasses: _ } = useBemModifiers("vv-checkbox", {
-      switch: v,
-      valid: a,
-      invalid: b,
-      disabled: r,
-      readonly: d,
-      indeterminate: i
-    });
-    watchEffect(() => {
-      p.value && Array.isArray(t.value) && console.warn(
+    }), { modifiers: ae } = A(n), oe = re(
+      "vv-checkbox",
+      ae,
+      c(() => ({
+        switch: v.value,
+        valid: y.value,
+        invalid: a.value,
+        disabled: l.value,
+        readonly: o.value,
+        indeterminate: i.value
+      }))
+    );
+    fe(() => {
+      f.value && Array.isArray(u.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
-    }), watch(
-      () => S.value,
-      (y) => {
-        y ? u.value.indeterminate = !0 : u.value.indeterminate = !1;
+    }), de(
+      () => B.value,
+      (h) => {
+        h ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
       }
-    ), onMounted(() => {
-      S.value && (u.value.indeterminate = !0);
+    ), pe(() => {
+      B.value && (g.value.indeterminate = !0);
     });
-    const { HintSlot: q } = $(e, f);
-    return (y, C) => (P(), B("label", {
-      class: N(c(_)),
-      for: c(g)
+    const { HintSlot: le } = Z(n, s);
+    return (h, V) => (j(), x("label", {
+      class: F(d(oe)),
+      for: d(p)
     }, [
-      U(O("input", {
-        id: c(g),
+      ye(M("input", {
+        id: d(p),
         ref_key: "input",
-        ref: u,
-        "onUpdate:modelValue": C[0] || (C[0] = (T) => z(x) ? x.value = T : null),
+        ref: g,
+        "onUpdate:modelValue": V[0] || (V[0] = (ue) => q(S) ? S.value = ue : null),
         type: "checkbox",
         class: "vv-checkbox__input",
-        name: y.name,
-        disabled: c(s),
-        value: c(G),
-        tabindex: c(l),
-        "aria-invalid": c(V)
-      }, null, 8, ce), [
-        [J, c(x)]
+        name: h.name,
+        disabled: d(k),
+        value: d(E),
+        tabindex: d(b),
+        "aria-invalid": d(_)
+      }, null, 8, ze), [
+        [be, d(S)]
       ]),
-      H(y.$slots, "default", { value: c(t) }, () => [
-        Q(I(y.label), 1)
+      z(h.$slots, "default", { value: d(u) }, () => [
+        ge(U(h.label), 1)
       ]),
-      w(c(q), {
+      J(d(le), {
         class: "vv-checkbox__hint",
-        params: { value: c(t) }
+        params: { value: d(u) }
       }, null, 8, ["params"])
-    ], 10, ie));
+    ], 10, qe));
   }
-}), pe = re, me = ["update:modelValue", "change"], fe = ["textContent"], he = { class: "vv-checkbox-group__wrapper" }, ye = {
+}), Te = we, We = ["update:modelValue", "change"];
+function Ye(e) {
+  if (Object.keys(e).some(
+    (t) => t !== "key" && !q(e[t])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  he(
+    e.key,
+    c(() => e)
+  );
+}
+function Qe(e) {
+  const { options: t, labelKey: n, valueKey: s, disabledKey: r } = A(e);
+  return {
+    options: t,
+    getOptionLabel: (a) => typeof a != "object" && a !== null ? a : typeof n.value == "function" ? n.value(a) : a[n.value],
+    getOptionValue: (a) => typeof a != "object" && a !== null ? a : typeof s.value == "function" ? s.value(a) : a[s.value],
+    getOptionDisabled: (a) => typeof a != "object" && a !== null ? !1 : typeof r.value == "function" ? r.value(a) : a[r.value]
+  };
+}
+const Xe = ["textContent"], Ze = { class: "vv-checkbox-group__wrapper" }, Le = {
   name: "VvCheckboxGroup"
-}, 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,
+}, rt = /* @__PURE__ */ H({
+  ...Le,
+  props: Te,
+  emits: We,
+  setup(e, { emit: t }) {
+    const n = e, s = K(), r = je(n, "modelValue", t), { disabled: l, readonly: o, vertical: y, valid: a, invalid: v, modifiers: u } = A(n);
+    Ye({
+      key: Y,
       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))
+      disabled: l,
+      readonly: o,
+      valid: a,
+      invalid: v
+    });
+    const { getOptionLabel: i, getOptionValue: m } = Qe(n), p = re(
+      "vv-checkbox-group",
+      u,
+      c(() => ({
+        disabled: l.value,
+        readonly: o.value,
+        horizontal: !y.value,
+        valid: a.value,
+        invalid: v.value
+      }))
+    ), b = (f, k) => ({
+      id: `${n.name}_opt${k}`,
+      name: n.name,
+      label: i(f),
+      value: m(f)
+    }), { HintSlot: g } = Z(n, s);
+    return (f, k) => (j(), x("fieldset", {
+      class: F(d(p))
     }, [
-      s.label ? (P(), B("legend", {
+      f.label ? (j(), x("legend", {
         key: 0,
-        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 })
+        textContent: U(f.label)
+      }, null, 8, Xe)) : me("", !0),
+      M("div", Ze, [
+        f.options.length > 0 ? (j(!0), x(ke, { key: 0 }, Se(f.options, (_, O) => (j(), Oe(Je, _e({ key: O }, b(_, O)), null, 16))), 128)) : z(f.$slots, "default", { key: 1 })
       ]),
-      w(c(p), { class: "vv-checkbox-group__hint" })
+      J(d(g), { class: "vv-checkbox-group__hint" })
     ], 2));
   }
 });
 export {
-  ge as default
+  rt as default
 };