feat: add row color variants

gitsindonesia · Oct 24, 2023 · 6a8072c · 6a8072c
1 parent 46e814e
commit 6a8072c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
@@ -442,7 +442,7 @@ export const StickyColumn: StoryFn<typeof VDataTable> = (args) => ({
   `,
 });
 
-export const DarkMode: Story<{}> = (args) => ({
+export const DarkMode: StoryFn<typeof VDataTable> = (args) => ({
   components: { VDataTable },
   setup() {
     return { args };
@@ -457,7 +457,22 @@ export const DarkMode: Story<{}> = (args) => ({
 `,
 });
 
-export const ItemSlot: Story<{}> = (args) => ({
+export const RowColors: StoryFn<typeof VDataTable> = (args) => ({
+  components: { VDataTable },
+  setup() {
+    return { args };
+  },
+  template: `
+  <VDataTable
+    v-bind="args"
+    :trClass="[
+      'v-table-tr--primary',
+    ]"
+  />
+`,
+});
+
+export const ItemSlot: StoryFn<typeof VDataTable> = (args) => ({
   components: { VDataTable },
   setup() {
     return { args };

diff --git a/packages/themes/src/morpheme/_data-table.scss b/packages/themes/src/morpheme/_data-table.scss
@@ -155,6 +155,34 @@
 
   &-tr {
     background-color: var(--v-table-tr-bg-color);
+
+    &--primary {
+      --v-table-td-bg-color: var(--color-primary-50);
+    }
+
+    &--secondary {
+      --v-table-td-bg-color: var(--color-secondary-50);
+    }
+
+    &--success {
+      --v-table-td-bg-color: var(--color-success-50);
+    }
+
+    &--error {
+      --v-table-td-bg-color: var(--color-error-50);
+    }
+
+    &--warning {
+      --v-table-td-bg-color: var(--color-warning-50);
+    }
+
+    &--info {
+      --v-table-td-bg-color: var(--color-info-50);
+    }
+
+    &--dark {
+      --v-table-td-bg-color: var(--color-gray-50);
+    }
   }
 
   /* striped */