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

src/components/InputDiv/InputDiv.stories.ts

+26 −3

Original line number	Diff line number	Diff line
		@@ -20,6 +20,11 @@ const meta: Meta = {
		numbersOnly: { control: 'boolean' },
		bottomOnly: { control: 'boolean' },
		scheme: { control: 'text' },
		darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
		darknessTextColor: {
		control: 'select',
		options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
		},
		theme: {
		control: 'select',
		options: [
		@@ -40,6 +45,26 @@ const meta: Meta = {
		'black',
		],
		},
		textColor: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		args: {},
		} satisfies Meta<typeof InputDiv>;
		@@ -49,7 +74,5 @@ export default meta;
		type Story = StoryObj<typeof meta>;

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

src/components/InputDiv/InputDiv.vue

+72 −23

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

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

		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 value = defineModel() as Ref<string>;
		const container = document.querySelector('#inputDiv-container');

		const inputPartsBy = computed(() => calcPartsBy(props.scheme));
		const inputPartsDash = computed(() => calcPartsDash(props.scheme));

		const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
		const color = computed(() =>
		@@ -30,18 +24,65 @@ const color = computed(() =>
		? convertThemeToColor(props.textColor, props.darknessTextColor)
		: convertThemeToTextColor(props.theme, props.darknessTheme),
		);
		const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2, 3]));
		const inputWidth = computed(() => getValueFromSize(props.size, ['20px', '24px', '30px', '45px']));
		const inputHeight = computed(() => getValueFromSize(props.size, ['30px', '36px', '45px', '67px']));
		const fontSize = computed(() => getValueFromSize(props.size, ['12px', '16px', '24px', '32px']));
		const borderWidth = computed(() => (props.size === 'small' \|\| props.size === 'normal' ? '1px' : '2px'));

		const toggleInput = () => {};
		</script>

		<template>
		<section class="inputDiv-container">
		{{ inputPartsBy }}
		{{ inputPartsDash }}
		<section id="inputDiv-container">
		<div v-show="inputPartsBy" class="list">
		<div v-for="item of inputPartsBy" :key="item" class="item"><input type="text" class="input" /></div>
		<div
		v-for="(item, itemIndex) of inputPartsBy"
		:key="item"
		:class="[
		'item',
		{
		itemIndex,
		},
		]"
		>
		<input
		v-for="(input, inputIndex) of item"
		:key="inputIndex"
		@change="toggleInput(itemIndex, inputIndex)"
		type="text"
		:class="[
		'input',
		{
		inputIndex,
		},
		]"
		/>
		</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
		v-for="(item, itemIndex) of inputPartsDash"
		:key="item"
		:class="[
		'item',
		{
		itemIndex,
		},
		]"
		>
		<input
		v-for="(input, inputIndex) of item"
		:key="inputIndex"
		@change="toggleInput(itemIndex, inputIndex)"
		type="text"
		:class="[
		'input',
		{
		inputIndex,
		},
		]"
		/>
		</div>
		</div>
		</section>
		</template>
		@@ -49,9 +90,17 @@ const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2,
		<style scoped>
		.list {
		display: flex;
		gap: 20px;
		gap: v-bind(fontSize);
		}
		.input {
		border: 1px solid black;
		all: unset;
		width: v-bind(inputWidth);
		height: v-bind(inputHeight);
		font-size: v-bind(fontSize);
		text-align: center;
		background-color: v-bind(themeColor);
		color: v-bind(color);
		border: v-bind(borderWidth) solid black;
		border-radius: 5px;
		}
		</style>

src/components/InputDiv/helpers.ts

0 → 100644

+30 −0

Original line number	Diff line number	Diff line
		import type { TInputDivScheme } from '@interfaces/componentsProp';

		export const calcPartsBy = (scheme: TInputDivScheme) => {
		if (!scheme.includes('by')) return null;
		const splat = scheme.split('by');
		const by = splat[1];
		const result = [];
		for (let i = 0; i < +splat[0]; i++) {
		const arrayToPush = [];
		for (let j = 0; j < +by; j++) {
		arrayToPush.push(j);
		}
		result.push(arrayToPush);
		}
		return result;
		};
		export const calcPartsDash = (scheme: TInputDivScheme) => {
		if (!scheme.includes('-')) return null;
		const splat = scheme.split('-');
		const result = [];
		for (let i = 0; i < splat.length; i++) {
		const item = splat[i];
		const arrayToPush = [];
		for (let j = 0; j < +item; j++) {
		arrayToPush.push(j);
		}
		result.push(arrayToPush);
		}
		return result;
		};