@farris/ui-vue/components/wizard/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as l, computed as S, defineComponent as N, provide as V, watch as O, onMounted as W, createVNode as r, inject as B } from "vue";
import { getCustomClass as R } from "../common/index.esm.js";
import Z from "../step/index.esm.js";
const _ = {
  stepClickable: { type: Boolean, default: !1 },
  stepCls: { type: String, default: "" },
  direction: { type: String, default: "vertical" },
  stepPosition: { type: String, default: "None" },
  fill: { type: Boolean, default: !0 },
  storedIndex: { type: Boolean, default: !1 },
  storedIndexState: { type: Boolean, default: !1 },
  currentPageId: { type: String, default: "" },
  currentStepIndex: { type: Number, default: 0 },
  visible: { type: Boolean, default: !0 },
  stepsData: { type: Array, default: () => [] },
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
}, k = Symbol("WizardContext"), M = Symbol("WizardPageContext");
function $(e, t) {
  const i = l({}), u = S(() => {
    var a;
    return ((a = e[t.value]) == null ? void 0 : a.id) || "";
  });
  function o(a) {
    i.value = a;
  }
  function P() {
    return i.value;
  }
  function f() {
    t.value > 0 && (t.value === e.length ? t.value = t.value - 2 : t.value--);
  }
  function v() {
    t.value < e.length && t.value++;
  }
  function c(a) {
    t.value = a;
  }
  function z(a, d) {
    i.value[a] = d;
  }
  function g(a) {
    return i.value[a];
  }
  function I() {
    return i.value[u.value];
  }
  function h() {
    const a = e.findIndex((d) => d.id === u.value);
    return a > 0 ? e[a - 1].id : u.value;
  }
  function w() {
    const a = e.findIndex((d) => d.id === u.value);
    return a < e.length ? e[a + 1].id : u.value;
  }
  function y(a) {
    const d = e.findIndex((p) => p.id === a);
    return d > 0 ? i.value[e[d - 1].id] : i.value[a];
  }
  function x(a) {
    const d = e.findIndex((p) => p.id === a);
    return d < e.length ? i.value[e[d + 1].id] : i.value[a];
  }
  return {
    currentPageId: u,
    currentStepIndex: t,
    wizardData: i,
    setWizardData: o,
    getWizardData: P,
    // gotoPreviousPage,
    // gotoNextPage,
    gotoPreviousStep: f,
    gotoNextStep: v,
    setCurrentStep: c,
    setDataByPageId: z,
    getDataByPageId: g,
    getCurrentPageData: I,
    getPreviousPageDataByPageId: y,
    getNextPageDataByPageId: x,
    getPreviousPageId: h,
    getNextPageId: w
  };
}
const b = /* @__PURE__ */ N({
  name: "FWizard",
  props: _,
  emits: ["stateChange", "update:currentPageId"],
  setup(e, {
    slots: t,
    emit: i,
    expose: u
  }) {
    const o = l(null), P = l(null), f = l(null), v = l(null), c = l([]), z = l(e.currentStepIndex), {
      currentStepIndex: g,
      currentPageId: I,
      wizardData: h,
      setDataByPageId: w,
      gotoNextStep: y,
      gotoPreviousStep: x,
      // gotoNextPage,
      // gotoPreviousPage,
      getDataByPageId: a,
      getPreviousPageDataByPageId: d,
      getNextPageDataByPageId: p,
      getPreviousPageId: s,
      getNextPageId: L,
      getCurrentPageData: F
    } = $(e.stepsData, z);
    S(() => {
      const n = {
        "f-component-wizard-fill": e.fill,
        "f-component-wizard": !0
      };
      return R(n, e.customClass);
    });
    function q(n) {
      z.value = n;
    }
    function j(n) {
    }
    V(k, {
      wizardPageList: c,
      wizardProps: e,
      activeIndex: g,
      activeId: I,
      updateCurrentPageId: j,
      // gotoNextPage,
      // gotoPreviousPage,
      gotoNextStep: y,
      gotoPreviousStep: x,
      setDataByPageId: w,
      getNextPageDataByPageId: p,
      getPreviousPageDataByPageId: d,
      getPreviousPageId: s,
      getNextPageId: L,
      getDataByPageId: a,
      getCurrentPageData: F
    });
    function E() {
      let n = "";
      switch (e.stepPosition) {
        case "Top":
          n = "f-component-wizard-step-top";
          break;
        case "HeaderRight":
          n = "f-component-wizard-step-headerright";
          break;
        case "PageLeft":
          n = "f-component-wizard-step-pageleft";
          break;
        case "None":
          n = "f-component-wizard-step-none";
          break;
        default:
          n = "";
      }
      return {
        [n]: !!n,
        "f-wizard": !0
      };
    }
    function C(n) {
      return e.stepPosition === n;
    }
    O(() => e.currentPageId, (n, m) => {
    }), O(() => e.currentStepIndex, (n, m) => {
      n !== m && q(n);
    }), W(() => {
    });
    function G(n) {
      g.value = n.stepIndex;
    }
    function J(n) {
      return !!e.stepClickable;
    }
    function T() {
      return r("div", {
        class: "f-wizard-step"
      }, [r(Z, {
        ref: v,
        activeIndex: g.value,
        steps: e.stepsData,
        direction: e.direction,
        beforeClickStep: J,
        onClick: G
      }, {
        default: () => [t.stepTemplate && {
          stepTemplate: (n) => {
            var H;
            const {
              step: m,
              index: D,
              length: U,
              activeIndex: X,
              direction: Y
            } = n;
            return (H = t.stepTemplate) == null ? void 0 : H.call(t, {
              step: m,
              index: D,
              length: U,
              activeIndex: X,
              direction: Y
            });
          }
        }]
      })]);
    }
    u({
      setDataByPageId: w,
      updateCurrentPageId: j,
      // gotoNextPage,
      // gotoPreviousPage,
      gotoNextStep: y,
      gotoPreviousStep: x,
      getNextPageDataByPageId: p,
      getPreviousPageDataByPageId: d,
      getPreviousPageId: s,
      getNextPageId: L,
      getDataByPageId: a,
      getCurrentPageData: F,
      cancel: () => {
      },
      finish: () => {
      }
    });
    const Q = S(() => {
      const n = {
        "f-component-wizard-fill": e.fill,
        "f-component-wizard": !0
      };
      return R(n, e.customClass);
    });
    return () => {
      var n, m, D;
      return e.visible && r("div", {
        class: Q.value
      }, [r("div", {
        ref: P,
        class: E()
      }, [C("Top") && ((n = t.wizardStepTemplate) == null ? void 0 : n.call(t)), C("None") && r("div", {
        class: "d-none"
      }, [T()]), (t.wizardHeader || C("HeaderRight")) && r("div", {
        class: "f-wizard-header",
        ref: o
      }, [(m = t.wizardHeader) == null ? void 0 : m.call(t), C("HeaderRight") && T()]), r("div", {
        class: "f-wizard-content",
        ref: f
      }, [C("PageLeft") && T(), r("div", {
        class: "f-wizard-pages"
      }, [(D = t.default) == null ? void 0 : D.call(t)])])])]);
    };
  }
}), ee = {
  pageId: { type: String, default: "" },
  active: { type: Boolean, default: !1 }
}, A = /* @__PURE__ */ N({
  name: "FWizardPage",
  props: ee,
  emits: ["pageSelected"],
  setup(e, {
    slots: t
  }) {
    const {
      wizardPageList: i,
      activeId: u,
      wizardProps: o,
      activeIndex: P
    } = B(k, {
      activeId: l(""),
      activeIndex: l(1),
      wizardPageList: l([]),
      wizardProps: {}
    });
    V(M, {
      pageId: e.pageId
    });
    const f = S(() => {
      var c;
      return ((c = o.stepsData[P.value]) == null ? void 0 : c.id) === e.pageId;
    }), v = S(() => ({
      "f-component-wizard-page": !0,
      active: f.value
    }));
    return W(() => {
      i.value.includes(e.pageId) || i.value.push(e.pageId);
    }), () => {
      var c;
      return f.value && r("div", {
        class: v.value
      }, [(c = t.default) == null ? void 0 : c.call(t)]);
    };
  }
}), te = {
  // 头部模板
  headerTemplate: { type: Object },
  // 内容模板
  contentTemplate: { type: Object },
  // 底部模板
  footerTemplate: { type: Object }
}, K = /* @__PURE__ */ N({
  name: "FWizardPageDetail",
  props: te,
  emits: ["pagedetailSelected"],
  setup(e, {
    slots: t,
    expose: i,
    emit: u
  }) {
    const o = B(k, null), {
      wizardProps: P,
      gotoNextPage: f,
      gotoPreviousPage: v,
      gotoNextStep: c,
      gotoPreviousStep: z,
      setDataByPageId: g,
      activeId: I,
      getPreviousPageId: h,
      getNextPageId: w,
      getDataByPageId: y,
      getCurrentPageData: x
    } = o, {
      pageId: a
    } = B(M, {}), d = S(() => o == null ? void 0 : o.wizardPageList.value.indexOf(a));
    function p(s) {
      g(I.value, s);
    }
    return W(() => {
      u("pagedetailSelected", I.value);
    }), i({
      gotoNextPage: f,
      gotoPreviousPage: v,
      gotoNextStep: c,
      gotoPreviousStep: z,
      setDataByPageId: g,
      getPreviousPageId: h,
      getNextPageId: w,
      setPageData: p,
      getCurrentPageData: x,
      getDataByPageId: y
    }), () => {
      var s;
      return r("div", {
        class: "f-component-wizard-page-detail f-component-wizard-page-detail-fill"
      }, [e.headerTemplate ? r("div", {
        class: "f-component-wizard-page-detail-header"
      }, [e.headerTemplate()]) : t.headerTemplate && r("div", {
        class: "f-component-wizard-page-detail-header"
      }, [t.headerTemplate()]), e.contentTemplate ? r("div", {
        class: "f-component-wizard-page-detail-content"
      }, [e.contentTemplate()]) : t.contentTemplate ? r("div", {
        class: "f-component-wizard-page-detail-content"
      }, [t.contentTemplate()]) : (s = t.default) == null ? void 0 : s.call(t), e.footerTemplate ? r("div", {
        class: "f-component-wizard-page-detail-footer"
      }, [e.footerTemplate({
        stepIndex: d.value,
        pageId: a,
        pageIdList: o == null ? void 0 : o.wizardPageList.value
      })]) : t.footerTemplate && r("div", {
        class: "f-component-wizard-page-detail-footer"
      }, [t.footerTemplate()])]);
    };
  }
});
b.install = (e) => {
  e.component(b.name, b).component(A.name, A).component(K.name, K);
};
export {
  b as FWizard,
  A as FWizardPage,
  K as FWizardPageDetail,
  b as default,
  te as pageDetailProps,
  $ as useWizard,
  ee as wizardPageProps,
  _ as wizardProps
};