reka-ui/dist/Slider/SliderHorizontal.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"SliderHorizontal.cjs","sources":["../../src/Slider/SliderHorizontal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport SliderImpl from './SliderImpl.vue'\nimport { computed, ref, toRefs } from 'vue'\nimport type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\n\ninterface SliderHorizontalProps extends SliderOrientationPrivateProps {\n  dir?: Direction\n}\n\nconst props = defineProps<SliderHorizontalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, dir, inverted } = toRefs(props)\n\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\nconst rootContext = injectSliderRootContext()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromLeft = computed(() => (dir?.value === 'ltr' && !inverted.value) || (dir?.value !== 'ltr' && inverted.value))\n\nfunction getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {\n  const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()\n\n  // Get the currently active thumb element\n  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]\n  const thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.width - thumbWidth]\n  const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]\n  const value = linearScale(input, output)\n\n  rectRef.value = rect\n  const position = slideStart\n    ? event.clientX - rect.left - thumbWidth / 2\n    : event.clientX - rect.left - (offsetPosition.value ?? 0)\n\n  return value(position)\n}\n\nprovideSliderOrientationContext({\n  startEdge: isSlidingFromLeft.value ? 'left' : 'right',\n  endEdge: isSlidingFromLeft.value ? 'right' : 'left',\n  direction: isSlidingFromLeft.value ? 1 : -1,\n  size: 'width',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-50%)',\n    }\"\n    @slide-start=\"(event) => {\n      const value = getValueFromPointerEvent(event, true);\n      emits('slideStart', value)\n    }\"\n    @slide-move=\"(event) => {\n      const value = getValueFromPointerEvent(event);\n      emits('slideMove', value)\n    }\"\n    @slide-end=\"() => {\n      rectRef = undefined;\n      offsetPosition = undefined\n      emits('slideEnd')\n    }\"\n    @step-key-down=\"(event) => {\n      const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n      const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n      emits('stepKeyDown', event, isBackKey ? -1 : 1)\n    }\"\n    @end-key-down=\"emits('endKeyDown', $event)\"\n    @home-key-down=\"emits('homeKeyDown', $event)\"\n  >\n    <slot />\n  </SliderImpl>\n</template>\n"],"names":["toRefs","useForwardExpose","injectSliderRootContext","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,KAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAEhD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AACvE,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAgB,EAAA;AAChC,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAO,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,CAAC,QAAA,CAAS,KAAW,IAAA,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,SAAS,KAAM,CAAA;AAE9H,IAAS,SAAA,wBAAA,CAAyB,OAAqB,UAAsB,EAAA;AAC3E,MAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,KAAS,IAAA,aAAA,CAAc,MAAO,qBAAsB,EAAA;AAGzE,MAAM,MAAA,KAAA,GAAQ,CAAC,GAAG,WAAA,CAAY,cAAc,KAAK,CAAA,CAAE,WAAY,CAAA,qBAAA,CAAsB,KAAK,CAAA;AAC1F,MAAA,MAAM,aAAa,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,WAAc,GAAA,CAAA;AAGxF,MAAI,IAAA,CAAC,eAAe,KAAS,IAAA,CAAC,cAAc,WAAY,CAAA,cAAA,CAAe,UAAU,SAAW,EAAA;AAC1F,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,KAAA,CAAM,uBAAwB,CAAA,IAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,QAAQ,UAAU,CAAA;AAC3D,MAAA,MAAM,MAA2B,GAAA,iBAAA,CAAkB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AACzG,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,GAAO,UAAa,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,IAAQ,eAAe,KAAS,IAAA,CAAA,CAAA;AAEzD,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgCC,4CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,MAAS,GAAA,OAAA;AAAA,MAC9C,OAAA,EAAS,iBAAkB,CAAA,KAAA,GAAQ,OAAU,GAAA,MAAA;AAAA,MAC7C,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,CAAI,GAAA,EAAA;AAAA,MACzC,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}