feat(range): content inset support and active handle in useRangeEditor

Author: jtydhr88

src/composables/useRangeEditor.test.ts

@@ -50,6 +50,7 @@ interface HarnessOptions {
   valueMax?: number
   showMidpoint?: boolean
   track?: HTMLElement | null
+  contentInsetX?: number
 }
 
 interface Harness {
@@ -72,6 +73,7 @@ const mountRangeEditor = (opts: HarnessOptions = {}): Harness => {
   const valueMin = ref(opts.valueMin ?? 0)
   const valueMax = ref(opts.valueMax ?? 100)
   const showMidpoint = ref(opts.showMidpoint ?? true)
+  const contentInsetX = ref(opts.contentInsetX ?? 0)
 
   let api: ReturnType<typeof useRangeEditor> | undefined
   const TestComponent = defineComponent({
@@ -81,7 +83,8 @@ const mountRangeEditor = (opts: HarnessOptions = {}): Harness => {
         modelValue,
         valueMin,
         valueMax,
-        showMidpoint
+        showMidpoint,
+        contentInsetX
       })
       return () => null
     }
@@ -323,4 +326,44 @@ describe('useRangeEditor', () => {
       expect.arrayContaining(['pointermove', 'pointerup', 'lostpointercapture'])
     )
   })
+
+  it('maps pointer at content inset to valueMin when contentInsetX is set', () => {
+    harness = mountRangeEditor({
+      initial: { min: 20, max: 80, midpoint: 0.5 },
+      valueMin: 0,
+      valueMax: 100,
+      showMidpoint: false,
+      contentInsetX: 16
+    })
+
+    harness.api.startDrag(
+      'min',
+      createPointerEvent('pointerdown', { clientX: 16 })
+    )
+    harness.trackRef.value!.dispatchEvent(
+      createPointerEvent('pointermove', { clientX: 16 })
+    )
+
+    expect(harness.modelValue.value.min).toBe(0)
+  })
+
+  it('maps pointer at right content inset to valueMax when contentInsetX is set', () => {
+    harness = mountRangeEditor({
+      initial: { min: 0, max: 80, midpoint: 0.5 },
+      valueMin: 0,
+      valueMax: 100,
+      showMidpoint: false,
+      contentInsetX: 16
+    })
+
+    harness.api.startDrag(
+      'max',
+      createPointerEvent('pointerdown', { clientX: 184 })
+    )
+    harness.trackRef.value!.dispatchEvent(
+      createPointerEvent('pointermove', { clientX: 184 })
+    )
+
+    expect(harness.modelValue.value.max).toBe(100)
+  })
 })

src/composables/useRangeEditor.ts

@@ -14,14 +14,16 @@ interface UseRangeEditorOptions {
   valueMin: Ref<number>
   valueMax: Ref<number>
   showMidpoint: Ref<boolean>
+  contentInsetX?: Ref<number>
 }
 
 export function useRangeEditor({
   trackRef,
   modelValue,
   valueMin,
   valueMax,
-  showMidpoint
+  showMidpoint,
+  contentInsetX
 }: UseRangeEditorOptions) {
   const activeHandle = ref<HandleType | null>(null)
   let cleanupDrag: (() => void) | null = null
@@ -30,7 +32,13 @@ export function useRangeEditor({
     const el = trackRef.value
     if (!el) return valueMin.value
     const rect = el.getBoundingClientRect()
-    const normalized = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+    const inset = contentInsetX?.value ?? 0
+    const contentWidth = Math.max(rect.width - 2 * inset, 1)
+    const normalized = clamp(
+      (e.clientX - rect.left - inset) / contentWidth,
+      0,
+      1
+    )
     return denormalize(normalized, valueMin.value, valueMax.value)
   }
 
@@ -108,6 +116,7 @@ export function useRangeEditor({
 
   return {
     handleTrackPointerDown,
-    startDrag
+    startDrag,
+    activeHandle
   }
 }