{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { isClient, useEventListener } from '@vueuse/core'\nimport { scrollbarContextKey } from '@vuesax-plus/tokens'\nimport { throwError } from '@vuesax-plus/utils'\nimport { useNamespace } from '@vuesax-plus/hooks'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst startDrag = (e: MouseEvent) => {\n  e.stopImmediatePropagation()\n  cursorDown = true\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst mouseUpDocumentHandler = () => {\n  cursorDown = false\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  restoreOnselectstart()\n  if (cursorLeave) visible.value = false\n}\n\nconst mouseMoveScrollbarHandler = () => {\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":[],"mappings":"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"}