fix(Slider): emit valuecommit doesnt triggered (#615)

* fix: slide end wasn't triggering

* chore: emit raw value

* test: capture valueCommit emitted event

packages/radix-vue/src/Slider/Slider.test.ts

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import Slider from './story/_Slider.vue'
+import type SliderImpl from './SliderImpl.vue'
 import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { handleSubmit } from '@/test'
@@ -12,7 +13,7 @@ describe('given default Slider', () => {
     disconnect() {}
   }
   window.HTMLElement.prototype.scrollIntoView = vi.fn()
-  window.HTMLElement.prototype.hasPointerCapture = vi.fn()
+  window.HTMLElement.prototype.hasPointerCapture = vi.fn().mockImplementation(id => id)
   window.HTMLElement.prototype.releasePointerCapture = vi.fn()
   window.HTMLElement.prototype.setPointerCapture = vi.fn()
 
@@ -31,6 +32,42 @@ describe('given default Slider', () => {
     expect(wrapper.html()).toContain('aria-valuenow="50"')
   })
 
+  describe('after pointerdown event on slider-impl', () => {
+    let sliderImpl: VueWrapper<InstanceType<typeof SliderImpl>>
+    beforeEach(async () => {
+      sliderImpl = wrapper.findComponent('[data-slider-impl]') as any
+      await sliderImpl.trigger('pointerdown', { clientX: 10, pointerId: 1 })
+    })
+
+    it('should emit slideStart', async () => {
+      expect(sliderImpl.emitted('slideStart')?.[0]?.[0]).toBe(0)
+    })
+
+    describe('after pointermove', () => {
+      beforeEach(async () => {
+        await sliderImpl.trigger('pointermove', { clientX: 50, pointerId: 1 })
+      })
+
+      it('should emit slideMove', async () => {
+        expect(sliderImpl.emitted('slideMove')?.[0]?.[0]).toBe(0)
+      })
+
+      describe('after pointerup', () => {
+        beforeEach(async () => {
+          await sliderImpl.trigger('pointerup', { pointerId: 1 })
+        })
+
+        it('should emit slideEnd', async () => {
+          expect(sliderImpl.emitted('slideEnd')?.[0]).toStrictEqual([])
+        })
+
+        it('should emit valueCommit on wrapper', async () => {
+          expect(wrapper.emitted('valueCommit')?.[0]?.[0]).toStrictEqual([0])
+        })
+      })
+    })
+  })
+
   describe('after pressing navigation key', () => {
     let slider: DOMWrapper<HTMLElement>
 

packages/radix-vue/src/Slider/SliderRoot.vue

@@ -40,7 +40,7 @@ export const [injectSliderRootContext, provideSliderRootContext]
 <script setup lang="ts">
 import SliderHorizontal from './SliderHorizontal.vue'
 import SliderVertical from './SliderVertical.vue'
-import { ref, toRefs } from 'vue'
+import { ref, toRaw, toRefs } from 'vue'
 import { usePrimitiveElement } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { ARROW_KEYS, PAGE_KEYS, clamp, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'
@@ -90,7 +90,7 @@ function handleSlideEnd() {
   const nextValue = modelValue.value[valueIndexToChangeRef.value]
   const hasChanged = nextValue !== prevValue
   if (hasChanged)
-    emits('valueCommit', modelValue.value)
+    emits('valueCommit', toRaw(modelValue.value))
 }
 
 function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {
@@ -143,7 +143,7 @@ provideSliderRootContext({
     }"
     @slide-start="!disabled && handleSlideStart($event)"
     @slide-move="!disabled && handleSlideMove($event)"
-    @slide-end="!disabled && handleSlideEnd"
+    @slide-end="!disabled && handleSlideEnd()"
     @home-key-down="!disabled && updateValues(min, 0, { commit: true })"
     @end-key-down="!disabled && updateValues(max, modelValue.length - 1, { commit: true })"
     @step-key-down="(event, direction) => {

packages/radix-vue/src/Slider/story/_Slider.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { SliderRootEmits, SliderRootProps } from '../'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '../'
+import { useForwardPropsEmits } from '@/shared'
+
+const props = defineProps<SliderRootProps>()
+const emits = defineEmits<SliderRootEmits>()
 
 const sliderValue = ref([50])
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <SliderRoot
+    v-bind="forwarded"
     v-model="sliderValue"
     name="slider"
     class="relative flex items-center select-none touch-none w-[200px] h-5"