From 4809c4e0ac7f6aadc62fdb7fd7cf6158a93ec449 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: Fri, 17 Jan 2025 16:03:23 +0500
Subject: [PATCH] docs: README.md

---
 README.md                              |  5 +++--
 package.json                           |  3 +++
 src/stories/components/Knob/Knob.vue   | 13 +++++++------
 src/stories/components/Knob/helpers.ts |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 8b46a97..3e593b3 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@
 - Slider;
 - Drawer;
 - Modal;
+- Knob;
 - Select;
 - SelectButton;
 - Button;
@@ -22,8 +23,8 @@
 
 ---
 ## Общая информация
-### Components count: 14
-### Bundle size: 287.4KB
+### Components count: 15
+### Bundle size: 292.7KB
 
 ---
 
diff --git a/package.json b/package.json
index d29dba7..6d95ea9 100644
--- a/package.json
+++ b/package.json
@@ -52,5 +52,8 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "volta": {
+    "node": "23.6.0"
   }
 }
diff --git a/src/stories/components/Knob/Knob.vue b/src/stories/components/Knob/Knob.vue
index 3e0a74b..169c6ae 100644
--- a/src/stories/components/Knob/Knob.vue
+++ b/src/stories/components/Knob/Knob.vue
@@ -59,7 +59,8 @@ const buttonPadding = computed(() => {
         ? '0.5rem 0.75rem'
         : '0.7rem 1rem';
 });
-const backgroundSize = computed(() => `${containerSize.value.slice(0, -2) * 0.71}px`);
+const buttonWidth = computed(() => `${+textSize.value.slice(0, -3) * 0.78}rem`);
+const backgroundSize = computed(() => `${+containerSize.value.slice(0, -2) * 0.71}px`);
 const themeColor = computed(() => calcThemeColor(props.colorGaps, props.theme, props.darknessTheme, value.value));
 const textColor = computed(() => convertThemeToColor(props.color, props.darknessColor));
 const backgroundCircle = computed(() => {
@@ -78,7 +79,7 @@ const conicGradient = computed(() => {
   return `conic-gradient(transparent 0deg 225deg, ${themeColor.value} 225deg ${valueDeg}deg, transparent ${valueDeg}deg 360deg)`;
 });
 
-const setNewValue = ($event) => {
+const setNewValue = ($event: MouseEvent) => {
   value.value = calcNewValue(
     $event,
     center.value,
@@ -89,7 +90,7 @@ const setNewValue = ($event) => {
     value.value,
   );
 };
-const onPointerDown = ($event) => {
+const onPointerDown = ($event: MouseEvent) => {
   isClickHold.value = true;
   setNewValue($event);
 };
@@ -114,7 +115,7 @@ const onPointerDown = ($event) => {
     <div class="circle containerSize">
       <div class="circle containerSize selected"></div>
     </div>
-    <div v-if="buttons" class="buttons" :style="`gap: ${textSize.slice(0, -3) * 3}px`">
+    <div v-if="buttons" class="buttons" :style="`gap: ${+textSize.slice(0, -3) * 3}px`">
       <Button
         @click="value++"
         :theme="negativeTheme"
@@ -123,7 +124,7 @@ const onPointerDown = ($event) => {
         label="+"
         textStyle="bold"
         :padding="buttonPadding"
-        :width="`${textSize.slice(0, -3) * 0.78}rem`"
+        :width="buttonWidth"
       ></Button>
       <Button
         @click="value--"
@@ -133,7 +134,7 @@ const onPointerDown = ($event) => {
         label="-"
         textStyle="bold"
         :padding="buttonPadding"
-        :width="`${textSize.slice(0, -3) * 0.78}rem`"
+        :width="buttonWidth"
       ></Button>
     </div>
   </section>
diff --git a/src/stories/components/Knob/helpers.ts b/src/stories/components/Knob/helpers.ts
index abc880e..2a53cd0 100644
--- a/src/stories/components/Knob/helpers.ts
+++ b/src/stories/components/Knob/helpers.ts
@@ -40,7 +40,7 @@ export const calcStart = (container: Element) => {
 };
 
 export const calcThemeColor = (
-  colorGaps: IKnobColorGap[],
+  colorGaps: IKnobColorGap[] | undefined,
   theme: TThemeColor,
   darknessTheme: TDarkness,
   value: number,
-- 
GitLab