element-plus/es/components/scrollbar/src/thumb2.mjs.map

A Component Library for Vue 3

{"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\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { isClient, useEventListener } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    const ns = useNamespace('scrollbar')\n\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const thumbState = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let originalOnSelectStart:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const 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\n    const 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\n    const 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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const 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\n    const 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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const 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\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== originalOnSelectStart)\n        document.onselectstart = originalOnSelectStart\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      ns,\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_vShow"],"mappings":"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"}