feat: add stripedRows prop for Table

src/common/helpers/colors.ts

-import type { TDarkness, TThemeColor } from '@interfaces/common';
-
-export const convertWhiteOrBlackToColor = (theme: 'white' | 'black', darkness: TDarkness) => {
-  if (theme === 'white') {
-    if (darkness === '500' || darkness === '400' || darkness === '600') return '#cbd5e1';
-    if (darkness === '300' || darkness === '700') return '#94a3b8';
-    if (darkness === '200' || darkness === '800') return '#f1f5f9';
-    if (darkness === '100' || darkness === '900') return '#e2e8f0';
-  }
-  if (darkness === '500' || darkness === '400' || darkness === '600') return '#475569';
-  if (darkness === '300' || darkness === '700') return '#64748b';
-  if (darkness === '200' || darkness === '800') return '#94a3b8';
-  if (darkness === '100' || darkness === '900') return '#cbd5e1';
-};
+import type { TThemeColor } from '@interfaces/common';
 
 export const convert100ThemeToColor = (theme: TThemeColor) => {
   switch (theme) {

src/common/helpers/common.ts

@@ -9,7 +9,6 @@ import {
   convert700ThemeToColor,
   convert800ThemeToColor,
   convert900ThemeToColor,
-  convertWhiteOrBlackToColor,
 } from '@helpers/colors';
 
 /**
@@ -27,6 +26,28 @@ export const convertThemeToColor = (theme: TThemeColor, darkness: TDarkness | st
   if (darkness === '900') return convert900ThemeToColor(theme);
   return convert500ThemeToColor(theme);
 };
+/**
+ * Convert color of type TThemeColor to black or white
+ */
+export const convertThemeToTextColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {
+  if (theme === 'white' || (darkness <= '600' && theme !== 'black')) return '#000000';
+  return '#ffffff';
+};
+/**
+ * Convert color of type TThemeColor to shade of black or white
+ */
+export const convertWhiteOrBlackToColor = (theme: 'white' | 'black', darkness: TDarkness) => {
+  if (theme === 'white') {
+    if (darkness === '500' || darkness === '400' || darkness === '600') return '#94a3b8';
+    if (darkness === '300' || darkness === '700') return '#cbd5e1';
+    if (darkness === '200' || darkness === '800') return '#f1f5f9';
+    if (darkness === '100' || darkness === '900') return '#e2e8f0';
+  }
+  if (darkness === '500' || darkness === '400' || darkness === '600') return '#4b5563';
+  if (darkness === '300' || darkness === '700') return '#374151';
+  if (darkness === '200' || darkness === '800') return '#1f2937';
+  if (darkness === '100' || darkness === '900') return '#111827';
+};
 /**
  * Convert color of type TThemeColor to hex for border or scroll
  */
@@ -35,8 +56,3 @@ export const convertThemeToSecondaryColor = (theme: TThemeColor, darkness: TDark
     ? convertWhiteOrBlackToColor(theme, darkness as TDarkness)
     : convertThemeToColor(theme, String(100 + ((+darkness + 600) % 900)));
 };
-
-export const convertThemeToTextColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {
-  if (theme === 'white' || (darkness <= '600' && theme !== 'black')) return '#000000';
-  return '#ffffff';
-};

src/common/interfaces/componentsProps.ts

@@ -29,6 +29,7 @@ export interface ITableProps {
   gap?: string;
   fontSize?: string;
   showAllLines?: boolean;
+  stripedRows?: boolean;
 }
 
 export interface ITLProps {

src/stories/components/Table/Table.stories.ts

@@ -14,13 +14,12 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    columns: { control: 'object' },
-    data: { control: 'object' },
-    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    columns: { control: 'text' },
+    data: { control: 'text' },
     fontSize: { control: 'text' },
     gap: { control: 'text' },
-    width: { control: 'text' },
     showAllLines: { control: 'boolean' },
+    stripedRows: { control: 'boolean' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     darknessTextColor: {
       control: 'select',
@@ -66,26 +65,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    border: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
   },
   args: {},
 } satisfies Meta<typeof Table>;
@@ -201,12 +180,27 @@ export const Full: Story = {
           value: 'Russia',
         },
       ],
+      [
+        {
+          value: 'Ксюша',
+        },
+        {
+          value: '32',
+        },
+        {
+          value: 'Frontend',
+        },
+        {
+          value: 'Russia',
+        },
+      ],
     ],
 
-    fontSize: '32px',
+    fontSize: '20px',
     showAllLines: true,
     gap: '70px',
     border: 'fuchsia',
     theme: 'black',
+    stripedRows: true,
   },
 };

src/stories/components/Table/Table.vue

@@ -2,6 +2,7 @@
 import type { ITableProps } from '@interfaces/componentsProps';
 import { computed } from 'vue';
 import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
+import type { ITableItem } from '@interfaces/componentsProp';
 
 const props = withDefaults(defineProps<ITableProps>(), {
   gap: '5px',
@@ -11,7 +12,7 @@ const props = withDefaults(defineProps<ITableProps>(), {
 });
 const gap = computed(() => props.gap);
 // const emit = defineEmits(['']);
-const data = defineModel('data');
+const data = defineModel('data') as ITableItem[][];
 // watch(, () => {});
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
@@ -19,49 +20,53 @@ const color = computed(() =>
     ? convertThemeToColor(props.textColor, props.darknessTextColor)
     : convertThemeToTextColor(props.theme, props.darknessTheme),
 );
-const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
+const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
+const darkCellColor = computed(() => convertThemeToSecondaryColor(props.theme, String(+props.darknessTheme + 300)));
 </script>
 
 <template>
-  <table
-    :style="`background-color: ${themeColor}; color: ${color}`"
-    :class="{
-      tableLines: showAllLines,
-    }"
-  >
-    <thead>
-      <tr>
-        <th
-          :class="{
-            leftBorder: showAllLines,
-          }"
-          v-for="column of columns"
-          :key="column.name"
-          class="columnHeader"
-          style="padding: 5px 0 5px 5px"
-        >
-          <div class="columnFlex">
-            {{ column.name }}
-            <div></div>
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, index) of data" :key="index">
-        <td
-          :class="{
-            leftBorder: showAllLines,
-          }"
-          v-for="item of row"
-          :key="item.value"
-          style="padding: 5px"
-        >
-          {{ item.value }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div>
+    <table
+      :class="{
+        tableLines: showAllLines,
+      }"
+      :style="`background-color: ${themeColor}; color: ${color}`"
+    >
+      <thead>
+        <tr>
+          <th
+            :class="{
+              leftBorder: showAllLines,
+            }"
+            v-for="column of columns"
+            :key="column.name"
+            class="columnHeader"
+            style="padding: 5px 0 5px 5px"
+          >
+            <div class="columnFlex">
+              {{ column.name }}
+              <div></div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) of data" :key="index">
+          <td
+            :class="{
+              leftBorder: showAllLines,
+              darkRow: stripedRows && index % 2,
+            }"
+            v-for="item of row"
+            :key="item.value"
+            style="padding: 5px"
+          >
+            {{ item.value }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped>
@@ -81,7 +86,7 @@ tr::after {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: v-bind(borderColor);
+  background-color: v-bind(secondaryColor);
 }
 .columnFlex {
   display: flex;
@@ -89,10 +94,13 @@ tr::after {
   font-weight: bold;
 }
 .tableLines {
-  border-top: 1px solid v-bind(borderColor);
-  border-right: 1px solid v-bind(borderColor);
+  border-top: 1px solid v-bind(secondaryColor);
+  border-right: 1px solid v-bind(secondaryColor);
 }
 .leftBorder {
-  border-left: 1px solid v-bind(borderColor);
+  border-left: 1px solid v-bind(secondaryColor);
+}
+.darkRow {
+  background-color: v-bind(darkCellColor);
 }
 </style>