element-plus
Version:
A Component Library for Vue 3
186 lines (183 loc) • 6.6 kB
JavaScript
import { defineComponent, ref, computed, watch, nextTick, provide, reactive, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
import { useResizeObserver, useEventListener } from '@vueuse/core';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import { GAP } from './util.mjs';
import Bar from './bar2.mjs';
import { scrollbarContextKey } from './constants.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 { isNumber } from '../../../utils/types.mjs';
import { debugWarn } from '../../../utils/error.mjs';
const COMPONENT_NAME = "ElScrollbar";
const __default__ = defineComponent({
name: COMPONENT_NAME
});
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 scrollbarRef = ref();
const wrapRef = ref();
const resizeRef = ref();
const sizeWidth = ref("0");
const sizeHeight = ref("0");
const barRef = ref();
const ratioY = ref(1);
const ratioX = ref(1);
const wrapStyle = computed(() => {
const style = {};
if (props.height)
style.height = addUnit(props.height);
if (props.maxHeight)
style.maxHeight = addUnit(props.maxHeight);
return [props.wrapStyle, style];
});
const wrapKls = computed(() => {
return [
props.wrapClass,
ns.e("wrap"),
{ [ns.em("wrap", "hidden-default")]: !props.native }
];
});
const resizeKls = computed(() => {
return [ns.e("view"), props.viewClass];
});
const handleScroll = () => {
var _a;
if (wrapRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
emit("scroll", {
scrollTop: wrapRef.value.scrollTop,
scrollLeft: wrapRef.value.scrollLeft
});
}
};
function scrollTo(arg1, arg2) {
if (isObject(arg1)) {
wrapRef.value.scrollTo(arg1);
} else if (isNumber(arg1) && isNumber(arg2)) {
wrapRef.value.scrollTo(arg1, arg2);
}
}
const setScrollTop = (value) => {
if (!isNumber(value)) {
debugWarn(COMPONENT_NAME, "value must be a number");
return;
}
wrapRef.value.scrollTop = value;
};
const setScrollLeft = (value) => {
if (!isNumber(value)) {
debugWarn(COMPONENT_NAME, "value must be a number");
return;
}
wrapRef.value.scrollLeft = value;
};
const update = () => {
if (!wrapRef.value)
return;
const offsetHeight = wrapRef.value.offsetHeight - GAP;
const offsetWidth = wrapRef.value.offsetWidth - GAP;
const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight;
const originalWidth = offsetWidth ** 2 / wrapRef.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(resizeRef, update));
stopResizeListener = useEventListener("resize", update);
}
}, { immediate: true });
watch(() => [props.maxHeight, props.height], () => {
if (!props.native)
nextTick(() => {
var _a;
update();
if (wrapRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
}
});
});
provide(scrollbarContextKey, reactive({
scrollbarElement: scrollbarRef,
wrapElement: wrapRef
}));
onMounted(() => {
if (!props.native)
nextTick(() => {
update();
});
});
onUpdated(() => update());
expose({
wrapRef,
update,
scrollTo,
setScrollTop,
setScrollLeft,
handleScroll
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "scrollbarRef",
ref: scrollbarRef,
class: normalizeClass(unref(ns).b())
}, [
createElementVNode("div", {
ref_key: "wrapRef",
ref: wrapRef,
class: normalizeClass(unref(wrapKls)),
style: normalizeStyle(unref(wrapStyle)),
onScroll: handleScroll
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
id: _ctx.id,
ref_key: "resizeRef",
ref: resizeRef,
class: normalizeClass(unref(resizeKls)),
style: normalizeStyle(_ctx.viewStyle),
role: _ctx.role,
"aria-label": _ctx.ariaLabel,
"aria-orientation": _ctx.ariaOrientation
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
], 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", "scrollbar.vue"]]);
export { Scrollbar as default };
//# sourceMappingURL=scrollbar2.mjs.map