vue-admin-core/es/formily/form-step/src/index.mjs

A Component Library for Vue 3

import { defineComponent } from 'vue';
import { observable, action, model } from '@formily/reactive';
import { observer } from '@formily/reactive-vue';
import { useField, useFieldSchema, h, RecursionField, Fragment } from '@formily/vue';
import { ElSteps, ElStep } from 'element-plus';
import '../../__builtins__/index.mjs';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

const parseSteps = (schema) => {
  const steps = [];
  schema.mapProperties((schema2, name) => {
    var _a;
    if (((_a = schema2["x-component"]) == null ? void 0 : _a.indexOf("StepPane")) > -1) {
      steps.push({
        name,
        props: schema2["x-component-props"],
        schema: schema2
      });
    }
  });
  return steps;
};
const createFormStep = (defaultCurrent = 0) => {
  var _a, _b, _c, _d, _e, _f;
  const env = observable({
    form: null,
    field: null,
    steps: []
  });
  const setDisplay = (_b = (_a = action) == null ? void 0 : _a.bound) == null ? void 0 : _b.call(_a, (target) => {
    const currentStep = env.steps[target];
    env.steps.forEach(({ name }) => {
      env.form.query(`${env.field.address}.${name}`).take((field) => {
        if (name === currentStep.name) {
          field.setDisplay("visible");
        } else {
          field.setDisplay("hidden");
        }
      });
    });
  });
  const next = (_d = (_c = action) == null ? void 0 : _c.bound) == null ? void 0 : _d.call(_c, () => {
    if (formStep.allowNext) {
      setDisplay && setDisplay(formStep.current + 1);
      formStep.setCurrent(formStep.current + 1);
    }
  });
  const back = (_f = (_e = action) == null ? void 0 : _e.bound) == null ? void 0 : _f.call(_e, () => {
    if (formStep.allowBack) {
      setDisplay && setDisplay(formStep.current - 1);
      formStep.setCurrent(formStep.current - 1);
    }
  });
  const formStep = model({
    connect(steps, field) {
      env.steps = steps;
      env.form = field == null ? void 0 : field.form;
      env.field = field;
    },
    current: defaultCurrent,
    setCurrent(key) {
      formStep.current = key;
    },
    get allowNext() {
      return formStep.current < env.steps.length - 1;
    },
    get allowBack() {
      return formStep.current > 0;
    },
    async next() {
      try {
        await env.form.validate();
        next && next();
      } catch (e) {
      }
    },
    async back() {
      back && back();
    },
    async submit(onSubmit) {
      var _a2, _b2;
      return (_b2 = (_a2 = env.form) == null ? void 0 : _a2.submit) == null ? void 0 : _b2.call(_a2, onSubmit);
    }
  });
  return formStep;
};
const FormStepInner = observer(
  defineComponent({
    name: "FFormStep",
    props: {
      formStep: {
        type: Object,
        default() {
          return {
            current: 0
          };
        }
      }
    },
    setup(props, { attrs }) {
      var _a, _b;
      const field = useField().value;
      const prefixCls = `${stylePrefix}-form-step`;
      const fieldSchemaRef = useFieldSchema();
      const steps = parseSteps(fieldSchemaRef.value);
      (_b = (_a = props.formStep).connect) == null ? void 0 : _b.call(_a, steps, field);
      return () => {
        var _a2;
        const current = props.active || ((_a2 = props.formStep) == null ? void 0 : _a2.current) || 0;
        const renderSteps = (steps2, callback) => {
          return steps2.map(callback);
        };
        return h(
          "div",
          {
            class: [prefixCls]
          },
          {
            default: () => [
              h(
                ElSteps,
                {
                  ...attrs,
                  active: current,
                  style: [{ marginBottom: "10px" }, attrs.style]
                },
                {
                  default: () => renderSteps(steps, ({ props: props2 }, key) => {
                    return h(ElStep, { props: props2, key }, {});
                  })
                }
              ),
              renderSteps(steps, ({ name, schema }, key) => {
                if (key !== current)
                  return;
                return h(RecursionField, { props: { name, schema }, key }, {});
              })
            ]
          }
        );
      };
    }
  })
);
const StepPane = defineComponent({
  name: "FFormStepPane",
  inheritAttrs: false,
  setup(_props, { slots }) {
    return () => h(Fragment, {}, slots);
  }
});
const FormStep = composeExport(FormStepInner, {
  StepPane,
  createFormStep
});

export { FormStep, FormStep as default };
//# sourceMappingURL=index.mjs.map