element-plus
Version:
A Component Library for Vue 3
1 lines • 6.75 kB
Source Map (JSON)
{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n <div ref=\"scrollbar$\" :class=\"ns.b()\">\n <div\n ref=\"wrap$\"\n :class=\"[\n wrapClass,\n ns.e('wrap'),\n { [ns.em('wrap', 'hidden-default')]: !native },\n ]\"\n :style=\"style\"\n @scroll=\"handleScroll\"\n >\n <component\n :is=\"tag\"\n ref=\"resize$\"\n :class=\"[ns.e('view'), viewClass]\"\n :style=\"viewStyle\"\n >\n <slot />\n </component>\n </div>\n <template v-if=\"!native\">\n <bar\n ref=\"barRef\"\n :height=\"sizeHeight\"\n :width=\"sizeWidth\"\n :always=\"always\"\n :ratio-x=\"ratioX\"\n :ratio-y=\"ratioY\"\n ></bar>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onMounted,\n provide,\n ref,\n watch,\n reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { isNumber, debugWarn, addUnit } from '@element-plus/utils'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n name: 'ElScrollbar',\n components: {\n Bar,\n },\n props: scrollbarProps,\n emits: scrollbarEmits,\n\n setup(props, { emit }) {\n const ns = useNamespace('scrollbar')\n\n let stopResizeObserver: (() => void) | undefined = undefined\n let stopResizeListener: (() => void) | undefined = undefined\n\n const scrollbar$ = ref<HTMLDivElement>()\n const wrap$ = ref<HTMLDivElement>()\n const resize$ = ref<HTMLElement>()\n\n const sizeWidth = ref('0')\n const sizeHeight = ref('0')\n const barRef = ref()\n const moveX = ref(0)\n const moveY = ref(0)\n const ratioY = ref(1)\n const ratioX = ref(1)\n const SCOPE = 'ElScrollbar'\n const GAP = 4 // top 2 + bottom 2 of bar instance\n\n const style = computed<StyleValue>(() => {\n const style: CSSProperties = {}\n if (props.height) style.height = addUnit(props.height)\n if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n return [props.wrapStyle, style]\n })\n\n const handleScroll = () => {\n if (wrap$.value) {\n barRef.value?.handleScroll(wrap$.value)\n\n emit('scroll', {\n scrollTop: wrap$.value.scrollTop,\n scrollLeft: wrap$.value.scrollLeft,\n })\n }\n }\n\n const setScrollTop = (value: number) => {\n if (!isNumber(value)) {\n debugWarn(SCOPE, 'value must be a number')\n return\n }\n wrap$.value!.scrollTop = value\n }\n\n const setScrollLeft = (value: number) => {\n if (!isNumber(value)) {\n debugWarn(SCOPE, 'value must be a number')\n return\n }\n wrap$.value!.scrollLeft = value\n }\n\n const update = () => {\n if (!wrap$.value) return\n const offsetHeight = wrap$.value.offsetHeight - GAP\n const offsetWidth = wrap$.value.offsetWidth - GAP\n\n const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n const height = Math.max(originalHeight, props.minSize)\n const width = Math.max(originalWidth, props.minSize)\n\n ratioY.value =\n originalHeight /\n (offsetHeight - originalHeight) /\n (height / (offsetHeight - height))\n ratioX.value =\n originalWidth /\n (offsetWidth - originalWidth) /\n (width / (offsetWidth - width))\n\n sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n }\n\n watch(\n () => props.noresize,\n (noresize) => {\n if (noresize) {\n stopResizeObserver?.()\n stopResizeListener?.()\n } else {\n ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n stopResizeListener = useEventListener('resize', update)\n }\n },\n { immediate: true }\n )\n\n watch(\n () => [props.maxHeight, props.height],\n () => {\n if (!props.native)\n nextTick(() => {\n update()\n if (wrap$.value) {\n barRef.value?.handleScroll(wrap$.value)\n }\n })\n }\n )\n\n provide(\n scrollbarContextKey,\n reactive({\n scrollbarElement: scrollbar$,\n wrapElement: wrap$,\n })\n )\n\n onMounted(() => {\n if (!props.native) nextTick(() => update())\n })\n\n return {\n ns,\n scrollbar$,\n wrap$,\n resize$,\n barRef,\n moveX,\n moveY,\n ratioX,\n ratioY,\n sizeWidth,\n sizeHeight,\n style,\n update,\n handleScroll,\n setScrollTop,\n setScrollLeft,\n }\n },\n})\n</script>\n"],"names":["_normalizeClass"],"mappings":";;;;;;;;;;;;;AAqDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AAExB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAa;AACnB,UAAM,QAAQ;AACd,UAAM,UAAU;AAEhB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,SAAS;AACf,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,SAAS,IAAI;AACnB,UAAM,SAAS,IAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI;AACF,eAAO;AAEP;AAAe,qBACF;AAAY,UACvB;AAAwB;AAAA;AAAA;AAK9B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAAyB;AAG3B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AAAc;AAClB;AACA,YAAM,oBAAoB,MAAM;AAEhC,YAAM,qCAAqC,MAAM;AACjD,YAAM;AACN,YAAM,wCAAwC;AAC9C,YAAM,aAAa,IAAI,eAAe;AAEtC;AAIA,aAAO,QACL,gDAEC;AAEH,kCAA4B;AAC5B,gBAAU,oCAAoC,GAAG,YAAY;AAAA;AAG/D;AAGI,UAAI;AACF;AACA;AAAA;AAEA;AAAC,QAAC;AACF;AAAgD;AAAA,OAGpD;AAGF;AAGI,UAAI,OAAO;AACT,iBAAS,MAAM;AACb;AACA,cAAI;AACF,mBAAO;AAA0B;AAAA;AAAA;AAM3C;AAEW,MACP;AAAkB;AACL;AAIjB;AACE;AAAmB;AAAe;AAGpC;AAAO,MACL;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;SAhMK;AAAY;AAAO;;AAC1B;AACa;AACL,4BAAqB;AAAA;AAAU,aAAyBA;AAAE;;;AAMzD;;;AAIQ;AACP;AACW;;;AAET;;;;;AAGK;;AAET;AACH,MACA;AAAO,MACP;AAAQ,MACR,aAAS;AAAA,MACT,WAAS;AAAA;;;;;;;;;;"}