From 8b546600dbfbff187d9c5be1b35ea1772e94f83f Mon Sep 17 00:00:00 2001
From: Alex Thorwaldson <alex@zoobz.io>
Date: Wed, 10 Apr 2024 08:54:16 -0700
Subject: [PATCH] feat(Table): add `checkbox` ui config (#1409)

Co-authored-by: gangan <44604921+shinGangan@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docs/components/content/examples/TableExampleAdvanced.vue | 2 +-
 src/runtime/components/data/Table.vue                     | 4 ++--
 src/runtime/ui.config/data/table.ts                       | 3 +++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/components/content/examples/TableExampleAdvanced.vue b/docs/components/content/examples/TableExampleAdvanced.vue
index a99b501f..f4ac15ed 100644
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -186,7 +186,7 @@ const { data: todos, pending } = await useLazyAsyncData<{
       sort-desc-icon="i-heroicons-arrow-down"
       sort-mode="manual"
       class="w-full"
-      :ui="{ td: { base: 'max-w-[0] truncate' } }"
+      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' } } }"
       @select="select"
     >
       <template #completed-data="{ row }">
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 5b4cc30d..f9068c62 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -4,7 +4,7 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <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 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>
           <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">
-              <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 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]">
diff --git a/src/runtime/ui.config/data/table.ts b/src/runtime/ui.config/data/table.ts
index aba64419..6bf7f4f0 100644
--- a/src/runtime/ui.config/data/table.ts
+++ b/src/runtime/ui.config/data/table.ts
@@ -50,6 +50,9 @@ export default {
       variant: 'ghost' as const,
       class: '-m-1.5'
     },
+    checkbox: {
+      color: 'primary' as const
+    },
     progress: {
       color: 'primary' as const,
       animation: 'carousel' as const