plus-pro-components/es/components/steps-form/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, watchEffect, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, mergeProps, withCtx, Fragment, renderList, createBlock, createSlots, renderSlot, normalizeProps, createCommentVNode } from 'vue';
import { ElSteps, ElStep } from 'element-plus';
import '../../../hooks/index.mjs';
import { PlusForm } from '../../form/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';

var _sfc_main = /* @__PURE__ */ 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();
    const active = ref();
    watchEffect(() => {
      active.value = props.modelValue;
    });
    const currentIndex = computed(() => active.value - 1);
    const slotName = computed(() => `step-${active.value}`);
    const allValues = 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 openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["plus-steps-form", _ctx.$attrs.direction === "vertical" ? "plus-steps-from-vertical" : ""])
        },
        [
          createVNode(unref(ElSteps), mergeProps({
            active: active.value,
            "finish-status": "success"
          }, _ctx.$attrs), {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(_ctx.data, (item) => {
                  return openBlock(), createBlock(
                    unref(ElStep),
                    mergeProps({
                      key: item.title
                    }, item),
                    createSlots({
                      _: 2
                      /* DYNAMIC */
                    }, [
                      _ctx.$slots.icon ? {
                        name: "icon",
                        fn: withCtx(() => [
                          renderSlot(_ctx.$slots, "icon", {
                            icon: item.icon,
                            title: item.title,
                            description: item.description
                          })
                        ]),
                        key: "0"
                      } : void 0,
                      _ctx.$slots.title ? {
                        name: "title",
                        fn: withCtx(() => [
                          renderSlot(_ctx.$slots, "title", {
                            icon: item.icon,
                            title: item.title,
                            description: item.description
                          })
                        ]),
                        key: "1"
                      } : void 0,
                      _ctx.$slots.description ? {
                        name: "description",
                        fn: withCtx(() => [
                          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"]),
          createVNode(unref(PlusForm), mergeProps(_ctx.data[currentIndex.value].form, {
            "has-reset": active.value !== 1,
            "submit-text": active.value === _ctx.data.length ? _ctx.submitText || unref(t)("plus.stepsForm.submitText") : _ctx.nextText || unref(t)("plus.stepsForm.nextText"),
            "reset-text": _ctx.preText || unref(t)("plus.stepsForm.preText"),
            onSubmit: next,
            onReset: pre,
            onChange: handleChange
          }), {
            default: withCtx(() => [
              _ctx.$slots[slotName.value] ? renderSlot(_ctx.$slots, slotName.value, normalizeProps(mergeProps({ key: 0 }, _ctx.data[currentIndex.value]))) : createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["has-reset", "submit-text", "reset-text"])
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };