add primary style to VsTable

pubg · Jan 9, 2025 · 91b16dd · 91b16dd
1 parent 5cb5958
commit 91b16dd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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: {