{"version":3,"file":"thumb.vue.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, ref } from 'vue'\n  import { getComponentNamespace, getNamespace } from '../../../utils/global-config'\n  import { on, off } from '../../../utils/dom'\n  import { thumbProps } from './thumb'\n  import type { ThumbMap } from './types'\n\n  export default defineComponent({\n    name: getComponentNamespace('Thumb'),\n    props: thumbProps,\n    emits: ['scroll'],\n    setup(props, { emit }) {\n      const track_ns = getNamespace('scrollbar-track')\n      const trackCls = computed(() => [track_ns, `${track_ns}__${props.direction}`])\n      const thumb_ns = getNamespace('scrollbar-thumb')\n      const thumbCls = computed(() => [\n        thumb_ns,\n        `${thumb_ns}__${props.direction}`,\n        isDragging.value && 'is-dragging'\n      ])\n\n      const trackRef = ref<HTMLElement>()\n      const thumbRef = ref<HTMLElement>()\n\n      const thumbMap = computed<ThumbMap>(() => {\n        if (props.direction === 'horizontal') {\n          return {\n            size: 'width',\n            direction: 'left',\n            offset: 'offsetWidth',\n            client: 'clientX'\n          }\n        }\n        return {\n          size: 'height',\n          direction: 'top',\n          offset: 'offsetHeight',\n          client: 'clientY'\n        }\n      })\n\n      const offset = ref(0)\n\n      const isDragging = ref(false)\n      const mouseOffset = ref(0)\n\n      const thumbStyle = computed(() => {\n        return {\n          [thumbMap.value.size]: `${props.data?.thumbSize ?? 0}px`,\n          [thumbMap.value.direction]: `${offset.value}px`\n        }\n      })\n\n      const handleThumbMouseDown = (ev: MouseEvent) => {\n        ev.preventDefault()\n        if (thumbRef.value) {\n          mouseOffset.value =\n            ev[thumbMap.value.client] -\n            thumbRef.value.getBoundingClientRect()[thumbMap.value.direction]\n          isDragging.value = true\n          on(window, 'mousemove', handleMouseMove)\n          on(window, 'mouseup', handleMouseUp)\n          on(window, 'contextmenu', handleMouseUp)\n        }\n      }\n\n      const handleTrackClick = (ev: MouseEvent) => {\n        ev.preventDefault()\n\n        if (thumbRef.value) {\n          const _offset = getLegalOffset(\n            ev[thumbMap.value.client] >\n              thumbRef.value.getBoundingClientRect()[thumbMap.value.direction]\n              ? offset.value + (props.data?.thumbSize ?? 0)\n              : offset.value - (props.data?.thumbSize ?? 0)\n          )\n          if (_offset !== offset.value) {\n            offset.value = _offset\n            emit('scroll', _offset)\n          }\n        }\n      }\n\n      const getLegalOffset = (offset: number) => {\n        if (offset < 0) {\n          return 0\n        }\n        if (props.data && offset > props.data.max) {\n          return props.data.max\n        }\n        return offset\n      }\n\n      const handleMouseMove = (ev: MouseEvent) => {\n        if (trackRef.value && thumbRef.value) {\n          const _offset = getLegalOffset(\n            ev[thumbMap.value.client] -\n              trackRef.value.getBoundingClientRect()[thumbMap.value.direction] -\n              mouseOffset.value\n          )\n          if (_offset !== offset.value) {\n            offset.value = _offset\n            emit('scroll', _offset)\n          }\n        }\n      }\n\n      const handleMouseUp = () => {\n        isDragging.value = false\n        off(window, 'mousemove', handleMouseMove)\n        off(window, 'mouseup', handleMouseUp)\n      }\n\n      const setOffset = (_offset: number) => {\n        if (!isDragging.value) {\n          _offset = getLegalOffset(_offset)\n          if (_offset !== offset.value) {\n            offset.value = _offset\n          }\n        }\n      }\n\n      return {\n        trackCls,\n        thumbCls,\n        thumb_ns,\n        trackRef,\n        thumbRef,\n        handleThumbMouseDown,\n        handleTrackClick,\n        thumbStyle,\n        setOffset\n      }\n    },\n    expose: ['setOffset']\n  })\n</script>\n\n<template>\n  <div ref=\"trackRef\" :class=\"trackCls\" @mousedown.self=\"handleTrackClick\">\n    <div ref=\"thumbRef\" :class=\"thumbCls\" :style=\"thumbStyle\" @mousedown=\"handleThumbMouseDown\">\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_withModifiers","thumbCls","_normalizeStyle"],"mappings":";;;;SA2IW,YAAU,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAAO,EAAA,OAAAA,WAAA,EAAAC,kBAAA;AAAA,IAAU,KAAA;AAAA,IAAA;AAAA,MAAG,GAAA,EAAA,UAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,QAAA,CAAA;AAAA,MACrC,aACM,MAAA,CAAA,CAAA,MAAA,MAAA,CAAA,CAAA,IAAAC,aAAA,CAAA,CAAA,GAAA,SAAA,IAAA,CAAA,gBAAA,IAAA,KAAA,gBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAAA;;QADoB,KAAA;AAAA,QAAEC;AAAAA,UAAW,GAAK,EAAA,UAAA;AAAA,UAAe,KAAA,EAASF,cAAA,CAAA,IAAA,CAAA,QAAA,CAAA;AAAA,UAAA,KAAA,EAAAG,cAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;;;;;;;;;;;;;"}