feat: component "Tag" (2caf0a97) · Commits · Дмитрий Малюгин / UI_storybook

src/Playground.vue

+5 −0

Original line number	Diff line number	Diff line
		@@ -14,6 +14,7 @@ import Table from '@stories/components/Table/Table.vue';
		import { ref } from 'vue';
		import type { ISBOption, ISliderOptions, ITableColumn } from '@interfaces/componentsProp';
		import Checkbox from '@stories/components/Checkbox/Checkbox.vue';
		import Tag from '@stories/components/Tag/Tag.vue';

		const visibleDrawer = ref(false);
		const sliderOptions: ISliderOptions[] = [
		@@ -184,6 +185,10 @@ const activeCheckbox = ref();

		<template>
		<h2 class="title gradient-text">Playground</h2>
		<Tag theme="sky">
		<template #icon-right><TrashIcon color="#3333aa" size="18" /></template>
		<template #icon-left><TrashIcon color="sky" size="18" /></template>
		</Tag>
		{{ activeCheckbox }}
		<Checkbox v-model:active="activeCheckbox" size="small" />
		<Checkbox v-model:active="activeCheckbox" />

src/common/interfaces/componentsProps.ts

+15 −1

Original line number	Diff line number	Diff line
		@@ -157,6 +157,20 @@ export interface ITSProps {
		disabled?: boolean;
		}

		export interface ITagProps {
		value?: string;
		size?: TSize;
		rounded?: boolean;
		iconLeft?: TIcons;
		iconRight?: TIcons;
		theme?: TThemeColor;
		background?: TThemeColor;
		border?: TThemeColor;
		darknessTheme?: TDarkness;
		darknessBackground?: TDarkness;
		darknessBorder?: TDarkness;
		}

		export interface ICheckboxProps {
		label?: string;
		labelPos?: TPosition;
		@@ -171,7 +185,7 @@ export interface ICheckboxProps {
		darknessTheme?: TDarkness;
		darknessActiveTheme?: TDarkness;
		darknessTextColor?: TDarkness;
		darknessBorderColor?: TDarkness;
		darknessBorder?: TDarkness;
		}

		export interface IDividerProps {

src/stories/components/Checkbox/Checkbox.stories.ts

+1 −1

Original line number	Diff line number	Diff line
		@@ -30,7 +30,7 @@ const meta: Meta = {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		darknessBorderColor: {
		darknessBorder: {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},

src/stories/components/Checkbox/Checkbox.vue

+2 −6

Original line number	Diff line number	Diff line
		@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<ICheckboxProps>(), {
		darknessTheme: '500',
		darknessActiveTheme: '500',
		darknessTextColor: '500',
		darknessBorderColor: '500',
		darknessBorder: '500',
		});
		const active = defineModel('active');
		// watch(, () => {});
		@@ -27,11 +27,7 @@ const iconColor = computed(() =>
		);
		const color = computed(() => convertThemeToColor(props.textColor, props.darknessTextColor));
		const borderColor = computed(() =>
		props.invalid
		? 'red'
		: props.disabled
		? '#62708c'
		: convertThemeToColor(props.borderColor, props.darknessBorderColor),
		props.invalid ? 'red' : props.disabled ? '#62708c' : convertThemeToColor(props.borderColor, props.darknessBorder),
		);
		const elSize = computed(() => {
		const size = props.size;

src/stories/components/Tag/Tag.stories.ts

0 → 100644

+147 −0

Original line number	Diff line number	Diff line
		import type { Meta, StoryObj } from '@storybook/vue3';

		import Tag from './Tag.vue';
		import { iconsSet } from '@/common/constants/icons';

		const meta: Meta = {
		title: 'Components/Tag',
		component: Tag,
		tags: ['autodocs'],
		parameters: {
		docs: {
		description: {
		component: 'A component is used to categorize content. Can be used with icon.',
		},
		},
		},
		argTypes: {
		value: { control: 'text' },
		rounded: { control: 'boolean' },
		size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
		iconLeft: { control: 'select', options: Object.keys(iconsSet) },
		iconRight: { control: 'select', options: Object.keys(iconsSet) },
		darknessTheme: {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		darknessBackground: {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		darknessBorder: {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		theme: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		background: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		border: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		args: {},
		} satisfies Meta<typeof Tag>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Simple: Story = {
		args: {
		active: true,
		},
		};

		export const Small: Story = {
		args: {
		size: 'small',
		theme: 'red',
		value: 'Dangerous',
		iconRight: 'Age18Icon',
		},
		};

		export const Normal_rounded: Story = {
		args: {
		size: 'normal',
		theme: 'green',
		value: 'Be calm',
		rounded: true,
		},
		};

		export const Large: Story = {
		args: {
		size: 'large',
		theme: 'sky',
		value: 'Ice cream',
		iconLeft: 'CoinsIcon',
		},
		};

		export const Huge: Story = {
		args: {
		size: 'huge',
		theme: 'indigo',
		value: 'Unique',
		iconLeft: 'BallFootballIcon',
		iconRight: 'ArrowForwardIcon',
		darknessBackground: '300',
		darknessBorder: '500',
		border: 'indigo',
		},
		};