vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
478 lines (477 loc) • 22.7 kB
JavaScript
import { defineComponent as Le, ref as t, computed as oe, watchEffect as Be, createElementBlock as m, openBlock as f, normalizeStyle as b, unref as V, createVNode as k, mergeProps as K, withCtx as C, Fragment as O, renderList as te, withDirectives as M, normalizeClass as g, createCommentVNode as ie, createElementVNode as a, renderSlot as He, createTextVNode as Ve, toDisplayString as R, vShow as S, Transition as re, withKeys as Re, withModifiers as j, nextTick as Ze } from "vue";
import $e from "../space/index.js";
import ne from "../spin/index.js";
import { useInject as Ae, downloadFile as Ie, add as F } from "../utils/index.js";
const De = ["onLoad", "src", "alt"], Pe = ["onClick"], Ee = { class: "image-mask-info" }, We = { class: "mask-pre" }, Ye = { class: "preview-mask" }, Xe = { class: "preview-body" }, Ne = { class: "preview-operations" }, Te = ["href", "title"], Ke = {
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"
}, Oe = ["onLoad", "src", "alt"], xe = /* @__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(se, { expose: ce }) {
const o = se, v = t([]), U = t(null), r = t(0), w = t(!1), Z = t([]), $ = t([]), q = t([]), x = t([]), y = t(0), i = t(1), A = t(1), I = t(1), G = t(0), J = t(0), s = t(0), c = t(0), p = t(0), h = t(0), D = t(0), P = t(0), E = t(0), W = t(0), Y = t(0), X = t(0), { colorPalettes: ue } = Ae("Image"), d = oe(() => v.value.length), ve = oe(() => o.draggable ? "100ms" : "200ms");
Be(() => {
v.value = de();
});
function de() {
return Array.isArray(o.src) ? o.src : [
{
src: o.src || "",
name: o.name
}
];
}
function me(e) {
$.value[e] = !0;
}
function fe(e) {
x.value[e] = !0;
}
function L(e) {
if (e) {
if (e.name)
return e.name;
{
const l = e.src.split("?")[0].split("/");
return l[l.length - 1];
}
}
}
function Q(e, l) {
return Array.isArray(e) ? typeof e[l] == "number" ? `${e[l]}px` : e[l] : typeof e == "number" ? `${e}px` : e;
}
function pe(e) {
w.value && d.value > 1 && ((e.key === "ArrowLeft" || e.key === "ArrowUp") && ae(), (e.key === "ArrowRight" || e.key === "ArrowDown") && le());
}
async function _(e) {
var l;
i.value = 1, y.value = 0, s.value = 0, c.value = 0, w.value = !0, r.value = e, await Ze(), (l = U.value) == null || l.focus();
}
ce({
preview: _
});
function N() {
w.value = !1;
}
function he() {
const e = v.value[r.value];
Ie(e.src, e.name);
}
function ge() {
i.value + o.zoomRatio > o.maxZoomScale ? i.value = o.maxZoomScale : i.value = F(i.value, o.zoomRatio);
}
function we() {
i.value - o.zoomRatio < o.minZoomScale ? i.value = o.minZoomScale : i.value = F(i.value, -o.zoomRatio);
}
function B() {
i.value = 1, A.value = 1, I.value = 1, y.value = 0, s.value = 0, c.value = 0;
}
function ye() {
y.value += 90;
}
function ze() {
y.value -= 90;
}
function be() {
A.value *= -1;
}
function ke() {
I.value *= -1;
}
function Ce(e) {
const l = e.deltaY * o.zoomRatio * 0.1;
i.value === o.minZoomScale && l > 0 || i.value === o.maxZoomScale && l < 0 || (i.value - l < o.minZoomScale ? i.value = o.minZoomScale : i.value - l > o.maxZoomScale ? i.value = o.maxZoomScale : i.value = F(i.value, -l));
}
function Me(e) {
if (!e.target) return;
const u = e.target.getBoundingClientRect();
D.value = u.top, P.value = u.bottom, E.value = u.right, W.value = u.left, Y.value = window.innerWidth, X.value = window.innerHeight, G.value = e.clientX, J.value = e.clientY, p.value = s.value, h.value = c.value, document.addEventListener("mousemove", T), document.addEventListener("mouseup", ee), T(e);
}
function T(e) {
s.value = p.value + e.clientX - G.value, c.value = h.value + e.clientY - J.value;
}
function ee() {
o.draggable ? (s.value > p.value + Y.value - E.value && (s.value = p.value + Y.value - E.value), s.value < p.value - W.value && (s.value = p.value - W.value), c.value > h.value + X.value - P.value && (c.value = h.value + X.value - P.value), c.value < h.value - D.value && (c.value = h.value - D.value)) : (s.value = 0, c.value = 0), document.removeEventListener("mousemove", T), document.removeEventListener("mouseup", ee);
}
function ae() {
o.loop ? r.value = (r.value - 1 + d.value) % d.value : r.value > 0 && r.value--, B();
}
function le() {
o.loop ? r.value = (r.value + 1) % d.value : r.value < d.value - 1 && r.value++, B();
}
return (e, l) => (f(), m("div", {
class: "m-image",
style: b(`--image-primary-color: ${V(ue)[5]};`)
}, [
k(V($e), K({ gap: "small" }, e.spaceProps), {
default: C(() => [
(f(!0), m(O, null, te(v.value, (u, n) => {
var z, H;
return M((f(), m("div", {
key: n,
class: g(["image-wrap", {
"image-bordered": e.bordered,
"image-hover-mask": !e.disabled && ($.value[n] || ((z = Z.value[n]) == null ? void 0 : z.naturalWidth))
}]),
style: b(`width: ${Q(o.width, n)}; height: ${Q(o.height, n)};`)
}, [
k(V(ne), K({
spinning: !($.value[n] || (H = Z.value[n]) != null && H.naturalWidth),
color: "var(--image-primary-color)",
indicator: "dynamic-circle",
size: "small"
}, { ref_for: !0 }, e.spinProps), {
default: C(() => [
a("img", {
ref_for: !0,
ref_key: "imagesRef",
ref: Z,
class: "image-item",
style: b(`object-fit: ${e.fit};`),
onLoad: (Se) => me(n),
src: u.src,
alt: L(u)
}, null, 44, De)
]),
_: 2
}, 1040, ["spinning"]),
e.disabled ? ie("", !0) : (f(), m("div", {
key: 0,
class: "image-mask",
onClick: (Se) => _(n)
}, [
a("div", Ee, [
l[1] || (l[1] = a("svg", {
class: "eye-svg",
focusable: "false",
"data-icon": "eye",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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)),
a("p", We, [
He(e.$slots, "preview", {}, () => [
Ve(R(e.preview), 1)
], !0)
])
])
], 8, Pe))
], 6)), [
[S, !e.album || e.album && n === 0]
]);
}), 128))
]),
_: 3
}, 16),
k(re, { name: "fade" }, {
default: C(() => [
M(a("div", Ye, null, 512), [
[S, w.value]
])
]),
_: 1
}),
k(re, {
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: C(() => [
M(a("div", {
ref_key: "previewRef",
ref: U,
class: "preview-wrap",
tabindex: "-1",
onClick: j(N, ["self"]),
onWheel: j(Ce, ["prevent"]),
onKeydown: [
pe,
Re(N, ["esc"])
]
}, [
a("div", Xe, [
a("div", Ne, [
a("a", {
class: "preview-name",
href: v.value[r.value].src,
target: "_blank",
title: L(v.value[r.value])
}, R(L(v.value[r.value])), 9, Te),
M(a("p", { class: "preview-progress" }, R(r.value + 1) + " / " + R(d.value), 513), [
[S, Array.isArray(e.src)]
]),
a("div", {
class: "preview-operation",
title: "关闭",
onClick: N
}, l[2] || (l[2] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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)
])),
a("div", {
class: g(["preview-operation", { "operation-disabled": i.value === e.maxZoomScale }]),
title: "下载",
onClick: he
}, l[3] || (l[3] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "download",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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),
a("div", {
class: g(["preview-operation", { "operation-disabled": i.value === e.maxZoomScale }]),
title: "放大",
onClick: ge
}, l[4] || (l[4] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "zoom-in",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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),
a("div", {
class: g(["preview-operation", { "operation-disabled": i.value === e.minZoomScale }]),
title: "缩小",
onClick: we
}, l[5] || (l[5] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "zoom-out",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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),
a("div", {
class: "preview-operation",
title: "还原",
onClick: B
}, l[6] || (l[6] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "expand",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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)
])),
a("div", {
class: "preview-operation",
title: "向右旋转",
onClick: ye
}, l[7] || (l[7] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "rotate-right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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" }),
a("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)
])),
a("div", {
class: "preview-operation",
title: "向左旋转",
onClick: ze
}, l[8] || (l[8] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "rotate-left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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" }),
a("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)
])),
a("div", {
class: "preview-operation",
title: "水平镜像",
onClick: be
}, l[9] || (l[9] = [
a("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "swap",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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)
])),
a("div", {
class: "preview-operation",
title: "垂直镜像",
onClick: ke
}, [
(f(), m("svg", Ke, l[10] || (l[10] = [
a("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)
])))
])
]),
(f(!0), m(O, null, te(v.value, (u, n) => {
var z;
return M((f(), m("div", {
key: n,
class: "preview-image-wrap",
style: b(`--drag-transition-duration: ${ve.value}; transform: translate3d(${s.value}px, ${c.value}px, 0px);`)
}, [
k(V(ne), K({
spinning: !(x.value[n] || (z = q.value[n]) != null && z.naturalWidth),
color: "var(--image-primary-color)",
indicator: "dynamic-circle"
}, { ref_for: !0 }, e.previewSpinProps), {
default: C(() => [
a("img", {
ref_for: !0,
ref_key: "previewImagesRef",
ref: q,
class: "preview-image",
style: b([
e.previewImageStyle,
`transform: scale3d(${A.value * i.value}, ${I.value * i.value}, 1) rotate(${y.value}deg);`
]),
onLoad: (H) => fe(n),
src: u.src,
alt: L(u),
onMousedown: j(Me, ["prevent"]),
onDblclick: l[0] || (l[0] = (H) => e.resetOnDbclick ? B() : () => !1)
}, null, 44, Oe)
]),
_: 2
}, 1040, ["spinning"])
], 4)), [
[S, r.value === n]
]);
}), 128)),
d.value > 1 ? (f(), m(O, { key: 0 }, [
a("div", {
class: g(["switch-left", { "switch-disabled": r.value === 0 && !e.loop }]),
onClick: ae
}, l[11] || (l[11] = [
a("svg", {
class: "switch-svg",
focusable: "false",
"data-icon": "left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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),
a("div", {
class: g(["switch-right", { "switch-disabled": r.value === d.value - 1 && !e.loop }]),
onClick: le
}, l[12] || (l[12] = [
a("svg", {
class: "switch-svg",
focusable: "false",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
a("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, w.value]
])
]),
_: 1
})
], 4));
}
});
export {
xe as default
};