import { w as withInstall } from "../badge/index2.js"; import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, withDirectives, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withModifiers, renderSlot, createVNode, vShow } from "vue"; import { _ as _sfc_main$2E } from "../checkbox/index2.js"; var index = /* @__PURE__ */ (() => ".layui-backtop{position:fixed;right:30px;bottom:40px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:40px;background-color:#9f9f9f;color:#fff;border-radius:var(--global-border-radius);opacity:.95;z-index:999999}.layui-backtop :hover{opacity:.85}.layui-backtop-medium{width:40px;height:40px;font-size:30px}.layui-backtop-small{width:30px;height:30px;font-size:20px}\n")(); const _hoisted_1 = ["onClick"]; const __default__ = { name: "LayBacktop" }; const _sfc_main = defineComponent({ ...__default__, props: { target: { default: "window" }, showHeight: { default: 200 }, disabled: { type: Boolean, default: false }, position: null, right: null, bottom: null, size: null, bgcolor: null, opacity: null, color: null, borderRadius: null, circle: { type: Boolean, default: false }, icon: { default: "layui-icon-top" }, iconSize: { default: 30 }, iconColor: null }, emits: ["click"], setup(__props, { emit }) { const props = __props; const backtopRef = ref(null); const scrollTarget = shallowRef(void 0); let visible = ref(props.showHeight === 0); const classBacktop = computed(() => { return { "layui-backtop-medium": props.size === "medium", "layui-backtop-small": props.size === "small" }; }); const borderRadius = computed(() => { if (props.circle) { return "50%"; } return typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius; }); const styleBacktop = computed(() => { return { position: props.position, right: `${props.right}px`, bottom: `${props.bottom}px`, backgroundColor: props.bgcolor, opacity: props.opacity, color: props.color, borderRadius: borderRadius.value }; }); const easeInOut = (value) => { return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1); }; const scrollToTop = () => { if (!scrollTarget.value) return; if (scrollTarget.value instanceof Window) { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); } else { const previous = Date.now(); const scrollHeight = scrollTarget.value.scrollTop; const animationFunc = () => { if (!scrollTarget.value || scrollTarget.value instanceof Window) return; const elapsed = (Date.now() - previous) / 450; if (elapsed < 1) { scrollTarget.value.scrollTop = scrollHeight * (1 - easeInOut(elapsed)); window.requestAnimationFrame(animationFunc); } else { scrollTarget.value.scrollTop = 0; } }; window.requestAnimationFrame(animationFunc); } }; const handleScroll = () => { if (!scrollTarget.value) return; const scrollTop = scrollTarget.value instanceof Window ? window.pageYOffset : scrollTarget.value.scrollTop; visible.value = scrollTop >= props.showHeight; }; const handleClick = (event) => { if (!props.disabled) { scrollToTop(); } emit("click", event); }; const handlerMousedown = () => { backtopRef.value.style.opacity = "1"; }; const handlerMouseup = () => { backtopRef.value.style.opacity = "0.95"; }; const getScrollTarget = () => { if (props.target === "window") { return getScrollParent(backtopRef.value, false); } else { const targetElement = document.querySelector(props.target); if (!targetElement) { throw new Error(`target is not existed: ${props.target}`); } if (props.position === "absolute") { if (!targetElement.parentElement) { throw new Error(`target parent element is not existed: ${props.target}`); } targetElement.parentElement.style.position = "relative"; } return targetElement; } }; const getScrollParent = (element, includeHidden) => { let style = getComputedStyle(element); let excludeStaticParent = style.position === "absolute"; let overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/; for (let parent = element; parent = parent.parentElement; ) { style = getComputedStyle(parent); if (excludeStaticParent && style.position === "static") { continue; } if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) { return parent; } } return window; }; const throttle = (func, wait) => { var timer = null; return (...args) => { if (!timer) { timer = setTimeout(() => { timer = null; func.apply(this, args); }, wait); } }; }; const callback = throttle(handleScroll, 300); onMounted(() => { if (!props.target) return; scrollTarget.value = getScrollTarget(); scrollTarget.value.addEventListener("scroll", callback); }); onBeforeUnmount(() => { var _a; (_a = scrollTarget.value) == null ? void 0 : _a.removeEventListener("scroll", callback); }); return (_ctx, _cache) => { return withDirectives((openBlock(), createElementBlock("div", { ref_key: "backtopRef", ref: backtopRef, class: normalizeClass(["layui-backtop", unref(classBacktop)]), style: normalizeStyle({ ...unref(styleBacktop) }), onClick: withModifiers(handleClick, ["stop"]), onMousedown: handlerMousedown, onMouseup: handlerMouseup }, [ renderSlot(_ctx.$slots, "default", {}, () => [ createVNode(unref(_sfc_main$2E), { type: props.icon, size: `${props.iconSize}px`, color: props.iconColor }, null, 8, ["type", "size", "color"]) ]) ], 46, _hoisted_1)), [ [vShow, unref(visible)] ]); }; } }); const component = withInstall(_sfc_main); export { component as default };