plus-pro-components/lib/components/steps-form/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 elementPlus = require('element-plus');
require('../../../hooks/index.js');
var index = require('../../form/index.js');
var useLocale = require('../../../hooks/useLocale.js');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "PlusStepsForm"
  },
  __name: "index",
  props: {
    modelValue: { default: 1 },
    data: { default: () => [] },
    submitText: { default: void 0 },
    nextText: { default: void 0 },
    preText: { default: void 0 }
  },
  emits: ["pre", "next", "submit", "update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { t } = useLocale.useLocale();
    const active = vue.ref();
    vue.watchEffect(() => {
      active.value = props.modelValue;
    });
    const currentIndex = vue.computed(() => active.value - 1);
    const slotName = vue.computed(() => `step-${active.value}`);
    const allValues = vue.computed(
      () => {
        var _a;
        return (_a = props.data) == null ? void 0 : _a.reduce((pre2, current) => {
          var _a2;
          return { ...pre2, ...(_a2 = current.form) == null ? void 0 : _a2.modelValue };
        }, {});
      }
    );
    const handleChange = (values, column) => {
      emit("change", values, column);
    };
    const pre = () => {
      if (active.value-- > props.data.length + 1) active.value = 1;
      emit("update:modelValue", active.value);
      emit("pre", active.value);
    };
    const next = (values) => {
      const currentActive = active.value;
      active.value = Math.min(currentActive + 1, props.data.length);
      emit("update:modelValue", active.value);
      emit("next", active.value, values, allValues.value);
      if (currentActive === props.data.length && active.value === props.data.length) {
        emit("submit", active.value, values, allValues.value);
      }
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["plus-steps-form", _ctx.$attrs.direction === "vertical" ? "plus-steps-from-vertical" : ""])
        },
        [
          vue.createVNode(vue.unref(elementPlus.ElSteps), vue.mergeProps({
            active: active.value,
            "finish-status": "success"
          }, _ctx.$attrs), {
            default: vue.withCtx(() => [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(_ctx.data, (item) => {
                  return vue.openBlock(), vue.createBlock(
                    vue.unref(elementPlus.ElStep),
                    vue.mergeProps({
                      key: item.title
                    }, item),
                    vue.createSlots({
                      _: 2
                      /* DYNAMIC */
                    }, [
                      _ctx.$slots.icon ? {
                        name: "icon",
                        fn: vue.withCtx(() => [
                          vue.renderSlot(_ctx.$slots, "icon", {
                            icon: item.icon,
                            title: item.title,
                            description: item.description
                          })
                        ]),
                        key: "0"
                      } : void 0,
                      _ctx.$slots.title ? {
                        name: "title",
                        fn: vue.withCtx(() => [
                          vue.renderSlot(_ctx.$slots, "title", {
                            icon: item.icon,
                            title: item.title,
                            description: item.description
                          })
                        ]),
                        key: "1"
                      } : void 0,
                      _ctx.$slots.description ? {
                        name: "description",
                        fn: vue.withCtx(() => [
                          vue.renderSlot(_ctx.$slots, "description", {
                            icon: item.icon,
                            title: item.title,
                            description: item.description
                          })
                        ]),
                        key: "2"
                      } : void 0
                    ]),
                    1040
                    /* FULL_PROPS, DYNAMIC_SLOTS */
                  );
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["active"]),
          vue.createVNode(vue.unref(index.PlusForm), vue.mergeProps(_ctx.data[currentIndex.value].form, {
            "has-reset": active.value !== 1,
            "submit-text": active.value === _ctx.data.length ? _ctx.submitText || vue.unref(t)("plus.stepsForm.submitText") : _ctx.nextText || vue.unref(t)("plus.stepsForm.nextText"),
            "reset-text": _ctx.preText || vue.unref(t)("plus.stepsForm.preText"),
            onSubmit: next,
            onReset: pre,
            onChange: handleChange
          }), {
            default: vue.withCtx(() => [
              _ctx.$slots[slotName.value] ? vue.renderSlot(_ctx.$slots, slotName.value, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.data[currentIndex.value]))) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["has-reset", "submit-text", "reset-text"])
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;