@extclp/vexip-ui/es/components/scrollbar/scrollbar.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"scrollbar.vue2.mjs","sources":["../../../components/scrollbar/scrollbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  toRef,\n  watch,\n  watchEffect\n} from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { useManualRef, useRtl, useSetTimeout } from '@vexip-ui/hooks'\nimport { USE_TOUCH, boundRange, isDefined, throttle } from '@vexip-ui/utils'\nimport { scrollbarProps } from './props'\nimport { useTrack } from './hooks'\nimport { ScrollbarType, scrollbarPlacements } from './symbol'\n\ndefineOptions({ name: 'Scrollbar' })\n\nconst _props = defineProps(scrollbarProps)\nconst props = useProps('scrollbar', _props, {\n  placement: {\n    default: 'right',\n    validator: value => scrollbarPlacements.includes(value)\n  },\n  scroll: {\n    default: 0,\n    validator: value => value >= 0 && value <= 100,\n    static: true\n  },\n  barLength: {\n    default: 35,\n    validator: value => value > 0 && value < 100\n  },\n  width: null,\n  appear: false,\n  fade: 1500,\n  barColor: null,\n  trackColor: null,\n  disabled: false,\n  wrapper: null,\n  duration: null,\n  useTrack: false,\n  trackSpeed: {\n    default: 2,\n    validator: value => value > 0 && value < 10\n  }\n})\n\nconst nh = useNameHelper('scrollbar')\nconst active = ref(false)\nconst scrolling = ref(false)\n\nconst { manualRef, triggerUpdate } = useManualRef()\n\nconst { isRtl } = useRtl()\n\nconst currentScroll = manualRef(props.scroll)\n\nconst container = ref<HTMLElement>()\nconst bar = ref<HTMLElement>()\nconst track = ref<HTMLElement>()\n\nconst { timer } = useSetTimeout()\n\nconst type = computed(() => {\n  return props.placement === 'right' || props.placement === 'left'\n    ? ScrollbarType.VERTICAL\n    : ScrollbarType.HORIZONTAL\n})\n\nconst { tracking, handleMouseDown: handleTrackMouseDown } = useTrack({\n  currentScroll,\n  track,\n  bar,\n  type,\n  trackSpeed: toRef(props, 'trackSpeed'),\n  barLength: toRef(props, 'barLength'),\n  disabled: toRef(props, 'disabled'),\n  onDown: scroll => {\n    clearTimeout(timer.fade)\n    emitEvent(props.onScrollStart, scroll)\n  },\n  // onMove: () => clearTimeout(timer.fade),\n  onUp: scroll => {\n    setScrollbarFade()\n    triggerUpdate()\n    emitEvent(props.onScrollEnd, scroll)\n  },\n  onScroll: scroll => {\n    triggerUpdate()\n    emitEvent(props.onScroll, scroll)\n  }\n})\n\nconst className = computed(() => {\n  return [\n    nh.b(),\n    nh.bs('vars'),\n    nh.bm(props.placement),\n    {\n      [nh.bm('inherit')]: props.inherit,\n      [nh.bm('fade')]: props.fade,\n      [nh.bm('scrolling')]: scrolling.value,\n      [nh.bm('tracking')]: tracking.value,\n      [nh.bm('active')]: active.value,\n      [nh.bm('disabled')]: props.disabled\n    }\n  ]\n})\nconst style = computed<Record<string, string>>(() => {\n  return {\n    [nh.cv('bar-bg-color')]: props.barColor,\n    [nh.cv('track-bg-color')]: props.trackColor,\n    [nh.cv('width')]: props.width ? `${props.width}px` : null!\n  }\n})\n\nwatch(\n  () => props.scroll,\n  value => {\n    currentScroll.value = value\n    triggerUpdate()\n  }\n)\nwatchEffect(() => {\n  if (!bar.value) return\n\n  const position = `${((100 - props.barLength) * currentScroll.value) / props.barLength}%`\n  const length = `${props.barLength}%`\n\n  if (type.value === ScrollbarType.VERTICAL) {\n    bar.value.style.height = length\n    bar.value.style.transform = `translate3d(0, ${position}, 0)`\n  } else {\n    bar.value.style.width = length\n    bar.value.style.transform = `translate3d(${isRtl.value ? '-' : ''}${position}, 0, 0)`\n  }\n})\nwatchEffect(() => {\n  if (!bar.value) return\n\n  bar.value.style.transitionDuration =\n    isDefined(props.duration) && props.duration >= 0 ? `${props.duration}ms` : ''\n})\n\nif (props.appear) {\n  watch(currentScroll, () => {\n    clearTimeout(timer.fade)\n    active.value = true\n\n    if (!scrolling.value && !tracking.value) {\n      setScrollbarFade()\n    }\n  })\n}\n\nconst handleWrapperMouseMove = throttle(() => {\n  clearTimeout(timer.fade)\n\n  if (props.disabled) {\n    active.value = false\n  } else {\n    active.value = true\n\n    if (!scrolling.value && !tracking.value) {\n      setScrollbarFade()\n    }\n  }\n})\n\nlet wrapperElement: HTMLElement | null\n\nonMounted(() => {\n  let instance = getCurrentInstance()\n\n  nextTick(() => {\n    if (typeof props.wrapper === 'string') {\n      wrapperElement = document.querySelector(props.wrapper)\n    } else {\n      wrapperElement = props.wrapper\n    }\n\n    if (!wrapperElement) {\n      if (instance?.parent) {\n        wrapperElement = instance.parent.proxy?.$el\n\n        if (!wrapperElement) {\n          wrapperElement = container.value?.parentElement ?? null\n        }\n      } else {\n        wrapperElement = container.value?.parentElement ?? null\n      }\n    }\n\n    if (wrapperElement && props.fade >= 300) {\n      wrapperElement.addEventListener('mousemove', handleWrapperMouseMove)\n    }\n\n    instance = null\n\n    if (!props.appear) {\n      watch(currentScroll, () => {\n        clearInterval(timer.fade)\n        active.value = true\n        setScrollbarFade()\n      })\n    }\n  })\n})\n\nonBeforeUnmount(() => {\n  if (wrapperElement) {\n    wrapperElement.removeEventListener('mousemove', handleWrapperMouseMove)\n  }\n\n  wrapperElement = null\n  clearTimeout(timer.fade)\n})\n\ndefineExpose({\n  currentScroll,\n  container,\n  bar,\n  track,\n  handleScroll\n})\n\nlet length: number\nlet startAt: number\nlet cursorAt: number\n\nfunction handleMouseDown(event: PointerEvent) {\n  if (event.button !== 0 || props.disabled) {\n    return false\n  }\n\n  event.stopPropagation()\n  event.preventDefault()\n\n  if (!track.value || !bar.value) return false\n\n  document.addEventListener('pointermove', handleMouseMove)\n  document.addEventListener('pointerup', handleMouseUp)\n\n  const rect = track.value.getBoundingClientRect()\n  const barRect = bar.value.getBoundingClientRect()\n\n  if (type.value === ScrollbarType.VERTICAL) {\n    length = rect.height\n    startAt = barRect.top - rect.top\n    cursorAt = event.clientY\n  } else {\n    length = rect.width\n    startAt = isRtl.value ? barRect.right - rect.right : barRect.left - rect.left\n    cursorAt = event.clientX\n  }\n\n  clearTimeout(timer.fade)\n\n  scrolling.value = true\n  emitEvent(props.onScrollStart, currentScroll.value)\n}\n\nfunction handleMouseMove(event: PointerEvent) {\n  event.stopPropagation()\n\n  if (!USE_TOUCH) {\n    event.preventDefault()\n  }\n\n  let position: number\n\n  if (type.value === ScrollbarType.VERTICAL) {\n    position = startAt + event.clientY - cursorAt\n  } else {\n    position = isRtl.value\n      ? -(startAt + event.clientX - cursorAt)\n      : startAt + event.clientX - cursorAt\n  }\n\n  // position / length * 100 === (100 - barLength) * currentScroll / 100\n  currentScroll.value = (position / length / (100 - props.barLength)) * 1e4\n\n  verifyScroll()\n  triggerUpdate()\n  emitEvent(props.onScroll, currentScroll.value)\n}\n\nfunction handleMouseUp(event: PointerEvent) {\n  event.preventDefault()\n\n  document.removeEventListener('pointermove', handleMouseMove)\n  document.removeEventListener('pointerup', handleMouseUp)\n\n  setScrollbarFade()\n\n  scrolling.value = false\n  emitEvent(props.onScrollEnd, currentScroll.value)\n}\n\nfunction verifyScroll() {\n  currentScroll.value = Math.max(0, Math.min(currentScroll.value, 100))\n}\n\nfunction setScrollbarFade() {\n  if (props.fade >= 300) {\n    timer.fade = setTimeout(() => {\n      active.value = false\n    }, props.fade)\n  }\n}\n\nfunction handleScroll(scroll: number) {\n  if (Math.abs(currentScroll.value - scroll) < 0.0001) return\n\n  currentScroll.value = boundRange(scroll, 0, 100)\n  triggerUpdate()\n}\n\nfunction disableEvent<E extends Event>(event: E) {\n  if (event.cancelable) {\n    event.stopPropagation()\n    event.preventDefault()\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    :class=\"className\"\n    role=\"scrollbar\"\n    :style=\"style\"\n  >\n    <div\n      ref=\"track\"\n      :class=\"[nh.be('track'), props.useTrack ? null : nh.bem('track', 'disabled')]\"\n      @touchstart=\"disableEvent\"\n      @pointerdown=\"handleTrackMouseDown\"\n    ></div>\n    <div\n      ref=\"bar\"\n      :class=\"nh.be('bar')\"\n      @touchstart=\"disableEvent\"\n      @pointerdown=\"handleMouseDown\"\n    ></div>\n  </div>\n</template>\n"],"names":["props","useProps","__props","value","scrollbarPlacements","nh","useNameHelper","active","ref","scrolling","manualRef","triggerUpdate","useManualRef","isRtl","useRtl","currentScroll","container","bar","track","timer","useSetTimeout","type","computed","ScrollbarType","tracking","handleTrackMouseDown","useTrack","toRef","scroll","emitEvent","setScrollbarFade","className","style","watch","watchEffect","position","length","isDefined","handleWrapperMouseMove","throttle","wrapperElement","onMounted","instance","getCurrentInstance","nextTick","_a","_b","_c","onBeforeUnmount","__expose","handleScroll","startAt","cursorAt","handleMouseDown","event","handleMouseMove","handleMouseUp","rect","barRect","USE_TOUCH","verifyScroll","boundRange","disableEvent"],"mappings":"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"}