fix: some bugs

package.json

 {
   "name": "@d.malygin/UI_storybook",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "scripts": {
     "dev": "vite",

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;

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: [

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>

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],
+    },
   },
 };

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>