hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 6.3 kB
Source Map (JSON)
{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n <div ref=\"scrollbarRef\" :class=\"namespace\">\n <div\n ref=\"wrapRef\"\n :class=\"[\n wrapClass,\n 'scrollbar-wrap',\n native ? '' : 'scrollbar-wrap-hidden',\n ]\"\n :style=\"style\"\n @scroll=\"handleScroll\"\n >\n <component\n :is=\"tag\"\n :id=\"id\"\n ref=\"resizeRef\"\n :class=\"['scrollbar-view', viewClass]\"\n :style=\"viewStyle\"\n :role=\"role\"\n :aria-label=\"ariaLabel\"\n :aria-orientation=\"ariaOrientation\"\n >\n <slot></slot>\n </component>\n </div>\n <template v-if=\"!native\">\n <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onActivated,\n onMounted,\n provide,\n ref,\n watch,\n reactive,\n onUpdated,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { debugWarn, addUnit, isNumber, isObject } from '@hongluan-ui/utils'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport { scrollbarContextKey } from '@hongluan-ui/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n name: 'Scrollbar',\n components: {\n Bar,\n },\n props: scrollbarProps,\n emits: ['scroll', 'at-end'],\n\n setup(props, { emit }) {\n let stopResizeObserver: (() => void) | undefined = undefined\n let stopResizeListener: (() => void) | undefined = undefined\n let wrapScrollTop = 0\n let wrapScrollLeft = 0\n let oldScrollTop = Number.MAX_SAFE_INTEGER\n\n const scrollbarRef = ref<HTMLDivElement>()\n const wrapRef = ref<HTMLDivElement>()\n const resizeRef = ref<HTMLElement>()\n const barRef = ref()\n\n const SCOPE = 'Scrollbar'\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 (wrapRef.value) {\n barRef.value?.handleScroll(wrapRef.value)\n wrapScrollTop = wrapRef.value.scrollTop\n wrapScrollLeft = wrapRef.value.scrollLeft\n\n emit('scroll', {\n scrollTop: wrapRef.value.scrollTop,\n scrollLeft: wrapRef.value.scrollLeft,\n })\n\n if (wrapRef.value.scrollTop > oldScrollTop && wrapRef.value.scrollTop + wrapRef.value.offsetHeight + props.distance >= wrapRef.value.scrollHeight) {\n emit('at-end', { vertical: true })\n }\n oldScrollTop = wrapRef.value.scrollTop\n }\n }\n\n function scrollTo(xCord: number, yCord?: number): void\n function scrollTo(options: ScrollToOptions): void\n function scrollTo(arg1: unknown, arg2?: number) {\n if (isObject(arg1)) {\n wrapRef.value.scrollTo(arg1)\n } else if (isNumber(arg1) && isNumber(arg2)) {\n wrapRef.value.scrollTo(arg1, arg2)\n }\n }\n\n const setScrollTop = (value: number) => {\n if (!isNumber(value)) {\n debugWarn(SCOPE, 'value must be a number')\n return\n }\n wrapRef.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 wrapRef.value.scrollLeft = value\n }\n\n const update = () => {\n barRef.value?.update()\n }\n\n watch(\n () => props.noresize,\n noresize => {\n if (noresize) {\n stopResizeObserver?.()\n stopResizeListener?.()\n } else {\n ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n stopResizeListener = useEventListener('resize', update)\n }\n },\n { immediate: true },\n )\n\n provide(\n scrollbarContextKey,\n reactive({\n scrollbarElement: scrollbarRef,\n wrapElement: wrapRef,\n }),\n )\n onActivated(() => {\n wrapRef.value!.scrollTop = wrapScrollTop\n wrapRef.value!.scrollLeft = wrapScrollLeft\n })\n\n onMounted(() => {\n if (!props.native) {\n nextTick(() => {\n update()\n })\n }\n })\n onUpdated(() => update())\n\n const { namespace } = useNamespace('scrollbar')\n return {\n namespace,\n scrollbarRef,\n wrapRef,\n resizeRef,\n barRef,\n\n style,\n update,\n handleScroll,\n setScrollTop,\n setScrollLeft,\n scrollTo,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AACF,EACA,OAAO;AAAA,EACP,OAAO,CAAC,UAAU,QAAQ;AAAA,EAE1B,MAAM,OAAO,EAAE,QAAQ;AACrB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AACnD,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,eAAe,OAAO;AAE1B,UAAM,eAAe;AACrB,UAAM,UAAU;AAChB,UAAM,YAAY;AAClB,UAAM,SAAS;AAEf,UAAM,QAAQ;AAEd,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM,MAAM;AACrD,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM,SAAS;AAC9D,aAAO,CAAC,MAAM,WAAW,MAAK;AAAA,KAC/B;AAED,UAAM,eAAe,MAAM;AACzB,UAAI;AACF;AACA,sCAA8B;AAC9B;AAEA;AAAe,qBACF;AAAc,UACzB;AAA0B;AAG5B;AACE,yBAAe;AAAkB;AAEnC;AAA6B;AAC/B;AAKF;AACE,0BAAoB;AAClB;AAA2B,8BACL,KAAK;AAC3B,+BAAuB;AAAU;AACnC;AAGF;AACE,UAAI,eAAe;AACjB,yBAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAA2B;AAG7B;AACE;AAAqB;AAGvB;AAGI;AACE;AACA;AAAqB;AAErB,QAAC;AACD;AAAsD;AACxD,0BAGJ;AAEA;AAEW,wBACW;AAAA;AACL,MAEjB;AACA;AACE;AACA;AAA4B;AAG9B,cAAU,MAAM;AACd;AACE;AACE,iBAAO;AAAA,QACT;AAAC;AACH;AAEF;AAEA;AACA;AAAO;AACL;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;;2CAxJQ;AAAA;AA3BG;AAAgC;IACvC;AAsBM;AArBA;AACE;AAAY;QAA6C,cAAM;AAAA;aAK/D;AAAO;AACJ;qBAET;AACU;AACH;AACD,QACH;AAAmC,QACnC;AAAgB,QAChB;AAAM,QACN;AAAY,QACZ;AAAkB;0BAEnB,MAAa;AAAA;AAAA;;;;;AAI0C;;AAAhD,MAAU;AAAQ,MAAS;AAAU;;;;;;;;;"}