From caf89b22d9edf0e1c1bbefb1b8296d141e982764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Mon, 23 Dec 2024 21:54:03 +0500
Subject: [PATCH] feat: add stripedRows prop for Table
---
src/common/helpers/colors.ts | 15 +--
src/common/helpers/common.ts | 28 ++++--
src/common/interfaces/componentsProps.ts | 1 +
src/stories/components/Table/Table.stories.ts | 44 ++++-----
src/stories/components/Table/Table.vue | 98 ++++++++++---------
5 files changed, 96 insertions(+), 90 deletions(-)
diff --git a/src/common/helpers/colors.ts b/src/common/helpers/colors.ts
index 473a284..a96677e 100644
--- a/src/common/helpers/colors.ts
+++ b/src/common/helpers/colors.ts
@@ -1,17 +1,4 @@
-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) {
diff --git a/src/common/helpers/common.ts b/src/common/helpers/common.ts
index aa4659a..3da75fb 100644
--- a/src/common/helpers/common.ts
+++ b/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';
-};
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8812742..e17eba6 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -29,6 +29,7 @@ export interface ITableProps {
gap?: string;
fontSize?: string;
showAllLines?: boolean;
+ stripedRows?: boolean;
}
export interface ITLProps {
diff --git a/src/stories/components/Table/Table.stories.ts b/src/stories/components/Table/Table.stories.ts
index f4d0a1d..d5cd8f2 100644
--- a/src/stories/components/Table/Table.stories.ts
+++ b/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,
},
};
diff --git a/src/stories/components/Table/Table.vue b/src/stories/components/Table/Table.vue
index 455cabb..06c38db 100644
--- a/src/stories/components/Table/Table.vue
+++ b/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>
--
GitLab