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