reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 5.2 kB
Source Map (JSON)
{"version":3,"file":"SliderVertical.cjs","sources":["../../src/Slider/SliderVertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport SliderImpl from './SliderImpl.vue'\nimport { computed, ref, toRefs } from 'vue'\nimport type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\n\ninterface SliderVerticalProps extends SliderOrientationPrivateProps {}\nconst props = defineProps<SliderVerticalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, inverted } = toRefs(props)\n\nconst rootContext = injectSliderRootContext()\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromBottom = computed(() => !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 thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0\n\n // Calculate offset for dragging, but only when needed\n if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top\n }\n\n // Define the input range (slider track width minus thumb width)\n const input: [number, number] = [0, rect.height - thumbHeight]\n const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]\n const value = linearScale(input, output)\n\n const position = slideStart\n ? event.clientY - rect.top - thumbHeight / 2\n : event.clientY - rect.top - (offsetPosition.value ?? 0)\n\n rectRef.value = rect\n return value(position)\n}\n\nprovideSliderOrientationContext({\n startEdge: isSlidingFromBottom.value ? 'bottom' : 'top',\n endEdge: isSlidingFromBottom.value ? 'top' : 'bottom',\n size: 'height',\n direction: isSlidingFromBottom.value ? 1 : -1,\n})\n</script>\n\n<template>\n <SliderImpl\n :ref=\"forwardRef\"\n data-orientation=\"vertical\"\n :style=\"{\n ['--reka-slider-thumb-transform' as any]:\n !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(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 = isSlidingFromBottom ? 'from-bottom' : 'from-top';\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","injectSliderRootContext","useForwardExpose","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;AASA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAE3C,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAgB,EAAA;AAChC,IAAA,MAAM,mBAAsB,GAAAC,YAAA,CAAS,MAAM,CAAC,SAAS,KAAK,CAAA;AAE1D,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,cAAc,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,YAAe,GAAA,CAAA;AAG1F,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,GAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,SAAS,WAAW,CAAA;AAC7D,MAAA,MAAM,MAA2B,GAAA,mBAAA,CAAoB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3G,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,GAAM,WAAc,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,IAAO,eAAe,KAAS,IAAA,CAAA,CAAA;AAExD,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgCC,4CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,QAAW,GAAA,KAAA;AAAA,MAClD,OAAA,EAAS,mBAAoB,CAAA,KAAA,GAAQ,KAAQ,GAAA,QAAA;AAAA,MAC7C,IAAM,EAAA,QAAA;AAAA,MACN,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,CAAI,GAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}