From f231e41ff88916d55523820b6234d09738b956c9 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, 24 Jan 2025 21:31:12 +0500
Subject: [PATCH] feat: make 'ProgressBar' editable

---
 .../ProgressBar/ProgressBar.stories.ts        |  2 ++
 src/components/ProgressBar/ProgressBar.vue    | 34 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/ProgressBar/ProgressBar.stories.ts b/src/components/ProgressBar/ProgressBar.stories.ts
index 307dde9..79fe005 100644
--- a/src/components/ProgressBar/ProgressBar.stories.ts
+++ b/src/components/ProgressBar/ProgressBar.stories.ts
@@ -24,6 +24,7 @@ const meta: Meta = {
     noBorder: { control: 'boolean' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     fontSize: { control: 'text' },
+    gradient: { control: 'object' },
     colorGaps: { control: 'object' },
     colorInactiveGaps: { control: 'object' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
@@ -93,6 +94,7 @@ export const Small: Story = {
     inactiveTheme: 'red',
     labelAfter: '/100',
     width: '500px',
+    gradient: ['red', 'yellow', 'green'],
   },
 };
 
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
index 61cd383..f515341 100644
--- a/src/components/ProgressBar/ProgressBar.vue
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { IProgressBarProps } from '@interfaces/componentsProps';
-import { computed } from 'vue';
+import { computed, ref, type Ref } from 'vue';
 import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IProgressBarProps>(), {
@@ -14,16 +14,22 @@ const props = withDefaults(defineProps<IProgressBarProps>(), {
   showLabel: true,
   labelAfter: '%',
 });
-const active = computed(() => `${(props.value / props.max) * 100}%`);
+const value = defineModel() as Ref<number>;
+
+if (props.value) {
+  value.value = props.value;
+}
+const active = computed(() => `${(value.value / props.max) * 100}%`);
 const activeColor = computed(() => {
+  if (props.gradient) return `linear-gradient(to right, ${props.gradient.join(',')})`;
   if (!props.colorGaps) return convertThemeToColor(props.theme, props.darknessTheme);
-  const current = props.colorGaps.find((item) => item.start <= props.value && props.value <= item.end);
+  const current = props.colorGaps.find((item) => item.start <= value.value && value.value <= item.end);
   if (!current) return convertThemeToColor(props.theme, props.darknessTheme);
   return convertThemeToColor(current.color, current.darknessColor);
 });
 const inactiveColor = computed(() => {
   if (!props.colorInactiveGaps) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
-  const current = props.colorInactiveGaps.find((item) => item.start <= props.value && props.value <= item.end);
+  const current = props.colorInactiveGaps.find((item) => item.start <= value.value && value.value <= item.end);
   if (!current) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
   return convertThemeToColor(current.color, current.darknessColor);
 });
@@ -43,12 +49,27 @@ const defaultHeight = computed(() => {
   if (size === 'huge') return '60px';
   return '15px';
 });
+
+const isClickHold = ref<boolean>(false);
+
+const setNewValue = (event: MouseEvent) => {
+  const layerX = event.layerX;
+  value.value = Math.round((layerX / (props.width ? parseInt(props.width) : 300)) * props.max);
+};
+const onPointerDown = (event: MouseEvent) => {
+  isClickHold.value = true;
+  setNewValue(event);
+};
 </script>
 
 <template>
   <section
     class="container"
+    id="progressBar"
     :style="`width: ${width ?? '300px'}; height: ${height ?? defaultHeight}; border: ${noBorder ? '' : '2px solid black'}`"
+    @pointerdown.prevent="onPointerDown($event)"
+    @pointermove="isClickHold ? setNewValue($event) : ''"
+    @pointerup="isClickHold = false"
   >
     <div class="active">
       <span v-show="showLabel" class="value">{{ labelBefore }}{{ value }}{{ labelAfter }}</span>
@@ -62,6 +83,7 @@ const defaultHeight = computed(() => {
   overflow: hidden;
   border-radius: calc(v-bind(fontSize) / 2.5);
   background-color: v-bind(inactiveColor);
+  cursor: pointer;
 }
 .active {
   width: v-bind(active);
@@ -73,12 +95,12 @@ const defaultHeight = computed(() => {
   position: absolute;
   top: 0;
   left: 0;
-  transition: width 0.4s ease-in-out;
-  background-color: v-bind(activeColor);
+  background: v-bind(activeColor);
 }
 .value {
   font-weight: bold;
   font-size: v-bind(fontSize);
   color: v-bind(textColor);
+  user-select: none;
 }
 </style>
-- 
GitLab