text: import { watch } from 'vue';
  import { createNamespace } from '../utils';
  import { CHECKBOX_KEY } from '../checkbox';
  import { useChildren } from '@vant/use';
  import { useExpose } from '../composition/use-expose';
  import { useLinkField } from '../composition/use-link-field';
  
  const [createComponent, bem] = createNamespace('checkbox-group');
  
  export default createComponent({
    props: {
      max: [Number, String],
      disabled: Boolean,
      direction: String,
      iconSize: [Number, String],
      checkedColor: String,
      modelValue: {
        type: Array,
        default: () => [],
      },
    },
  
    emits: ['change', 'update:modelValue'],
  
    setup(props, { emit, slots }) {
      const { children, linkChildren } = useChildren(CHECKBOX_KEY);
  
      const toggleAll = (checked) => {
        if (checked === false) {
          emit('update:modelValue', []);
        } else {
          const names = children
            .filter((item) => checked || !item.checked.value)
            .map((item) => item.name);
          emit('update:modelValue', names);
        }
      };
  
      watch(
        () => props.modelValue,
        (value) => {
          emit('change', value);
        }
      );
  
      useExpose({ toggleAll });
      useLinkField(() => props.modelValue);
      linkChildren({ emit, props });
  
      return () => <div class={bem([props.direction])}>{slots.default?.()}</div>;
    },
  });
  