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

feat(Table): add checkbox ui config (#1409)

Browse Source 
Co-authored-by: gangan <44604921+shinGangan@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
Alex Thorwaldson
2024-04-10 08:54:16 -07:00
committed by GitHub
parent f08471ccda
commit 8b546600db
3 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/content/examples/TableExampleAdvanced.vue
View File

@@ -186,7 +186,7 @@ const { data: todos, pending } = await useLazyAsyncData<{
sort-desc-icon="i-heroicons-arrow-down" sort-desc-icon="i-heroicons-arrow-down"
sort-mode="manual" sort-mode="manual"
class="w-full" class="w-full"
:ui="{ td: { base: 'max-w-[0] truncate' } }" :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' } } }"
@select="select" @select="select"
> >
<template #completed-data="{ row }"> <template #completed-data="{ row }">

4
src/runtime/components/data/Table.vue
View File

@@ -4,7 +4,7 @@
<thead :class="ui.thead"> <thead :class="ui.thead">
<tr :class="ui.tr.base"> <tr :class="ui.tr.base">
<th v-if="modelValue" scope="col" :class="ui.checkbox.padding"> <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
<UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" /> <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" v-bind="ui.default.checkbox" aria-label="Select all" @change="onChange" />
</th> </th>
<th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"> <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
@@ -57,7 +57,7 @@
<template v-else> <template v-else>
<tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)"> <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
<td v-if="modelValue" :class="ui.checkbox.padding"> <td v-if="modelValue" :class="ui.checkbox.padding">
<UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop /> <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
</td> </td>
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]"> <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">

3
src/runtime/ui.config/data/table.ts
View File

@@ -50,6 +50,9 @@ export default {
variant: 'ghost' as const, variant: 'ghost' as const,
class: '-m-1.5' class: '-m-1.5'
}, },
checkbox: {
color: 'primary' as const
},
progress: { progress: {
color: 'primary' as const, color: 'primary' as const,
animation: 'carousel' as const animation: 'carousel' as const