feat: update 'Table' in process (fad0839c) · Commits · Дмитрий Малюгин / UI_storybook

package.json

+0 −3

Original line number	Diff line number	Diff line
		@@ -52,8 +52,5 @@
		"extends": [
		"plugin:storybook/recommended"
		]
		},
		"volta": {
		"node": "23.1.0"
		}
		}

src/Playground.vue

+96 −14

Original line number	Diff line number	Diff line
		@@ -112,6 +112,34 @@ const tableColumns: ITableColumn[] = [
		name: 'Country',
		type: 'text',
		},
		{
		name: 'Is gay?',
		type: 'checkbox',
		},
		{
		name: 'Status',
		type: 'select',
		options: {
		options: [{ value: 'Married' }, { value: 'Oh no...(s)he is dead' }],
		theme: 'sky',
		},
		},
		{
		name: 'Children',
		type: 'rating',
		options: {
		theme: 'yellow',
		},
		},
		{
		name: 'Job progress',
		type: 'progressBar',
		options: {
		theme: 'red',
		width: '150px',
		size: 'small',
		},
		},
		];
		const tableData = ref([
		[
		@@ -127,6 +155,18 @@ const tableData = ref([
		{
		value: 'USA',
		},
		{
		value: false,
		},
		{
		value: 'Married',
		},
		{
		value: 0,
		},
		{
		value: 30,
		},
		],
		[
		{
		@@ -141,6 +181,18 @@ const tableData = ref([
		{
		value: 'Canada',
		},
		{
		value: true,
		},
		{
		value: 'Married',
		},
		{
		value: 0,
		},
		{
		value: 30,
		},
		],
		[
		{
		@@ -155,6 +207,18 @@ const tableData = ref([
		{
		value: 'Russia',
		},
		{
		value: false,
		},
		{
		value: 'Married',
		},
		{
		value: 0,
		},
		{
		value: 30,
		},
		],
		[
		{
		@@ -169,6 +233,18 @@ const tableData = ref([
		{
		value: 'Russia',
		},
		{
		value: false,
		},
		{
		value: 'Married',
		},
		{
		value: 0,
		},
		{
		value: 30,
		},
		],
		[
		{
		@@ -183,6 +259,18 @@ const tableData = ref([
		{
		value: 'Russia',
		},
		{
		value: false,
		},
		{
		value: 'Married',
		},
		{
		value: 0,
		},
		{
		value: 30,
		},
		],
		]);
		const activeCheckbox = ref();
		@@ -217,25 +305,19 @@ const knob = ref(0);
		<template #icon-right><TrashIcon color="#3333aa" size="18" /></template>
		</Tag>
		{{ activeCheckbox }}
		<Checkbox v-model:active="activeCheckbox" size="small" />
		<Checkbox v-model:active="activeCheckbox" />
		<Checkbox v-model:active="activeCheckbox" size="large" />
		<Checkbox v-model:active="activeCheckbox" size="huge" />
		<Table
		show-all-lines
		:columns="tableColumns"
		darknessTextColor="500"
		v-model="tableData"
		fontSize="36px"
		theme="black"
		stripedRows
		></Table>
		<Checkbox v-model="activeCheckbox" size="small" />
		<Checkbox v-model="activeCheckbox" />
		<Checkbox v-model="activeCheckbox" size="large" />
		<Checkbox v-model="activeCheckbox" size="huge" />
		{{ tableData[1] }}
		<Table
		center
		show-all-lines
		:columns="tableColumns"
		darknessTextColor="500"
		v-model="tableData"
		fontSize="20px"
		size="large"
		font-size="36px"
		theme="black"
		stripedRows
		></Table>

src/common/interfaces/componentsProp.ts

+1 −1

Original line number	Diff line number	Diff line
		@@ -19,7 +19,7 @@ export interface ITableColumn {
		}

		export interface ITableItem {
		value: string \| boolean;
		value: string \| number \| boolean;
		editable?: boolean;
		}

src/common/interfaces/componentsProps.ts

+2 −2

Original line number	Diff line number	Diff line
		@@ -158,7 +158,7 @@ export interface IPopupProps {
		}

		export interface ISelectProps {
		options: ISelectOption[];
		options?: ISelectOption[];
		groups?: ISelectGroup[];
		selected?: string;
		width?: string;
		@@ -205,7 +205,7 @@ export interface IButtonProps {
		}

		export interface IProgressBarProps {
		value: number;
		value?: number;
		max?: number;
		width?: string;
		height?: string;

src/components/Checkbox/Checkbox.vue

+4 −6

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { ICheckboxProps } from '@interfaces/componentsProps';
		import { computed, watch } from 'vue';
		import { computed } from 'vue';
		import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
		import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';

		@@ -47,11 +47,9 @@ const gap = computed(() => {
		const borderWidth = computed(() => (props.size === 'large' \|\| props.size === 'huge' ? 2 : 1));
		const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`);

		const activeProp = computed(() => props.active);

		watch(activeProp, () => (active.value = activeProp.value), {
		immediate: true,
		});
		if (props.active) {
		active.value = props.active;
		}
		</script>

		<template>