From f0fcf2a639f7cc6aa6bb9aa412710aab834b226b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Thu, 13 Feb 2025 20:39:34 +0500
Subject: [PATCH] feat: init 'InputDiv'
---
src/common/interfaces/componentsProp.ts | 11 ++++
src/common/interfaces/componentsProps.ts | 14 +++++
src/components/InputDiv/InputDiv.stories.ts | 55 ++++++++++++++++++++
src/components/InputDiv/InputDiv.vue | 57 +++++++++++++++++++++
src/components/Toast/Toast.stories.ts | 2 +-
5 files changed, 138 insertions(+), 1 deletion(-)
create mode 100644 src/components/InputDiv/InputDiv.stories.ts
create mode 100644 src/components/InputDiv/InputDiv.vue
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 7f1a31c..1f7dcb8 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -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;
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index cc0686a..f6b1b0d 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -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;
diff --git a/src/components/InputDiv/InputDiv.stories.ts b/src/components/InputDiv/InputDiv.stories.ts
new file mode 100644
index 0000000..c47fdc9
--- /dev/null
+++ b/src/components/InputDiv/InputDiv.stories.ts
@@ -0,0 +1,55 @@
+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,
+ },
+};
diff --git a/src/components/InputDiv/InputDiv.vue b/src/components/InputDiv/InputDiv.vue
new file mode 100644
index 0000000..0a62abd
--- /dev/null
+++ b/src/components/InputDiv/InputDiv.vue
@@ -0,0 +1,57 @@
+<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>
diff --git a/src/components/Toast/Toast.stories.ts b/src/components/Toast/Toast.stories.ts
index 7b36869..b4c0c5c 100644
--- a/src/components/Toast/Toast.stories.ts
+++ b/src/components/Toast/Toast.stories.ts
@@ -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',
},
},
},
--
GitLab