Skip to content
Snippets Groups Projects
Commit caf89b22 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин :clock4:
Browse files

feat: add stripedRows prop for Table

parent 234f5762
No related branches found
No related tags found
1 merge request!3Table (partially), Checkbox, Tag, Select and Knob
Hide whitespace changes
Inline Side-by-side
src/common/helpers/colors.ts
+ 1
− 14
View file @ caf89b22
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
+ 22
− 6
View file @ caf89b22
......@@ -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
+ 1
− 0
View file @ caf89b22
......@@ -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
+ 19
− 25
View file @ caf89b22
......@@ -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
+ 53
− 45
View file @ caf89b22
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment