From 91b16dd2938323f72af9d18fea8f3925c4207d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=98=88=EB=A6=B0?= <yerin.park@pubg.com>
Date: Thu, 9 Jan 2025 16:07:14 +0900
Subject: [PATCH] add primary style to VsTable

---
 .../src/components/vs-table/VsTable.scss      | 32 +++++++++++++++++++
 .../src/components/vs-table/VsTable.vue       |  3 +-
 .../vs-table/stories/VsTable.stories.ts       | 22 +++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/vlossom/src/components/vs-table/VsTable.scss b/packages/vlossom/src/components/vs-table/VsTable.scss
index 5ad240e03..562ced06f 100644
--- a/packages/vlossom/src/components/vs-table/VsTable.scss
+++ b/packages/vlossom/src/components/vs-table/VsTable.scss
@@ -245,6 +245,38 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
     }
 }
 
+.vs-table.vs-primary .vs-table-wrap .vs-table-table {
+    .vs-table-thead .vs-table-tr {
+        background-color: var(--vs-table-headerBackgroundColor, var(--vs-primary-comp-bg));
+
+        .vs-table-th {
+            color: var(--vs-table-headerFontColor, var(--vs-primary-comp-font));
+            border: var(--vs-table-headerBorder, 1px solid var(--vs-primary-comp-bg));
+
+            &.vs-table-selectable-th .vs-checkbox-input {
+                border: 1px dotted var(--vs-primary-comp-font);
+            }
+
+            .vs-table-search-icon {
+                color: var(--vs-primary-comp-font);
+            }
+        }
+    }
+
+    .vs-table-tbody .vs-table-tr {
+        .vs-table-td {
+            &.vs-table-expandable-td {
+                .vs-table-expand-button {
+                    i {
+                        color: var(--vs-table-headerFontColor, var(--vs-primary-comp-font));
+                    }
+                    background-color: var(--vs-table-headerBackgroundColor, var(--vs-primary-comp-bg));
+                }
+            }
+        }
+    }
+}
+
 @container (max-width: 640px) {
     .vs-table.vs-responsive .vs-table-wrap {
         .vs-table-table .vs-table-thead .vs-table-tr {
diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
index 602fb3dcc..6dbcaadfd 100644
--- a/packages/vlossom/src/components/vs-table/VsTable.vue
+++ b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -1,6 +1,6 @@
 <template>
     <vs-responsive
-        :class="['vs-table', colorSchemeClass, { 'vs-dense': dense, 'vs-responsive': responsive }]"
+        :class="['vs-table', colorSchemeClass, { 'vs-dense': dense, 'vs-responsive': responsive, 'vs-primary': primary }]"
         :style="computedStyleSet"
         :width="width"
         :grid="grid"
@@ -152,6 +152,7 @@ export default defineComponent({
             default: () => DEFAULT_TABLE_PAGE_COUNT,
         },
         pageEdgeButtons: { type: Boolean, default: false },
+        primary: { type: Boolean, default: false },
         search: { type: Boolean, default: false },
         searchPlaceholder: { type: String, default: 'search' },
         searchText: { type: String, default: '' },
diff --git a/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts b/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
index 96698668b..3c58865cc 100644
--- a/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
+++ b/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
@@ -316,6 +316,28 @@ export const ResponsiveFalse: Story = {
     },
 };
 
+export const Primary: Story = {
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                ${getColorSchemeTemplate(`
+                    <vs-table color-scheme="{{ color }}" v-bind="args" :style="{ marginBottom: '20px' }"/>
+                `)}
+            </div>
+        `,
+    }),
+    args: {
+        primary: true,
+    },
+    parameters: {
+        chromatic: chromaticParameters.theme,
+    },
+};
+
 export const StyleSet: Story = {
     args: {
         styleSet: {