From 32b724838fd6ec24f32a5683a42eea72346b56c9 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: Wed, 25 Dec 2024 16:16:21 +0500
Subject: [PATCH] fix: darkness logic and type errors

---
 src/App.vue                                   | 232 +++++++++---------
 src/common/interfaces/common.ts               |   4 +
 src/common/interfaces/componentsProps.ts      |   4 +
 .../components/Button/Button.stories.ts       |  20 --
 src/stories/components/Drawer/Drawer.vue      |  12 +-
 src/stories/components/MenuDial/MenuDial.vue  |   2 +-
 src/stories/components/Modal/Modal.vue        |   9 +-
 src/stories/components/Popup/Popup.stories.ts |   1 -
 src/stories/components/Popup/Popup.vue        |  21 +-
 src/stories/components/Slider/Slider.vue      |   8 +-
 src/stories/components/TreeList/TreeItems.vue |   2 +-
 .../components/TreeList/TreeList.stories.ts   |  21 ++
 src/stories/components/TreeList/TreeList.vue  |   5 +-
 13 files changed, 183 insertions(+), 158 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c8ef7e7..f312152 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,7 +113,7 @@ import Modal from '@stories/components/Modal/Modal.vue';
 import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
 import Popup from '@stories/components/Popup/Popup.vue';
 
-const gentleIcons = [
+const gentleIcons = {
   Age18Icon,
   AirplaneIcon,
   AlarmIcon,
@@ -217,8 +217,8 @@ const gentleIcons = [
   TrashIcon,
   TriangleIcon,
   UserIcon,
-];
-const visibleDrawer = ref(true);
+};
+const visibleDrawer = ref(false);
 const sliderOptions: ISliderOptions[] = [
   {
     label: 0,
@@ -289,121 +289,120 @@ const sliderValue = ref(1);
 </script>
 
 <template>
-  <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
-  <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
-    <Button
-      @click="
-        () => {
-          popupActive = false;
-          visible = true;
-        }
-      "
-      label="Открыть модальное окно"
-    />
-  </Popup>
-  <Popup v-model:active="popupActive2" theme="sky"
-    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
-    voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero! Lorem
-    ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas.
-    Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup
-  >
-
-  <Modal v-model:visible="visible" theme="red" @onClose="onClose"
-    ><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
-    explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
-    nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus? Lorem ipsum dolor sit
-    amet, consectetur adipisicing elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima
-    necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam
-    repellat saepe temporibus?</Modal
-  >
-  <MenuDial
-    v-model:active="active"
-    theme="sky"
-    direction="right"
-    darknessTheme="600"
-    :items="[
-      {
-        label: 'font-family',
-        theme: 'green',
-        color: 'red',
-        darknessColor: '500',
-        link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
-        linkBlank: true,
-        textStyle: 'bold',
-      },
-      {
-        label: 'Second',
-        theme: 'red',
-        color: 'sky',
-        darknessColor: '500',
-        darknessTheme: '600',
-        textStyle: 'italic',
-      },
-    ]"
-  >
-    <template #1IconBefore>
-      <AnchorLinkIcon size="20" color="white" />
-    </template>
-    <template #2IconBefore>
-      <CrossIcon color="white" />
-    </template>
-    <template #2IconAfter>
-      <CrossIcon color="white" />
-    </template>
-  </MenuDial>
-  <Slider
-    v-model:value="sliderValue"
-    :options="sliderOptions"
-    orientation="vertical"
-    width="400"
-    min="0"
-    max="18"
-    step="2"
-    backgroundColor="black"
-    theme="blue"
-    isSmooth
-  />
-  <Button @click="visible = true" textColor="white" theme="sky" label="I'm a button"></Button>
-  <Button @click="visible = true" theme="sky" darknessTheme="600" label="I'm a button"></Button>
-  <Button @click="visible = true" theme="sky" darknessTheme="700" label="I'm a button"></Button>
-  <SelectButton :options="options" size="large" v-model:value="value">
-    <template #1Icon>
-      <TrashIcon />
-    </template>
-  </SelectButton>
-  <ToggleSwitch />
-  <Drawer v-model:visible="visibleDrawer" theme="sky" closeIcon="CropIcon">
-    <template #header>Это - Drawer</template>
-    <p>
-      pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
-      adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
-      fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
-      consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
-      molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
-      sit amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi illum impedit
-      iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum dolor
-      sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum labore qui
-      rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit. pizdwertyuki
-      lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga fugit, modi, nam
-      necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur
-      adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio
-      optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit amet,
-      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque explicabo, facere
-      fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil
-      officia, pariatur praesentium quas quisquam repellat saepe temporibus?
-    </p>
-    <template #footer> pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template></Drawer
-  >
   <main class="main">
     <h2 class="title"><span class="mono">Mono</span> icons</h2>
     <ul class="iconsList">
-      <li class="iconsItem" v-for="icon of gentleIcons" :key="icon.__name">
-        <component :is="icon" class="icon" />
-        <span class="iconName">{{ icon.__name!.slice(0, -4) }}</span>
+      <li class="iconsItem" v-for="icon of Object.entries(gentleIcons)" :key="icon[0]">
+        <component :is="icon[1]" class="icon" />
+        <span class="iconName">{{ icon[0].slice(0, -4) }}</span>
       </li>
     </ul>
+    <h2 class="title gradient-text">Playground</h2>
     <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>
+    <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
+    <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
+      <Button
+        @click="
+          () => {
+            popupActive = false;
+            visible = true;
+          }
+        "
+        label="Открыть модальное окно"
+      />
+    </Popup>
+    <Popup v-model:active="popupActive2" theme="sky"
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
+      voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
+      voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut
+      vero!</Popup
+    >
+
+    <Modal v-model:visible="visible" theme="red" @onClose="onClose"
+      ><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
+      explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
+      nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus? Lorem ipsum dolor sit
+      amet, consectetur adipisicing elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima
+      necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas
+      quisquam repellat saepe temporibus?</Modal
+    >
+    <MenuDial
+      v-model:active="active"
+      theme="sky"
+      direction="right"
+      darknessTheme="600"
+      :items="[
+        {
+          label: 'font-family',
+          theme: 'green',
+          color: 'red',
+          darknessColor: '500',
+          link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+          linkBlank: true,
+          textStyle: 'bold',
+        },
+        {
+          label: 'Second',
+          theme: 'red',
+          color: 'sky',
+          darknessColor: '500',
+          darknessTheme: '600',
+          textStyle: 'italic',
+        },
+      ]"
+    >
+      <template #1IconBefore>
+        <AnchorLinkIcon size="20" color="white" />
+      </template>
+      <template #2IconBefore>
+        <CrossIcon color="white" />
+      </template>
+      <template #2IconAfter>
+        <CrossIcon color="white" />
+      </template>
+    </MenuDial>
+    <Slider
+      v-model:value="sliderValue"
+      :options="sliderOptions"
+      width="400"
+      min="0"
+      max="18"
+      step="2"
+      backgroundColor="black"
+      theme="blue"
+      isSmooth
+    />
+    <Button @click="visible = true" textColor="white" theme="sky" label="I'm a button"></Button>
+    <SelectButton :options="options" size="large" v-model:value="value">
+      <template #1Icon>
+        <TrashIcon />
+      </template>
+    </SelectButton>
+    <ToggleSwitch />
+    <Drawer v-model:visible="visibleDrawer" theme="sky" :dismissible="false" closeIcon="CropIcon">
+      <template #header>Это - Drawer</template>
+      <p>
+        pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
+        adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
+        fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
+        consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
+        molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
+        sit amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi illum impedit
+        iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum
+        dolor sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum
+        labore qui rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit.
+        pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
+        adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga
+        fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,
+        consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto
+        molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor
+        sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
+        explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu
+        nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus?
+      </p>
+      <template #footer> pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template></Drawer
+    >
   </main>
 </template>
 
@@ -441,12 +440,15 @@ const sliderValue = ref(1);
   font-style: italic;
 }
 .testButton {
-  position: absolute;
-  right: 50px;
-  top: 50px;
   background-color: red;
+  margin-bottom: 30px;
   color: white;
   padding: 10px;
   border-radius: 5px;
 }
+.gradient-text {
+  background: linear-gradient(to right, hotpink, yellow, dodgerblue);
+  background-clip: text;
+  color: transparent;
+}
 </style>
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 81df894..7a0383a 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -36,3 +36,7 @@ export type TPosition = 'top' | 'right' | 'bottom' | 'left';
 export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 
 export type TBorder = 'solid' | 'dashed' | 'dotted';
+
+export interface CustomWindow extends Window {
+  blockPopupActions?: boolean;
+}
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8812742..7334b83 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -36,6 +36,8 @@ export interface ITLProps {
   maxWidth?: number;
   expand?: boolean;
   theme?: TThemeColor;
+  textColor?: TThemeColor;
+  darknessTextColor?: TDarkness;
   darknessTheme?: TDarkness;
 }
 
@@ -91,7 +93,9 @@ export interface IDrawerProps {
 
 export interface IModalProps {
   theme?: TThemeColor;
+  textColor?: TThemeColor;
   darknessTheme?: TDarkness;
+  darknessTextColor?: TDarkness;
   width?: string;
   height?: string;
   position?: TExpandedPosition;
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index a53ebe4..f14c35f 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -64,26 +64,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    border: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
   },
   args: {},
 } satisfies Meta<typeof Button>;
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index 20f4d7e..7051f70 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, type Ref, watch } from 'vue';
 import { iconsSet } from '@/common/constants/icons';
 import type { IDrawerProps } from '@interfaces/componentsProps';
 import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
+import type { CustomWindow } from '@interfaces/common';
 
 const props = withDefaults(defineProps<IDrawerProps>(), {
-  visible: false,
   position: 'left',
   width: 400,
   modal: true,
@@ -21,15 +21,19 @@ const emit = defineEmits(['onClose']);
 const visible = defineModel<boolean>('visible', {
   set(value) {
     if (!value) {
+      (window as CustomWindow).blockPopupActions = false;
       body.style.overflow = 'auto';
+      body.style.paddingRight = '0';
       emit('onClose');
     }
     return value;
   },
-});
+}) as Ref<boolean>;
 watch(visible, () => {
   if (visible.value) {
+    (window as CustomWindow).blockPopupActions = true;
     body.style.overflow = 'hidden';
+    body.style.paddingRight = '14px';
   }
 });
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
@@ -54,7 +58,7 @@ const drawerWidth = computed(() => {
           drawerBackgroundOpened: visible,
         },
       ]"
-      @pointerdown.stop="dismissible ? (visible = false) : ''"
+      @pointerdown="() => (dismissible ? (visible = false) : '')"
     ></section>
     <section
       :style="`color: ${color}; background-color: ${themeColor}`"
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
index b0711ed..95a0856 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -61,7 +61,7 @@ const openLink = (url: string, isBlank: boolean | undefined) => window.open(url,
 const calcItemColor = (item: IMDItemProps) => {
   return item.color
     ? convertThemeToColor(item.color, item.darknessColor)
-    : item.theme === 'white' || +((item.darknessTheme ?? '500') <= 600 && item.theme !== 'black')
+    : item.theme === 'white' || (+(item.darknessTheme ?? '500') <= 600 && item.theme !== 'black')
       ? 'black'
       : 'white';
 };
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index 74cd2c4..940c990 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -3,6 +3,7 @@ import { computed, watch } from 'vue';
 import type { IModalProps } from '@interfaces/componentsProps';
 import { iconsSet } from '@/common/constants/icons';
 import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
+import type { CustomWindow } from '@interfaces/common';
 
 const props = withDefaults(defineProps<IModalProps>(), {
   visible: false,
@@ -20,7 +21,9 @@ const emit = defineEmits(['onClose']);
 const visible = defineModel('visible', {
   set(value) {
     if (!value) {
+      (window as CustomWindow).blockPopupActions = false;
       body.style.overflow = 'auto';
+      body.style.paddingRight = '0';
       emit('onClose');
     }
     return value;
@@ -28,7 +31,9 @@ const visible = defineModel('visible', {
 });
 watch(visible, () => {
   if (visible.value) {
+    (window as CustomWindow).blockPopupActions = true;
     body.style.overflow = 'hidden';
+    body.style.paddingRight = '14px';
   }
 });
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
@@ -53,7 +58,7 @@ document.addEventListener('keydown', onKeydown);
           openedModalBackground: visible,
         },
       ]"
-      @click.prevent="() => (dismissible ? (visible = false) : false)"
+      @pointerdown="() => (dismissible ? (visible = false) : false)"
     ></section>
     <section
       :style="`color: ${color}; background-color: ${themeColor}; width: ${width}; height: ${height}`"
@@ -105,7 +110,7 @@ document.addEventListener('keydown', onKeydown);
   opacity: 1;
 }
 .modal {
-  position: absolute;
+  position: fixed;
   z-index: -50;
   min-width: 250px;
   min-height: 100px;
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/stories/components/Popup/Popup.stories.ts
index 20cdd34..e1e6313 100644
--- a/src/stories/components/Popup/Popup.stories.ts
+++ b/src/stories/components/Popup/Popup.stories.ts
@@ -42,7 +42,6 @@ const meta: Meta = {
       ],
     },
   },
-  args: {},
 } satisfies Meta<typeof Popup>;
 
 export default meta;
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
index 8b107ba..e1e154d 100644
--- a/src/stories/components/Popup/Popup.vue
+++ b/src/stories/components/Popup/Popup.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { IPopupProps } from '@interfaces/componentsProps';
-import { computed, ref } from 'vue';
+import { computed, type Ref, ref } from 'vue';
 import { convertThemeToColor, convertThemeToSecondaryColor } from '@helpers/common';
+import type { CustomWindow } from '@interfaces/common';
 
 const props = withDefaults(defineProps<IPopupProps>(), {
   parentSelector: 'body',
@@ -12,33 +13,33 @@ const props = withDefaults(defineProps<IPopupProps>(), {
   padding: '5px',
   darknessTheme: '500',
 });
-const active = defineModel<boolean>('active');
+const active = defineModel<boolean>('active') as Ref<boolean>;
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
 
 const top = ref();
 const left = ref();
-const isContainer = ref();
+const isOnContainerClick = ref();
 
 const container = document.querySelector(props.parentSelector);
 if (container) {
   container.addEventListener('pointerdown', (event: Event) => {
     const e = event as PointerEvent;
     if (e.button === 2) {
-      isContainer.value = true;
-      if (!active.value) active.value = true;
-      top.value = e.clientY;
-      left.value = e.clientX;
+      isOnContainerClick.value = true;
+      if (!active.value && !(window as CustomWindow).blockPopupActions) active.value = true;
+      top.value = e.pageY;
+      left.value = e.pageX;
       e.stopPropagation();
     }
   });
   container.addEventListener('contextmenu', (e) => {
-    if (isContainer.value) e.preventDefault();
+    if (isOnContainerClick.value) e.preventDefault();
   });
 }
 
 document.addEventListener('pointerdown', (e) => {
-  if (e.button === 0) active.value = false;
+  if (e.button === 0 && !(window as CustomWindow).blockPopupActions) active.value = false;
 });
 </script>
 
@@ -58,7 +59,7 @@ document.addEventListener('pointerdown', (e) => {
 
 <style scoped>
 #popup {
-  position: fixed;
+  position: absolute;
   transition: opacity 0.2s ease-in-out;
   background-color: v-bind(themeColor);
   border: 1px solid v-bind(secondaryColor);
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
index e618b2c..d772589 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/stories/components/Slider/Slider.vue
@@ -72,7 +72,7 @@ const marksListPadding = computed(() => `${Math.floor(+sliderButtonSize.value.sl
         verticalSlider: orientation === 'vertical',
       },
     ]"
-    :style="`width: ${width}px`"
+    :style="`width: ${width}px; margin-bottom: ${orientation === 'vertical' ? +width / 2 + 'px' : 0}`"
   >
     <input v-model="optionValue" type="range" class="slider" :min="min ?? 0" :max="max ?? 100" :step="step ?? 1" />
     <div v-if="options?.length">
@@ -131,7 +131,10 @@ const marksListPadding = computed(() => `${Math.floor(+sliderButtonSize.value.sl
 }
 .verticalSlider {
   margin-top: v-bind(widthHalf);
-  transform: rotate(270deg);
+  transform: rotate(270deg) translateY(-100%);
+}
+.verticalSlider .marksList {
+  padding-bottom: 0;
 }
 datalist {
   display: flex;
@@ -150,6 +153,7 @@ option {
   margin-bottom: 5px;
   font-size: 10px;
   padding: 0 v-bind(marksListPadding);
+  padding-bottom: 20px;
 }
 .mark {
   display: flex;
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
index 48a8ed8..81f871e 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -41,7 +41,7 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
             ]"
             :color="
               item.color && item.isTriangleToColor
-                ? convertThemeToColor(item.color, item.darknessColor ?? '500')
+                ? convertThemeToColor(item.color!, item.darknessColor ?? '500')
                 : color
             "
             size="17"
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index cf724bc..a1eb0b5 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -19,6 +19,7 @@ const meta: Meta = {
     maxWidth: { control: 'number' },
     expand: { control: 'boolean' },
     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: [
@@ -39,6 +40,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 TreeList>;
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/stories/components/TreeList/TreeList.vue
index a6a8d41..c7153f0 100644
--- a/src/stories/components/TreeList/TreeList.vue
+++ b/src/stories/components/TreeList/TreeList.vue
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<ITLProps>(), {
   theme: 'white',
   maxWidth: 300,
   darknessTheme: '500',
+  expand: false,
 });
 const emit = defineEmits(['onClick']);
 const items = computed(() => props.items);
@@ -28,9 +29,9 @@ const state = ref<IStateItem[]>([]);
 const setItemChildrenToState = (items: ITreeItem[]) => {
   for (const item of items) {
     state.value.push({
-      isOpen: props?.expand,
+      isOpen: props.expand,
       label: item.label,
-    });
+    } as IStateItem);
     if (item.children) {
       setItemChildrenToState(item.children);
     }
-- 
GitLab