@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, openBlock as I, createBlock as M, unref as e, normalizeClass as s, withCtx as d, withDirectives as j, createElementVNode as o, createVNode as i, mergeProps as h, renderSlot as b, createElementBlock as q, Fragment as G, withModifiers as y, createCommentVNode as J, 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(G, { 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)) : J("", !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