vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
208 lines (207 loc) • 9.62 kB
JavaScript
import { defineComponent as U, ref as n, computed as s, watch as v, onMounted as X, onBeforeUnmount as Y, createElementBlock as i, openBlock as a, createBlock as E, Teleport as A, createVNode as $, Transition as G, withCtx as k, withDirectives as J, createCommentVNode as z, mergeProps as B, unref as c, createSlots as K, createElementVNode as r, normalizeClass as P, renderSlot as p, resolveDynamicComponent as Q, createTextVNode as D, toDisplayString as x, vShow as W } from "vue";
import _ from "../tooltip/index.js";
import { useInject as ee, useOptionsSupported as te, useSlotsExist as oe, useMutationObserver as re } from "../utils/index.js";
const le = {
key: 1,
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xlinkHref: "http://www.w3.org/1999/xlink"
}, ae = {
key: 0,
class: "backtop-description"
}, pe = /* @__PURE__ */ U({
__name: "BackTop",
props: {
icon: { type: [Object, Function], default: void 0 },
description: { default: void 0 },
tooltip: { default: void 0 },
tooltipProps: { default: () => ({}) },
type: { default: "default" },
shape: { default: "circle" },
bottom: { default: 40 },
right: { default: 40 },
zIndex: { default: 9 },
visibilityHeight: { default: 180 },
to: { default: "body" },
listenTo: { default: void 0 }
},
emits: ["click", "show"],
setup(M, { emit: N }) {
const t = M, u = n(!1), h = n(null), d = n(0), o = n(null), { colorPalettes: f } = ee("BackTop"), { isSupported: H } = te("passive"), g = N, y = oe(["tooltip", "icon", "description"]), O = s(() => ({
bottom: typeof t.bottom == "number" ? `${t.bottom}px` : t.bottom,
right: typeof t.right == "number" ? `${t.right}px` : t.right
})), m = s(() => d.value >= t.visibilityHeight), V = s(() => y.tooltip || t.tooltip), L = s(() => y.description || t.description);
v(
m,
(e) => {
e && !u.value && (u.value = !0);
},
{
immediate: !0
}
), v(
() => t.listenTo,
() => {
T();
},
{
flush: "post"
}
), v(m, (e) => {
g("show", e);
}), X(() => {
T();
}), Y(() => {
C();
});
const b = re(
o,
() => {
d.value = o.value?.scrollTop ?? 0;
},
{ subtree: !0, childList: !0, attributes: !0, characterData: !0 }
);
function w(e) {
d.value = e.target.scrollTop;
}
function T() {
C(), t.listenTo === void 0 ? o.value = S(h.value) : typeof t.listenTo == "string" ? o.value = document.getElementsByTagName(t.listenTo)[0] : t.listenTo instanceof HTMLElement && (o.value = t.listenTo), o.value || console.warn("Container of back-top element is not found."), o.value && o.value.addEventListener(
"scroll",
w,
H.value ? { passive: !0 } : void 0
), o.value === document.documentElement ? b.start() : b.stop();
}
function C() {
o.value && o.value.removeEventListener("scroll", w), o.value = null, b.stop();
}
function I(e) {
return e === document.documentElement ? null : e.parentElement;
}
function S(e) {
if (e === null) return null;
const l = I(e);
return l === null ? null : l === document.documentElement ? document.documentElement : ((j) => {
const { overflow: Z, overflowX: q, overflowY: F } = getComputedStyle(j);
return /(auto|scroll|overlay)/.test(Z + F + q);
})(l) ? l : S(l);
}
function R() {
o.value && o.value.scrollTo({
top: 0,
behavior: "smooth"
// 平滑滚动并产生过渡效果
}), g("click");
}
return (e, l) => (a(), i("div", {
ref_key: "backTopPlaceholderRef",
ref: h,
class: "back-top-placeholder",
style: { display: "none" }
}, [
(a(), E(A, { to: e.to }, [
$(G, { name: "zoom" }, {
default: k(() => [
u.value ? J((a(), i("div", B({
key: 0,
class: "back-top",
style: [
O.value,
`
--backtop-z-index: ${e.zIndex};
--backtop-width: 44px;
--backtop-height: 44px;
--backtop-icon-size: 26px;
--backtop-icon-with-desc-size: 24px;
--backtop-desc-font-size: 12px;
--backtop-default-color: rgba(0, 0, 0, 0.88);
--backtop-default-color-hover: ${c(f)[5]};
--backtop-default-bg-color: rgba(255, 255, 255, 0.88);
--backtop-default-bg-color-hover: rgba(255, 255, 255);
--backtop-default-shadow-color: rgba(0, 0, 0, 0.12);
--backtop-default-shadow-color-hover: rgba(0, 0, 0, 0.12);
--backtop-primary-color: #fff;
--backtop-primary-color-hover: #fff;
--backtop-primary-bg-color: ${c(f)[5]};
--backtop-primary-bg-color-hover: ${c(f)[4]};
--backtop-primary-shadow-color: rgba(9, 88, 217, 0.32);
--backtop-primary-shadow-color-hover: rgba(9, 88, 217, 0.32);
--backtop-circle-border-radius: calc(var(--backtop-width) / 2);
--backtop-square-border-radius: 8px;
`
],
onClick: R
}, e.$attrs), [
$(c(_), B({
style: `border-radius: var(--backtop-${e.shape}-border-radius)`,
"content-style": { borderRadius: `var(--backtop-${e.shape}-border-radius)` }
}, e.tooltipProps), K({
default: k(() => [
r("div", {
class: P(["backtop-wrap", `backtop-${e.type} backtop-${e.shape}`])
}, [
p(e.$slots, "default", {}, () => [
r("span", {
class: P(["backtop-icon", { "icon-with-description": L.value }])
}, [
p(e.$slots, "icon", {}, () => [
e.icon ? (a(), E(Q(e.icon), { key: 0 })) : (a(), i("svg", le, [...l[0] || (l[0] = [
r("g", {
stroke: "none",
"stroke-width": "1",
"fill-rule": "evenodd"
}, [
r("g", {
transform: "translate(-139.000000, -4423.000000)",
"fill-rule": "nonzero"
}, [
r("g", { transform: "translate(120.000000, 4285.000000)" }, [
r("g", { transform: "translate(7.000000, 126.000000)" }, [
r("g", { transform: "translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" }, [
r("g", { transform: "translate(4.000000, 2.000000)" }, [
r("path", { d: "M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" }),
r("path", { d: "M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" })
])
])
])
])
])
], -1)
])]))
], !0)
], 2),
L.value ? (a(), i("span", ae, [
p(e.$slots, "description", {}, () => [
D(x(e.description), 1)
], !0)
])) : z("", !0)
], !0)
], 2)
]),
_: 2
}, [
V.value ? {
name: "tooltip",
fn: k(() => [
p(e.$slots, "tooltip", {}, () => [
D(x(e.tooltip), 1)
], !0)
]),
key: "0"
} : void 0
]), 1040, ["style", "content-style"])
], 16)), [
[W, m.value]
]) : z("", !0)
]),
_: 3
})
], 8, ["to"]))
], 512));
}
});
export {
pe as default
};