feat: init 'Knob' (0adb2ed1) · Commits · Дмитрий Малюгин / UI_storybook

src/common/interfaces/componentsProps.ts

+13 −0

Original line number	Diff line number	Diff line
		@@ -68,6 +68,19 @@ export interface IMDProps {
		// direction?: TDirection \| 'circle';
		}

		export interface IKnobProps {
		min?: string \| number;
		max?: string \| number;
		step?: string \| number;
		size?: TSize;
		theme?: TThemeColor;
		negativeTheme?: TThemeColor;
		darknessTheme?: TDarkness;
		darknessNegativeTheme?: TDarkness;
		buttons?: boolean;
		showLabel?: boolean;
		}

		export interface ISliderProps {
		width?: string \| number;
		min?: string \| number;

src/stories/components/Knob/Knob.stories.ts

0 → 100644

+130 −0

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

		import Knob from './Knob.vue';

		const meta: Meta = {
		title: 'Components/Knob',
		component: Knob,
		tags: ['autodocs'],
		parameters: {
		docs: {
		description: {
		component: 'A component that is used as a Knob. Can be used with icon.',
		},
		},
		},
		argTypes: {
		buttons: { control: 'boolean' },
		showLabel: { control: 'boolean' },
		min: { control: 'text' },
		max: { control: 'text' },
		step: { control: 'text' },
		size: { control: 'Knob', options: ['small', 'normal', 'large', 'huge'] },
		darknessTheme: { control: 'Knob', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
		darknessNegativeTheme: {
		control: 'Knob',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		theme: {
		control: 'Knob',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		negativeTheme: {
		control: 'Knob',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		} satisfies Meta<typeof Knob>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Simple: Story = {
		args: {
		options: [
		{
		value: 'First',
		},
		{
		value: 'Second',
		},
		{
		value: 'Third',
		},
		],
		},
		};

		export const Full: Story = {
		args: {
		options: [
		{
		value: 'First',
		iconLeft: 'At',
		color: 'purple',
		darknessColor: '800',
		group: 'Group',
		},
		{
		value: 'Second',
		iconRightColor: 'red',
		iconRight: 'Age18',
		group: 'Group',
		},
		{
		iconLeft: 'Calendar',
		value: 'Third',
		iconRight: 'CheckMark',
		group: 'Group 2',
		},
		{
		value: 'Sssss',
		},
		],
		groups: [
		{ name: 'Group', background: 'white', iconLeft: 'Archive' },
		{ name: 'Group 2', background: 'red', iconLeft: 'Badge' },
		],
		placeholder: 'Knob a city',
		size: 'normal',
		width: '250px',
		theme: 'sky',
		background: 'sky',
		darknessTheme: '700',
		darknessBackground: '200',
		openIconColor: 'sky',
		},
		};

src/stories/components/Knob/Knob.vue

0 → 100644

+15 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { IKnobProps } from '@interfaces/componentsProps';

		const props = withDefaults(defineProps<IKnobProps>(), {});
		const value = defineModel('value');
		</script>

		<template>
		<section class="container"></section>
		</template>

		<style scoped>
		.container {
		}
		</style>