{"version":3,"file":"bars.vue2.mjs","sources":["../../../../../packages/components/scrollbar/src/bars.vue"],"sourcesContent":["<template>\n  <!-- 水平滚动条 -->\n  <transition name=\"el-fade-in\">\n    <div\n      v-show=\"(visible.barX && hovered) || moving.x\"\n      :class=\"[ns.e('thumb'), ns.em('thumb', 'x'), ns.is('moving', moving.x)]\"\n      ref=\"barXRef\"\n      :style=\"{ zIndex }\"\n    ></div>\n  </transition>\n\n  <!-- 垂直滚动条 -->\n  <transition name=\"el-fade-in\">\n    <div\n      v-show=\"(visible.barY && hovered) || moving.y\"\n      :class=\"[ns.e('thumb'), ns.em('thumb', 'y'), ns.is('moving', moving.y)]\"\n      ref=\"barYRef\"\n      :style=\"{ zIndex }\"\n    ></div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-ultra/hooks'\nimport {\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowReactive,\n  shallowRef,\n  watch\n} from 'vue'\n\nimport type { BarState, BarX, BarY } from './scrollbar'\n\ndefineProps({\n  zIndex: {\n    type: Number\n  }\n})\n\nconst emit = defineEmits({\n  'scroll-to': (ctx: { left?: number; top?: number }) => true\n})\n\nconst ns = useNamespace('scrollbar')\n\nconst visible = shallowReactive({\n  barX: false,\n  barY: false\n})\n\nconst hovered = shallowRef(false)\n\nconst barX = shallowReactive<BarX>({\n  width: 0,\n  left: 0\n})\n\nconst barY = shallowReactive<BarY>({\n  height: 0,\n  top: 0\n})\n\n// 频繁的事件操作应避免频繁渲染dom, 应该直接操作dom\nconst barXRef = shallowRef<HTMLDivElement>()\nconst barYRef = shallowRef<HTMLDivElement>()\n\nconst updateX = (s: typeof barX) => {\n  const style = barXRef.value?.style\n  if (!style) return false\n  style.width = `${s.width}px`\n  style.transform = `translateX(${s.left}px)`\n  return true\n}\n\nconst updateY = (s: typeof barY) => {\n  const style = barYRef.value?.style\n  if (!style) return false\n  style.height = `${s.height}px`\n  style.transform = `translateY(${s.top}px)`\n  return true\n}\n\nwatch(barX, s => {\n  if (!updateX(s)) {\n    nextTick(() => updateX(s))\n  }\n})\n\nwatch(barY, s => {\n  if (!updateY(s)) {\n    nextTick(() => updateY(s))\n  }\n})\n\n/** 容器状态 */\nconst wrapStyle: BarState['wrapState'] = {\n  offsetWidth: 0,\n  offsetHeight: 0,\n  scrollHeight: 0,\n  scrollWidth: 0,\n  scrollLeft: 0,\n  scrollTop: 0\n}\n\nfunction update(state: BarState) {\n  Object.assign(barX, state.barX)\n  Object.assign(barY, state.barY)\n  Object.assign(visible, state.visible)\n  Object.assign(wrapStyle, state.wrapState)\n}\n\nlet moving = shallowReactive({\n  x: false,\n  y: false\n})\n\nconst setMoving = (type: 'x' | 'y', state: boolean) => {\n  moving[type] = state\n}\n\nconst draggable = (\n  dom: HTMLDivElement,\n  direction: 'x' | 'y',\n  cb: (dis: number) => void\n) => {\n  // 鼠标初始距离, 用于计算拖拽的偏移量\n  let originMousePosition = 0\n  // 滚动条的初始位置\n  let originBarPosition = 0\n  // 当前拖拽的偏移量\n  let dis = 0\n\n  let mouseAttr = direction\n  let onselectstart = document.onselectstart\n\n  const handleMousedown = (e: MouseEvent) => {\n    e.stopPropagation()\n    // 鼠标左键按下有效\n    if (e.button !== 0) return\n\n    setMoving(direction, true)\n\n    window.getSelection()?.removeAllRanges()\n    // 如果绑定了其他的mouseDown事件, 应该阻止掉\n    e.stopImmediatePropagation()\n\n    originMousePosition = e[mouseAttr]\n\n    originBarPosition = direction === 'x' ? barX.left : barY.top\n\n    // 禁止浏览器的选中事件, 直到mouseup事件触发时还原\n    document.onselectstart = () => false\n    document.addEventListener('mousemove', handleMousemove)\n    document.addEventListener('mouseup', handleMouseup)\n  }\n\n  const handleMousemove = (e: MouseEvent) => {\n    dis = e[mouseAttr] - originMousePosition\n\n    cb(originBarPosition + dis)\n  }\n\n  const handleMouseup = (e: MouseEvent) => {\n    setMoving(direction, false)\n\n    document.removeEventListener('mousemove', handleMousemove)\n    document.removeEventListener('mouseup', handleMouseup)\n\n    document.onselectstart = onselectstart\n  }\n\n  dom.addEventListener('mousedown', handleMousedown)\n\n  onBeforeUnmount(() => {\n    dom.removeEventListener('mousedown', handleMousedown)\n  })\n}\n\nonMounted(() => {\n  barYRef.value &&\n    draggable(barYRef.value, 'y', dis => {\n      barY.top =\n        dis < 0\n          ? 0\n          : dis + barY.height > wrapStyle.offsetHeight\n          ? wrapStyle.offsetHeight - barY.height\n          : dis\n\n      emit('scroll-to', {\n        top:\n          (barY.top / (wrapStyle.offsetHeight - barY.height)) *\n          (wrapStyle.scrollHeight - wrapStyle.offsetHeight)\n      })\n    })\n  barXRef.value &&\n    draggable(barXRef.value, 'x', dis => {\n      barX.left =\n        dis < 0\n          ? 0\n          : dis + barX.width > wrapStyle.offsetWidth\n          ? wrapStyle.offsetWidth - barX.width\n          : dis\n\n      emit('scroll-to', {\n        left:\n          (barX.left / (wrapStyle.offsetWidth - barX.width)) *\n          (wrapStyle.scrollWidth - wrapStyle.offsetWidth)\n      })\n    })\n})\n\ndefineExpose({\n  update,\n\n  setHovered(v: boolean) {\n    hovered.value = v\n  }\n})\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false\n}\n</script>\n"],"names":[],"mappings":"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"}