@wocwin/t-ui-plus/lib/packages/components/step-wizard/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var Icons = require('@element-plus/icons-vue');

const _hoisted_1 = { class: "t_step-wizard" };
const _hoisted_2 = { class: "content-step-main step-content" };
const _hoisted_3 = { class: "step_btn" };
const _hoisted_4 = {
  key: 0,
  class: "step-last flex-box flex-col flex-ver"
};
const _hoisted_5 = { class: "icon-success" };
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = { class: "step_btn" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "TStepWizard"
  },
  __name: "index",
  props: {
    stepData: { default: () => [] },
    successTitle: { default: "" },
    lastBtnTitle: { default: "\u5B8C\u6210" },
    active: { default: 0 },
    isShowLastSuccess: { type: Boolean, default: true }
  },
  emits: ["complete"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const slots = vue.useSlots();
    const stepContent = () => {
      return props.isShowLastSuccess ? props.stepData && props.stepData.slice(0, props.stepData.length - 1) : props.stepData;
    };
    const emits = __emit;
    const complete = () => {
      emits("complete", props.active);
    };
    return (_ctx, _cache) => {
      const _component_el_step = vue.resolveComponent("el-step");
      const _component_el_steps = vue.resolveComponent("el-steps");
      const _component_el_button = vue.resolveComponent("el-button");
      const _component_el_icon = vue.resolveComponent("el-icon");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(_component_el_steps, vue.mergeProps({
          active: _ctx.active,
          "finish-status": "success"
        }, _ctx.$attrs), {
          default: vue.withCtx(() => [
            (vue.openBlock(true), vue.createElementBlock(
              vue.Fragment,
              null,
              vue.renderList(_ctx.stepData, (item, index) => {
                return vue.openBlock(), vue.createBlock(_component_el_step, vue.mergeProps(_ctx.$attrs, {
                  key: index,
                  title: `${index + 1} ${item.title}`,
                  icon: item.icon ? item.icon : "",
                  description: item.description ? item.description : ""
                }), vue.createSlots({
                  _: 2
                  /* DYNAMIC */
                }, [
                  vue.renderList(vue.unref(slots), (_index, name) => {
                    return {
                      name,
                      fn: vue.withCtx((data) => [
                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(data)))
                      ])
                    };
                  })
                ]), 1040, ["title", "icon", "description"]);
              }),
              128
              /* KEYED_FRAGMENT */
            ))
          ]),
          _: 3
          /* FORWARDED */
        }, 16, ["active"]),
        vue.createElementVNode("div", _hoisted_2, [
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(stepContent(), (val, key) => {
              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                class: "step-first flex-box flex-col flex-ver-h",
                key
              }, [
                val.slotName ? vue.renderSlot(_ctx.$slots, val.slotName, { key: 0 }) : vue.createCommentVNode("v-if", true),
                vue.createElementVNode("div", _hoisted_3, [
                  (vue.openBlock(true), vue.createElementBlock(
                    vue.Fragment,
                    null,
                    vue.renderList(val.btnArr, (val1, key1) => {
                      return vue.openBlock(), vue.createBlock(_component_el_button, {
                        key: key1,
                        type: val1.type || "danger",
                        onClick: ($event) => val1.fn(val1),
                        disabled: val.disable || false
                      }, {
                        default: vue.withCtx(() => [
                          vue.createTextVNode(
                            vue.toDisplayString(val1.btnTitle),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["type", "onClick", "disabled"]);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])
              ])), [
                [vue.vShow, _ctx.active === key]
              ]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          _ctx.active === _ctx.stepData.length && _ctx.isShowLastSuccess ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
            vue.createElementVNode("div", _hoisted_5, [
              vue.createVNode(_component_el_icon, null, {
                default: vue.withCtx(() => [
                  vue.createVNode(vue.unref(Icons.CircleCheck))
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            vue.createElementVNode("h2", {
              class: "success-margin",
              innerHTML: _ctx.successTitle
            }, null, 8, _hoisted_6),
            vue.createElementVNode("div", _hoisted_7, [
              !_ctx.stepData[_ctx.stepData.length - 1].lastBtnArr ? (vue.openBlock(), vue.createBlock(_component_el_button, {
                key: 0,
                type: "danger",
                onClick: complete
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(
                    vue.toDisplayString(_ctx.lastBtnTitle),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              })) : (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                { key: 1 },
                vue.renderList(_ctx.stepData[_ctx.stepData.length - 1].lastBtnArr, (item, key) => {
                  return vue.openBlock(), vue.createBlock(_component_el_button, {
                    key,
                    type: item.type || "danger",
                    onClick: ($event) => item.fn(item),
                    disabled: item.disable || false
                  }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(
                        vue.toDisplayString(item.btnTitle),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1032, ["type", "onClick", "disabled"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ])
          ])) : vue.createCommentVNode("v-if", true)
        ])
      ]);
    };
  }
});

exports.default = _sfc_main;