feat: finished - TreeList (ab84b5f5) · Commits · Дмитрий Малюгин / UI_storybook

src/App.vue

+68 −3

Original line number	Diff line number	Diff line
		@@ -103,9 +103,11 @@ 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 ToggleButton from '@stories/components/ToggleButton/ToggleButton.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';

		const gentleIcons = [
		Age18Icon,
		@@ -223,14 +225,77 @@ const options = [
		label: 'Second',
		},
		];
		const sliderOptions = [
		{
		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,
		value: 18,
		color: 'purple',
		},
		];
		</script>

		<template>
		<ToggleButton :options="options" size="large">
		<Slider
		:options="sliderOptions"
		width="400"
		min="0"
		max="18"
		step="2"
		backgroundColor="black"
		theme="blue"
		isSmooth
		/>
		<Button theme="sky" label="I'm a button"></Button>
		<SelectButton :options="options" size="large">
		<template #1Icon>
		<TrashIcon />
		</template>
		</ToggleButton>
		</SelectButton>
		<ToggleSwitch />
		<Drawer v-model:visible="visibleDrawer" theme="sky" closeIcon="CropIcon">
		<template #header>Это - Drawer</template>

src/assets/main.css

+3 −0

Original line number	Diff line number	Diff line
		@@ -148,6 +148,9 @@ body {
		min-height: 100vh;
		overflow-x: hidden;
		}
		* {
		font-family: Arial, serif;
		}
		#app {
		min-height: 100vh;
		display: flex;

src/common/interfaces/components.ts

+9 −4

Original line number	Diff line number	Diff line
		import type { TIcons, TThemeColor } from '@interfaces/common';

		export interface ITreeItem {
		label: string;
		link?: string;
		color?: string;
		iconBefore?: string;
		iconAfter?: string;
		iconColor?: string;
		linkBlank?: boolean;
		color?: TThemeColor;
		textStyle?: 'bold' \| 'italic';
		isTriangleToColor?: boolean;
		iconBefore?: TIcons;
		iconAfter?: TIcons;
		iconColor?: TThemeColor;
		children?: ITreeItem[];
		}

src/stories/components/Button/Button.stories.ts

+1 −1

Original line number	Diff line number	Diff line
		@@ -9,7 +9,7 @@ const meta: Meta = {
		parameters: {
		docs: {
		description: {
		component: 'A component that is used to select a value from a list using a button.',
		component: 'A component that is used as a button. Can be used with icon.',
		},
		},
		},

src/stories/components/Button/Button.vue

+10 −5

Original line number	Diff line number	Diff line
		@@ -6,13 +6,14 @@ import { convert500ThemeToColor } from '@helpers/colors';
		const props = withDefaults(
		defineProps<{
		label?: string;
		size?: 'small' \| 'medium' \| 'large' \| 'extraLarge';
		size?: 'small' \| 'medium' \| 'large' \| 'huge';
		textStyle?: 'bold' \| 'italic';
		iconPos?: 'left' \| 'top' \| 'right' \| 'bottom';
		width?: string \| number;
		theme?: TThemeColor;
		textColor?: TThemeColor;
		border?: TThemeColor;
		iconOnly?: boolean;
		}>(),
		{
		size: 'medium',
		@@ -30,8 +31,8 @@ const textSize = computed(() => {
		return '12px';
		case 'large':
		return '20px';
		case 'extraLarge':
		return '24px';
		case 'huge':
		return '28px';
		}
		return '16px';
		});
		@@ -41,7 +42,7 @@ const buttonPadding = computed(() => {
		return '0.5rem 0.375rem';
		case 'large':
		return '1.2rem 0.8rem';
		case 'extraLarge':
		case 'huge':
		return '1.8rem 1.2rem';
		}
		return '0.75rem 0.5rem';
		@@ -62,6 +63,7 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
		>
		<span :style="`background-color: ${themeColor}`" class="background"></span>
		<span
		v-if="label \|\| !iconOnly"
		:style="`color: ${textColor}; font-size: ${textSize}`"
		:class="[
		'text',
		@@ -70,7 +72,7 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
		italic: textStyle === 'italic',
		},
		]"
		>{{ label ?? 'Button' }}</span
		>{{ label ? label : !iconOnly ? 'Button' : '' }}</span
		>
		<span
		v-if="$slots.default"
		@@ -99,6 +101,9 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
		.button:hover .background {
		filter: brightness(90%);
		}
		.button:active .background {
		filter: brightness(75%);
		}
		.background {
		width: 100%;
		height: 100%;