@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
347 lines (346 loc) • 11.3 kB
JavaScript
import { defineComponent as Re, toRef as Fe, ref as R, reactive as ze, h, computed as g, onMounted as Se, nextTick as we, createElementBlock as F, openBlock as c, normalizeStyle as P, normalizeClass as M, createElementVNode as E, unref as y, renderSlot as ee, Fragment as Y, renderList as te, createBlock as W, createCommentVNode as oe, withModifiers as xe, createTextVNode as ke, toDisplayString as Me } from "vue";
import "../divider/index.mjs";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useProps as Te, useNameHelper as _e, useLocale as Le, useIcons as $e, emitEvent as v } from "@vexip-ui/config";
import { useSetTimeout as Ce, useFullScreen as Ye, useMoving as Ae, useModifier as Ie } from "@vexip-ui/hooks";
import { callIfFunc as Xe, toCssSize as le, toFixed as Pe, boundRange as Ee } from "@vexip-ui/utils";
import { viewerProps as Ve } from "./props.mjs";
import { InternalActionName as n, viewerDefaultActionLayout as Ze } from "./symbol.mjs";
import d from "../icon/icon.mjs";
import Be from "../renderer/renderer.mjs";
import Ne from "../divider/divider.vue2.mjs";
const Oe = ["title", "onClick"], at = /* @__PURE__ */ Re({
name: "Viewer",
__name: "viewer",
props: Ve,
setup(ae, { expose: ne }) {
const e = Te("viewer", ae, {
locale: null,
width: "100%",
height: "100%",
moveDisabled: !1,
zoomDisabled: !1,
zoomDelta: 0.15,
zoomMin: 0.1,
zoomMax: 1 / 0,
rotateDisabled: !1,
rotateDelta: 90,
flipDisabled: !1,
fullDisabled: !1,
toolbarPlacement: "bottom",
actions: () => [],
toolbarFade: !1,
noTransition: !1,
centerScale: !1,
actionLayout: () => []
}), a = _e("viewer"), f = Le("viewer", Fe(e, "locale")), m = $e(), { timer: V } = Ce(), Z = R(!1), p = R(1), s = R(0), T = R(!1), _ = R(!1), A = R(), z = R(), { supported: re, full: S, enter: ie, exit: se } = Ye(A), {
target: D,
x: w,
y: x,
moving: L
} = Ae({
onStart: (t, o) => {
if (e.moveDisabled || o.button > 0)
return !1;
v(e.onMoveStart, B());
},
onMove: () => {
v(e.onMoveStart, B());
},
onEnd: () => {
v(e.onMoveStart, B());
}
}), r = ze({
zoom: p,
rotate: s,
flipX: T,
flipY: _,
full: S,
moving: L,
x: w,
y: x
}), $ = {
x: 0,
y: 0
};
Ie({
target: A,
passive: !1,
onKeyDown: (t, o) => {
if (!L.value && (o.up || o.down || o.left || o.right)) {
t.preventDefault();
const i = o.up || o.down ? x : w, u = o.up || o.left ? -10 : 10;
i.value += t.ctrlKey ? 5 * u : u, o.resetAll();
}
}
});
function B() {
return r;
}
function k(t, o) {
return Xe(t[o], r);
}
function b(t) {
return a.be(t);
}
const ue = [
{
name: n.RotateRight,
process: () => O(e.rotateDelta),
iconRenderer: () => h(d, m.value.rotateRight),
class: b(n.RotateRight),
title: () => f.value.rotateRight,
hidden: () => e.rotateDisabled
},
{
name: n.RotateLeft,
process: () => O(-1 * e.rotateDelta),
iconRenderer: () => h(d, m.value.rotateLeft),
class: b(n.RotateLeft),
title: () => f.value.rotateLeft,
hidden: () => e.rotateDisabled
},
{
name: n.FlipX,
process: () => j(),
iconRenderer: () => h(d, m.value.flipX),
class: b(n.FlipX),
title: () => f.value.flipHorizontal,
hidden: () => e.flipDisabled
},
{
name: n.FlipY,
process: () => G(),
iconRenderer: () => h(d, m.value.flipY),
class: b(n.FlipY),
title: () => f.value.flipVertical,
hidden: () => e.flipDisabled
},
{
name: n.ZoomIn,
process: () => I(e.zoomDelta),
iconRenderer: () => h(d, m.value.zoomIn),
class: b(n.ZoomIn),
title: () => f.value.zoomIn,
hidden: () => e.zoomDisabled
},
{
name: n.ZoomOut,
process: () => I(-1 * e.zoomDelta),
iconRenderer: () => h(d, m.value.zoonOut),
class: b(n.ZoomOut),
title: () => f.value.zoomOut,
hidden: () => e.zoomDisabled
},
{
name: n.FullScreen,
process: () => J(!S.value),
iconRenderer: () => h(d, S.value ? m.value.resetScreen : m.value.fullScreen),
class: b(n.FullScreen),
title: () => S.value ? f.value.fullScreenExit : f.value.fullScreen,
hidden: () => e.fullDisabled
},
{
name: n.Reset,
process: () => Q(),
iconRenderer: () => h(d, m.value.refresh),
class: b(n.Reset),
title: () => f.value.reset
}
], ce = g(() => ({
[a.b()]: !0,
[a.bs("vars")]: !0,
[a.bm("inherit")]: e.inherit,
[a.bm("draggable")]: !e.moveDisabled,
[a.bm("resizable")]: !e.zoomDisabled,
[a.bm("full")]: S.value,
[a.bm("moving")]: L.value,
[a.bm("static")]: e.noTransition
})), ve = g(() => ({
width: le(e.width),
height: le(e.height)
})), q = g(() => {
const [t] = e.toolbarPlacement.split("-");
return t === "left" || t === "right";
}), N = g(() => typeof e.toolbarFade == "number" ? e.toolbarFade : e.toolbarFade ? 1500 : 0), fe = g(() => ({
[a.be("toolbar")]: !0,
[a.bem("toolbar", "active")]: N.value < 300 || Z.value,
[a.bem("toolbar", e.toolbarPlacement)]: !0,
[a.bem("toolbar", "vertical")]: q.value
})), me = g(() => ({
transform: `translate3d(${w.value}px, ${x.value}px, 0) scale(${p.value})`
})), de = g(() => ({
transform: `scaleX(${T.value ? -1 : 1}) scaleY(${_.value ? -1 : 1}) rotate(${s.value}deg)`
})), K = g(() => {
var u;
const t = /* @__PURE__ */ new Map(), o = [];
ue.concat(e.actions).forEach((l) => {
l.name && t.set(l.name, l);
});
let i;
(u = e.actionLayout) != null && u.length ? i = e.actionLayout : (i = [...Ze], e.actions.length && i.push(e.actions.map((l) => l.name)));
for (const l of i) {
const C = l.map((H) => t.get(H)).filter(Boolean);
C.length && o.push(C);
}
return o;
});
ne({
moving: L,
fullSupported: re,
state: r,
viewer: A,
container: D,
transition: z,
handleRotate: O,
toggleFlipHorizontal: j,
toggleFlipVertical: G,
handleZoom: I,
toggleFull: J,
handleReset: Q
}), Se(() => {
if (D.value) {
const t = D.value.getBoundingClientRect();
$.x = t.left + t.width * 0.5, $.y = t.top + t.height * 0.5;
}
});
function pe(t) {
t.stopPropagation(), t.preventDefault();
const o = t.deltaY > 0 ? -1 : 1;
$.x = t.clientX, $.y = t.clientY, v(e.onWheel, o, r), I(o * e.zoomDelta);
}
function O(t, o = !0) {
e.rotateDisabled || (s.value += t, e.noTransition && s.value % 360 === 0 && (s.value = 0), o && v(e.onRotate, t, r), e.noTransition && we(U));
}
function j(t = !T.value, o = !0) {
e.flipDisabled || (T.value = t, o && v(e.onFlipX, t, r));
}
function G(t = !_.value, o = !0) {
e.flipDisabled || (_.value = t, o && v(e.onFlipY, t, r));
}
function I(t, o = !0) {
if (e.zoomDisabled || !D.value || L.value) return;
const i = D.value.getBoundingClientRect(), { x: u, y: l } = $, { offsetWidth: C, offsetHeight: H } = D.value, ge = p.value;
p.value = Pe(Ee(p.value + t, e.zoomMin, e.zoomMax), 5);
const X = p.value / ge - 1, ye = X * C * 0.5, De = X * H * 0.5;
e.centerScale || (w.value -= X * (u - i.left - w.value) - ye, x.value -= X * (l - i.top - x.value) - De), o && v(e.onZoom, p.value, r);
}
async function J(t = !S.value, o = !0) {
t ? await ie() : await se(), o && v(e.onFull, t, r);
}
function Q(t = !0) {
x.value = 0, w.value = 0, s.value = 0, T.value = !1, _.value = !1, p.value = 1, t && v(e.onReset, r);
}
function U() {
if (e.noTransition) {
s.value % 360 === 0 && (s.value = 0);
return;
}
const t = [];
s.value % 360 === 0 && t.push(
() => {
z.value && (z.value.style.transitionDuration = "0ms");
},
() => {
s.value = 0;
},
() => {
z.value && (z.value.style.transitionDuration = "");
}
);
const o = () => {
var i;
(i = t.shift()) == null || i(), t.length && requestAnimationFrame(o);
};
o();
}
function be() {
clearTimeout(V.toolbarFade), Z.value = !0;
}
function he() {
clearTimeout(V.toolbarFade), N.value >= 300 && (V.toolbarFade = setTimeout(() => {
Z.value = !1;
}, N.value));
}
return (t, o) => (c(), F("div", {
ref_key: "viewer",
ref: A,
class: M(ce.value),
tabindex: "0",
style: P(ve.value)
}, [
E("div", {
ref_key: "container",
ref: D,
class: M(y(a).be("container")),
onWheel: pe
}, [
E("div", {
class: M(y(a).be("content")),
style: P(me.value)
}, [
E("div", {
ref_key: "transition",
ref: z,
class: M(y(a).be("transition")),
style: P(de.value),
onTransitionend: U
}, [
ee(t.$slots, "default", { state: r })
], 38)
], 6)
], 34),
E("div", {
class: M(fe.value),
role: "toolbar",
onMouseenter: be,
onMouseleave: he
}, [
(c(!0), F(Y, null, te(K.value, (i, u) => (c(), F(Y, { key: u }, [
(c(!0), F(Y, null, te(i, (l) => (c(), F(Y, {
key: l.name
}, [
k(l, "hidden") ? oe("", !0) : (c(), F("button", {
key: 0,
type: "button",
class: M([
{
[y(a).be("action")]: !0,
[y(a).bem("action", "disabled")]: k(l, "disabled")
},
k(l, "class")
]),
title: k(l, "title"),
onClick: xe((C) => l.process(r), ["stop"])
}, [
ee(t.$slots, `action-${l.name}`, { state: r }, () => [
l.iconRenderer ? (c(), W(y(Be), {
key: 0,
renderer: l.iconRenderer,
data: r
}, null, 8, ["renderer", "data"])) : l.icon ? (c(), W(y(d), {
key: 1,
icon: l.icon,
style: P(k(l, "iconStyle")),
scale: k(l, "iconScale") || 1
}, null, 8, ["icon", "style", "scale"])) : (c(), F(Y, { key: 2 }, [
ke(Me(l.name), 1)
], 64))
])
], 10, Oe))
], 64))), 128)),
u !== K.value.length - 1 ? (c(), W(y(Ne), {
key: 0,
inherit: "",
vertical: !q.value
}, null, 8, ["vertical"])) : oe("", !0)
], 64))), 128))
], 34)
], 6));
}
});
export {
at as default
};
//# sourceMappingURL=viewer.vue2.mjs.map