Commit caf89b22 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: add stripedRows prop for Table

parent 234f5762

src/common/helpers/colors.ts

+1 −14
Original line number Diff line number Diff line 
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
Original line number Diff line number Diff line
@@ -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
Original line number Diff line number Diff line
@@ -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
Original line number Diff line number Diff line
@@ -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
Original line number Diff line number Diff line
@@ -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,15 +20,17 @@ 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>

  <div>

    <table

    :style="`background-color: ${themeColor}; color: ${color}`"

      :class="{

        tableLines: showAllLines,

      }"

      :style="`background-color: ${themeColor}; color: ${color}`"

    >

      <thead>

        <tr>
@@ -52,6 +55,7 @@ const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, pro 
          <td

            :class="{

              leftBorder: showAllLines,

              darkRow: stripedRows && index % 2,

            }"

            v-for="item of row"

            :key="item.value"
@@ -62,6 +66,7 @@ const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, pro 
        </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>