feat: init 'InputDiv'

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;

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;

src/components/InputDiv/InputDiv.stories.ts

+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

+<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

@@ -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',
       },
     },
   },