vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
471 lines (470 loc) • 22.6 kB
JavaScript
import { defineComponent as Le, ref as o, computed as te, watchEffect as Se, createElementBlock as f, openBlock as h, normalizeStyle as b, unref as V, createVNode as C, mergeProps as K, withCtx as k, Fragment as O, renderList as oe, withDirectives as L, normalizeClass as w, createCommentVNode as ie, createElementVNode as e, renderSlot as Me, createTextVNode as Be, toDisplayString as R, vShow as S, Transition as ne, withKeys as He, withModifiers as j, nextTick as Ve } from "vue";
import Re from "../space/index.js";
import re from "../spin/index.js";
import { useInject as xe, downloadFile as Ze, add as F } from "../utils/index.js";
const $e = ["onLoad", "src", "alt"], Pe = ["onClick"], Ae = { class: "image-mask-info" }, Ie = { class: "mask-pre" }, De = { class: "preview-mask" }, Ee = { class: "preview-body" }, We = { class: "preview-operations" }, Ye = ["href", "title"], Xe = {
class: "icon-svg",
style: { transform: "rotate(90deg)" },
focusable: "false",
"data-icon": "swap",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Ne = ["onLoad", "src", "alt"], Fe = /* @__PURE__ */ Le({
__name: "Image",
props: {
src: { default: void 0 },
name: { default: void 0 },
width: { default: 100 },
height: { default: 100 },
disabled: { type: Boolean, default: !1 },
bordered: { type: Boolean, default: !0 },
fit: { default: "contain" },
preview: { default: "预览" },
previewImageStyle: { default: () => ({}) },
spaceProps: { default: () => ({}) },
spinProps: { default: () => ({}) },
previewSpinProps: { default: () => ({}) },
zoomRatio: { default: 0.1 },
minZoomScale: { default: 0.1 },
maxZoomScale: { default: 10 },
resetOnDbclick: { type: Boolean, default: !0 },
draggable: { type: Boolean, default: !1 },
loop: { type: Boolean, default: !1 },
album: { type: Boolean, default: !1 }
},
setup(n, { expose: ce }) {
const t = n, d = o([]), U = o(null), r = o(0), y = o(!1), x = o([]), Z = o([]), q = o([]), G = o([]), z = o(0), i = o(1), $ = o(1), P = o(1), J = o(0), Q = o(0), s = o(0), v = o(0), p = o(0), g = o(0), A = o(0), I = o(0), D = o(0), E = o(0), W = o(0), Y = o(0), { colorPalettes: se } = xe("Image"), m = te(() => d.value.length), ve = te(() => t.draggable ? "100ms" : "200ms");
Se(() => {
d.value = ue();
});
function ue() {
return Array.isArray(t.src) ? t.src : [
{
src: t.src || "",
name: t.name
}
];
}
function de(l) {
Z.value[l] = !0;
}
function me(l) {
G.value[l] = !0;
}
function M(l) {
if (l) {
if (l.name)
return l.name;
{
const a = l.src.split("?")[0].split("/");
return a[a.length - 1];
}
}
}
function _(l, a) {
return Array.isArray(l) ? typeof l[a] == "number" ? `${l[a]}px` : l[a] : typeof l == "number" ? `${l}px` : l;
}
function fe(l) {
y.value && m.value > 1 && ((l.key === "ArrowLeft" || l.key === "ArrowUp") && ae(), (l.key === "ArrowRight" || l.key === "ArrowDown") && le());
}
async function ee(l) {
i.value = 1, z.value = 0, s.value = 0, v.value = 0, y.value = !0, r.value = l, await Ve(), U.value?.focus();
}
ce({
preview: ee
});
function X() {
y.value = !1;
}
function he() {
const l = d.value[r.value];
Ze(l.src, l.name);
}
function pe() {
i.value + t.zoomRatio > t.maxZoomScale ? i.value = t.maxZoomScale : i.value = F(i.value, t.zoomRatio);
}
function ge() {
i.value - t.zoomRatio < t.minZoomScale ? i.value = t.minZoomScale : i.value = F(i.value, -t.zoomRatio);
}
function B() {
i.value = 1, $.value = 1, P.value = 1, z.value = 0, s.value = 0, v.value = 0;
}
function we() {
z.value += 90;
}
function ye() {
z.value -= 90;
}
function ze() {
$.value *= -1;
}
function be() {
P.value *= -1;
}
function Ce(l) {
const a = l.deltaY * t.zoomRatio * 0.1;
i.value === t.minZoomScale && a > 0 || i.value === t.maxZoomScale && a < 0 || (i.value - a < t.minZoomScale ? i.value = t.minZoomScale : i.value - a > t.maxZoomScale ? i.value = t.maxZoomScale : i.value = F(i.value, -a));
}
function ke(l) {
if (!l.target) return;
const a = l.target, u = a.getBoundingClientRect();
A.value = u.top, I.value = u.bottom, D.value = u.right, E.value = u.left, W.value = window.innerWidth, Y.value = window.innerHeight, J.value = l.clientX, Q.value = l.clientY, p.value = s.value, g.value = v.value, a.setPointerCapture(l.pointerId), document.addEventListener("pointermove", N), document.addEventListener("pointerup", H), document.addEventListener("pointercancel", H), N(l);
}
function N(l) {
s.value = p.value + l.clientX - J.value, v.value = g.value + l.clientY - Q.value;
}
function H() {
t.draggable ? (s.value > p.value + W.value - D.value && (s.value = p.value + W.value - D.value), s.value < p.value - E.value && (s.value = p.value - E.value), v.value > g.value + Y.value - I.value && (v.value = g.value + Y.value - I.value), v.value < g.value - A.value && (v.value = g.value - A.value)) : (s.value = 0, v.value = 0), document.removeEventListener("pointermove", N), document.removeEventListener("pointerup", H), document.removeEventListener("pointercancel", H);
}
function ae() {
t.loop ? r.value = (r.value - 1 + m.value) % m.value : r.value > 0 && r.value--, B();
}
function le() {
t.loop ? r.value = (r.value + 1) % m.value : r.value < m.value - 1 && r.value++, B();
}
return (l, a) => (h(), f("div", {
class: "image-wrap",
style: b(`--image-primary-color: ${V(se)[5]};`)
}, [
C(V(Re), K({ gap: "small" }, n.spaceProps), {
default: k(() => [
(h(!0), f(O, null, oe(d.value, (u, c) => L((h(), f("div", {
key: c,
class: w(["image-container", {
"image-bordered": n.bordered,
"image-hover-mask": !n.disabled && (Z.value[c] || x.value[c]?.naturalWidth)
}]),
style: b(`width: ${_(t.width, c)}; height: ${_(t.height, c)};`)
}, [
C(V(re), K({
spinning: !(Z.value[c] || x.value[c]?.naturalWidth),
color: "var(--image-primary-color)",
indicator: "dynamic-circle",
size: "small"
}, { ref_for: !0 }, n.spinProps), {
default: k(() => [
e("img", {
ref_for: !0,
ref_key: "imagesRef",
ref: x,
class: "image-item",
style: b(`object-fit: ${n.fit};`),
onLoad: (T) => de(c),
src: u.src,
alt: M(u)
}, null, 44, $e)
]),
_: 2
}, 1040, ["spinning"]),
n.disabled ? ie("", !0) : (h(), f("div", {
key: 0,
class: "image-mask",
onClick: (T) => ee(c)
}, [
e("div", Ae, [
a[1] || (a[1] = e("svg", {
class: "eye-svg",
focusable: "false",
"data-icon": "eye",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" })
], -1)),
e("p", Ie, [
Me(l.$slots, "preview", {}, () => [
Be(R(n.preview), 1)
], !0)
])
])
], 8, Pe))
], 6)), [
[S, !n.album || n.album && c === 0]
])), 128))
]),
_: 3
}, 16),
C(ne, { name: "fade" }, {
default: k(() => [
L(e("div", De, null, 512), [
[S, y.value]
])
]),
_: 1
}),
C(ne, {
name: "zoom",
"enter-from-class": "zoom-enter",
"enter-active-class": "zoom-enter",
"enter-to-class": "zoom-enter zoom-enter-active",
"leave-from-class": "zoom-leave",
"leave-active-class": "zoom-leave zoom-leave-active",
"leave-to-class": "zoom-leave zoom-leave-active"
}, {
default: k(() => [
L(e("div", {
ref_key: "previewRef",
ref: U,
class: "preview-container",
tabindex: "-1",
onClick: j(X, ["self"]),
onWheel: j(Ce, ["prevent"]),
onKeydown: [
fe,
He(X, ["esc"])
]
}, [
e("div", Ee, [
e("div", We, [
e("a", {
class: "preview-name",
href: d.value[r.value].src,
target: "_blank",
title: M(d.value[r.value])
}, R(M(d.value[r.value])), 9, Ye),
L(e("p", { class: "preview-progress" }, R(r.value + 1) + " / " + R(m.value), 513), [
[S, Array.isArray(n.src)]
]),
e("div", {
class: "preview-operation",
title: "关闭",
onClick: X
}, [...a[2] || (a[2] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
], -1)
])]),
e("div", {
class: w(["preview-operation", { "operation-disabled": i.value === n.maxZoomScale }]),
title: "下载",
onClick: he
}, [...a[3] || (a[3] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "download",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" })
], -1)
])], 2),
e("div", {
class: w(["preview-operation", { "operation-disabled": i.value === n.maxZoomScale }]),
title: "放大",
onClick: pe
}, [...a[4] || (a[4] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "zoom-in",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" })
], -1)
])], 2),
e("div", {
class: w(["preview-operation", { "operation-disabled": i.value === n.minZoomScale }]),
title: "缩小",
onClick: ge
}, [...a[5] || (a[5] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "zoom-out",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" })
], -1)
])], 2),
e("div", {
class: "preview-operation",
title: "还原",
onClick: B
}, [...a[6] || (a[6] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "expand",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" })
], -1)
])]),
e("div", {
class: "preview-operation",
title: "向右旋转",
onClick: we
}, [...a[7] || (a[7] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "rotate-right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" }),
e("path", { d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" })
], -1)
])]),
e("div", {
class: "preview-operation",
title: "向左旋转",
onClick: ye
}, [...a[8] || (a[8] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "rotate-left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" }),
e("path", { d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" })
], -1)
])]),
e("div", {
class: "preview-operation",
title: "水平镜像",
onClick: ze
}, [...a[9] || (a[9] = [
e("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "swap",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" })
], -1)
])]),
e("div", {
class: "preview-operation",
title: "垂直镜像",
onClick: be
}, [
(h(), f("svg", Xe, [...a[10] || (a[10] = [
e("path", { d: "M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" }, null, -1)
])]))
])
]),
(h(!0), f(O, null, oe(d.value, (u, c) => L((h(), f("div", {
key: c,
class: "preview-image-container",
style: b(`--drag-transition-duration: ${ve.value}; transform: translate3d(${s.value}px, ${v.value}px, 0px);`)
}, [
C(V(re), K({
spinning: !(G.value[c] || q.value[c]?.naturalWidth),
color: "var(--image-primary-color)",
indicator: "dynamic-circle"
}, { ref_for: !0 }, n.previewSpinProps), {
default: k(() => [
e("img", {
ref_for: !0,
ref_key: "previewImagesRef",
ref: q,
class: "preview-image",
style: b([
n.previewImageStyle,
`transform: scale3d(${$.value * i.value}, ${P.value * i.value}, 1) rotate(${z.value}deg);`
]),
onLoad: (T) => me(c),
src: u.src,
alt: M(u),
onPointerdown: j(ke, ["prevent"]),
onDblclick: a[0] || (a[0] = (T) => n.resetOnDbclick ? B() : () => !1)
}, null, 44, Ne)
]),
_: 2
}, 1040, ["spinning"])
], 4)), [
[S, r.value === c]
])), 128)),
m.value > 1 ? (h(), f(O, { key: 0 }, [
e("div", {
class: w(["switch-left", { "switch-disabled": r.value === 0 && !n.loop }]),
onClick: ae
}, [...a[11] || (a[11] = [
e("svg", {
class: "switch-svg",
focusable: "false",
"data-icon": "left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" })
], -1)
])], 2),
e("div", {
class: w(["switch-right", { "switch-disabled": r.value === m.value - 1 && !n.loop }]),
onClick: le
}, [...a[12] || (a[12] = [
e("svg", {
class: "switch-svg",
focusable: "false",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
e("path", { d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" })
], -1)
])], 2)
], 64)) : ie("", !0)
])
], 544), [
[S, y.value]
])
]),
_: 1
})
], 4));
}
});
export {
Fe as default
};