From f2b696d1182eaf7225c542e1ac6abe4c78291aee 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: Sat, 1 Mar 2025 15:48:50 +0500
Subject: [PATCH] fix: some bugs

---
 package.json                             |  2 +-
 src/common/interfaces/componentsProps.ts |  1 +
 src/components/Select/Select.stories.ts  | 21 +++++++++++++++++++++
 src/components/Select/Select.vue         |  8 ++++++--
 src/components/Table/Table.stories.ts    |  7 +++++++
 src/components/Tag/Tag.vue               | 20 +++++++++++---------
 6 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 27928c2..d6740fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d.malygin/UI_storybook",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 2c4417f..4b0fc5e 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -213,6 +213,7 @@ export interface ISelectProps {
   width?: string;
   listHeight?: string;
   placeholder?: string;
+  color?: TThemeColor;
   openIcon?: TIcon;
   size?: TSize;
   fontSize?: string;
diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 8e2ba8d..c1055d6 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -16,6 +16,7 @@ const meta: Meta = {
   },
   argTypes: {
     width: { control: 'text' },
+    listHeight: { control: 'text' },
     filtered: { control: 'boolean' },
     disabled: { control: 'boolean' },
     noHighlight: { control: 'boolean' },
@@ -47,6 +48,26 @@ const meta: Meta = {
         'black',
       ],
     },
+    color: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
     openIconColor: {
       control: 'select',
       options: [
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index ec2fdd8..a9e8b68 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -55,7 +55,11 @@ const selectedTextWidth = computed(() => {
 });
 const fontSizeNumber = computed(() => fontSize.value.slice(0, -2));
 const textColor = computed(() =>
-  props.disabled ? '#62708c' : convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
+  props.disabled
+    ? '#62708c'
+    : props.color
+      ? convertThemeToColor(props.color, props.darknessTheme ?? '700')
+      : convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
 );
 const borderColor = computed(() => (props.noBorder ? 'transparent' : textColor.value));
 const backgroundColor = computed(() =>
@@ -137,7 +141,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
           },
         ]"
       >
-        <div :style="`overflow: auto; height: ${listHeight ?? 'auto'}`">
+        <div :style="`overflow: auto; max-height: ${listHeight ?? 'auto'}`">
           <div class="flex filter" v-if="filtered" @click="isOpen = true">
             <input v-model="filter" type="text" /><SearchIcon :size="fontSizeNumber" color="#62708c" />
           </div>
diff --git a/src/components/Table/Table.stories.ts b/src/components/Table/Table.stories.ts
index f87a930..7bbe5fb 100644
--- a/src/components/Table/Table.stories.ts
+++ b/src/components/Table/Table.stories.ts
@@ -167,11 +167,13 @@ export const Full: Story = {
       ['Ксюша', '32', 'Frontend', 'Russia', false, 'Married', 0, 30, 2],
       ['Ксюша', '32', 'Backend', 'Russia', false, 'Married', 0, 30, 2],
     ],
+
     noEditingSettings: {
       columns: [2],
       rows: [3],
       cells: [[0, 6]],
     },
+
     fontSize: '24px',
     showAllLines: true,
     border: 'fuchsia',
@@ -181,5 +183,10 @@ export const Full: Story = {
     center: true,
     size: 'large',
     editable: true,
+    paginator: true,
+
+    paginatorOptions: {
+      itemsPerPageOptions: [5, 10, 20, 40],
+    },
   },
 };
diff --git a/src/components/Tag/Tag.vue b/src/components/Tag/Tag.vue
index c6bc653..3518799 100644
--- a/src/components/Tag/Tag.vue
+++ b/src/components/Tag/Tag.vue
@@ -27,15 +27,17 @@ const padding = computed(() => getValueFromSize(props.size, ['3px 7px', '5px 11p
 </script>
 
 <template>
-  <div
-    class="container"
-    :style="`border-radius: ${rounded ? fontSize : `calc(${fontSize} / 2)`}; gap: calc(${fontSize} / 2.5); border: ${['normal', 'small'].includes(size) ? '1px' : '2px'} solid ${borderColor}`"
-  >
-    <slot name="icon-left"></slot>
-    <component v-show="iconLeft" :is="iconsSet[iconLeft ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
-    <span class="text">{{ value }}</span>
-    <component v-show="iconRight" :is="iconsSet[iconRight ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
-    <slot name="icon-right"></slot>
+  <div>
+    <section
+      class="container"
+      :style="`border-radius: ${rounded ? fontSize : `calc(${fontSize} / 2)`}; gap: calc(${fontSize} / 2.5); border: ${['normal', 'small'].includes(size) ? '1px' : '2px'} solid ${borderColor}`"
+    >
+      <slot name="icon-left"></slot>
+      <component v-show="iconLeft" :is="iconsSet[iconLeft ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
+      <span class="text">{{ value }}</span>
+      <component v-show="iconRight" :is="iconsSet[iconRight ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
+      <slot name="icon-right"></slot>
+    </section>
   </div>
 </template>
 
-- 
GitLab