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

Vue port for Radix UI Primitives.

{"version":3,"file":"SliderImpl.cjs","sources":["../../src/Slider/SliderImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport type SliderImplEmits = {\n  slideStart: [event: PointerEvent]\n  slideMove: [event: PointerEvent]\n  slideEnd: [event: PointerEvent]\n  homeKeyDown: [event: KeyboardEvent]\n  endKeyDown: [event: KeyboardEvent]\n  stepKeyDown: [event: KeyboardEvent]\n}\n\nexport interface SliderImplProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { ARROW_KEYS, PAGE_KEYS } from './utils'\n\nconst props = withDefaults(defineProps<SliderImplProps>(), {\n  as: 'span',\n})\nconst emits = defineEmits<SliderImplEmits>()\nconst rootContext = injectSliderRootContext()\n</script>\n\n<template>\n  <Primitive\n    data-slider-impl\n    v-bind=\"props\"\n    @keydown=\"(event) => {\n      if (event.key === 'Home') {\n        emits('homeKeyDown', event)\n        // Prevent scrolling to page start\n        event.preventDefault();\n      }\n      else if (event.key === 'End') {\n        emits('endKeyDown', event)\n        // Prevent scrolling to page end\n        event.preventDefault();\n      }\n      else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n        emits('stepKeyDown', event)\n        // Prevent scrolling for directional key presses\n        event.preventDefault();\n      }\n    }\"\n    @pointerdown=\"(event) => {\n      const target = event.target as HTMLElement;\n      target.setPointerCapture(event.pointerId);\n      // Prevent browser focus behaviour because we focus a thumb manually when values change.\n      event.preventDefault();\n      // Touch devices have a delay before focusing so won't focus if touch immediately moves\n      // away from target (sliding). We want thumb to focus regardless.\n      if (rootContext.thumbElements.value.includes(target)) {\n        target.focus();\n      }\n      else {\n        emits('slideStart', event)\n      }\n    }\"\n    @pointermove=\"(event) => {\n      const target = event.target as HTMLElement;\n      if (target.hasPointerCapture(event.pointerId)) emits('slideMove', event);\n    }\"\n    @pointerup=\"(event) => {\n      const target = event.target as HTMLElement;\n      if (target.hasPointerCapture(event.pointerId)) {\n        target.releasePointerCapture(event.pointerId);\n        emits('slideEnd', event)\n      }\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectSliderRootContext"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}