Checkbox Group

<script lang="ts" setup>
import { ref } from 'vue';
import type { CheckboxGroupOption } from '@inkline/inkline';

const checked = ref(['apple']);
const options = ref<CheckboxGroupOption[]>([
    { id: 'apple', label: 'Apple' },
    { id: 'banana', label: 'Banana' },
    { id: 'strawberry', label: 'Strawberry' },
    { id: 'mango', label: 'Mango' }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { CheckboxGroupOption } from '@inkline/inkline';

const checked = ref(['apple']);
const options = ref<CheckboxGroupOption[]>([
    { id: 'apple', label: 'Apple' },
    { id: 'banana', label: 'Banana' },
    { id: 'strawberry', label: 'Strawberry' },
    { id: 'mango', label: 'Mango' }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" disabled />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { CheckboxGroupOption } from '@inkline/inkline';

const checked = ref(['apple']);
const options = ref<CheckboxGroupOption[]>([
    { id: 'apple', label: 'Apple' },
    { id: 'banana', label: 'Banana' },
    { id: 'strawberry', label: 'Strawberry' },
    { id: 'mango', label: 'Mango' }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" readonly />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { CheckboxGroupOption } from '@inkline/inkline';

const checked = ref(['apple']);
const options = ref<CheckboxGroupOption[]>([
    { id: 'apple', label: 'Apple' },
    { id: 'banana', label: 'Banana' },
    { id: 'strawberry', label: 'Strawberry' },
    { id: 'mango', label: 'Mango' }
]);
</script>
<template>
    <div>
        <div class="_background:white _display:flex _align-items:center _padding:1">
            <ICheckboxGroup v-model="checked" :options="options" color="light" />
        </div>

        <div class="_background:gray-90 _display:flex _align-items:center _padding:1">
            <ICheckboxGroup v-model="checked" :options="options" color="dark" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { CheckboxGroupOption } from '@inkline/inkline';

const checked = ref(['apple']);
const options = ref<CheckboxGroupOption[]>([
    { id: 'apple', label: 'Apple' },
    { id: 'banana', label: 'Banana' },
    { id: 'strawberry', label: 'Strawberry' },
    { id: 'mango', label: 'Mango' }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" size="sm" />

    <ICheckboxGroup v-model="checked" :options="options" size="md" />

    <ICheckboxGroup v-model="checked" :options="options" size="lg" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checked = ref(['apple']);
const options = ref([
    { id: 'apple', fruit: { name: 'Apple' } },
    { id: 'banana', fruit: { name: 'Banana' } },
    { id: 'strawberry', fruit: { name: 'Strawberry' } },
    { id: 'mango', fruit: { name: 'Mango' } }
]);

const labelRenderString = '{{fruit.name}}';
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" :label="labelRenderString" />
</template>

<script lang="ts" setup>
import { h, ref } from 'vue';
import type { LabelRenderFunction, CheckboxButtonOption } from '@inkline/inkline';

const checked = ref(['apple']);

const options = ref<CheckboxButtonOption[]>([
    { id: 'apple' },
    { id: 'banana' },
    { id: 'strawberry' },
    { id: 'mango' }
]);

const labelRenderFunction: LabelRenderFunction<CheckboxButtonOption> = (option) =>
    h('strong', option.id);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" :label="labelRenderFunction" />
</template>

<script lang="ts" setup>
import { defineComponent, h, markRaw, ref } from 'vue';
import type { CheckboxButtonOption } from '@inkline/inkline';

const LabelRenderComponent = markRaw(
    defineComponent({
        props: {
            ctx: {
                type: Object,
                default: () => ({})
            }
        },
        setup(props) {
            return () => h('strong', props.ctx.id);
        }
    })
);

const checked = ref(['apple']);

const options = ref<CheckboxButtonOption[]>([
    { id: 'apple' },
    { id: 'banana' },
    { id: 'strawberry' },
    { id: 'mango' }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" :label="LabelRenderComponent" />
</template>

<script lang="ts" setup>
import { h, ref } from 'vue';

const checked = ref(['apple']);
const options = ref([
    { id: 'apple', label: () => h('strong', { class: '_color:green' }, 'Apple') },
    { id: 'banana', label: () => h('strong', { class: '_color:yellow' }, 'Banana') },
    { id: 'strawberry', label: () => h('strong', { class: '_color:red' }, 'Strawberry') },
    { id: 'mango', label: () => h('strong', { class: '_color:orange' }, 'Mango') }
]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checked = ref(['apple']);
const options = ref([{ id: 'apple' }, { id: 'banana' }, { id: 'strawberry' }, { id: 'mango' }]);
</script>

<template>
    <ICheckboxGroup v-model="checked" :options="options">
        <template #option="{ option }">
            {{ option.id }}
        </template>
    </ICheckboxGroup>
</template>