arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 17:30:37 +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

22
src/runtime/components/Checkbox.vue
View File

@@ -18,10 +18,19 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
* @defaultValue 'primary'
*/
color?: Checkbox['variants']['color']
/**
* @defaultValue 'list'
*/
variant?: Checkbox['variants']['variant']
/**
* @defaultValue 'md'
*/
size?: Checkbox['variants']['size']
/**
* Position of the indicator.
* @defaultValue 'start'
*/
indicator?: Checkbox['variants']['indicator']
/**
* The icon displayed when checked.
* @defaultValue appConfig.ui.icons.check
@@ -75,9 +84,10 @@ const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })({
size: size.value,
color: color.value,
variant: props.variant,
indicator: props.indicator,
required: props.required,
disabled: disabled.value,
checked: Boolean(modelValue.value ?? props.defaultValue)
disabled: disabled.value
}))
function onUpdate(value: any) {
@@ -91,7 +101,7 @@ function onUpdate(value: any) {
<!-- eslint-disable vue/no-template-shadow -->
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.container({ class: props.ui?.container })">
<CheckboxRoot
:id="id"
@@ -103,7 +113,7 @@ function onUpdate(value: any) {
@update:model-value="onUpdate"
>
<template #default="{ modelValue }">
<CheckboxIndicator as-child>
<CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
<UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
<UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
</CheckboxIndicator>
@@ -112,11 +122,11 @@ function onUpdate(value: any) {
</div>
<div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
<Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
<component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
<slot name="label" :label="label">
{{ label }}
</slot>
</Label>
</component>
<p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
<slot name="description" :description="description">
{{ description }}