tav-ui
Version:
136 lines (133 loc) • 5.38 kB
JavaScript
import { defineComponent, ref, provide, computed, onMounted, nextTick, inject, unref, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode, Fragment, createVNode } from 'vue';
import { addResizeListener, removeResizeListener } from '../../../utils/event/index2.mjs';
import { TaButton } from '../../button/index2.mjs';
import Bar from './bar2.mjs';
import { scrollbarProps } from './types2.mjs';
import { toObject } from './util2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "TaScrollbar",
components: { Bar, Button: TaButton },
inheritAttrs: false,
props: scrollbarProps,
setup(props) {
const sizeWidth = ref("0");
const sizeHeight = ref("0");
const moveX = ref(0);
const moveY = ref(0);
const wrap = ref();
const resize = ref();
const isBackTopShow = ref(false);
provide("scroll-bar-wrap", wrap);
const style = computed(() => {
if (Array.isArray(props.wrapStyle))
return toObject(props.wrapStyle);
return props.wrapStyle;
});
const handleScroll = () => {
if (!props.native && wrap.value) {
moveY.value = wrap.value.scrollTop * 100 / wrap.value.clientHeight;
moveX.value = wrap.value.scrollLeft * 100 / wrap.value.clientWidth;
if (props.backTopVisibilityHeight && moveY.value > props.backTopVisibilityHeight) {
isBackTopShow.value = true;
} else {
isBackTopShow.value = false;
}
}
};
const update = () => {
if (!wrap.value)
return;
const heightPercentage = wrap.value.clientHeight * 100 / wrap.value.scrollHeight;
const widthPercentage = wrap.value.clientWidth * 100 / wrap.value.scrollWidth;
sizeHeight.value = heightPercentage < 100 ? `${heightPercentage}%` : "";
sizeWidth.value = widthPercentage < 100 ? `${widthPercentage}%` : "";
};
const handleBackTopClick = () => {
if (wrap.value)
wrap.value.scrollTop = 0;
};
onMounted(() => {
if (props.native)
return;
nextTick(update);
inject("modalEmitter")?.on("redoThumbHeight", () => {
nextTick(update);
});
if (!props.noresize) {
addResizeListener(unref(resize), update);
wrap.value && addResizeListener(wrap.value, update);
addEventListener("resize", update);
}
});
onBeforeUnmount(() => {
if (props.native)
return;
if (!props.noresize) {
removeResizeListener(unref(resize), update);
wrap.value && removeResizeListener(wrap.value, update);
removeEventListener("resize", update);
}
});
return {
moveX,
moveY,
sizeWidth,
sizeHeight,
style,
wrap,
resize,
update,
handleScroll,
isBackTopShow,
handleBackTopClick
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Button = resolveComponent("Button");
const _component_bar = resolveComponent("bar");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["scrollbar", _ctx.containerClass])
}, [
createElementVNode("div", {
ref: "wrap",
class: normalizeClass([_ctx.wrapClass, "scrollbar__wrap", _ctx.native ? "" : "scrollbar__wrap--hidden-default"]),
style: normalizeStyle(_ctx.style),
onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
ref: "resize",
class: normalizeClass(["scrollbar__view", _ctx.viewClass]),
style: normalizeStyle(_ctx.viewStyle)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default"),
_ctx.isBackTopShow ? (openBlock(), createBlock(_component_Button, {
key: 0,
type: "text",
"pre-icon": "ant-design:vertical-align-top-outlined",
"icon-size": 18,
style: { "min-width": "auto", "position": "absolute", "right": "15px", "bottom": "7px", "width": "30px", "height": "30px !important", "overflow": "hidden", "color": "#fff", "background-color": "#00000073", "border-radius": "50%", "transition": "all 0.3s", "cursor": "pointer", "display": "flex", "justify-content": "center", "align-items": "center" },
onClick: _ctx.handleBackTopClick
}, null, 8, ["onClick"])) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["class", "style"]))
], 38),
!_ctx.native ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createVNode(_component_bar, {
move: _ctx.moveX,
size: _ctx.sizeWidth
}, null, 8, ["move", "size"]),
createVNode(_component_bar, {
vertical: "",
move: _ctx.moveY,
size: _ctx.sizeHeight
}, null, 8, ["move", "size"])
], 64)) : createCommentVNode("v-if", true)
], 2);
}
var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/scrollbar/src/scrollbar.vue"]]);
export { Scrollbar as default };
//# sourceMappingURL=scrollbar2.mjs.map