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