vue-gantt-3/es/components/scrollbar/ScrollBar.vue.mjs.map

A gantt component for Vue 3

{"version":3,"file":"ScrollBar.vue.mjs","sources":["../../../../src/components/scrollbar/ScrollBar.vue"],"sourcesContent":["<template>\n  <div class=\"vg-scrollbar\"\n       :style=\"{paddingBottom: horizontalVisible ? `${scrollbarHeight}px` : 0,\n                paddingRight: verticalVisible ? `${scrollbarWidth}px` : 0}\">\n    <div ref=\"wrapRef\"\n         class=\"vg-scrollbar-wrap\"\n         :class=\"wrapClass\"\n         :style=\"wrapStyle\"\n         @wheel=\"handleWheel\"\n         @scroll=\"handleScroll\">\n      <component\n        :is=\"tag\"\n        ref=\"resizeRef\"\n        class=\"vg-scrollbar-view\"\n        :class=\"viewClass\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <Bar\n      ref=\"barRef\"\n      :scrollbarWidth=\"scrollbarWidth\"\n      :scrollbarHeight=\"scrollbarHeight\"\n      :horizontalWidth=\"horizontalWidth\"\n      :verticalHeight=\"verticalHeight\"\n      :horizontalVisible=\"horizontalVisible\"\n      :verticalVisible=\"verticalVisible\"\n      @triggerScrollFromThumb=\"triggerScrollFromThumb\"/>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport { ref, provide, watch } from 'vue';\nimport { useResizeObserver } from '@vueuse/core';\nimport Bar from './Bar.vue';\nimport type BarInstance from './Bar.vue';\n\nexport interface Props {\n  tag?: string,\n  viewClass?: string,\n  wrapClass?: string,\n  viewStyle?: StyleValue,\n  wrapStyle?: StyleValue,\n  interceptShiftScroll?: boolean,\n  alwayHorizontal?: boolean, // Horizontal scroll bar is always displayed\n  alwayVertical?: boolean // Vertical scroll bar is always displayed\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  tag: 'div',\n  alwayHorizontal: false,\n  alwayVertical: false,\n  interceptShiftScroll: false\n});\n\nconst emit = defineEmits<{\n  (event: 'scroll', { scrollTop, scrollLeft }: {scrollTop: number, scrollLeft: number}): void,\n  (event: 'resize', target: HTMLDivElement): void,\n  (event: 'wrapResize', target: HTMLDivElement): void,\n  (event: 'shiftScroll', e: WheelEvent): void,\n  (event: 'wheel', e: WheelEvent): void,\n  (event: 'verticalScrollBarShow', { show, scrollbarWidth }: {show: boolean, scrollbarWidth: number}): void,\n}>();\n\nconst resizeRef = ref<HTMLDivElement>();\nconst wrapRef = ref<HTMLDivElement>();\nconst barRef = ref<InstanceType<typeof BarInstance>>();\nconst horizontalWidth = ref(0);\nconst verticalHeight = ref(0);\nconst horizontalVisible = ref(false);\nconst verticalVisible = ref(false);\nconst scrollFromThumb = ref(false);\n\nprovide(\n  'wrapRef',\n  wrapRef\n);\n\nprovide(\n  'scrollFromThumb',\n  scrollFromThumb\n);\n\nfunction getScrollbarSize () {\n  const outer = document.createElement('div');\n  outer.style.visibility = 'hidden';\n  outer.style.overflow = 'scroll';\n  document.body.appendChild(outer);\n\n  const inner = document.createElement('div');\n  inner.style.height = '100%';\n  outer.appendChild(inner);\n\n  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);\n  const scrollbarHeight = (outer.offsetHeight - inner.offsetHeight);\n\n  document.body.removeChild(outer);\n\n  return { scrollbarWidth, scrollbarHeight };\n}\n\nconst { scrollbarWidth, scrollbarHeight } = getScrollbarSize();\n\nwatch(verticalVisible, (val) => {\n  emit('verticalScrollBarShow', { show: val, scrollbarWidth });\n});\n\nconst onResize = () => {\n  if (!resizeRef.value || !wrapRef.value) return;\n  const resizeRefWidth = resizeRef.value?.offsetWidth;\n  const resizeRefHeight = resizeRef.value?.offsetHeight;\n  const wrapRefOffsetWidth = wrapRef.value?.offsetWidth;\n  const wrapRefOffsetHeight = wrapRef.value?.offsetHeight;\n\n  horizontalWidth.value = resizeRefWidth;\n  verticalHeight.value = resizeRefHeight;\n\n  if (resizeRefWidth > wrapRefOffsetWidth) {\n    horizontalVisible.value = true;\n  } else {\n    horizontalVisible.value = props.alwayHorizontal || false;\n  }\n\n  if (resizeRefHeight > wrapRefOffsetHeight) {\n    verticalVisible.value = true;\n  } else {\n    verticalVisible.value = props.alwayVertical || false;\n  }\n\n};\n\nconst onWrapResize = () => {\n  wrapRef.value && emit('resize', wrapRef.value);\n};\n\nuseResizeObserver(resizeRef, onResize);\nuseResizeObserver(wrapRef, onWrapResize);\n\nconst handleScroll = () => {\n  if (wrapRef.value && barRef.value) {\n    if (!scrollFromThumb.value) {\n      emit('scroll', { scrollTop: wrapRef.value.scrollTop, scrollLeft: wrapRef.value.scrollLeft });\n      barRef.value.handleScroll(wrapRef.value);\n    } else {\n      scrollFromThumb.value = false;\n    }\n  }\n};\n\nconst triggerScrollFromThumb = (options: ScrollToOptions) => {\n  scrollTo(options);\n  if (wrapRef.value && barRef.value) {\n    const scrollLeft = options.left === undefined ? wrapRef.value.scrollLeft : options.left;\n    const scrollTop = options.top === undefined ? wrapRef.value.scrollTop : options.top;\n    emit('scroll', { scrollLeft, scrollTop });\n  }\n};\n\nconst triggerScrollFromOutSide = (options: ScrollToOptions) => {\n  triggerScrollFromThumb(options);\n  if (wrapRef.value && barRef.value) {\n    barRef.value?.handleScroll(wrapRef.value);\n  }\n  scrollFromThumb.value = true;\n};\n\nconst handleWheel = (e: WheelEvent) => {\n  if (props.interceptShiftScroll && e.shiftKey) {\n    emit('shiftScroll', e);\n  } else {\n    emit('wheel', e);\n  }\n};\n\nconst scrollTo = (options: ScrollToOptions) => {\n  wrapRef.value!.scrollTo(options);\n};\n\ndefineExpose({\n  onResize,\n  scrollTo,\n  handleScroll,\n  triggerScrollFromOutSide\n});\n\n</script>\n<style lang=\"scss\">\n.vg-scrollbar {\n  position: relative;\n  overflow: hidden;\n  .vg-scrollbar-wrap {\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    .vg-scrollbar-view {\n      width: fit-content;\n      height: fit-content;\n    }\n  }\n}\n</style>"],"names":["scrollbarWidth","scrollbarHeight"],"mappings":";;;;;;;;;;;;;;;;;;AAiDA,UAAM,QAAQ;AAOd,UAAM,OAAO;AASb,UAAM,YAAY,IAAoB;AACtC,UAAM,UAAU,IAAoB;AACpC,UAAM,SAAS,IAAsC;AAC/C,UAAA,kBAAkB,IAAI,CAAC;AACvB,UAAA,iBAAiB,IAAI,CAAC;AACtB,UAAA,oBAAoB,IAAI,KAAK;AAC7B,UAAA,kBAAkB,IAAI,KAAK;AAC3B,UAAA,kBAAkB,IAAI,KAAK;AAEjC;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAEA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAEA,aAAS,mBAAoB;AACrB,YAAA,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,MAAM,aAAa;AACzB,YAAM,MAAM,WAAW;AACd,eAAA,KAAK,YAAY,KAAK;AAEzB,YAAA,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,MAAM,SAAS;AACrB,YAAM,YAAY,KAAK;AAEjBA,YAAAA,kBAAkB,MAAM,cAAc,MAAM;AAC5CC,YAAAA,mBAAmB,MAAM,eAAe,MAAM;AAE3C,eAAA,KAAK,YAAY,KAAK;AAE/B,aAAO,EAAE,gBAAAD,iBAAgB,iBAAAC,iBAAgB;AAAA,IAAA;AAG3C,UAAM,EAAE,gBAAgB,gBAAgB,IAAI,iBAAiB;AAEvD,UAAA,iBAAiB,CAAC,QAAQ;AAC9B,WAAK,yBAAyB,EAAE,MAAM,KAAK,gBAAgB;AAAA,IAAA,CAC5D;AAED,UAAM,WAAW,MAAM;;AACrB,UAAI,CAAC,UAAU,SAAS,CAAC,QAAQ,MAAO;AAClC,YAAA,kBAAiB,eAAU,UAAV,mBAAiB;AAClC,YAAA,mBAAkB,eAAU,UAAV,mBAAiB;AACnC,YAAA,sBAAqB,aAAQ,UAAR,mBAAe;AACpC,YAAA,uBAAsB,aAAQ,UAAR,mBAAe;AAE3C,sBAAgB,QAAQ;AACxB,qBAAe,QAAQ;AAEvB,UAAI,iBAAiB,oBAAoB;AACvC,0BAAkB,QAAQ;AAAA,MAAA,OACrB;AACa,0BAAA,QAAQ,MAAM,mBAAmB;AAAA,MAAA;AAGrD,UAAI,kBAAkB,qBAAqB;AACzC,wBAAgB,QAAQ;AAAA,MAAA,OACnB;AACW,wBAAA,QAAQ,MAAM,iBAAiB;AAAA,MAAA;AAAA,IAGnD;AAEA,UAAM,eAAe,MAAM;AACzB,cAAQ,SAAS,KAAK,UAAU,QAAQ,KAAK;AAAA,IAC/C;AAEA,sBAAkB,WAAW,QAAQ;AACrC,sBAAkB,SAAS,YAAY;AAEvC,UAAM,eAAe,MAAM;AACrB,UAAA,QAAQ,SAAS,OAAO,OAAO;AAC7B,YAAA,CAAC,gBAAgB,OAAO;AACrB,eAAA,UAAU,EAAE,WAAW,QAAQ,MAAM,WAAW,YAAY,QAAQ,MAAM,WAAA,CAAY;AACpF,iBAAA,MAAM,aAAa,QAAQ,KAAK;AAAA,QAAA,OAClC;AACL,0BAAgB,QAAQ;AAAA,QAAA;AAAA,MAC1B;AAAA,IAEJ;AAEM,UAAA,yBAAyB,CAAC,YAA6B;AAC3D,eAAS,OAAO;AACZ,UAAA,QAAQ,SAAS,OAAO,OAAO;AACjC,cAAM,aAAa,QAAQ,SAAS,SAAY,QAAQ,MAAM,aAAa,QAAQ;AACnF,cAAM,YAAY,QAAQ,QAAQ,SAAY,QAAQ,MAAM,YAAY,QAAQ;AAChF,aAAK,UAAU,EAAE,YAAY,UAAA,CAAW;AAAA,MAAA;AAAA,IAE5C;AAEM,UAAA,2BAA2B,CAAC,YAA6B;;AAC7D,6BAAuB,OAAO;AAC1B,UAAA,QAAQ,SAAS,OAAO,OAAO;AAC1B,qBAAA,UAAA,mBAAO,aAAa,QAAQ;AAAA,MAAK;AAE1C,sBAAgB,QAAQ;AAAA,IAC1B;AAEM,UAAA,cAAc,CAAC,MAAkB;AACjC,UAAA,MAAM,wBAAwB,EAAE,UAAU;AAC5C,aAAK,eAAe,CAAC;AAAA,MAAA,OAChB;AACL,aAAK,SAAS,CAAC;AAAA,MAAA;AAAA,IAEnB;AAEM,UAAA,WAAW,CAAC,YAA6B;AACrC,cAAA,MAAO,SAAS,OAAO;AAAA,IACjC;AAEa,aAAA;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}