Checkbox 复选框

<script setup lang="ts">
import { ref } from 'vue';
import { CfCheckbox } from '@chufix-design/vue';

const agree = ref(false);
</script>

<template>
<CfCheckbox v-model="agree">我同意服务协议</CfCheckbox>
</template>

import { useState } from 'react';
import { CfCheckbox } from '@chufix-design/react';

export default function Demo() {
const [agree, setAgree] = useState(false);
return (
  <CfCheckbox checked={agree} onChange={(e) => setAgree(e.target.checked)}>
    我同意服务协议
  </CfCheckbox>
);
}

<CfCheckbox size="sm" :model-value="true">sm 已选</CfCheckbox>
<CfCheckbox size="md" :model-value="true">md 已选</CfCheckbox>
<CfCheckbox size="lg" :model-value="true">lg 已选</CfCheckbox>
<CfCheckbox disabled>禁用</CfCheckbox>
<CfCheckbox disabled :model-value="true">禁用已选</CfCheckbox>

<CfCheckbox size="sm" defaultChecked>sm 已选</CfCheckbox>
<CfCheckbox size="md" defaultChecked>md 已选</CfCheckbox>
<CfCheckbox size="lg" defaultChecked>lg 已选</CfCheckbox>
<CfCheckbox disabled>禁用</CfCheckbox>
<CfCheckbox disabled defaultChecked>禁用已选</CfCheckbox>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfCheckbox } from '@chufix-design/vue';

const apple = ref(true);
const banana = ref(false);
const cherry = ref(false);

const count = computed(
() => [apple.value, banana.value, cherry.value].filter(Boolean).length,
);
const all = computed({
get: () => count.value === 3,
set(v) { apple.value = v; banana.value = v; cherry.value = v; },
});
const indeterminate = computed(() => count.value > 0 && count.value < 3);
</script>

<template>
<CfCheckbox v-model="all" :indeterminate="indeterminate">全选</CfCheckbox>
<CfCheckbox v-model="apple">苹果</CfCheckbox>
<CfCheckbox v-model="banana">香蕉</CfCheckbox>
<CfCheckbox v-model="cherry">樱桃</CfCheckbox>
</template>

import { useState } from 'react';
import { CfCheckbox } from '@chufix-design/react';

export default function Demo() {
const [apple, setApple] = useState(true);
const [banana, setBanana] = useState(false);
const [cherry, setCherry] = useState(false);
const count = [apple, banana, cherry].filter(Boolean).length;

return (
  <>
    <CfCheckbox
      checked={count === 3}
      indeterminate={count > 0 && count < 3}
      onChange={(e) => {
        const v = e.target.checked;
        setApple(v); setBanana(v); setCherry(v);
      }}
    >全选</CfCheckbox>
    <CfCheckbox checked={apple} onChange={(e) => setApple(e.target.checked)}>苹果</CfCheckbox>
    <CfCheckbox checked={banana} onChange={(e) => setBanana(e.target.checked)}>香蕉</CfCheckbox>
    <CfCheckbox checked={cherry} onChange={(e) => setCherry(e.target.checked)}>樱桃</CfCheckbox>
  </>
);
}

<CfCheckbox
v-model="checked"
name="permissions"
value="read"
:indeterminate="partial"
@change="(checked, meta) => console.log(checked, meta)"
>
读取
</CfCheckbox>

<CfCheckbox
checked={checked}
name="permissions"
value="read"
indeterminate={partial}
onCheckedChange={(checked, meta) => console.log(checked, meta)}
onChange={(event) => setChecked(event.target.checked)}
>
读取
</CfCheckbox>