@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
457 lines (456 loc) • 17.4 kB
JavaScript
import { defineComponent as ve, toRef as fe, ref as S, reactive as te, computed as y, watch as j, provide as me, shallowReadonly as he, createElementBlock as f, openBlock as s, Fragment as R, withDirectives as be, createVNode as b, createElementVNode as p, renderSlot as g, vShow as ye, unref as e, mergeProps as ae, withCtx as c, createCommentVNode as x, normalizeClass as v, renderList as le, normalizeStyle as ge, Transition as ke, createBlock as D, normalizeProps as $, guardReactiveProps as _, createTextVNode as V, toDisplayString as T } 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 we, useNameHelper as xe, useLocale as $e, useIcons as _e, useId 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 { decide as Pe, isClient as Re, callIfFunc as Be, isFunction as Ie } from "@vexip-ui/utils";
import { tourProps as Ne } from "./props.mjs";
import { TOUR_STATE as ze } from "./symbol.mjs";
import Ee from "../masker/masker.vue2.mjs";
import De from "../bubble/bubble.vue2.mjs";
import k from "../renderer/renderer.mjs";
import Ve from "../icon/icon.mjs";
import re from "../button/button.mjs";
const Fe = {
role: "none",
"aria-hidden": "true"
}, Ue = { style: { width: "100%", height: "100%" } }, He = ["id"], Le = ["x", "y", "width", "height"], Ke = ["mask"], Oe = {
key: 0,
fill: "transparent",
style: { "pointer-events": "auto" }
}, We = ["x", "y", "width", "height"], it = /* @__PURE__ */ ve({
name: "Tour",
inheritAttrs: !1,
__name: "tour",
props: Ne,
emits: ["update:active", "update:index"],
setup(ne, { expose: se, emit: oe }) {
const a = we("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, l = xe("tour"), B = $e("tour", fe(a, "locale")), q = _e(), i = S(a.active), n = S(a.index), F = te(/* @__PURE__ */ new Set()), o = S(), I = S(), G = S(), U = S(), H = y(() => {
var t;
return (t = G.value) == null ? void 0 : t.wrapper;
});
Te({
target: H,
passive: !1,
onKeyDown: (t, r) => {
i.value && Pe(
[
[() => r.left || r.up, N],
[() => r.right || r.down, z],
[() => r.escape, Y]
],
{
beforeMatchAny: () => {
t.preventDefault(), t.stopPropagation();
},
afterMatchAny: r.resetAll
}
);
}
});
const w = y(() => Array.from(F).concat(a.steps).sort((t, r) => (t.order || 0) - (r.order || 0))), u = y(() => w.value[n.value]), P = y(() => {
var r;
const t = ((r = u.value) == null ? void 0 : r.type) || a.type;
return t === "default" ? void 0 : t;
}), ue = y(() => [
l.b(),
l.bs("vars"),
{
[l.bm("hide-mask")]: a.hideMask,
[l.bm("permeable")]: a.permeable
}
]), C = y(() => 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 = Ce(), { reference: ie, placement: de, updatePopper: Q } = Ae({
wrapper: H,
placement: y(() => {
var t;
return ((t = u.value) == null ? void 0 : t.placement) || "bottom";
}),
popper: y(() => {
var t;
return (t = U.value) == null ? void 0 : t.$el;
}),
arrow: y(() => {
var t;
return (t = U.value) == null ? void 0 : t.arrow;
}),
shift: { crossAxis: !0 },
autoUpdate: !1
});
j(
() => a.active,
(t) => {
t ? L() : i.value = t;
}
), j(
() => a.index,
(t) => {
n.value = Math.max(0, t);
}
), j(
[i, u],
() => {
if (I.value = void 0, !Re || !i.value || !u.value) return;
const t = Me(Be(u.value.target));
if (!t) {
o.value = void 0;
return;
}
const { top: r, left: m, width: h, height: K } = t.getBoundingClientRect();
if (o.value = [
m - C.value[3],
r - C.value[0],
h + C.value[1] + C.value[3],
K + C.value[0] + C.value[2]
], a.permeable) {
const [O, W, Z, ee] = o.value;
I.value = [
[0, 0, "100%", W],
[O + Z, 0, `calc(100% - ${O + Z}px)`, "100%"],
[0, W + ee, "100%", `calc(100% - ${W + ee}px)`],
[0, 0, O, "100%"]
];
}
Q();
},
{ immediate: !0, flush: "post" }
), me(ze, {
increaseStep: pe,
decreaseStep: ce
}), 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 = he(
te({
...X,
step: u,
index: n
})
);
function pe(t) {
F.add(t);
}
function ce(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, [
be(p("div", Fe, [
g(t.$slots, "default")
], 512), [
[ye, !1]
]),
b(e(Ee), ae(t.$attrs, {
ref_key: "masker",
ref: G,
active: i.value,
"onUpdate:active": r[1] || (r[1] = (m) => i.value = m),
inherit: e(a).inherit,
class: ue.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: ie,
class: v(e(l).be("reference")),
role: "none",
"aria-hidden": "true",
style: ge({
top: `${o.value[1]}px`,
left: `${o.value[0]}px`,
width: `${o.value[2]}px`,
height: `${o.value[3]}px`
})
}, null, 6)) : x("", !0),
b(ke, {
appear: "",
name: e(l).ns("fade")
}, {
default: c(() => [
m && u.value ? (s(), D(e(De), {
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(de),
type: u.value.type || e(a).type
}, {
default: c(() => [
e(Ie)(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"))
}, [
g(t.$slots, "header", $(_(e(d))), () => [
b(e(k), {
renderer: e(a).slots.header,
data: e(d)
}, {
default: c(() => [
p("div", {
class: v(e(l).be("title"))
}, [
g(t.$slots, "title", $(_(e(d))), () => [
b(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
}, [
g(t.$slots, "close", $(_(e(d))), () => [
b(e(k), {
renderer: e(a).slots.close,
data: e(d)
}, {
default: c(() => [
b(e(Ve), ae(e(q).close, {
scale: +(e(q).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"))
}, [
g(t.$slots, "body", $(_(e(d))), () => [
b(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"))
}, [
g(t.$slots, "footer", $(_(e(d))), () => [
b(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)])
}, [
g(t.$slots, "sign", $(_(e(d))), () => [
b(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)),
g(t.$slots, "actions", $(_(e(d))), () => [
b(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,
__: [4]
}, 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", Ue, [
p("defs", null, [
p("mask", { id: e(J) }, [
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, Le)) : x("", !0)
], 8, He)
]),
p("rect", {
x: "0",
y: "0",
width: "100%",
height: "100%",
fill: "rgba(0, 0, 0, 45%)",
mask: `url(#${e(J)})`
}, null, 8, Ke),
(m = I.value) != null && m.length ? (s(), f("g", Oe, [
(s(!0), f(R, null, le(I.value, (h, K) => (s(), f("rect", {
key: K,
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 {
it as default
};
//# sourceMappingURL=tour.vue2.mjs.map