Checkbox

<script setup lang="ts">
    import { Checkbox, type CheckboxEvent } from '@fibrous/semi-ui-vue';

    const onChange = (e: CheckboxEvent) => console.log(e);
</script>

<template>
    <Checkbox aria-label="Checkbox 示例" @change="onChange">Semi Design</Checkbox>
</template>

<script setup lang="ts">
    import { Checkbox, type CheckboxEvent } from '@fibrous/semi-ui-vue';

    const onChange = (e: CheckboxEvent) => console.log(e);
</script>

<template>
    <Checkbox aria-label="Checkbox 示例" defaultChecked @change="onChange">Semi Design</Checkbox>
</template>

<script setup lang="ts">
    import { Checkbox } from '@fibrous/semi-ui-vue';

    const extra = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
</script>

<template>
    <Checkbox aria-label="Checkbox 示例">
        Semi Design
        <template #extra>{{ extra }}</template>
    </Checkbox>
    <br />
    <Checkbox aria-label="Checkbox 示例" :style="{ width: '280px' }">
        Semi Design
        <template #extra>{{ extra }}</template>
    </Checkbox>
</template>

<script setup lang="ts">
    import { Checkbox } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Checkbox aria-label="Checkbox 示例" :defaultChecked="false" disabled>Unchecked Disabled</Checkbox>
        <br />
        <Checkbox aria-label="Checkbox 示例" defaultChecked disabled>Checked Disabled</Checkbox>
    </div>
</template>

<script setup lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrous/semi-ui-vue';

    const values = ['A', 'B', 'C', 'D', 'E'];
</script>

<template>
    <CheckboxGroup aria-label="CheckboxGroup 示例" :defaultValue="['A', 'B']" :style="{ width: '100%' }">
        <Checkbox v-for="value in values" :key="value" :value="value">{{ value }}</Checkbox>
    </CheckboxGroup>
</template>

<script setup lang="ts">
    import { CheckboxGroup, type CheckboxValue } from '@fibrous/semi-ui-vue';

    const onChange = (checkedValues: CheckboxValue[]) => console.log('checked = ', checkedValues);

    const plainOptions = ['Semi UI', 'Semi DSM', 'Semi D2C'];

    const optionsWithExtra = [
        {
            extra: '从 Semi Design，到 Any Design 快速定制你的设计系统，并应用在设计稿和代码中',
            label: 'Semi DSM',
            value: 'dsm',
        },
        { extra: '高效的 Design To Code 设计稿转代码', label: 'Semi D2C', value: 'd2c' },
    ];

    const optionsWithDisabled = [
        { label: 'Photography', value: 'Photography' },
        { label: 'Movies', value: 'Movies' },
        { label: 'Running', value: 'Running', disabled: false },
    ];
</script>

<template>
    <div>
        <CheckboxGroup aria-label="CheckboxGroup 示例" :defaultValue="['Semi D2C']" :options="plainOptions" @change="onChange" />
        <br />
        <br />
        <CheckboxGroup aria-label="带 extra 示例" :defaultValue="[]" :options="optionsWithExtra" @change="onChange" />
        <br />
        <br />
        <CheckboxGroup aria-label="Checkbox 示例" :defaultValue="['Photography']" disabled :options="optionsWithDisabled" @change="onChange" />
    </div>
</template>

<script setup lang="ts">
    import { CheckboxGroup } from '@fibrous/semi-ui-vue';

    const options = [
        { label: '抖音', value: 'abc' },
        { label: '今日头条', value: 'toutiao' },
    ];
</script>

<template>
    <CheckboxGroup aria-label="CheckboxGroup 示例" direction="horizontal" :options="options" />
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Button, Checkbox, type CheckboxEvent } from '@fibrous/semi-ui-vue';

    const checked = ref(true);
    const disabled = ref(false);
    const label = computed(() => `${checked.value ? 'Checked' : 'Unchecked'} ${disabled.value ? 'Disabled' : 'Enabled'}`);

    const onChange = (e: CheckboxEvent) => console.log('checked = ', e.target.checked);
</script>

<template>
    <div>
        <div :style="{ marginBottom: '20px' }">
            <Checkbox v-model="checked" aria-label="Checkbox 示例" :disabled="disabled" @change="onChange">
                {{ label }}
            </Checkbox>
        </div>
        <p>
            <Button size="small" type="primary" @click="checked = !checked">{{ !checked ? 'Check' : 'Uncheck' }}</Button>
            <Button size="small" :style="{ marginLeft: '10px' }" type="primary" @click="disabled = !disabled">
                {{ !disabled ? 'Disable' : 'Enable' }}
            </Button>
        </p>
    </div>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Checkbox, CheckboxGroup, type CheckboxEvent, type CheckboxValue } from '@fibrous/semi-ui-vue';

    const plainOptions = ['Photography', 'Movies', 'Running'];
    const checkedList = ref<CheckboxValue[]>(['Photography', 'Running']);
    const checkAll = computed(() => checkedList.value.length === plainOptions.length);
    const indeterminate = computed(() => checkedList.value.length > 0 && !checkAll.value);

    const onCheckAllChange = (e: CheckboxEvent) => {
        console.log(e);
        checkedList.value = e.target.checked ? plainOptions : [];
    };
</script>

<template>
    <div>
        <div :style="{ paddingBottom: '8px', borderBottom: '1px solid var(--semi-color-border)' }">
            <Checkbox aria-label="Checkbox 示例" :indeterminate="indeterminate" :modelValue="checkAll" @change="onCheckAllChange"> Check all </Checkbox>
        </div>
        <CheckboxGroup v-model="checkedList" aria-label="CheckboxGroup 示例" :options="plainOptions" :style="{ marginTop: '6px' }" />
    </div>
</template>

<script setup lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrous/semi-ui-vue';

    const extra = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: '1', disabled: true },
        { value: '2', disabled: true },
        { value: '3', disabled: false },
        { value: '4', disabled: false },
    ];
</script>

<template>
    <CheckboxGroup aria-label="CheckboxGroup 示例" :defaultValue="['1', '3']" direction="vertical" type="card">
        <Checkbox v-for="item in items" :key="item.value" :disabled="item.disabled" :style="{ width: '280px' }" :value="item.value">
            单选框标题
            <template #extra>{{ extra }}</template>
        </Checkbox>
    </CheckboxGroup>
</template>

<script setup lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrous/semi-ui-vue';

    const extra = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: '1', disabled: true },
        { value: '2', disabled: true },
        { value: '3', disabled: false },
        { value: '4', disabled: false },
    ];
</script>

<template>
    <CheckboxGroup aria-label="CheckboxGroup 示例" :defaultValue="['1', '3']" direction="vertical" type="pureCard">
        <Checkbox v-for="item in items" :key="item.value" :disabled="item.disabled" :style="{ width: '280px' }" :value="item.value">
            单选框标题
            <template #extra>{{ extra }}</template>
        </Checkbox>
    </CheckboxGroup>
</template>

<script setup lang="ts">
    import { Checkbox, CheckboxGroup, Col, Row } from '@fibrous/semi-ui-vue';

    const values = ['A', 'B', 'C', 'D', 'E'];
</script>

<template>
    <CheckboxGroup aria-label="CheckboxGroup 示例" :style="{ width: '100%' }">
        <Row>
            <Col v-for="value in values" :key="value" :span="8">
                <Checkbox :value="value">{{ value }}</Checkbox>
            </Col>
        </Row>
    </CheckboxGroup>
</template>