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

src/common/interfaces/componentsProp.ts

+11 −0

Original line number	Diff line number	Diff line
		@@ -98,6 +98,17 @@ export interface ISelectGroup {
		iconRightColor?: TThemeColor;
		}

		export type TInputDivScheme =
		\| `${number}by${number}`
		\| `${number}-${number}`
		\| `${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}`
		\| `${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}-${number}`;

		export interface ISBOption {
		label: string;
		value?: never;

src/common/interfaces/componentsProps.ts

+14 −0

Original line number	Diff line number	Diff line
		@@ -19,6 +19,7 @@ import type {
		ISliderOptions,
		ITableColumn,
		ITreeItem,
		TInputDivScheme,
		TToastType,
		} from '@interfaces/componentsProp';

		@@ -223,6 +224,19 @@ export interface ISelectProps {
		noBackground?: boolean;
		}

		export interface IInputDivProps {
		scheme?: TInputDivScheme;
		size?: TSize;
		secret?: boolean;
		dashed?: boolean;
		numbersOnly?: boolean;
		bottomOnly?: boolean;
		theme?: TThemeColor;
		darknessTheme?: TDarkness;
		textColor?: TThemeColor;
		darknessTextColor?: TDarkness;
		}

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

src/components/InputDiv/InputDiv.stories.ts

0 → 100644

+55 −0

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

		import InputDiv from './InputDiv.vue';

		const meta: Meta = {
		title: 'Components/InputDiv',
		component: InputDiv,
		tags: ['pick'],
		parameters: {
		docs: {
		description: {
		component: 'One of the options for implementing input.',
		},
		},
		},
		argTypes: {
		size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
		secret: { control: 'boolean' },
		dashed: { control: 'boolean' },
		numbersOnly: { control: 'boolean' },
		bottomOnly: { control: 'boolean' },
		scheme: { control: 'text' },
		theme: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		args: {},
		} satisfies Meta<typeof InputDiv>;

		export default meta;

		type Story = StoryObj<typeof meta>;

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

src/components/InputDiv/InputDiv.vue

0 → 100644

+57 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { IInputDivProps } from '@interfaces/componentsProps';
		import { computed } from 'vue';
		import { convertThemeToColor, convertThemeToTextColor, getValueFromSize } from '@helpers/common';

		const props = withDefaults(defineProps<IInputDivProps>(), {
		scheme: '4by1',
		size: 'normal',
		theme: 'white',
		});

		const inputPartsBy = computed(() => {
		if (!props.scheme.includes('by')) return null;
		const splat = props.scheme.split('by');
		const by = splat[1];
		const result = [];
		for (let i = 0; i < +splat[0]; i++) {
		result.push(Array(by).keys());
		}
		return result;
		});
		const inputPartsDash = computed(() => {
		if (!props.scheme.includes('-')) return null;
		return props.scheme.split('-').map((item) => Array(item).keys());
		});

		const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
		const color = computed(() =>
		props.textColor
		? convertThemeToColor(props.textColor, props.darknessTextColor)
		: convertThemeToTextColor(props.theme, props.darknessTheme),
		);
		const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2, 3]));
		</script>

		<template>
		<section class="inputDiv-container">
		{{ inputPartsBy }}
		{{ inputPartsDash }}
		<div v-show="inputPartsBy" class="list">
		<div v-for="item of inputPartsBy" :key="item" class="item"><input type="text" class="input" /></div>
		</div>
		<div v-show="inputPartsDash" class="list">
		<div v-for="item of inputPartsDash" :key="item" class="item"><input type="text" class="input" /></div>
		</div>
		</section>
		</template>

		<style scoped>
		.list {
		display: flex;
		gap: 20px;
		}
		.input {
		border: 1px solid black;
		}
		</style>

src/components/Toast/Toast.stories.ts

+1 −1

Original line number	Diff line number	Diff line
		@@ -11,7 +11,7 @@ const meta: Meta = {
		parameters: {
		docs: {
		description: {
		component: 'A component is used to categorize content. Can be used with icons.',
		component: 'A component to display messages in an overlay',
		},
		},
		},