UNPKG

element-plus

Version:

A Component Library for Vue 3

176 lines (173 loc) 6.28 kB
import { defineComponent, ref, computed, watch, nextTick, provide, reactive, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue'; import { isNumber, useResizeObserver, useEventListener } from '@vueuse/core'; import '../../../utils/index.mjs'; import '../../../tokens/index.mjs'; import '../../../hooks/index.mjs'; import { GAP } from './util.mjs'; import Bar from './bar2.mjs'; import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs'; import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs'; import { useNamespace } from '../../../hooks/use-namespace/index.mjs'; import { addUnit } from '../../../utils/dom/style.mjs'; import { isObject } from '@vue/shared'; import { debugWarn } from '../../../utils/error.mjs'; import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs'; const SCOPE = "ElScrollbar"; const __default__ = defineComponent({ name: "ElScrollbar" }); const _sfc_main = /* @__PURE__ */ defineComponent({ ...__default__, props: scrollbarProps, emits: scrollbarEmits, setup(__props, { expose, emit }) { const props = __props; const ns = useNamespace("scrollbar"); let stopResizeObserver = void 0; let stopResizeListener = void 0; const scrollbar$ = ref(); const wrap$ = ref(); const resize$ = ref(); const sizeWidth = ref("0"); const sizeHeight = ref("0"); const barRef = ref(); const ratioY = ref(1); const ratioX = ref(1); const style = computed(() => { const style2 = {}; if (props.height) style2.height = addUnit(props.height); if (props.maxHeight) style2.maxHeight = addUnit(props.maxHeight); return [props.wrapStyle, style2]; }); const handleScroll = () => { var _a; if (wrap$.value) { (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value); emit("scroll", { scrollTop: wrap$.value.scrollTop, scrollLeft: wrap$.value.scrollLeft }); } }; function scrollTo(arg1, arg2) { if (isObject(arg1)) { wrap$.value.scrollTo(arg1); } else if (isNumber(arg1) && isNumber(arg2)) { wrap$.value.scrollTo(arg1, arg2); } } const setScrollTop = (value) => { if (!isNumber(value)) { debugWarn(SCOPE, "value must be a number"); return; } wrap$.value.scrollTop = value; }; const setScrollLeft = (value) => { if (!isNumber(value)) { debugWarn(SCOPE, "value must be a number"); return; } wrap$.value.scrollLeft = value; }; const update = () => { if (!wrap$.value) return; const offsetHeight = wrap$.value.offsetHeight - GAP; const offsetWidth = wrap$.value.offsetWidth - GAP; const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight; const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth; const height = Math.max(originalHeight, props.minSize); const width = Math.max(originalWidth, props.minSize); ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height)); ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)); sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ""; sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ""; }; watch(() => props.noresize, (noresize) => { if (noresize) { stopResizeObserver == null ? void 0 : stopResizeObserver(); stopResizeListener == null ? void 0 : stopResizeListener(); } else { ; ({ stop: stopResizeObserver } = useResizeObserver(resize$, update)); stopResizeListener = useEventListener("resize", update); } }, { immediate: true }); watch(() => [props.maxHeight, props.height], () => { if (!props.native) nextTick(() => { var _a; update(); if (wrap$.value) { (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value); } }); }); provide(scrollbarContextKey, reactive({ scrollbarElement: scrollbar$, wrapElement: wrap$ })); onMounted(() => { if (!props.native) nextTick(() => { update(); }); }); onUpdated(() => update()); expose({ wrap$, update, scrollTo, setScrollTop, setScrollLeft, handleScroll }); return (_ctx, _cache) => { return openBlock(), createElementBlock("div", { ref_key: "scrollbar$", ref: scrollbar$, class: normalizeClass(unref(ns).b()) }, [ createElementVNode("div", { ref_key: "wrap$", ref: wrap$, class: normalizeClass([ _ctx.wrapClass, unref(ns).e("wrap"), { [unref(ns).em("wrap", "hidden-default")]: !_ctx.native } ]), style: normalizeStyle(unref(style)), onScroll: handleScroll }, [ (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { ref_key: "resize$", ref: resize$, class: normalizeClass([unref(ns).e("view"), _ctx.viewClass]), style: normalizeStyle(_ctx.viewStyle) }, { default: withCtx(() => [ renderSlot(_ctx.$slots, "default") ]), _: 3 }, 8, ["class", "style"])) ], 38), !_ctx.native ? (openBlock(), createBlock(Bar, { key: 0, ref_key: "barRef", ref: barRef, height: sizeHeight.value, width: sizeWidth.value, always: _ctx.always, "ratio-x": ratioX.value, "ratio-y": ratioY.value }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true) ], 2); }; } }); var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/scrollbar.vue"]]); export { Scrollbar as default }; //# sourceMappingURL=scrollbar2.mjs.map