arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 10:20:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(CheckboxGroup): new component (#3862)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
TribeWeb
2025-04-22 17:03:27 +01:00
committed by GitHub
parent 22edfd708a
commit 9c3d53a02d
29 changed files with 4087 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
playground/app/app.vue
View File

@@ -27,6 +27,7 @@ const components = [
'calendar',
'carousel',
'checkbox',
'checkbox-group',
'chip',
'collapsible',
'color-picker',

73
playground/app/pages/components/checkbox-group.vue Normal file
View File

@@ -0,0 +1,73 @@
<script setup lang="ts">
import themeCheckbox from '#build/ui/checkbox'
import theme from '#build/ui/checkbox-group'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(themeCheckbox.variants.variant)
const variant = ref('list' as const)
const literalOptions = [
'Option 1',
'Option 2',
'Option 3'
]
const items = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
const itemsWithDescription = [
{ value: '1', label: 'Option 1', description: 'Description 1' },
{ value: '2', label: 'Option 2', description: 'Description 2' },
{ value: '3', label: 'Option 3', description: 'Description 3' }
]
</script>
<template>
<div>
<div class="flex flex-col items-center gap-4">
<USelect v-model="variant" :items="variants" />
<div class="flex flex-wrap gap-4 ms-[100px]">
<UCheckboxGroup :variant="variant" :items="items" :default-value="['1']" />
<UCheckboxGroup :variant="variant" :items="items" color="neutral" :default-value="['1']" />
<UCheckboxGroup :variant="variant" :items="items" color="error" :default-value="['2']" />
<UCheckboxGroup :variant="variant" :items="literalOptions" />
<UCheckboxGroup :variant="variant" :items="items" disabled />
</div>
<div class="flex flex-wrap gap-4 ms-[100px]">
<UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="start" />
<UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="end" />
<UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="hidden" />
</div>
<UCheckboxGroup :variant="variant" :items="items" orientation="horizontal" class="ms-[95px]" />
<div class="flex items-center gap-4 ms-[34px]">
<UCheckboxGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="items" />
</div>
<div class="flex items-center gap-4 ms-[74px]">
<UCheckboxGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="itemsWithDescription" />
</div>
<div class="flex gap-4">
<UCheckboxGroup :variant="variant" :items="items" legend="Legend" />
<UCheckboxGroup :variant="variant" :items="items" legend="Legend" required />
<UCheckboxGroup :variant="variant" :items="items">
<template #legend>
<span class="italic font-bold">
With slots
</span>
</template>
<template #label="{ item }">
<span class="italic">
{{ item.label }}
</span>
</template>
</UCheckboxGroup>
</div>
<UCheckboxGroup :variant="variant" :items="items" legend="Legend" orientation="horizontal" required />
</div>
</div>
</template>

44
playground/app/pages/components/checkbox.vue
View File

@@ -2,27 +2,51 @@
import theme from '#build/ui/checkbox'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant)
const variant = ref('list' as const)
const indicators = Object.keys(theme.variants.indicator) as Array<keyof typeof theme.variants.indicator>
const indicator = ref('start' as const)
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex gap-4">
<USelect v-model="variant" :items="variants" />
<USelect v-model="indicator" :items="indicators" />
</div>
<div class="flex flex-col gap-4">
<UCheckbox v-model="checked" label="Primary" />
<UCheckbox label="Neutral" color="neutral" :default-value="true" />
<UCheckbox label="Error" color="error" :model-value="true" />
<UCheckbox label="Icon" icon="i-lucide-heart" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" default-value="indeterminate" />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
<UCheckbox v-model="checked" label="Primary" :variant="variant" :indicator="indicator" orientation="horizontal" />
<UCheckbox label="Neutral" color="neutral" :variant="variant" :indicator="indicator" :default-value="true" />
<UCheckbox label="Error" color="error" :variant="variant" :indicator="indicator" :model-value="true" />
<UCheckbox label="Icon" icon="i-lucide-heart" :variant="variant" :indicator="indicator" :model-value="true" />
<UCheckbox label="Default value" :variant="variant" :indicator="indicator" :default-value="true" />
<UCheckbox label="Indeterminate" :variant="variant" :indicator="indicator" default-value="indeterminate" />
<UCheckbox label="Required" :variant="variant" :indicator="indicator" required />
<UCheckbox label="Disabled" :variant="variant" :indicator="indicator" disabled />
</div>
<div class="flex items-center gap-4 me-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />
<UCheckbox
v-for="size in sizes"
:key="size"
label="Check me"
:size="size"
:variant="variant"
:indicator="indicator"
/>
</div>
<div class="flex items-center gap-4 me-[-96px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="size" />
<UCheckbox
v-for="size in sizes"
:key="size"
label="Check me"
description="This is a description"
:size="size"
:variant="variant"
:indicator="indicator"
/>
</div>
</div>
</template>