@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
200 lines (199 loc) • 6.54 kB
JavaScript
import { defineComponent as F, ref as C, computed as f, watch as k, createBlock as M, openBlock as I, unref as e, normalizeClass as s, withCtx as d, withDirectives as j, createElementVNode as o, createVNode as i, createElementBlock as q, createCommentVNode as G, mergeProps as h, renderSlot as b, Fragment as J, withModifiers as y, vShow as K } from "vue";
import "../icon/index.mjs";
import "../masker/index.mjs";
import "../renderer/index.mjs";
import "../viewer/index.mjs";
import { useProps as O, useNameHelper as Q, useIcons as U, emitEvent as u } from "@vexip-ui/config";
import { ensureArray as W, isDefined as X, boundRange as Y } from "@vexip-ui/utils";
import { imageViewerProps as Z } from "./props.mjs";
import ee from "../masker/masker.vue2.mjs";
import ae from "../viewer/viewer.vue2.mjs";
import g from "../renderer/renderer.mjs";
import N from "../icon/icon.mjs";
const te = ["src"], he = /* @__PURE__ */ F({
name: "ImageViewer",
__name: "image-viewer",
props: Z,
emits: ["update:active", "update:index"],
setup(L, { expose: R, emit: S }) {
const a = O("imageViewer", L, {
active: !1,
index: 0,
srcList: {
default: "",
static: !0
},
transfer: !1,
viewerProps: () => ({}),
slots: () => ({})
}), P = S, r = Q("image-viewer"), c = U(), v = C(a.active), l = C(a.index), w = C(), A = f(() => [r.b(), r.ns("image-vars"), a.inherit && r.bm("inherit")]), n = f(() => W(X(a.srcList) ? a.srcList : "")), p = f(() => l.value <= 0), m = f(() => l.value >= n.value.length - 1);
k(
() => a.active,
(t) => {
v.value = t;
}
), k(
() => a.index,
(t) => {
l.value = t;
}
), k(() => n.value.length, _), R({
currentActive: v,
currentIndex: l,
prevDisabled: p,
nextDisabled: m,
viewer: w
});
function V(t) {
v.value !== t && (v.value = t, P("update:active", t), u(a.onToggle, t));
}
function _() {
l.value = Y(l.value, 0, n.value.length - 1);
}
function $() {
var x;
const t = l.value;
(x = w.value) == null || x.handleReset(), P("update:index", t), u(a.onChange, t, n.value[t]);
}
function D() {
if (p.value) return;
const t = l.value;
l.value--, _(), l.value !== t && $(), u(a.onPrev, l.value, n.value[l.value]);
}
function H() {
if (m.value) return;
const t = l.value;
l.value++, _(), l.value !== t && $(), u(a.onNext, l.value, n.value[l.value]);
}
function B() {
V(!1), u(a.onClose);
}
function E() {
u(a.onShow);
}
function T() {
u(a.onHide);
}
return (t, x) => (I(), M(e(ee), {
active: v.value,
inherit: e(a).inherit,
class: s(A.value),
closable: "",
"auto-remove": "",
transfer: e(a).transfer,
onShow: E,
onHide: T,
onToggle: V
}, {
default: d(({ show: z }) => [
j(o("div", {
class: s(e(r).be("wrapper"))
}, [
i(e(ae), h(e(a).viewerProps, {
ref_key: "viewer",
ref: w
}), {
default: d(() => [
b(t.$slots, "default", {
src: n.value[l.value]
}, () => [
i(e(g), {
renderer: e(a).slots.default,
data: { src: n.value[l.value] }
}, {
default: d(() => [
o("img", {
src: n.value[l.value]
}, null, 8, te)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
_: 3
}, 16),
n.value.length > 1 ? (I(), q(J, { key: 0 }, [
o("button", {
type: "button",
class: s([e(r).be("prev"), p.value && e(r).bem("prev", "disabled")]),
onClick: y(D, ["stop"])
}, [
b(t.$slots, "prev", { disabled: p.value }, () => [
i(e(g), {
renderer: e(a).slots.prev,
data: { disabled: p.value }
}, {
default: d(() => [
o("div", {
class: s(e(r).be("prev-handler"))
}, [
i(e(N), h(e(c).angleLeft, {
scale: +(e(c).angleLeft.scale || 1) * 1.4,
label: "prev"
}), null, 16, ["scale"])
], 2)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2),
o("button", {
type: "button",
class: s([e(r).be("next"), m.value && e(r).bem("next", "disabled")]),
onClick: y(H, ["stop"])
}, [
b(t.$slots, "next", { disabled: m.value }, () => [
i(e(g), {
renderer: e(a).slots.next,
data: { disabled: m.value }
}, {
default: d(() => [
o("div", {
class: s(e(r).be("next-handler"))
}, [
i(e(N), h(e(c).angleRight, {
scale: +(e(c).angleRight.scale || 1) * 1.4,
label: "next"
}), null, 16, ["scale"])
], 2)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)
], 64)) : G("", !0),
o("button", {
type: "button",
class: s(e(r).be("close")),
onClick: y(B, ["stop"])
}, [
b(t.$slots, "close", {}, () => [
i(e(g), {
renderer: e(a).slots.close
}, {
default: d(() => [
o("div", {
class: s(e(r).be("close-handler"))
}, [
i(e(N), h(e(c).close, {
scale: +(e(c).close.scale || 1) * 1.4,
label: "close"
}), null, 16, ["scale"])
], 2)
]),
_: 1
}, 8, ["renderer"])
])
], 2)
], 2), [
[K, z]
])
]),
_: 3
}, 8, ["active", "inherit", "class", "transfer"]));
}
});
export {
he as default
};
//# sourceMappingURL=image-viewer.vue2.mjs.map