vuux/dist/es/Tour/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as b, createElementBlock as t, openBlock as s, Fragment as u, createVNode as v, createCommentVNode as i, Transition as E, withCtx as g, unref as e, createElementVNode as o, normalizeClass as k, toDisplayString as c, renderList as w } from "vue";
import { useTour as B } from "./hook/useTour.mjs";
import { Icon as N } from "@vuux/icons";
const T = {
  key: 0,
  class: "app-tour"
}, z = {
  key: 0,
  class: "tour-svg"
}, I = ["d"], P = { class: "step-data" }, D = { class: "step-details" }, F = { class: "step-title" }, L = { class: "step-content" }, $ = { class: "step-foot" }, j = {
  key: 0,
  class: "step-dots"
}, q = { key: 1 }, A = { class: "step-buts" }, M = /* @__PURE__ */ b({
  name: "Tour",
  __name: "index",
  props: {
    modelValue: { type: Boolean },
    data: { default: () => [] },
    buts: { default: () => ({
      next: "下一步",
      prev: "上一步",
      end: "完成"
    }) }
  },
  emits: ["update:modelValue", "ok", "close"],
  setup(f, { emit: h }) {
    const n = f, y = h, { state: l, stepEl: C, arrowEl: S, stepCount: d, computedPath: x, handleClose: V, handleNext: p, handlePrev: m } = B(n, y);
    return (G, r) => (s(), t(u, null, [
      v(E, { name: "tour-mask" }, {
        default: g(() => [
          n.modelValue ? (s(), t("div", T, [
            e(l).isShowSvg ? (s(), t("svg", z, [
              o("path", { d: e(x) }, null, 8, I)
            ])) : i("", !0)
          ])) : i("", !0)
        ]),
        _: 1
      }),
      n.modelValue ? (s(), t("div", {
        key: 0,
        ref_key: "stepEl",
        ref: C,
        class: "app-tour-step"
      }, [
        o("div", P, [
          o("div", {
            class: k(["step-arrow", { "is-top": e(l).isTop, "is-bottom": e(l).isBottom }]),
            ref_key: "arrowEl",
            ref: S
          }, null, 2),
          v(e(N), {
            name: "Icon9176904",
            class: "is-close",
            size: 14,
            onClick: r[0] || (r[0] = (a) => e(V)("close"))
          }),
          o("div", D, [
            e(d) > 0 ? (s(), t(u, { key: 0 }, [
              o("div", F, c(n.data[e(l).currentStep].title), 1),
              o("div", L, c(n.data[e(l).currentStep].content), 1)
            ], 64)) : i("", !0)
          ]),
          o("div", $, [
            e(d) > 1 ? (s(), t("div", j, [
              (s(!0), t(u, null, w(e(d), (a, _) => (s(), t("div", {
                key: _,
                class: k(["dots-item", { "is-active": _ === e(l).currentStep }])
              }, null, 2))), 128))
            ])) : (s(), t("span", q)),
            o("div", A, [
              e(l).currentStep > 0 ? (s(), t("div", {
                key: 0,
                class: "is-prev",
                onClick: r[1] || (r[1] = //@ts-ignore
                (...a) => e(m) && e(m)(...a))
              }, c(n.buts.prev || "上一步"), 1)) : i("", !0),
              o("div", {
                class: "is-next",
                onClick: r[2] || (r[2] = //@ts-ignore
                (...a) => e(p) && e(p)(...a))
              }, c(e(l).currentStep !== e(d) - 1 ? n.buts.next || "下一步" : n.buts.end), 1)
            ])
          ])
        ])
      ], 512)) : i("", !0)
    ], 64));
  }
});
export {
  M as default
};