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

src/App.vue

+17 −13

Original line number	Diff line number	Diff line
		@@ -108,6 +108,8 @@ 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 } from '@interfaces/componentsProp';
		import Modal from '@stories/components/Modal/Modal.vue';

		const gentleIcons = [
		Age18Icon,
		@@ -215,16 +217,6 @@ const gentleIcons = [
		UserIcon,
		];
		const visibleDrawer = ref(true);
		const options = [
		{
		label: 'First',
		textStyle: 'bold',
		iconPosition: 'top',
		},
		{
		label: 'Second',
		},
		];
		const sliderOptions = [
		{
		label: 0,
		@@ -273,15 +265,27 @@ const sliderOptions = [
		},
		{
		label: 18,
		value: 18,
		color: 'purple',
		},
		];
		const options: ISBOption[] = [
		{
		label: 'First',
		textStyle: 'bold',
		iconPosition: 'top',
		},
		{
		label: 'Second',
		},
		];
		const visible = ref(false);
		const onClose = () => console.log('close!');
		</script>

		<template>
		<Modal v-model:visible="visible" @onClose="onClose"></Modal>
		<Slider
		:options="sliderOptions"
		orientation="vertical"
		width="400"
		min="0"
		max="18"
		@@ -290,7 +294,7 @@ const sliderOptions = [
		theme="blue"
		isSmooth
		/>
		<Button theme="sky" label="I'm a button"></Button>
		<Button @click="visible = true" theme="sky" label="I'm a button"></Button>
		<SelectButton :options="options" size="large">
		<template #1Icon>
		<TrashIcon />

src/common/interfaces/componentsProps.ts

+7 −0

Original line number	Diff line number	Diff line
		@@ -50,6 +50,13 @@ export interface IDrawerProps {
		footerDivider?: boolean;
		}

		export interface IModalProps {
		theme?: TThemeColor;
		width?: number \| string;
		closeIcon?: TIcons;
		headerDivider?: boolean;
		}

		export interface ISBProps {
		options: ISBOption[];
		size?: TSize;

src/stories/components/Modal/Modal.stories.ts

0 → 100644

+54 −0

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

		import Modal from './Modal.vue';

		const meta: Meta = {
		title: 'Components/Modal',
		component: Modal,
		tags: ['autodocs'],
		parameters: {
		docs: {
		description: {
		component: 'A component that is used to select a boolean value.',
		},
		},
		},
		argTypes: {
		visible: { control: 'boolean' },
		width: { control: 'text' },
		header: { control: 'text' },
		default: { control: 'text' },
		theme: {
		control: 'select',
		options: [
		'white',
		'slate',
		'blue',
		'sky',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		args: {
		// primary: false,
		// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
		},
		} satisfies Meta<typeof Modal>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Primary: Story = {
		args: {},
		};

src/stories/components/Modal/Modal.vue

+18 −26

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import { useVModel } from '@vueuse/core';
		import { computed } from 'vue';
		import { convertThemeToColorWhiteDefault } from '@/app/helpers';
		import type { TThemeColor } from './interfaces/index';
		import { convert500ThemeToColor } from '@helpers/colors';
		import type { IModalProps } from '@interfaces/componentsProps';

		interface Props {
		isVisible: boolean;
		theme?: TThemeColor;
		width?: number \| string;
		onClose?: () => never;
		}
		const props = defineProps<Props>();
		const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
		const props = withDefaults(defineProps<IModalProps>(), {
		theme: 'white',
		});
		const emit = defineEmits(['onClose']);
		const visible = defineModel('visible', {
		set(value) {
		emit('onClose');
		return value;
		},
		});
		const themeColor = computed(() => convert500ThemeToColor(props.theme));
		const textColor = computed(() => {
		if (!props.theme) return '#000000';
		if (props.theme === 'white') return '#000000';
		return '#ffffff';
		});
		const emit = defineEmits(['update:isVisible']);
		const isVisible = useVModel(props, 'isVisible', emit);
		const onKeydown = (event) => {
		if (event.key === 'Escape' && isVisible.value) isVisible.value = false;
		const onKeydown = (event: KeyboardEvent) => {
		if (event.key === 'Escape' && visible.value) visible.value = false;
		};
		document.addEventListener('keydown', onKeydown);
		const unwatch = watch(isVisible, () => {
		if (!isVisible.value) {
		props.onClose();
		}
		});
		if (!props.onClose) {
		unwatch();
		}
		</script>

		<template>
		@@ -39,7 +31,7 @@ if (!props.onClose) {
		:class="[
		'modalBackground',
		{
		openedModalBackground: isVisible,
		openedModalBackground: visible,
		},
		]"
		></section>
		@@ -48,13 +40,13 @@ if (!props.onClose) {
		:class="[
		'modal',
		{
		openedModal: isVisible,
		openedModal: visible,
		},
		]"
		>
		<header class="modalHeader">
		<slot name="header" />
		<div class="buttonClose" @click.prevent="isVisible = false">
		<div class="buttonClose" @click.prevent="visible = false">
		<svg
		width="40px"
		height="40px"

src/stories/components/Slider/Slider.stories.ts

+22 −4

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

		import Slider from './Slider.vue';
		import type { TThemeColor } from '@interfaces/common';

		const meta: Meta = {
		title: 'Components/Slider',
		@@ -15,7 +14,7 @@ const meta: Meta = {
		},
		},
		argTypes: {
		options: { control: 'array' },
		options: { control: 'object' },
		width: { control: 'text' },
		min: { control: 'text' },
		max: { control: 'text' },
		@@ -81,12 +80,13 @@ export const Primary: Story = {
		export const Full: Story = {
		args: {
		min: '0',
		max: '10',
		max: '20',
		step: '2',
		size: 'small',
		size: 'large',
		backgroundColor: 'black',
		theme: 'blue',
		isSmooth: true,

		options: [
		{
		label: 0,
		@@ -138,6 +138,24 @@ export const Full: Story = {
		value: 18,
		color: 'purple',
		},
		{
		label: 20,
		value: 20,
		color: 'purple',
		},
		],

		width: '300',
		},
		};

		export const Smooth: Story = {
		args: {
		max: '1000',
		isSmooth: true,
		width: '300',
		size: 'medium',
		backgroundColor: 'blue',
		theme: 'black',
		},
		};