@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
456 lines (455 loc) • 17.4 kB
JavaScript
import { defineComponent as fe, toRef as me, ref as S, reactive as te, computed as b, watch as W, provide as he, shallowReadonly as be, openBlock as s, createElementBlock as f, Fragment as R, withDirectives as ge, createElementVNode as p, renderSlot as y, vShow as ye, createVNode as g, unref as e, mergeProps as ae, withCtx as c, normalizeClass as v, normalizeStyle as ke, createCommentVNode as x, Transition as we, createBlock as D, normalizeProps as $, guardReactiveProps as _, createTextVNode as V, toDisplayString as T, renderList as le } from "vue";
import "../bubble/index.mjs";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../masker/index.mjs";
import "../renderer/index.mjs";
import { useProps as xe, useNameHelper as $e, useLocale as _e, useIcons as Ce, emitEvent as A, getStepByWord as Se } from "@vexip-ui/config";
import { useModifier as Te, usePopper as Ae, unrefElement as Me } from "@vexip-ui/hooks";
import { getGlobalCount as Pe, decide as Re, isClient as Be, callIfFunc as Ie, isFunction as Ne } from "@vexip-ui/utils";
import { tourProps as ze } from "./props.mjs";
import { TOUR_STATE as Ee } from "./symbol.mjs";
import De from "../masker/masker.vue2.mjs";
import Ve from "../bubble/bubble.vue2.mjs";
import k from "../renderer/renderer.mjs";
import Fe from "../icon/icon.mjs";
import re from "../button/button.mjs";
const Ue = {
role: "none",
"aria-hidden": "true"
}, He = { style: { width: "100%", height: "100%" } }, Le = ["id"], Ge = ["x", "y", "width", "height"], Ke = ["mask"], Oe = {
key: 0,
fill: "transparent",
style: { "pointer-events": "auto" }
}, We = ["x", "y", "width", "height"], dt = /* @__PURE__ */ fe({
name: "Tour",
inheritAttrs: !1,
__name: "tour",
props: ze,
emits: ["update:active", "update:index"],
setup(ne, { expose: se, emit: oe }) {
const a = xe("tour", ne, {
locale: null,
active: !1,
index: {
static: !0,
default: 0,
validator: (t) => t >= 0
},
steps: {
static: !0,
default: () => []
},
type: "default",
hideMask: !1,
signType: "dot",
padding: 10,
closable: !0,
permeable: !1,
transfer: !1,
slots: () => ({})
}), M = oe, ue = `${Pe()}`, l = $e("tour"), B = _e("tour", me(a, "locale")), j = Ce(), i = S(a.active), n = S(a.index), F = te(/* @__PURE__ */ new Set()), o = S(), I = S(), q = S(), U = S(), H = b(() => {
var t;
return (t = q.value) == null ? void 0 : t.wrapper;
});
Te({
target: H,
passive: !1,
onKeyDown: (t, r) => {
i.value && Re(
[
[() => r.left || r.up, N],
[() => r.right || r.down, z],
[() => r.escape, Y]
],
{
beforeMatchAny: () => {
t.preventDefault(), t.stopPropagation();
},
afterMatchAny: r.resetAll
}
);
}
});
const w = b(() => Array.from(F).concat(a.steps).sort((t, r) => (t.order || 0) - (r.order || 0))), u = b(() => w.value[n.value]), P = b(() => {
var r;
const t = ((r = u.value) == null ? void 0 : r.type) || a.type;
return t === "default" ? void 0 : t;
}), ie = b(() => [
l.b(),
l.bs("vars"),
{
[l.bm("hide-mask")]: a.hideMask,
[l.bm("permeable")]: a.permeable
}
]), C = b(() => Array.isArray(a.padding) ? a.padding.length === 2 ? [a.padding[0], a.padding[1], a.padding[0], a.padding[1]] : a.padding : new Array(4).fill(a.padding)), J = b(() => `${l.bs(ue)}__mask`), { reference: de, placement: pe, updatePopper: Q } = Ae({
wrapper: H,
placement: b(() => {
var t;
return ((t = u.value) == null ? void 0 : t.placement) || "bottom";
}),
popper: b(() => {
var t;
return (t = U.value) == null ? void 0 : t.$el;
}),
arrow: b(() => {
var t;
return (t = U.value) == null ? void 0 : t.arrow;
}),
shift: { crossAxis: !0 },
autoUpdate: !1
});
W(
() => a.active,
(t) => {
t ? L() : i.value = t;
}
), W(
() => a.index,
(t) => {
n.value = Math.max(0, t);
}
), W(
[i, u],
() => {
if (I.value = void 0, !Be || !i.value || !u.value) return;
const t = Me(Ie(u.value.target));
if (!t) {
o.value = void 0;
return;
}
const { top: r, left: m, width: h, height: G } = t.getBoundingClientRect();
if (o.value = [
m - C.value[3],
r - C.value[0],
h + C.value[1] + C.value[3],
G + C.value[0] + C.value[2]
], a.permeable) {
const [K, O, Z, ee] = o.value;
I.value = [
[0, 0, "100%", O],
[K + Z, 0, `calc(100% - ${K + Z}px)`, "100%"],
[0, O + ee, "100%", `calc(100% - ${O + ee}px)`],
[0, 0, K, "100%"]
];
}
Q();
},
{ immediate: !0, flush: "post" }
), he(Ee, {
increaseStep: ce,
decreaseStep: ve
}), se({
wrapper: H,
currentActive: i,
currentIndex: n,
currentStep: u,
allSteps: w,
start: L,
prev: N,
next: z,
close: E
});
const X = { start: L, prev: N, next: z, close: E }, d = be(
te({
...X,
step: u,
index: n
})
);
function ce(t) {
F.add(t);
}
function ve(t) {
F.delete(t);
}
function L() {
i.value || (i.value = !0, M("update:active", !0), A(a.onToggle, !0), n.value && (n.value = 0, M("update:index", 0)));
}
function N() {
!i.value || n.value <= 0 || (--n.value, M("update:index", n.value), A(a.onChange, n.value, u.value));
}
function z(t = !0) {
if (i.value) {
if (n.value >= w.value.length - 1) {
t && E();
return;
}
++n.value, M("update:index", n.value), A(a.onChange, n.value, u.value);
}
}
function E() {
i.value && (i.value = !1, M("update:active", !1), A(a.onToggle, !1));
}
function Y() {
i.value && (E(), A(a.onClose));
}
return (t, r) => (s(), f(R, null, [
ge(p("div", Ue, [
y(t.$slots, "default")
], 512), [
[ye, !1]
]),
g(e(De), ae(t.$attrs, {
ref_key: "masker",
ref: q,
active: i.value,
"onUpdate:active": r[1] || (r[1] = (m) => i.value = m),
inherit: e(a).inherit,
class: ie.value,
transfer: t.transfer,
"auto-remove": "",
"transition-name": "",
disabled: e(a).hideMask,
onShow: e(Q),
onHide: r[2] || (r[2] = (m) => o.value = void 0),
onMaskClick: r[3] || (r[3] = (m) => e(A)(e(a).onMaskClick, m))
}), {
default: c(({ show: m }) => [
o.value ? (s(), f("div", {
key: 0,
ref_key: "reference",
ref: de,
class: v(e(l).be("reference")),
role: "none",
"aria-hidden": "true",
style: ke({
top: `${o.value[1]}px`,
left: `${o.value[0]}px`,
width: `${o.value[2]}px`,
height: `${o.value[3]}px`
})
}, null, 6)) : x("", !0),
g(we, {
appear: "",
name: e(l).ns("fade")
}, {
default: c(() => [
m && u.value ? (s(), D(e(Ve), {
key: 0,
ref_key: "bubble",
ref: U,
inherit: "",
class: v([
e(l).be("bubble"),
!o.value && e(l).bem("bubble", "center"),
P.value && e(l).bem("bubble", "typed"),
P.value && e(l).bem("bubble", P.value)
]),
"content-class": e(l).be("step"),
placement: e(pe),
type: u.value.type || e(a).type
}, {
default: c(() => [
e(Ne)(u.value.renderer) ? (s(), D(e(k), {
key: 0,
renderer: u.value.renderer,
data: X
}, null, 8, ["renderer"])) : (s(), f(R, { key: 1 }, [
p("div", {
class: v(e(l).be("header"))
}, [
y(t.$slots, "header", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.header,
data: e(d)
}, {
default: c(() => [
p("div", {
class: v(e(l).be("title"))
}, [
y(t.$slots, "title", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.title,
data: e(d)
}, {
default: c(() => [
V(T(u.value.title ?? e(Se)(e(B).stepCount, n.value)), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2),
e(a).closable ? (s(), f("button", {
key: 0,
type: "button",
class: v(e(l).be("close")),
onClick: Y
}, [
y(t.$slots, "close", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.close,
data: e(d)
}, {
default: c(() => [
g(e(Fe), ae(e(j).close, {
scale: +(e(j).close.scale || 1) * 1.2,
label: "close"
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)) : x("", !0)
]),
_: 3
}, 8, ["renderer", "data"])
])
], 2),
p("div", {
class: v(e(l).be("content"))
}, [
y(t.$slots, "body", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.body,
data: e(d)
}, {
default: c(() => [
V(T(u.value.content), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2),
p("div", {
class: v(e(l).be("footer"))
}, [
y(t.$slots, "footer", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.footer,
data: e(d)
}, {
default: c(() => [
p("div", {
class: v([e(l).be("sign"), e(l).bem("sign", e(a).signType)])
}, [
y(t.$slots, "sign", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.sign,
data: e(d)
}, {
default: c(() => [
e(a).signType === "count" ? (s(), f(R, { key: 0 }, [
p("span", null, T(n.value + 1), 1),
p("span", {
class: v(e(l).be("count-sep"))
}, "/", 2),
p("span", null, T(w.value.length), 1)
], 64)) : (s(!0), f(R, { key: 1 }, le(w.value.length, (h) => (s(), f("span", {
key: h,
class: v([
e(l).be(`sign-${e(a).signType === "dot" ? "dot" : "bar"}`),
h - 1 === n.value && e(l).bem(`sign-${e(a).signType === "dot" ? "dot" : "bar"}`, "active")
])
}, null, 2))), 128))
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2),
r[4] || (r[4] = p("span", {
style: { flex: "auto" },
role: "none"
}, null, -1)),
y(t.$slots, "actions", $(_(e(d))), () => [
g(e(k), {
renderer: e(a).slots.actions,
data: e(d)
}, {
default: c(() => [
n.value > 0 ? (s(), D(e(re), {
key: 0,
inherit: "",
class: v([e(l).be("action"), e(l).bem("action", "prev")]),
size: "small",
text: !!P.value,
onClick: N
}, {
default: c(() => [
V(T(e(B).prev), 1)
]),
_: 1
}, 8, ["class", "text"])) : x("", !0),
n.value <= w.value.length - 1 ? (s(), D(e(re), {
key: 1,
inherit: "",
class: v([e(l).be("action"), e(l).bem("action", "next")]),
type: P.value ? "default" : "primary",
size: "small",
onClick: r[0] || (r[0] = (h) => z())
}, {
default: c(() => [
V(T(n.value === w.value.length - 1 ? e(B).done : e(B).next), 1)
]),
_: 1
}, 8, ["class", "type"])) : x("", !0)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
_: 3
}, 8, ["renderer", "data"])
])
], 2)
], 64))
]),
_: 3
}, 8, ["class", "content-class", "placement", "type"])) : x("", !0)
]),
_: 2
}, 1032, ["name"])
]),
mask: c(() => {
var m;
return [
(s(), f("svg", He, [
p("defs", null, [
p("mask", { id: J.value }, [
r[5] || (r[5] = p("rect", {
x: "0",
y: "0",
width: "100%",
height: "100%",
fill: "white"
}, null, -1)),
o.value ? (s(), f("rect", {
key: 0,
class: v([e(l).be("hollow"), e(l).bem("hollow", "active")]),
x: o.value[0],
y: o.value[1],
width: o.value[2],
height: o.value[3],
fill: "black"
}, null, 10, Ge)) : x("", !0)
], 8, Le)
]),
p("rect", {
x: "0",
y: "0",
width: "100%",
height: "100%",
fill: "rgba(0, 0, 0, 45%)",
mask: `url(#${J.value})`
}, null, 8, Ke),
(m = I.value) != null && m.length ? (s(), f("g", Oe, [
(s(!0), f(R, null, le(I.value, (h, G) => (s(), f("rect", {
key: G,
x: h[0],
y: h[1],
width: h[2],
height: h[3]
}, null, 8, We))), 128))
])) : x("", !0)
]))
];
}),
_: 3
}, 16, ["active", "inherit", "class", "transfer", "disabled", "onShow"])
], 64));
}
});
export {
dt as default
};
//# sourceMappingURL=tour.vue2.mjs.map