@volverjs/ui-vue 0.0.4 → 0.0.5-beta.1

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

@@ -1,112 +1,184 @@
-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);
+import { unref, toRefs, computed, h, inject, toRef, defineComponent, useSlots, ref, watchEffect, watch, onMounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, isRef, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createVNode, provide, createCommentVNode, Fragment, renderList, createBlock, mergeProps } from "vue";
+import { toReactive, useVModel } from "@vueuse/core";
+import { nanoid } from "nanoid";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_CHECK_GROUP = Symbol.for("checkGroup");
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
 }
-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;
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
     }
-    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;
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() == b.getTime();
+    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
   }
-  return e !== e && t !== t;
+  return a !== a && b !== b;
 }
-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)
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
           return null;
-        s = s[n[r]];
+        }
+        value = value[fields[i]];
       }
-      return s;
+      return value;
     }
-  } else
+  } else {
     return null;
+  }
 }
-function Be(e, t) {
-  if (e != null && t && t.length) {
-    for (const n of t)
-      if (Q(e, n))
-        return !0;
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
   }
-  return !1;
+  return false;
 }
-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 isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
-function Ce(e) {
-  return typeof e == "string" || e instanceof String;
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
 }
-function C(e) {
-  return Array.isArray(e) ? e.filter((t) => Ce(t)).join(" ") : e;
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function Z(e, t) {
+function HintSlotFactory(parentProps, parentSlots) {
+  const {
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
   const {
-    invalid: n,
-    valid: s,
-    hint: r,
-    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
+    hintLabel,
+    modelValue,
+    valid,
+    validLabel,
+    invalid,
+    invalidLabel,
+    ...otherProps
+  } = toRefs(parentProps);
+  const loading = resolveFieldData(otherProps, "loading");
+  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
+  const hasInvalid = computed(() => {
+    if (!invalid.value) {
+      return false;
+    }
+    if (invalid.value && invalidSlot) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
+      return true;
+    }
+    return false;
+  });
+  const hasHint = computed(
+    () => !!(hintLabel && hintLabel.value || hintSlot)
+  );
+  const hasValid = computed(
+    () => !!(validLabel && validLabel.value || validSlot)
+  );
+  const hasLoading = computed(
+    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  );
+  const isVisible = computed(
+    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
   );
   return {
-    hasInvalid: g,
-    hasHint: f,
-    hasValid: k,
-    hasLoading: _,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -115,42 +187,50 @@ function Z(e, t) {
           default: () => ({})
         }
       },
-      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
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          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);
+          if (invalid == null ? void 0 : invalid.value) {
+            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          }
+          if (valid == null ? void 0 : valid.value)
+            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          if (loading == null ? void 0 : loading.value)
+            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
         });
         return {
-          isVisible: O,
-          hasInvalid: g,
-          hasValid: k,
-          hintContent: E
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
-          return se(
+        if (this.isVisible) {
+          return h(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const xe = {
+const LinkProps = {
   /**
    * 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/)
@@ -167,7 +247,7 @@ const xe = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(W).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -176,7 +256,8 @@ const xe = {
     type: String,
     default: "noopener noreferrer"
   }
-}, L = {
+};
+const ValidProps = {
   /**
    * Valid status
    */
@@ -185,7 +266,8 @@ const xe = {
    * Valid label
    */
   validLabel: [String, Array]
-}, ee = {
+};
+const InvalidProps = {
   /**
    * Invalid status
    */
@@ -194,39 +276,47 @@ const xe = {
    * Invalid label
    */
   invalidLabel: [String, Array]
-}, $ = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Pe = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, Ee = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, w = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, te = {
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, D = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, ne = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, Ie = {
+};
+const OptionsProps = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -247,39 +337,140 @@ const xe = {
    */
   disabledKey: { type: [String, Function], default: "disabled" }
 };
-R.before;
-const Re = {
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, Ge = {
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-I.bottom;
-const Ne = {
-  ...Ge,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const IdNameProps = {
+  ...IdProps,
   /**
    * 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 }
-}, $e = {
-  ...Ne,
-  ...Re,
-  ...L,
-  ...ee,
-  ...ne,
-  ...$,
-  ...te,
-  ...D,
-  ...w,
+  name: { type: String, required: true }
+};
+const CheckboxRadioProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -289,72 +480,79 @@ const Ne = {
    * Input value
    */
   modelValue: [Object, Number, Boolean, String]
-}, we = {
-  ...L,
-  ...ee,
-  ...Ie,
-  ...ne,
-  ...$,
-  ...te,
-  ...D,
-  ...w,
+};
+const CheckboxRadioGroupProps = {
+  ...ValidProps,
+  ...InvalidProps,
+  ...OptionsProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
   /**
    * Input value
    */
-  modelValue: [String, Array],
+  modelValue: [String, Array, Boolean, Number, Symbol],
   /**
    * Input name
    */
-  name: { type: String, required: !0 },
+  name: { type: String, required: true },
   /**
    * If true, the group will be displayed in a vertical column
    */
   vertical: Boolean
 };
 ({
-  ...$,
-  ...w,
-  ...Ee,
-  ...Pe,
-  ...xe,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: G.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-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({
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
         get() {
-          return a == null ? void 0 : a.value;
+          return groupPropValue == null ? void 0 : groupPropValue.value;
         },
-        set(v) {
-          a.value = v;
+        set(value) {
+          groupPropValue.value = value;
         }
       });
     }
-    const y = ce(l, r);
-    return c({
+    const propRef = toRef(props, propName);
+    return computed({
       get() {
-        return y.value;
+        return propRef.value;
       },
-      set(a) {
-        o && o(`update:${r}`, a);
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
       }
     });
   }
   return {
-    group: t,
-    isInGroup: n,
-    getGroupOrLocalRef: s
+    group,
+    isInGroup,
+    getGroupOrLocalRef
   };
 }
-const He = {
-  ...$e,
-  ...D,
+const VvCheckboxProps = {
+  ...CheckboxRadioProps,
+  ...ModifiersProps,
   /**
    * If true, the input will be indeterminated
    */
@@ -367,199 +565,312 @@ const He = {
    * If true, the input will be displayed as a switch
    */
   switch: Boolean
-}, 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);
+};
+const VvCheckboxEvents = ["click", "update:modelValue", "change", "blur"];
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_CHECK_GROUP);
+  const { id, switch: propsSwitch, indeterminate } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const valid = getGroupOrLocalRef("valid", props);
+  const invalid = getGroupOrLocalRef("invalid", props);
+  const readonly = computed(
+    () => {
+      var _a;
+      return Boolean(props.readonly || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
   return {
     // local props
-    id: l,
-    propsSwitch: o,
-    indeterminate: y,
+    id,
+    propsSwitch,
+    indeterminate,
     // global props
-    group: n,
-    isInGroup: s,
-    modelValue: a,
-    readonly: v,
-    disabled: u,
-    valid: i,
-    invalid: m
+    group,
+    isInGroup,
+    modelValue,
+    valid,
+    invalid,
+    readonly,
+    disabled
   };
 }
-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 useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const qe = ["for"], ze = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ue = {
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"];
+const __default__$1 = {
   name: "VvCheckbox"
-}, 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: u,
-      indeterminate: i,
-      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;
-    }), 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({
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvCheckboxProps,
+  emits: VvCheckboxEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const {
+      id,
+      disabled,
+      readonly,
+      valid,
+      invalid,
+      propsSwitch,
+      modelValue,
+      indeterminate,
+      isInGroup
+    } = useGroupProps(props, emit);
+    const hasId = useUniqueId(id);
+    const tabindex = computed(() => isDisabled.value ? -1 : props.tabindex);
+    const input = ref();
+    const isBinary = computed(
+      () => props.uncheckedValue !== void 0 && !isInGroup.value
+    );
+    const isDisabled = computed(() => disabled.value || readonly.value);
+    const isInvalid = computed(() => {
+      if (invalid.value === true) {
+        return true;
+      }
+      if (valid.value === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const isChecked = computed(() => {
+      if (isBinary.value) {
+        return modelValue.value === props.value;
+      }
+      return Array.isArray(modelValue.value) ? contains(props.value, modelValue.value) : equals(props.value, modelValue.value);
+    });
+    const isIndeterminated = computed(() => {
+      if (indeterminate.value) {
+        return true;
+      }
+      if (!isChecked.value && isBinary.value && props.uncheckedValue !== modelValue.value) {
+        return true;
+      }
+      return false;
+    });
+    const hasValue = computed(() => {
+      if (isBinary.value) {
+        return void 0;
+      }
+      return ["string", "number", "boolean"].includes(typeof props.value) ? props.value : true;
+    });
+    const localModelValue = computed({
       get() {
-        return O.value;
+        return isChecked.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] : []
+      set(newValue) {
+        if (isBinary.value) {
+          modelValue.value = newValue ? props.value : props.uncheckedValue;
+        } else if (Array.isArray(modelValue.value) || isInGroup.value) {
+          const toReturn = new Set(
+            Array.isArray(modelValue.value) ? modelValue.value : modelValue.value !== void 0 ? [modelValue.value] : []
           );
-          h ? V.add(n.value) : V.delete(n.value), u.value = [...V];
-        } else
-          u.value = h ? n.value : void 0;
-        t("change", h);
+          if (newValue) {
+            toReturn.add(props.value);
+          } else {
+            toReturn.delete(props.value);
+          }
+          modelValue.value = [...toReturn];
+        } else {
+          modelValue.value = newValue ? props.value : void 0;
+        }
+        emit("change", newValue);
       }
-    }), { modifiers: ae } = A(n), oe = re(
+    });
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
       "vv-checkbox",
-      ae,
-      c(() => ({
-        switch: v.value,
-        valid: y.value,
-        invalid: a.value,
-        disabled: l.value,
-        readonly: o.value,
-        indeterminate: i.value
+      modifiers,
+      computed(() => ({
+        switch: propsSwitch.value,
+        valid: valid.value,
+        invalid: invalid.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        indeterminate: indeterminate.value
       }))
     );
-    fe(() => {
-      f.value && Array.isArray(u.value) && console.warn(
-        "[VvCheckbox] The model value is an array but the component is in binary mode."
-      );
-    }), de(
-      () => B.value,
-      (h) => {
-        h ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
+    watchEffect(() => {
+      if (isBinary.value && Array.isArray(modelValue.value)) {
+        console.warn(
+          `[VvCheckbox] The model value is an array but the component is in binary mode.`
+        );
+      }
+    });
+    watch(
+      () => isIndeterminated.value,
+      (newValue) => {
+        if (newValue) {
+          input.value.indeterminate = true;
+        } else {
+          input.value.indeterminate = false;
+        }
+      }
+    );
+    onMounted(() => {
+      if (isIndeterminated.value) {
+        input.value.indeterminate = true;
       }
-    ), pe(() => {
-      B.value && (g.value.indeterminate = !0);
     });
-    const { HintSlot: le } = Z(n, s);
-    return (h, V) => (j(), x("label", {
-      class: F(d(oe)),
-      for: d(p)
-    }, [
-      ye(M("input", {
-        id: d(p),
-        ref_key: "input",
-        ref: g,
-        "onUpdate:modelValue": V[0] || (V[0] = (ue) => q(S) ? S.value = ue : null),
-        type: "checkbox",
-        class: "vv-checkbox__input",
-        name: h.name,
-        disabled: d(k),
-        value: d(E),
-        tabindex: d(b),
-        "aria-invalid": d(_)
-      }, null, 8, ze), [
-        [be, d(S)]
-      ]),
-      z(h.$slots, "default", { value: d(u) }, () => [
-        ge(U(h.label), 1)
-      ]),
-      J(d(le), {
-        class: "vv-checkbox__hint",
-        params: { value: d(u) }
-      }, null, 8, ["params"])
-    ], 10, qe));
+    const { HintSlot } = HintSlotFactory(props, slots);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass(unref(bemCssClasses)),
+        for: unref(hasId)
+      }, [
+        withDirectives(createElementVNode("input", {
+          id: unref(hasId),
+          ref_key: "input",
+          ref: input,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null),
+          type: "checkbox",
+          class: "vv-checkbox__input",
+          name: _ctx.name,
+          disabled: unref(isDisabled),
+          value: unref(hasValue),
+          tabindex: unref(tabindex),
+          "aria-invalid": unref(isInvalid)
+        }, null, 8, _hoisted_2$1), [
+          [vModelCheckbox, unref(localModelValue)]
+        ]),
+        renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
+          createTextVNode(toDisplayString(_ctx.label), 1)
+        ]),
+        createVNode(unref(HintSlot), {
+          class: "vv-checkbox__hint",
+          params: { value: unref(modelValue) }
+        }, null, 8, ["params"])
+      ], 10, _hoisted_1$1);
+    };
   }
-}), Te = we, We = ["update:modelValue", "change"];
-function Ye(e) {
-  if (Object.keys(e).some(
-    (t) => t !== "key" && !q(e[t])
+});
+const VvCheckboxGroupProps = CheckboxRadioGroupProps;
+const VvCheckboxGroupEvents = ["update:modelValue", "change"];
+function useProvideGroupState(groupState) {
+  if (Object.keys(groupState).some(
+    (k) => k !== "key" && !isRef(groupState[k])
   ))
     throw Error("One or more groupState props aren't ref.");
-  he(
-    e.key,
-    c(() => e)
+  provide(
+    groupState.key,
+    computed(() => groupState)
   );
 }
-function Qe(e) {
-  const { options: t, labelKey: n, valueKey: s, disabledKey: r } = A(e);
+function useOptions(props) {
+  const { options, labelKey, valueKey, disabledKey } = toRefs(props);
+  const getOptionLabel = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value];
+  };
+  const getOptionValue = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof valueKey.value === "function" ? valueKey.value(option) : option[valueKey.value];
+  };
+  const getOptionDisabled = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return false;
+    return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
+  };
   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]
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled
   };
 }
-const Xe = ["textContent"], Ze = { class: "vv-checkbox-group__wrapper" }, Le = {
+const _hoisted_1 = ["textContent"];
+const _hoisted_2 = { class: "vv-checkbox-group__wrapper" };
+const __default__ = {
   name: "VvCheckboxGroup"
-}, 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: l,
-      readonly: o,
-      valid: a,
-      invalid: v
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvCheckboxGroupProps,
+  emits: VvCheckboxGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const modelValue = useVModel(props, "modelValue", emit);
+    const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
+    useProvideGroupState({
+      key: INJECTION_KEY_CHECK_GROUP,
+      modelValue,
+      disabled,
+      readonly,
+      valid,
+      invalid
     });
-    const { getOptionLabel: i, getOptionValue: m } = Qe(n), p = re(
+    const { getOptionLabel, getOptionValue } = useOptions(props);
+    const bemCssClasses = useModifiers(
       "vv-checkbox-group",
-      u,
-      c(() => ({
-        disabled: l.value,
-        readonly: o.value,
-        horizontal: !y.value,
-        valid: a.value,
-        invalid: v.value
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value,
+        readonly: readonly.value,
+        horizontal: !vertical.value,
+        valid: valid.value,
+        invalid: invalid.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))
-    }, [
-      f.label ? (j(), x("legend", {
-        key: 0,
-        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 })
-      ]),
-      J(d(g), { class: "vv-checkbox-group__hint" })
-    ], 2));
+    );
+    const getOptionProps = (option, index) => {
+      return {
+        id: `${props.name}_opt${index}`,
+        name: props.name,
+        label: getOptionLabel(option),
+        value: getOptionValue(option)
+      };
+    };
+    const { HintSlot } = HintSlotFactory(props, slots);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        _ctx.label ? (openBlock(), createElementBlock("legend", {
+          key: 0,
+          textContent: toDisplayString(_ctx.label)
+        }, null, 8, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
+            return openBlock(), createBlock(_sfc_main$1, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+          }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+        ]),
+        createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" })
+      ], 2);
+    };
   }
 });
 export {
-  rt as default
+  _sfc_main as default
 };