@varlet/ui 3.5.1 → 3.5.2

package/es/cell/Cell.mjs

@@ -0,0 +1,122 @@
+import VarIcon from "../icon/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("cell");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.border, _ctx.n("--border")], [_ctx.onClick, _ctx.n("--cursor")])),
+      style: _normalizeStyle(_ctx.borderOffsetStyles),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "icon", {}, () => [
+        _ctx.icon ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.classes(_ctx.n("icon"), _ctx.iconClass))
+          },
+          [
+            _createVNode(_component_var_icon, {
+              name: _ctx.icon,
+              namespace: _ctx.namespace
+            }, null, 8, ["name", "namespace"])
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ]),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default", {}, () => [
+            _ctx.title ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.classes(_ctx.n("title"), _ctx.titleClass))
+              },
+              _toDisplayString(_ctx.title),
+              3
+              /* TEXT, CLASS */
+            )) : _createCommentVNode("v-if", true)
+          ]),
+          _renderSlot(_ctx.$slots, "description", {}, () => [
+            _ctx.description ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.classes(_ctx.n("description"), _ctx.descriptionClass))
+              },
+              _toDisplayString(_ctx.description),
+              3
+              /* TEXT, CLASS */
+            )) : _createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      ),
+      _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.classes(_ctx.n("extra"), _ctx.extraClass))
+        },
+        [
+          _renderSlot(_ctx.$slots, "extra")
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: !_ctx.ripple }]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarIcon },
+  directives: { Ripple },
+  props,
+  setup(props2) {
+    const borderOffsetStyles = computed(() => {
+      if (props2.borderOffset == null) {
+        return {};
+      }
+      return {
+        "--cell-border-left": toSizeUnit(props2.borderOffset),
+        "--cell-border-right": toSizeUnit(props2.borderOffset)
+      };
+    });
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      borderOffsetStyles,
+      n,
+      classes,
+      toSizeUnit,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/cell/cell.css

@@ -0,0 +1 @@
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: var(--color-outline); --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color); -webkit-tap-highlight-color: transparent;}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5); transition: border 0.25s;}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; min-width: 0;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}

package/es/cell/index.mjs

@@ -0,0 +1,12 @@
+import Cell from "./Cell.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as cellProps } from "./props.mjs";
+withInstall(Cell);
+withPropsDefaultsSetter(Cell, cellProps);
+const _CellComponent = Cell;
+var stdin_default = Cell;
+export {
+  _CellComponent,
+  cellProps,
+  stdin_default as default
+};

package/es/cell/props.mjs

@@ -0,0 +1,19 @@
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  title: String,
+  icon: pickProps(iconProps, "name"),
+  namespace: pickProps(iconProps, "namespace"),
+  description: String,
+  border: Boolean,
+  borderOffset: [Number, String],
+  iconClass: String,
+  titleClass: String,
+  descriptionClass: String,
+  extraClass: String,
+  ripple: Boolean,
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/cell/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../ripple/ripple.css'
+import '../cell.css'
+import '../CellSfc.css'

package/es/checkbox/Checkbox.mjs

@@ -0,0 +1,254 @@
+import VarIcon from "../icon/index.mjs";
+import VarFormDetails from "../form-details/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import { defineComponent, ref, computed, nextTick } from "vue";
+import { props } from "./props.mjs";
+import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useCheckboxGroup } from "./provide.mjs";
+import { useForm } from "../form/provide.mjs";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener, useVModel } from "@varlet/use";
+const { name, n, classes } = createNamespace("checkbox");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  const _directive_hover = _resolveDirective("hover");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n()),
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+        },
+        [
+          _withDirectives((_openBlock(), _createElementBlock("div", {
+            ref: "action",
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("action"),
+                [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor }),
+            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+          }, [
+            _ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "minus-box",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _createCommentVNode("v-if", true),
+            _ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "checked-icon", { key: 1 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "checkbox-marked",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _createCommentVNode("v-if", true),
+            !_ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "unchecked-icon", { key: 2 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "checkbox-blank-outline",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _createCommentVNode("v-if", true),
+            _createVNode(_component_var_hover_overlay, {
+              hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
+              focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
+            }, null, 8, ["hovering", "focusing"])
+          ], 46, _hoisted_1)), [
+            [_directive_hover, _ctx.handleHovering, "desktop"],
+            [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
+          ]),
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(
+                _ctx.classes(
+                  _ctx.n("text"),
+                  [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
+                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+                )
+              ),
+              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple, Hover },
+  components: {
+    VarIcon,
+    VarFormDetails,
+    VarHoverOverlay
+  },
+  props,
+  setup(props2) {
+    const action = ref(null);
+    const isFocusing = ref(false);
+    const value = useVModel(props2, "modelValue");
+    const isIndeterminate = useVModel(props2, "indeterminate");
+    const checked = computed(() => value.value === props2.checkedValue);
+    const checkedValue = computed(() => props2.checkedValue);
+    const withAnimation = ref(false);
+    const { checkboxGroup, bindCheckboxGroup } = useCheckboxGroup();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const { form, bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const checkboxProvider = {
+      checkedValue,
+      checked,
+      sync,
+      validate,
+      resetValidation,
+      reset,
+      resetWithAnimation
+    };
+    call(bindCheckboxGroup, checkboxProvider);
+    call(bindForm, checkboxProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function change(changedValue) {
+      const { checkedValue: checkedValue2, onChange } = props2;
+      value.value = changedValue;
+      isIndeterminate.value = false;
+      call(onChange, value.value);
+      validateWithTrigger("onChange");
+      changedValue === checkedValue2 ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue2) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue2);
+    }
+    function handleClick(e) {
+      const { disabled, readonly, checkedValue: checkedValue2, uncheckedValue, onClick } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || disabled) {
+        return;
+      }
+      call(onClick, e);
+      if ((form == null ? void 0 : form.readonly.value) || readonly) {
+        return;
+      }
+      withAnimation.value = true;
+      const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
+      if (!checked.value && maximum) {
+        return;
+      }
+      change(checked.value ? uncheckedValue : checkedValue2);
+    }
+    function handleTextClick() {
+      action.value.focus();
+    }
+    function sync(values) {
+      const { checkedValue: checkedValue2, uncheckedValue } = props2;
+      value.value = values.includes(checkedValue2) ? checkedValue2 : uncheckedValue;
+    }
+    function resetWithAnimation() {
+      withAnimation.value = false;
+    }
+    function reset() {
+      value.value = props2.uncheckedValue;
+      resetValidation();
+    }
+    function toggle(changedValue) {
+      const { checkedValue: checkedValue2, uncheckedValue } = props2;
+      const shouldReverse = ![checkedValue2, uncheckedValue].includes(changedValue);
+      if (shouldReverse) {
+        changedValue = checked.value ? uncheckedValue : checkedValue2;
+      }
+      change(changedValue);
+    }
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === "Enter" || key === " ") {
+        preventDefault(event);
+      }
+      if (key === "Enter") {
+        action.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        action.value.click();
+      }
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    return {
+      action,
+      isFocusing,
+      isIndeterminate,
+      withAnimation,
+      checked,
+      errorMessage,
+      checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      n,
+      classes,
+      handleHovering,
+      handleClick,
+      handleTextClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/checkbox/checkbox.css

@@ -0,0 +1 @@
+:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s; outline: none;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}

package/es/checkbox/index.mjs

@@ -0,0 +1,12 @@
+import Checkbox from "./Checkbox.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as checkboxProps } from "./props.mjs";
+withInstall(Checkbox);
+withPropsDefaultsSetter(Checkbox, checkboxProps);
+const _CheckboxComponent = Checkbox;
+var stdin_default = Checkbox;
+export {
+  _CheckboxComponent,
+  checkboxProps,
+  stdin_default as default
+};

package/es/checkbox/props.mjs

@@ -0,0 +1,37 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  checkedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: true
+  },
+  uncheckedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  checkedColor: String,
+  uncheckedColor: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  indeterminate: Boolean,
+  iconSize: [String, Number],
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onClick: defineListenerProp(),
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp(),
+  "onUpdate:indeterminate": defineListenerProp()
+};
+export {
+  props
+};

package/es/checkbox/provide.mjs

@@ -0,0 +1,15 @@
+import { useParent } from "@varlet/use";
+import { CHECKBOX_GROUP_BIND_CHECKBOX_KEY } from "../checkbox-group/provide.mjs";
+function useCheckboxGroup() {
+  const { bindParent, parentProvider, index } = useParent(
+    CHECKBOX_GROUP_BIND_CHECKBOX_KEY
+  );
+  return {
+    index,
+    checkboxGroup: parentProvider,
+    bindCheckboxGroup: bindParent
+  };
+}
+export {
+  useCheckboxGroup
+};

package/es/checkbox/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../form-details/formDetails.css'
+import '../../icon/icon.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../checkbox.css'
+import '../CheckboxSfc.css'

package/es/checkbox-group/CheckboxGroup.mjs

@@ -0,0 +1,158 @@
+import VarFormDetails from "../form-details/index.mjs";
+import VarCheckbox from "../checkbox/index.mjs";
+import { defineComponent, computed, watch, nextTick } from "vue";
+import { props } from "./props.mjs";
+import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
+import { useCheckboxes } from "./provide.mjs";
+import { useForm } from "../form/provide.mjs";
+import { uniq, call, isFunction } from "@varlet/shared";
+const { name, n, classes } = createNamespace("checkbox-group");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
+        },
+        [
+          _ctx.options.length ? (_openBlock(true), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            _renderList(_ctx.options, (option) => {
+              return _openBlock(), _createBlock(_component_var_checkbox, {
+                key: option[_ctx.valueKey],
+                "checked-value": option[_ctx.valueKey],
+                disabled: option.disabled
+              }, {
+                default: _withCtx(({ checked }) => [
+                  _createVNode(_component_maybe_v_node, {
+                    is: _ctx.isFunction(option[_ctx.labelKey]) ? option[_ctx.labelKey](option, checked) : option[_ctx.labelKey]
+                  }, null, 8, ["is"])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["checked-value", "disabled"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )) : _createCommentVNode("v-if", true),
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarFormDetails, VarCheckbox, MaybeVNode },
+  props,
+  setup(props2) {
+    const max = computed(() => props2.max);
+    const checkedCount = computed(() => props2.modelValue.length);
+    const { length, checkboxes, bindCheckboxes } = useCheckboxes();
+    const { bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const checkboxGroupErrorMessage = computed(() => errorMessage.value);
+    const checkboxGroupProvider = {
+      max,
+      checkedCount,
+      onChecked,
+      onUnchecked,
+      validate,
+      resetValidation,
+      reset,
+      errorMessage: checkboxGroupErrorMessage
+    };
+    watch(() => props2.modelValue, syncCheckboxes, { deep: true });
+    watch(() => length.value, syncCheckboxes);
+    bindCheckboxes(checkboxGroupProvider);
+    call(bindForm, checkboxGroupProvider);
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function change(changedModelValue) {
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      call(props2.onChange, changedModelValue);
+      validateWithTrigger("onChange");
+    }
+    function onChecked(changedValue) {
+      const { modelValue } = props2;
+      if (!modelValue.includes(changedValue)) {
+        change([...modelValue, changedValue]);
+      }
+    }
+    function onUnchecked(changedValue) {
+      const { modelValue } = props2;
+      if (!modelValue.includes(changedValue)) {
+        return;
+      }
+      change(modelValue.filter((value) => value !== changedValue));
+    }
+    function syncCheckboxes() {
+      checkboxes.forEach(({ sync }) => sync(props2.modelValue));
+    }
+    function resetWithAnimation() {
+      checkboxes.forEach((checkbox) => checkbox.resetWithAnimation());
+    }
+    function checkAll() {
+      const checkedValues = checkboxes.map(({ checkedValue }) => checkedValue.value);
+      const changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      return changedModelValue;
+    }
+    function inverseAll() {
+      const checkedValues = checkboxes.filter(({ checked }) => !checked.value).map(({ checkedValue }) => checkedValue.value);
+      const changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      return changedModelValue;
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], []);
+      resetValidation();
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    return {
+      errorMessage,
+      n,
+      classes,
+      checkAll,
+      inverseAll,
+      reset,
+      validate,
+      resetValidation,
+      isFunction
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/checkbox-group/checkboxGroup.css

@@ -0,0 +1 @@
+.var-checkbox-group { display: flex; flex-wrap: wrap;}.var-checkbox-group--horizontal { flex-direction: row;}.var-checkbox-group--vertical { flex-direction: column;}