@coreui/vue-pro 5.8.0 → 5.9.0

package/src/components/range-slider/CRangeSlider.ts

@@ -155,6 +155,7 @@ const CRangeSlider = defineComponent({
           : [props.value],
     )
     const isDragging = ref(false)
+    const _isRTL = ref(false)
     const dragIndex = ref(0)
     const thumbSize = ref<ThumbSize | null>()
 
@@ -187,17 +188,18 @@ const CRangeSlider = defineComponent({
       }
 
       if (rangeSliderRef.value) {
+        _isRTL.value = isRTL(rangeSliderRef.value)
         thumbSize.value = getThumbSize(rangeSliderRef.value, props.vertical)
       }
     })
 
     watch(isDragging, (newVal) => {
       if (newVal) {
-        window.addEventListener('mousemove', handleMouseMove)
-        window.addEventListener('mouseup', handleMouseUp)
+        globalThis.addEventListener('mousemove', handleMouseMove)
+        globalThis.addEventListener('mouseup', handleMouseUp)
       } else {
-        window.removeEventListener('mousemove', handleMouseMove)
-        window.removeEventListener('mouseup', handleMouseUp)
+        globalThis.removeEventListener('mousemove', handleMouseMove)
+        globalThis.removeEventListener('mouseup', handleMouseUp)
       }
     })
 
@@ -238,7 +240,7 @@ const CRangeSlider = defineComponent({
     }
 
     const handleInputsContainerMouseDown = (event: MouseEvent) => {
-      if (!trackRef.value) return
+      if (!trackRef.value || event.button !== 0) return
 
       const clickValue = calculateClickValue(
         event,
@@ -247,7 +249,7 @@ const CRangeSlider = defineComponent({
         props.max,
         props.step,
         props.vertical,
-        isRTL(rangeSliderRef.value),
+        _isRTL.value,
       )
 
       const index = getNearestValueIndex(clickValue, currentValue.value)
@@ -257,8 +259,8 @@ const CRangeSlider = defineComponent({
       updateNearestValue(clickValue)
     }
 
-    const handleLabelClick = (value: number) => {
-      if (!props.clickableLabels || props.disabled) return
+    const handleLabelClick = (event: MouseEvent, value: number) => {
+      if (!props.clickableLabels || props.disabled || event.button !== 0) return
 
       updateNearestValue(value)
     }
@@ -273,7 +275,7 @@ const CRangeSlider = defineComponent({
         props.max,
         props.step,
         props.vertical,
-        isRTL(rangeSliderRef.value),
+        _isRTL.value,
       )
 
       const newCurrentValue = updateValue(
@@ -348,7 +350,7 @@ const CRangeSlider = defineComponent({
                           value,
                           thumbSize.value,
                           props.vertical,
-                          isRTL(rangeSliderRef.value),
+                          _isRTL.value,
                         ),
                       }),
                     },
@@ -363,7 +365,13 @@ const CRangeSlider = defineComponent({
               h('div', {
                 class: 'range-slider-track',
                 ...(props.track && {
-                  style: updateGradient(props.min, props.max, currentValue.value, props.vertical),
+                  style: updateGradient(
+                    props.min,
+                    props.max,
+                    currentValue.value,
+                    props.vertical,
+                    _isRTL.value,
+                  ),
                 }),
                 ref: trackRef,
               }),
@@ -387,7 +395,11 @@ const CRangeSlider = defineComponent({
                 )
                 const labelValue = getLabelValue(props.min, props.max, props.labels, label, index)
                 const labelStyle = {
-                  ...(props.vertical ? { bottom: labelPosition } : { left: labelPosition }),
+                  ...(props.vertical
+                    ? { bottom: labelPosition }
+                    : _isRTL.value
+                      ? { right: labelPosition }
+                      : { left: labelPosition }),
                   ...(typeof label === 'object' && 'style' in label ? label.style : {}),
                 }
 
@@ -402,7 +414,7 @@ const CRangeSlider = defineComponent({
                       typeof label === 'object' && 'className' in label ? label.className : '',
                     ],
                     style: labelStyle,
-                    onMousedown: () => handleLabelClick(labelValue),
+                    onMousedown: (event) => handleLabelClick(event, labelValue),
                     key: index,
                     ref: (el) => {
                       labelsRef.value[index] = el as HTMLDivElement

package/src/components/range-slider/utils.ts

@@ -172,14 +172,20 @@ export const roundToStep = (number: number, step: number) => {
   return Math.round(number / _step) * _step
 }
 
-export const updateGradient = (min: number, max: number, values: number[], vertical: boolean) => {
+export const updateGradient = (
+  min: number,
+  max: number,
+  values: number[],
+  vertical: boolean,
+  rtl: boolean,
+) => {
   const minVal = Math.min(...values)
   const maxVal = Math.max(...values)
 
   const from = ((minVal - min) / (max - min)) * 100
   const to = ((maxVal - min) / (max - min)) * 100
 
-  const direction = vertical ? 'to top' : 'to right'
+  const direction = vertical ? 'to top' : rtl ? 'to left' : 'to right'
 
   return {
     backgroundImage: