vexip-ui/lib/components/scrollbar/scrollbar.vue2.cjs.map

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

{"version":3,"file":"scrollbar.vue2.cjs","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","__props","props","useProps","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","_createElementBlock","_createElementVNode","_normalizeClass","_unref","_cache","args"],"mappings":"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"}