feat: almost ended with Table filter but with bugs and add Popup logics for buttons (209112d0) · Commits · Дмитрий Малюгин / UI_storybook

package.json

+8 −9

Original line number	Diff line number	Diff line
		@@ -19,14 +19,13 @@
		"vue": "^3.5.12"
		},
		"devDependencies": {
		"@chromatic-com/storybook": "3.2.2",
		"@storybook/addon-essentials": "8.4.5",
		"@storybook/addon-interactions": "8.4.5",
		"@storybook/addon-onboarding": "8.4.5",
		"@storybook/blocks": "8.4.5",
		"@storybook/test": "8.4.5",
		"@storybook/vue3": "8.4.5",
		"@storybook/vue3-vite": "8.4.5",
		"@chromatic-com/storybook": "^3.2.3",
		"@storybook/addon-essentials": "^8.4.7",
		"@storybook/addon-interactions": "^8.4.7",
		"@storybook/blocks": "^8.4.7",
		"@storybook/test": "^8.4.7",
		"@storybook/vue3": "^8.4.7",
		"@storybook/vue3-vite": "^8.4.7",
		"@tsconfig/node22": "^22.0.0",
		"@types/jsdom": "^21.1.7",
		"@types/node": "^22.10.1",
		@@ -42,7 +41,7 @@
		"jsdom": "^25.0.1",
		"npm-run-all2": "^7.0.1",
		"prettier": "^3.3.3",
		"storybook": "8.4.5",
		"storybook": "^8.4.7",
		"typescript": "~5.6.3",
		"vite": "^5.4.10",
		"vite-plugin-vue-devtools": "^7.5.4",

src/App.vue

+4 −196

Original line number	Diff line number	Diff line
		@@ -34,7 +34,7 @@ import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
		import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
		import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
		import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
		import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue';
		import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
		import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
		import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
		import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
		@@ -107,15 +107,8 @@ import TableIcon from '@stories/icons/Mono/TableIcon.vue';
		import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
		import UserIcon from '@stories/icons/Mono/UserIcon.vue';
		import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
		import SelectButton from '@stories/components/SelectButton/SelectButton.vue';
		import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
		import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
		import Button from '@stories/components/Button/Button.vue';
		import Slider from '@stories/components/Slider/Slider.vue';
		import type { ISBOption, ISliderOptions } from '@interfaces/componentsProp';
		import Modal from '@stories/components/Modal/Modal.vue';
		import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
		import Popup from '@stories/components/Popup/Popup.vue';
		import Playground from '@/Playground.vue';

		const gentleIcons = {
		Age18Icon,
		@@ -152,7 +145,7 @@ const gentleIcons = {
		ChartPieIcon,
		ChatIcon,
		ChatWritingIcon,
		CheckmarkIcon,
		CheckMarkIcon,
		ChemistryFlaskIcon,
		CodeIcon,
		CoinsIcon,
		@@ -226,74 +219,6 @@ const gentleIcons = {
		TriangleIcon,
		UserIcon,
		};
		const visibleDrawer = ref(false);
		const sliderOptions: ISliderOptions[] = [
		{
		label: 0,
		value: 0,
		color: 'red',
		},
		{
		label: 2,
		value: 2,
		color: 'orange',
		},
		{
		label: 4,
		value: 4,
		color: 'yellow',
		},
		{
		label: 6,
		value: 6,
		color: 'green',
		},
		{
		label: 8,
		value: 8,
		color: 'sky',
		},
		{
		label: 10,
		value: 10,
		color: 'purple',
		},
		{
		label: 12,
		value: 12,
		color: 'purple',
		},
		{
		label: 14,
		value: 14,
		color: 'purple',
		},
		{
		label: 16,
		value: 16,
		color: 'purple',
		},
		{
		label: 18,
		},
		];
		const options: ISBOption[] = [
		{
		label: 'First',
		textStyle: 'bold',
		iconPosition: 'top',
		},
		{
		label: 'Second',
		},
		];
		const visible = ref(false);
		const onClose = () => console.log('close!');
		const value = ref();
		const active = ref(false);
		const popupActive = ref(false);
		const popupActive2 = ref(false);
		const sliderValue = ref(1);
		</script>

		<template>
		@@ -305,112 +230,7 @@ const sliderValue = ref(1);
		<span class="iconName">{{ icon[0].slice(0, -4) }}</span>
		</li>
		</ul>
		<h2 class="title gradient-text">Playground</h2>
		<button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>
		<div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
		<Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
		<Button
		@click="
		() => {
		popupActive = false;
		visible = true;
		}
		"
		label="Открыть модальное окно"
		/>
		</Popup>
		<Popup v-model:active="popupActive2" theme="sky"
		>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
		voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
		voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut
		vero!</Popup
		>

		<Modal v-model:visible="visible" theme="red" @onClose="onClose"
		><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
		explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
		nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus? Lorem ipsum dolor sit
		amet, consectetur adipisicing elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima
		necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas
		quisquam repellat saepe temporibus?</Modal
		>
		<MenuDial
		v-model:active="active"
		theme="sky"
		direction="right"
		darknessTheme="600"
		:items="[
		{
		label: 'font-family',
		theme: 'green',
		color: 'red',
		darknessColor: '500',
		link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
		linkBlank: true,
		textStyle: 'bold',
		},
		{
		label: 'Second',
		theme: 'red',
		color: 'sky',
		darknessColor: '500',
		darknessTheme: '600',
		textStyle: 'italic',
		},
		]"
		>
		<template #1IconBefore>
		<AnchorLinkIcon size="20" color="white" />
		</template>
		<template #2IconBefore>
		<CrossIcon color="white" />
		</template>
		<template #2IconAfter>
		<CrossIcon color="white" />
		</template>
		</MenuDial>
		<Slider
		v-model:value="sliderValue"
		:options="sliderOptions"
		width="400"
		min="0"
		max="18"
		step="2"
		backgroundColor="black"
		theme="blue"
		isSmooth
		/>
		<Button @click="visible = true" textColor="white" theme="sky" label="I'm a button"></Button>
		<SelectButton :options="options" size="large" v-model:value="value">
		<template #1Icon>
		<TrashIcon />
		</template>
		</SelectButton>
		<ToggleSwitch />
		<Drawer v-model:visible="visibleDrawer" theme="sky" :dismissible="false" closeIcon="CropIcon">
		<template #header>Это - Drawer</template>
		<p>
		pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
		adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
		fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
		consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
		molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
		sit amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi illum impedit
		iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum
		dolor sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum
		labore qui rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit.
		pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
		adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
		fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
		consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
		molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
		sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
		explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
		nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus?
		</p>
		<template #footer> pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template></Drawer
		>
		<Playground />
		</main>
		</template>

		@@ -448,16 +268,4 @@ const sliderValue = ref(1);
		color: green;
		font-style: italic;
		}
		.testButton {
		background-color: red;
		margin-bottom: 30px;
		color: white;
		padding: 10px;
		border-radius: 5px;
		}
		.gradient-text {
		background: linear-gradient(to right, hotpink, yellow, dodgerblue);
		background-clip: text;
		color: transparent;
		}
		</style>

src/Playground.vue

0 → 100644

+318 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import Modal from '@stories/components/Modal/Modal.vue';
		import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
		import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
		import SelectButton from '@stories/components/SelectButton/SelectButton.vue';
		import Drawer from '@stories/components/Drawer/Drawer.vue';
		import Slider from '@stories/components/Slider/Slider.vue';
		import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
		import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
		import Button from '@stories/components/Button/Button.vue';
		import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
		import Popup from '@stories/components/Popup/Popup.vue';
		import Table from '@stories/components/Table/Table.vue';
		import { ref } from 'vue';
		import type { ISBOption, ISliderOptions, ITableColumn } from '@interfaces/componentsProp';

		const visibleDrawer = ref(false);
		const sliderOptions: ISliderOptions[] = [
		{
		label: 0,
		value: 0,
		color: 'red',
		},
		{
		label: 2,
		value: 2,
		color: 'orange',
		},
		{
		label: 4,
		value: 4,
		color: 'yellow',
		},
		{
		label: 6,
		value: 6,
		color: 'green',
		},
		{
		label: 8,
		value: 8,
		color: 'sky',
		},
		{
		label: 10,
		value: 10,
		color: 'purple',
		},
		{
		label: 12,
		value: 12,
		color: 'purple',
		},
		{
		label: 14,
		value: 14,
		color: 'purple',
		},
		{
		label: 16,
		value: 16,
		color: 'purple',
		},
		{
		label: 18,
		},
		];
		const options: ISBOption[] = [
		{
		label: 'First',
		textStyle: 'bold',
		iconPosition: 'top',
		},
		{
		label: 'Second',
		},
		];
		const visible = ref(false);
		const onClose = () => console.log('close!');
		const value = ref();
		const active = ref(false);
		const popupActive = ref(false);
		const popupActive2 = ref(false);
		const sliderValue = ref(1);

		const tableColumns: ITableColumn[] = [
		{
		name: 'Name',
		type: 'text',
		sortable: true,
		},
		{
		name: 'Age',
		type: 'text',
		filterable: true,
		},
		{
		name: 'Hobbies',
		type: 'text',
		padding: '30px',
		filterable: true,
		sortable: true,
		},
		{
		name: 'Country',
		type: 'text',
		},
		];
		const tableData = [
		[
		{
		value: 'Pete',
		},
		{
		value: '30',
		},
		{
		value: 'Chess',
		},
		{
		value: 'USA',
		},
		],
		[
		{
		value: 'John',
		},
		{
		value: '25',
		},
		{
		value: 'Football',
		},
		{
		value: 'Canada',
		},
		],
		[
		{
		value: 'Дима',
		},
		{
		value: '22',
		},
		{
		value: 'Frontend',
		},
		{
		value: 'Russia',
		},
		],
		[
		{
		value: 'Ксюша',
		},
		{
		value: '32',
		},
		{
		value: 'Frontend',
		},
		{
		value: 'Russia',
		},
		],
		[
		{
		value: 'Ксюша',
		},
		{
		value: '32',
		},
		{
		value: 'Backend',
		},
		{
		value: 'Russia',
		},
		],
		];
		</script>

		<template>
		<h2 class="title gradient-text">Playground</h2>
		<Table
		show-all-lines
		:columns="tableColumns"
		darknessTextColor="500"
		:data="tableData"
		fontSize="20px"
		theme="black"
		stripedRows
		></Table>
		<button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>
		<div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
		<Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
		<Button
		@click="
		() => {
		popupActive = false;
		visible = true;
		}
		"
		label="Открыть модальное окно"
		/>
		</Popup>
		<Popup v-model:active="popupActive2" theme="sky"
		>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
		voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero! Lorem
		ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas.
		Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup
		>

		<Modal v-model:visible="visible" theme="red" @onClose="onClose"
		><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
		explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
		nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus? Lorem ipsum dolor sit
		amet, consectetur adipisicing elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima
		necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam
		repellat saepe temporibus?</Modal
		>
		<MenuDial
		v-model:active="active"
		theme="sky"
		direction="right"
		darknessTheme="600"
		:items="[
		{
		label: 'font-family',
		theme: 'green',
		color: 'red',
		darknessColor: '500',
		link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
		linkBlank: true,
		textStyle: 'bold',
		},
		{
		label: 'Second',
		theme: 'red',
		color: 'sky',
		darknessColor: '500',
		darknessTheme: '600',
		textStyle: 'italic',
		},
		]"
		>
		<template #1IconBefore>
		<AnchorLinkIcon size="20" color="white" />
		</template>
		<template #2IconBefore>
		<CrossIcon color="white" />
		</template>
		<template #2IconAfter>
		<CrossIcon color="white" />
		</template>
		</MenuDial>
		<Slider
		v-model:value="sliderValue"
		:options="sliderOptions"
		width="400"
		min="0"
		max="18"
		step="2"
		backgroundColor="black"
		theme="blue"
		isSmooth
		/>
		<Button @click="visible = true" textColor="white" theme="sky" label="I'm a button"></Button>
		<SelectButton :options="options" size="large" v-model:value="value">
		<template #1Icon>
		<TrashIcon />
		</template>
		</SelectButton>
		<ToggleSwitch />
		<Drawer v-model:visible="visibleDrawer" theme="sky" :dismissible="false" closeIcon="CropIcon">
		<template #header>Это - Drawer</template>
		<p>
		pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
		adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
		fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
		consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
		molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
		sit amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi illum impedit
		iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum dolor
		sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum labore qui
		rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit. pizdwertyuki
		lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga fugit, modi, nam
		necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur
		adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio
		optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit amet,
		consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque explicabo, facere
		fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil
		officia, pariatur praesentium quas quisquam repellat saepe temporibus?
		</p>
		<template #footer> pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template></Drawer
		>
		</template>

		<style scoped>
		.title {
		font-size: 48px;
		width: max-content;
		margin: 0 auto 40px auto;
		}
		.testButton {
		background-color: red;
		margin-bottom: 30px;
		color: white;
		padding: 10px;
		border-radius: 5px;
		}
		.gradient-text {
		background: linear-gradient(to right, hotpink, yellow, dodgerblue);
		background-clip: text;
		color: transparent;
		}
		</style>

src/common/constants/icons.ts

+2 −2

Original line number	Diff line number	Diff line
		@@ -36,7 +36,7 @@ import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
		import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
		import CropIcon from '@stories/icons/Mono/CropIcon.vue';
		import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
		import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue';
		import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
		import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
		import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
		import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
		@@ -143,7 +143,7 @@ export const iconsSet: Record<string, Component> = {
		ChartPieIcon: ChartPieIcon,
		ChatIcon: ChatIcon,
		ChatWritingIcon: ChatWritingIcon,
		CheckmarkIcon: CheckmarkIcon,
		CheckMarkIcon: CheckMarkIcon,
		ChemistryFlaskIcon: ChemistryFlaskIcon,
		CodeIcon: CodeIcon,
		CoinsIcon: CoinsIcon,

src/common/interfaces/componentsProps.ts

+3 −0

Original line number	Diff line number	Diff line
		@@ -116,6 +116,9 @@ export interface IPopupProps {
		maxWidth?: string;
		maxHeight?: string;
		padding?: string;
		buttonMenu?: boolean;
		top?: number;
		left?: number;
		}

		export interface ISBProps {