fix(Table): add missing classes in app.config.ts

Fixes #655
nuxt · Sep 11, 2023 · a603ea5 · a603ea5
1 parent a90e95f
commit a603ea5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -25,6 +25,9 @@ const table = {
     font: '',
     size: 'text-sm'
   },
+  checkbox: {
+    padding: 'ps-4'
+  },
   loadingState: {
     wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
     label: 'text-sm text-center text-gray-900 dark:text-white',

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
@@ -3,7 +3,7 @@
     <table :class="[ui.base, ui.divide]">
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" class="ps-4">
+          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
             <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
           </th>
 
@@ -50,7 +50,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]" @click="() => onSelect(row)">
-            <td v-if="modelValue" class="ps-4">
+            <td v-if="modelValue" :class="ui.checkbox.padding">
               <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
             </td>