@wetspace/pro-components
Version:
::: tip 基本介绍
141 lines (140 loc) • 5.13 kB
JavaScript
import { defineComponent as T, shallowRef as C, computed as y, watch as A, provide as G, openBlock as o, createElementBlock as n, Fragment as b, renderSlot as L, normalizeClass as r, unref as e, createCommentVNode as _, normalizeStyle as P, createBlock as E, withCtx as i, createElementVNode as u, toDisplayString as w, createVNode as c, resolveDynamicComponent as j, renderList as I, createTextVNode as S } from "vue";
import { SymbolState as M } from "./symbol.mjs";
import { wetGuideProps as O } from "./types.mjs";
import { useNamespace as U, ElPopover as W, ElButton as x, ElIcon as X, ElSpace as $ } from "element-plus";
import { Close as q } from "../../node_modules/.pnpm/@element-plus_icons-vue@2.3.1_vue@3.5.12_typescript@5.4.2_/node_modules/@element-plus/icons-vue/dist/index.mjs";
const H = { key: 1 }, J = { class: "actions-btnbox" }, k = 8, le = /* @__PURE__ */ T({
name: "WetGuide",
__name: "index",
props: O,
emits: ["update:modelValue"],
setup(N, { emit: D }) {
const l = U("guide"), g = D, a = N, s = C(0), V = {}, p = y(() => {
const t = { ...V };
return Object.values(t).filter((v) => v !== null).sort((v, f) => v.value.order - f.value.order);
}), z = y(() => {
const t = p.value[s.value];
return t ? {
width: t.value.width + k + "px",
height: t.value.height + k + "px",
top: t.value.top - k / 2 + "px",
left: t.value.left - k / 2 + "px"
} : {};
}), d = y(() => {
const t = p.value[s.value];
return {
description: t.value.description || "",
title: t.value.title || "",
placement: t.value.placement
};
}), h = C(!1);
A([() => a.modelValue, s], () => {
h.value = !1, setTimeout(() => {
h.value = !0;
}, 100);
});
const B = () => {
s.value--;
}, F = () => {
if (s.value === p.value.length - 1) {
g("update:modelValue", !1), s.value = 0;
return;
}
s.value++;
}, R = () => {
s.value = 0, g("update:modelValue", !1);
};
return G(M, V), (t, m) => (o(), n(b, null, [
L(t.$slots, "default"),
a.modelValue ? (o(), n("div", {
key: 0,
class: r(e(l).e("gide-mask"))
}, null, 2)) : _("", !0),
a.modelValue ? (o(), n("div", {
key: 1,
class: r([e(l).b(), e(l).is("mask", a.mask)]),
style: P(z.value)
}, [
h.value ? (o(), E(e(W), {
key: 0,
"popper-class": a.mask ? e(l).e("mask-popover") : e(l).e("popover"),
visible: !0,
width: "auto",
teleported: !1,
placement: d.value.placement
}, {
reference: i(() => m[0] || (m[0] = [
u("div", { style: { width: "100%", height: "100%" } }, null, -1)
])),
default: i(() => [
u("div", {
class: r([e(l).e("header"), e(l).is("mask", a.mask)])
}, [
u("div", null, w(d.value.title), 1),
c(e(x), { link: "" }, {
default: i(() => [
c(e(X), {
class: "close",
onClick: R
}, {
default: i(() => [
c(e(q))
]),
_: 1
})
]),
_: 1
})
], 2),
u("div", {
class: r([e(l).e("description"), e(l).is("mask", a.mask)])
}, [
typeof d.value.description != "string" ? (o(), E(j(d.value.description), { key: 0 })) : (o(), n("div", H, w(d.value.description), 1))
], 2),
u("div", {
class: r([e(l).e("footer")])
}, [
c(e($), { class: "index-dots" }, {
default: i(() => [
(o(!0), n(b, null, I(p.value, (v, f) => (o(), n("div", {
key: f,
class: r(["index-dot", e(l).is("mask", a.mask), e(l).is("active", f <= s.value)])
}, null, 2))), 128))
]),
_: 1
}),
u("div", J, [
c(e(x), {
plain: !a.mask,
size: "small",
disabled: s.value === 0,
click: "previous",
onClick: B
}, {
default: i(() => m[1] || (m[1] = [
S(" 上一步 ")
])),
_: 1
}, 8, ["plain", "disabled"]),
c(e(x), {
size: "small",
type: a.mask ? "primary" : "",
onClick: F
}, {
default: i(() => [
S(w(s.value === p.value.length - 1 ? "完成" : "下一步"), 1)
]),
_: 1
}, 8, ["type"])
])
], 2)
]),
_: 1
}, 8, ["popper-class", "placement"])) : _("", !0)
], 6)) : _("", !0)
], 64));
}
});
export {
le as default
};