fix(DataTable): header font weight inconsistent when sorting

fix #10
gitsindonesia · Sep 15, 2022 · ce238f7 · ce238f7
1 parent 17f5c17
commit ce238f7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/packages/table/src/VDataTable.vue b/packages/table/src/VDataTable.vue
@@ -421,15 +421,7 @@ const start = computed(() =>
               v-for="header in computedHeaders"
               :key="header.value"
               scope="col"
-              class="
-                text-left
-                py-3
-                text-sm
-                font-semibold
-                uppercase
-                tracking-wider
-                group
-              "
+              class="text-left py-3 group"
               :class="[getThClass(header), paddingClass, header.class]"
               :width="header.width"
             >
@@ -445,7 +437,16 @@ const start = computed(() =>
                   role="button"
                   aria-label="Sort"
                   type="button"
-                  class="flex items-center truncate appearance-none"
+                  class="
+                    flex
+                    items-center
+                    truncate
+                    appearance-none
+                    text-sm
+                    font-semibold
+                    uppercase
+                    tracking-wider
+                  "
                   :class="[
                     header.align
                       ? `justify-${header.align}`
@@ -465,7 +466,10 @@ const start = computed(() =>
                     class="ml-2 h-5 w-5"
                   />
                 </button>
-                <span v-else>
+                <span
+                  v-else
+                  class="text-sm font-semibold uppercase tracking-wider"
+                >
                   {{ header.text }}
                 </span>
               </slot>
@@ -510,14 +514,19 @@ const start = computed(() =>
               [stripedClass]: striped,
               [hoverClass]: hover,
               'divide-x': bordered,
-              [trClass]: Boolean(trClass)
+              [trClass]: Boolean(trClass),
             }"
           >
             <td
               v-for="header in headers"
               :key="`header-${header.value}`"
               class="whitespace-nowrap text-sm text-gray-900"
-              :class="[getTdClass(header), paddingClass, tdClass, header?.tdClass || '']"
+              :class="[
+                getTdClass(header),
+                paddingClass,
+                tdClass,
+                header?.tdClass || '',
+              ]"
             >
               <slot
                 v-if="selectable && header.value === 'selected'"

diff --git a/packages/table/src/VDataTablePagination.stories.ts b/packages/table/src/VDataTablePagination.stories.ts
@@ -9,10 +9,26 @@ export default {
     color: {
       control: {type: 'select', options: themeColors},
     },
-      btnLast: { control: { type: 'text' }, defaultValue: '', table: { category: 'Slots'} },
-      btnFirst: { control: { type: 'text' }, defaultValue: '', table: { category: 'Slots'} },
-      btnNext: { control: { type: 'text' }, defaultValue: '', table: { category: 'Slots'} },
-      btnPrev: { control: { type: 'text' }, defaultValue: '', table: { category: 'Slots'} },
+    btnLast: {
+      control: {type: 'text'},
+      defaultValue: '',
+      table: {category: 'Slots'},
+    },
+    btnFirst: {
+      control: {type: 'text'},
+      defaultValue: '',
+      table: {category: 'Slots'},
+    },
+    btnNext: {
+      control: {type: 'text'},
+      defaultValue: '',
+      table: {category: 'Slots'},
+    },
+    btnPrev: {
+      control: {type: 'text'},
+      defaultValue: '',
+      table: {category: 'Slots'},
+    },
   },
   args: {
     totalItems: 30,
@@ -31,19 +47,24 @@ const Template: Story = (args) => ({
   setup() {
     const {btnLast, btnFirst, btnNext, btnPrev} = args;
 
-    const argsWSlots:Args = {
+    const argsWSlots: Args = {
       args: args,
-      $slots: {}
+      $slots: {},
     };
 
     // added `$slot` prop to `args` so we can easily access it in storybook template
-    for (const [key, value] of Object.entries({btnPrev, btnNext, btnFirst, btnLast})) {
-      if(value !== undefined && value !== null && value !== ""){
+    for (const [key, value] of Object.entries({
+      btnPrev,
+      btnNext,
+      btnFirst,
+      btnLast,
+    })) {
+      if (value !== undefined && value !== null && value !== '') {
         argsWSlots.$slots[key] = value;
       }
     }
 
-    return {args:argsWSlots};
+    return {args: argsWSlots};
   },
   template: `<v-data-table-pagination v-bind="args.args">
   <template v-for="(content, name) in args.$slots" v-slot:[name]>{{content}}</template>