vue-admin-core/lib/formily/form-step/src/index.js

A Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var reactive = require('@formily/reactive');
var reactiveVue = require('@formily/reactive-vue');
var vue$1 = require('@formily/vue');
var elementPlus = require('element-plus');
require('../../__builtins__/index.js');
var index = require('../../__builtins__/configs/index.js');
var utils = require('../../__builtins__/shared/utils.js');

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 = reactive.observable({
    form: null,
    field: null,
    steps: []
  });
  const setDisplay = (_b = (_a = reactive.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 = reactive.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 = reactive.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 = reactive.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 = reactiveVue.observer(
  vue.defineComponent({
    name: "FFormStep",
    props: {
      formStep: {
        type: Object,
        default() {
          return {
            current: 0
          };
        }
      }
    },
    setup(props, { attrs }) {
      var _a, _b;
      const field = vue$1.useField().value;
      const prefixCls = `${index.stylePrefix}-form-step`;
      const fieldSchemaRef = vue$1.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 vue$1.h(
          "div",
          {
            class: [prefixCls]
          },
          {
            default: () => [
              vue$1.h(
                elementPlus.ElSteps,
                {
                  ...attrs,
                  active: current,
                  style: [{ marginBottom: "10px" }, attrs.style]
                },
                {
                  default: () => renderSteps(steps, ({ props: props2 }, key) => {
                    return vue$1.h(elementPlus.ElStep, { props: props2, key }, {});
                  })
                }
              ),
              renderSteps(steps, ({ name, schema }, key) => {
                if (key !== current)
                  return;
                return vue$1.h(vue$1.RecursionField, { props: { name, schema }, key }, {});
              })
            ]
          }
        );
      };
    }
  })
);
const StepPane = vue.defineComponent({
  name: "FFormStepPane",
  inheritAttrs: false,
  setup(_props, { slots }) {
    return () => vue$1.h(vue$1.Fragment, {}, slots);
  }
});
const FormStep = utils.composeExport(FormStepInner, {
  StepPane,
  createFormStep
});

exports.FormStep = FormStep;
exports.default = FormStep;
//# sourceMappingURL=index.js.map