@flowgram.ai/form 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,1547 @@
+// src/react/field.tsx
+import * as React2 from "react";
+import { isFunction } from "lodash";
+import { DisposableCollection, useRefresh } from "@flowgram.ai/utils";
+import { useReadonlyReactiveState } from "@flowgram.ai/reactive";
+
+// src/utils/object.ts
+import { clone, toPath } from "lodash";
+var isObject = (obj) => obj !== null && typeof obj === "object";
+var isInteger = (obj) => String(Math.floor(Number(obj))) === obj;
+function getIn(obj, key, def, p = 0) {
+  const path = toPath(key);
+  while (obj && p < path.length) {
+    obj = obj[path[p++]];
+  }
+  if (p !== path.length && !obj) {
+    return def;
+  }
+  return obj === void 0 ? def : obj;
+}
+function shallowSetIn(obj, path, value) {
+  let res = clone(obj);
+  let resVal = res;
+  let i = 0;
+  let pathArray = toPath(path);
+  for (; i < pathArray.length - 1; i++) {
+    const currentPath = pathArray[i];
+    let currentObj = getIn(obj, pathArray.slice(0, i + 1));
+    if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
+      resVal = resVal[currentPath] = clone(currentObj);
+    } else {
+      const nextPath = pathArray[i + 1];
+      resVal = resVal[currentPath] = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
+    }
+  }
+  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+    return obj;
+  }
+  if (value === void 0) {
+    delete resVal[pathArray[i]];
+  } else {
+    resVal[pathArray[i]] = value;
+  }
+  if (i === 0 && value === void 0) {
+    delete res[pathArray[i]];
+  }
+  return res;
+}
+
+// src/utils/dom.ts
+function isReactChangeEvent(e) {
+  return typeof e === "object" && e !== null && "target" in e && typeof e.target === "object";
+}
+function isCheckBoxEvent(e) {
+  return typeof e === "object" && e !== null && "target" in e && typeof e.target === "object" && e.target.type === "checkbox";
+}
+
+// src/utils/glob.ts
+import { flatten, get, isArray, isObject as isObject2 } from "lodash";
+var Glob;
+((Glob2) => {
+  Glob2.DIVIDER = ".";
+  Glob2.ALL = "*";
+  function isMatch(pattern, path) {
+    const patternArr = pattern.split(Glob2.DIVIDER);
+    const pathArr = path.split(Glob2.DIVIDER);
+    if (patternArr.length !== pathArr.length) {
+      return false;
+    }
+    return patternArr.every((pattern2, index) => {
+      if (pattern2 === Glob2.ALL) {
+        return true;
+      }
+      return pattern2 === pathArr[index];
+    });
+  }
+  Glob2.isMatch = isMatch;
+  function isMatchOrParent(pattern, path) {
+    if (pattern === "") {
+      return true;
+    }
+    const patternArr = pattern.split(Glob2.DIVIDER);
+    const pathArr = path.split(Glob2.DIVIDER);
+    if (patternArr.length > pathArr.length) {
+      return false;
+    }
+    for (let i = 0; i < patternArr.length; i++) {
+      if (patternArr[i] !== Glob2.ALL && patternArr[i] !== pathArr[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  Glob2.isMatchOrParent = isMatchOrParent;
+  function getParentPathByPattern(pattern, path) {
+    const patternArr = pattern.split(Glob2.DIVIDER);
+    const pathArr = path.split(Glob2.DIVIDER);
+    return pathArr.slice(0, patternArr.length).join(Glob2.DIVIDER);
+  }
+  Glob2.getParentPathByPattern = getParentPathByPattern;
+  function concatPath(p1, ...pathArr) {
+    const p2 = pathArr.shift();
+    if (p2 === void 0) return p1.toString();
+    let resultPath = "";
+    if (p1 === "" && p2 === "") {
+      resultPath = "";
+    } else if (p1 !== "" && p2 === "") {
+      resultPath = p1.toString();
+    } else if (p1 === "" && p2 !== "") {
+      resultPath = p2.toString();
+    } else {
+      resultPath = `${p1}${Glob2.DIVIDER}${p2}`;
+    }
+    if (pathArr.length > 0) {
+      return concatPath(resultPath, ...pathArr);
+    }
+    return resultPath;
+  }
+  function getSubPaths(paths, obj) {
+    if (!obj || typeof obj !== "object") {
+      return [];
+    }
+    return flatten(
+      paths.map((path) => {
+        const value = path === "" ? obj : get(obj, path);
+        if (isArray(value)) {
+          return value.map((_, index) => concatPath(path, index));
+        } else if (isObject2(value)) {
+          return Object.keys(value).map((key) => concatPath(path, key));
+        }
+        return [];
+      })
+    );
+  }
+  Glob2.getSubPaths = getSubPaths;
+  function splitPattern(pattern) {
+    const parts = pattern.split(Glob2.DIVIDER);
+    const res = [];
+    let i = 0;
+    let curPath = [];
+    while (i < parts.length) {
+      if (parts[i] === Glob2.ALL) {
+        if (curPath.length) {
+          res.push(curPath.join(Glob2.DIVIDER));
+        }
+        res.push(Glob2.ALL);
+        curPath = [];
+      } else {
+        curPath.push(parts[i]);
+      }
+      i += 1;
+    }
+    if (curPath.length) {
+      res.push(curPath.join(Glob2.DIVIDER));
+    }
+    return res;
+  }
+  Glob2.splitPattern = splitPattern;
+  function findMatchPaths2(obj, pattern) {
+    if (!obj || !pattern) {
+      return [];
+    }
+    const nextPaths = pattern.split(Glob2.DIVIDER);
+    let curKey = nextPaths.shift();
+    let curPaths = [];
+    let curValue = obj;
+    while (curKey) {
+      let isObject3 = typeof curValue === "object";
+      if (!isObject3) return [];
+      if (curKey === Glob2.ALL) {
+        const parentPath = curPaths.join(Glob2.DIVIDER);
+        return flatten(
+          Object.keys(curValue).map((key) => {
+            if (nextPaths.length === 0) {
+              return concatPath(parentPath, key);
+            }
+            return findMatchPaths2(curValue[key], `${nextPaths.join(Glob2.DIVIDER)}`).map(
+              (p) => concatPath(parentPath, key, p)
+            );
+          })
+        );
+      }
+      if (!(curKey in curValue)) return [];
+      curValue = curValue[curKey];
+      curPaths.push(curKey);
+      curKey = nextPaths.shift();
+    }
+    return [pattern];
+  }
+  Glob2.findMatchPaths = findMatchPaths2;
+})(Glob || (Glob = {}));
+
+// src/types/validate.ts
+function isFieldWarning(f) {
+  if (f.level === "warning" /* Warning */) {
+    return true;
+  }
+  return false;
+}
+var ValidateTrigger = /* @__PURE__ */ ((ValidateTrigger2) => {
+  ValidateTrigger2["onChange"] = "onChange";
+  ValidateTrigger2["onBlur"] = "onBlur";
+  return ValidateTrigger2;
+})(ValidateTrigger || {});
+
+// src/core/utils.ts
+import { isEmpty, isEqual } from "lodash";
+
+// src/core/path.ts
+import { toPath as toPath2 } from "lodash";
+var Path = class _Path {
+  constructor(path) {
+    this._path = [];
+    this._path = toPath2(path);
+  }
+  get parent() {
+    if (this._path.length < 2) {
+      return void 0;
+    }
+    return new _Path(this._path.slice(0, -1));
+  }
+  toString() {
+    return this._path.join(".");
+  }
+  get value() {
+    return this._path;
+  }
+  /**
+   * 仅计直系child
+   * @param path
+   */
+  isChild(path) {
+    const target = new _Path(path).value;
+    const self = this.value;
+    if (target.length - self.length !== 1) {
+      return false;
+    }
+    for (let i = 0; i < self.length; i++) {
+      if (target[i] !== self[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * 比较两个数组path大小
+   * 返回小于0则path1<path2, 大于0 则path1>path2, 等于0则相等
+   * @param path1
+   * @param path2
+   */
+  static compareArrayPath(path1, path2) {
+    let i = 0;
+    while (path1.value[i] && path2.value[i]) {
+      const index1 = parseInt(path1.value[i]);
+      const index2 = parseInt(path2.value[i]);
+      if (!isNaN(index1) && !isNaN(index2)) {
+        return index1 - index2;
+      } else if (path1.value[i] !== path2.value[i]) {
+        throw new Error(
+          `[Form] Path.compareArrayPath invalid input Error: two path should refers to the same array, but got path1: ${path1.toString()}, path2: ${path2.toString()}`
+        );
+      }
+      i++;
+    }
+    throw new Error(
+      `[Form] Path.compareArrayPath invalid input Error: got path1: ${path1.toString()}, path2: ${path2.toString()}`
+    );
+  }
+  isChildOrGrandChild(path) {
+    const target = new _Path(path).value;
+    const self = this.value;
+    if (target.length - self.length < 1) {
+      return false;
+    }
+    for (let i = 0; i < self.length; i++) {
+      if (target[i] !== self[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  getArrayIndex(parent) {
+    return parseInt(this._path[parent.value.length]);
+  }
+  concat(name) {
+    if (typeof name === "string" || typeof name === "number") {
+      return new _Path(this._path.concat(new _Path(name.toString())._path));
+    }
+    throw new Error(
+      `[Form] Error in Path.concat: invalid param type, require number or string, but got ${typeof name}`
+    );
+  }
+  replaceParent(parent, newParent) {
+    if (parent.value.length > this.value.length) {
+      throw new Error(
+        `[Form] Error in Path.getChildSuffixByParent: invalid parent param: ${parent}, parent length should not greater than current length.`
+      );
+    }
+    const rest = [];
+    for (let i = 0; i < this.value.length; i++) {
+      if (i < parent.value.length && parent.value[i] !== this.value[i]) {
+        throw new Error(
+          `[Form] Error in Path.getChildSuffixByParent: invalid parent param: ${parent}`
+        );
+      }
+      if (i >= parent.value.length) {
+        rest.push(this.value[i]);
+      }
+    }
+    return new _Path(newParent.value.concat(rest));
+  }
+};
+
+// src/core/utils.ts
+function updateFeedbacksName(feedbacks, name) {
+  return feedbacks.map((f) => ({
+    ...f,
+    name
+  }));
+}
+function mergeFeedbacks(origin, source) {
+  if (!source) {
+    return origin;
+  }
+  if (!origin) {
+    return { ...source };
+  }
+  const changed = Object.keys(source).some(
+    (sourceKey) => !isEqual(origin[sourceKey], source[sourceKey])
+  );
+  if (changed) {
+    return {
+      ...origin,
+      ...source
+    };
+  }
+  return origin;
+}
+function clearFeedbacks(name, origin) {
+  if (!origin) {
+    return origin;
+  }
+  if (name in origin) {
+    delete origin[name];
+  }
+  return origin;
+}
+function shouldValidate(currentTrigger, formTrigger) {
+  return currentTrigger === formTrigger;
+}
+function getValidByErrors(errors) {
+  return errors ? Object.keys(errors).every((name) => isEmpty(errors[name])) : true;
+}
+var FieldEventUtils;
+((FieldEventUtils2) => {
+  function shouldTriggerFieldChangeEvent(payload, fieldName) {
+    const { name: changedName, options } = payload;
+    if (Glob.isMatchOrParent(fieldName, changedName)) {
+      return true;
+    }
+    if (new Path(changedName).isChildOrGrandChild(fieldName)) {
+      if (options?.action === "array-append") {
+        return !new Path(changedName).isChildOrGrandChild(fieldName);
+      } else if (options?.action === "array-splice" && options?.indexes?.length) {
+        return Path.compareArrayPath(
+          new Path(fieldName),
+          new Path(changedName).concat(options.indexes[0])
+        ) >= 0;
+      }
+      return true;
+    }
+    return false;
+  }
+  FieldEventUtils2.shouldTriggerFieldChangeEvent = shouldTriggerFieldChangeEvent;
+  function shouldTriggerFieldValidateWhenChange(payload, fieldName) {
+    const { name: changedName, options } = payload;
+    if (options?.action === "array-splice") {
+      return fieldName === changedName;
+    }
+    return FieldEventUtils2.shouldTriggerFieldChangeEvent(payload, fieldName);
+  }
+  FieldEventUtils2.shouldTriggerFieldValidateWhenChange = shouldTriggerFieldValidateWhenChange;
+})(FieldEventUtils || (FieldEventUtils = {}));
+
+// src/core/to-field.ts
+function toField(model) {
+  const res = {
+    get name() {
+      return model.name;
+    },
+    get value() {
+      return model.value;
+    },
+    onChange: (e) => {
+      if (isReactChangeEvent(e)) {
+        model.value = isCheckBoxEvent(e) ? e.target.checked : e.target.value;
+      } else {
+        model.value = e;
+      }
+    },
+    onBlur() {
+      if (shouldValidate("onBlur" /* onBlur */, model.form.validationTrigger)) {
+        model.validate();
+      }
+    },
+    onFocus() {
+      model.state.isTouched = true;
+    }
+  };
+  Object.defineProperty(res, "key", {
+    enumerable: false,
+    get() {
+      return model.id;
+    }
+  });
+  Object.defineProperty(res, "_fieldModel", {
+    enumerable: false,
+    get() {
+      return model;
+    }
+  });
+  return res;
+}
+function toFieldState(modelState) {
+  return {
+    get isTouched() {
+      return modelState.isTouched;
+    },
+    get invalid() {
+      return modelState.invalid;
+    },
+    get isDirty() {
+      return modelState.isDirty;
+    },
+    get isValidating() {
+      return modelState.isValidating;
+    },
+    get errors() {
+      if (modelState.errors) {
+        return Object.values(modelState.errors).reduce((acc, arr) => acc.concat(arr), []);
+      }
+      return;
+    },
+    get warnings() {
+      if (modelState.warnings) {
+        return Object.values(modelState.warnings).reduce((acc, arr) => acc.concat(arr), []);
+      }
+      return;
+    }
+  };
+}
+
+// src/core/to-form.ts
+function toForm(model) {
+  const res = {
+    initialValues: model.initialValues,
+    get values() {
+      return model.values;
+    },
+    state: toFormState(model.state),
+    getValueIn: (name) => model.getValueIn(name),
+    setValueIn: (name, value) => model.setValueIn(name, value)
+  };
+  Object.defineProperty(res, "_formModel", {
+    enumerable: false,
+    get() {
+      return model;
+    }
+  });
+  return res;
+}
+function toFormState(modelState) {
+  return {
+    get isTouched() {
+      return modelState.isTouched;
+    },
+    get invalid() {
+      return modelState.invalid;
+    },
+    get isDirty() {
+      return modelState.isDirty;
+    },
+    get isValidating() {
+      return modelState.isValidating;
+    },
+    // get dirtyFields() {
+    //   return modelState.dirtyFields;
+    // },
+    // get isLoading() {
+    //   return modelState.isLoading;
+    // },
+    // get touchedFields() {
+    //   return modelState.touchedFields;
+    // },
+    get errors() {
+      return modelState.errors;
+    },
+    get warnings() {
+      return modelState.warnings;
+    }
+  };
+}
+
+// src/react/utils.ts
+import { useContext } from "react";
+
+// src/react/context.ts
+import React from "react";
+var FormModelContext = React.createContext({});
+var FieldModelContext = React.createContext({});
+
+// src/react/utils.ts
+function useFormModel() {
+  return useContext(FormModelContext);
+}
+
+// src/react/field.tsx
+function Field({
+  name,
+  defaultValue,
+  render,
+  children,
+  deps
+}) {
+  const formModel = useFormModel();
+  const fieldModel = formModel.getField(name) || formModel.createField(name);
+  const field = React2.useMemo(() => toField(fieldModel), [fieldModel]);
+  const fieldModelState = useReadonlyReactiveState(fieldModel.reactiveState);
+  const formModelState = useReadonlyReactiveState(formModel.reactiveState);
+  const fieldState = React2.useMemo(() => toFieldState(fieldModelState), [fieldModelState]);
+  const formState = toFormState(formModelState);
+  const refresh = useRefresh();
+  React2.useEffect(() => {
+    fieldModel.renderCount = fieldModel.renderCount + 1;
+    if (!formModel.getValueIn(name) !== void 0 && defaultValue !== void 0) {
+      formModel.setInitValueIn(name, defaultValue);
+      refresh();
+    }
+    const disposableCollection = new DisposableCollection();
+    disposableCollection.push(
+      fieldModel.onValueChange(() => {
+        refresh();
+      })
+    );
+    if (deps) {
+      deps.forEach((dep) => {
+        const disposable = formModel.getField(dep)?.onValueChange(() => {
+          refresh();
+        });
+        if (disposable) {
+          disposableCollection.push(disposable);
+        }
+      });
+    }
+    return () => {
+      disposableCollection.dispose();
+      if (fieldModel.renderCount > 1) {
+        fieldModel.renderCount = fieldModel.renderCount - 1;
+      } else {
+        fieldModel.dispose();
+      }
+    };
+  }, [fieldModel]);
+  const renderInner = () => {
+    if (render) {
+      return render({ field, fieldState, formState });
+    }
+    if (isFunction(children)) {
+      return children({ field, fieldState, formState });
+    }
+    return React2.cloneElement(children, { ...field });
+  };
+  return /* @__PURE__ */ React2.createElement(FieldModelContext.Provider, { value: fieldModel }, renderInner());
+}
+
+// src/react/form.tsx
+import React3, { Children, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { isFunction as isFunction2 } from "lodash";
+
+// src/core/to-field-array.ts
+function toFieldArray(model) {
+  const res = {
+    get key() {
+      return model.id;
+    },
+    get name() {
+      return model.path.toString();
+    },
+    get value() {
+      return model.value;
+    },
+    onChange: (value) => {
+      model.value = value;
+    },
+    map: (cb) => model.map((f, index) => cb(toField(f), index)),
+    append: (value) => toField(model.append(value)),
+    delete: (index) => model.delete(index),
+    swap: (from, to) => model.swap(from, to),
+    move: (from, to) => model.move(from, to)
+  };
+  Object.defineProperty(res, "_fieldModel", {
+    enumerable: false,
+    get() {
+      return model;
+    }
+  });
+  return res;
+}
+
+// src/core/form-model.ts
+import { cloneDeep, flatten as flatten2, get as get4 } from "lodash";
+import { Emitter as Emitter3 } from "@flowgram.ai/utils";
+import { ReactiveState as ReactiveState2 } from "@flowgram.ai/reactive";
+
+// src/utils/validate.ts
+function toFeedback(result, name) {
+  if (typeof result === "string") {
+    return {
+      name,
+      message: result,
+      level: "error" /* Error */
+    };
+  } else if (result?.message) {
+    return {
+      ...result,
+      name
+    };
+  }
+}
+function feedbackToFieldErrorsOrWarnings(name, feedback) {
+  return {
+    [name]: feedback ? [feedback] : []
+  };
+}
+
+// src/constants.ts
+var DEFAULT_FIELD_STATE = {
+  invalid: false,
+  isDirty: false,
+  isTouched: false,
+  isValidating: false
+};
+var DEFAULT_FORM_STATE = {
+  invalid: false,
+  isDirty: false,
+  isTouched: false,
+  isValidating: false
+};
+function createFormModelState(initialState) {
+  if (!initialState) {
+    return { ...DEFAULT_FORM_STATE };
+  }
+  return { ...DEFAULT_FORM_STATE, ...initialState };
+}
+function createFieldModelState(initialState) {
+  if (!initialState) {
+    return { ...DEFAULT_FIELD_STATE };
+  }
+  return { ...DEFAULT_FIELD_STATE, ...initialState };
+}
+
+// src/core/store.ts
+import { get as get2 } from "lodash";
+var Store = class {
+  get values() {
+    return this._values;
+  }
+  setInitialValues(values) {
+    this._values = values;
+  }
+  setIn(path, value) {
+    this._values = shallowSetIn(this._values || {}, path.toString(), value);
+  }
+  getIn(path) {
+    return get2(this._values, path.value);
+  }
+  dispose() {
+  }
+};
+
+// src/core/field-model.ts
+import { nanoid } from "nanoid";
+import { get as get3, groupBy, some } from "lodash";
+import { DisposableCollection as DisposableCollection2, Emitter } from "@flowgram.ai/utils";
+import { ReactiveState } from "@flowgram.ai/reactive";
+var FieldModel = class {
+  constructor(path, form) {
+    this.onValueChangeEmitter = new Emitter();
+    this.onValueChange = this.onValueChangeEmitter.event;
+    this.toDispose = new DisposableCollection2();
+    this._state = new ReactiveState(
+      createFieldModelState()
+    );
+    this._renderCount = 0;
+    this._mount = false;
+    this._path = path;
+    this.form = form;
+    this.id = nanoid();
+    const changeDisposable = this.form.onFormValuesChange((payload) => {
+      const { values, prevValues } = payload;
+      if (FieldEventUtils.shouldTriggerFieldChangeEvent(payload, this.name)) {
+        this.onValueChangeEmitter.fire({
+          value: get3(values, this.name),
+          prevValue: get3(prevValues, this.name),
+          formValues: values,
+          prevFormValues: prevValues
+        });
+        if (shouldValidate("onChange" /* onChange */, this.form.validationTrigger) && FieldEventUtils.shouldTriggerFieldValidateWhenChange(payload, this.name)) {
+          this.validate();
+        }
+      }
+    });
+    this.toDispose.push(changeDisposable);
+    this.toDispose.push(this.onValueChangeEmitter);
+    this.initState();
+  }
+  get renderCount() {
+    return this._renderCount;
+  }
+  set renderCount(n) {
+    this._renderCount = n;
+  }
+  initState() {
+    const initialErrors = get3(this.form.state.errors, this.name);
+    const initialWarnings = get3(this.form.state.warnings, this.name);
+    if (initialErrors) {
+      this.state.errors = {
+        [this.name]: initialErrors
+      };
+    }
+    if (initialWarnings) {
+      this.state.warnings = {
+        [this.name]: initialWarnings
+      };
+    }
+  }
+  get path() {
+    return this._path;
+  }
+  get name() {
+    return this._path.toString();
+  }
+  set name(name) {
+    this._path = new Path(name);
+  }
+  get ref() {
+    return this._ref;
+  }
+  set ref(ref) {
+    this._ref = ref;
+  }
+  get state() {
+    return this._state.value;
+  }
+  get reactiveState() {
+    return this._state;
+  }
+  get value() {
+    return this.form.getValueIn(this.name);
+  }
+  set value(value) {
+    this.form.setValueIn(this.name, value);
+    if (!this.state.isTouched) {
+      this.state.isTouched = true;
+      this.bubbleState();
+    }
+  }
+  updateNameForLeafState(newName) {
+    const { errors, warnings } = this.state;
+    const nameInErrors = errors ? Object.keys(errors)?.[0] : void 0;
+    if (nameInErrors && errors?.[nameInErrors] && nameInErrors !== newName) {
+      this.state.errors = {
+        [newName]: errors?.[nameInErrors] ? updateFeedbacksName(errors?.[nameInErrors], newName) : errors?.[nameInErrors]
+      };
+    }
+    const nameInWarnings = warnings ? Object.keys(warnings)?.[0] : void 0;
+    if (nameInWarnings && warnings?.[nameInWarnings] && nameInWarnings !== newName) {
+      this.state.warnings = {
+        [newName]: warnings?.[nameInWarnings] ? updateFeedbacksName(warnings?.[nameInWarnings], newName) : warnings?.[nameInWarnings]
+      };
+    }
+  }
+  // recursiveUpdateName(name: FieldName) {
+  //   if (this.children?.length) {
+  //     this.children.forEach(c => {
+  //       c.recursiveUpdateName(c.path.replaceParent(this.path, new Path(name)).toString());
+  //     });
+  //   } else {
+  //     this.updateNameForLeafState(name);
+  //     this.bubbleState();
+  //   }
+  //   this.name = name;
+  // }
+  /**
+   * @deprecated
+   * @param validate
+   * @param from
+   */
+  updateValidate(validate, from) {
+    if (from === "ui") {
+      if (!this.originalValidate) {
+        this.originalValidate = validate;
+      }
+    } else {
+      this.originalValidate = validate;
+    }
+  }
+  bubbleState() {
+    const { errors, warnings } = this.state;
+    if (this.parent) {
+      this.parent.state.isTouched = some(
+        this.parent.children.map((c) => c.state.isTouched),
+        Boolean
+      );
+      this.parent.state.invalid = some(
+        this.parent.children.map((c) => c.state.invalid),
+        Boolean
+      );
+      this.parent.state.isDirty = some(
+        this.parent.children.map((c) => c.state.isDirty),
+        Boolean
+      );
+      this.parent.state.isValidating = some(
+        this.parent.children.map((c) => c.state.isValidating),
+        Boolean
+      );
+      this.parent.state.errors = errors ? mergeFeedbacks(this.parent.state.errors, errors) : clearFeedbacks(this.name, this.parent.state.errors);
+      this.parent.state.warnings = warnings ? mergeFeedbacks(this.parent.state.warnings, warnings) : clearFeedbacks(this.name, this.parent.state.warnings);
+      this.parent.bubbleState();
+      return;
+    }
+    this.form.state.isTouched = some(
+      this.form.fields.map((f) => f.state.isTouched),
+      Boolean
+    );
+    this.form.state.invalid = some(
+      this.form.fields.map((f) => f.state.invalid),
+      Boolean
+    );
+    this.form.state.isDirty = some(
+      this.form.fields.map((f) => f.state.isDirty),
+      Boolean
+    );
+    this.form.state.isValidating = some(
+      this.form.fields.map((f) => f.state.isValidating),
+      Boolean
+    );
+    this.form.state.errors = errors ? mergeFeedbacks(this.form.state.errors, errors) : clearFeedbacks(this.name, this.form.state.errors);
+    this.form.state.warnings = warnings ? mergeFeedbacks(this.form.state.warnings, warnings) : clearFeedbacks(this.name, this.form.state.warnings);
+  }
+  clearState() {
+    this.state.errors = DEFAULT_FIELD_STATE.errors;
+    this.state.warnings = DEFAULT_FIELD_STATE.warnings;
+    this.state.isTouched = DEFAULT_FIELD_STATE.isTouched;
+    this.state.isDirty = DEFAULT_FIELD_STATE.isDirty;
+    this.bubbleState();
+  }
+  get children() {
+    const res = [];
+    this.form.fieldMap.forEach((field, path) => {
+      if (this.path.isChild(path)) {
+        res.push(field);
+      }
+    });
+    return res;
+  }
+  get parent() {
+    const parentPath = this.path.parent;
+    if (!parentPath) {
+      return void 0;
+    }
+    return this.form.fieldMap.get(parentPath.toString());
+  }
+  clear() {
+    if (!this.value) {
+      return;
+    }
+    this.value = void 0;
+  }
+  async validate() {
+    await this.validateSelf();
+  }
+  async validateSelf() {
+    this.state.isValidating = true;
+    this.bubbleState();
+    const { errors, warnings } = await this._runAsyncValidate();
+    if (errors?.length) {
+      this.state.errors = groupBy(errors, "name");
+      this.state.invalid = true;
+    } else {
+      this.state.errors = { [this.name]: [] };
+      this.state.invalid = false;
+    }
+    if (warnings?.length) {
+      this.state.warnings = groupBy(warnings, "name");
+    } else {
+      this.state.warnings = { [this.name]: [] };
+    }
+    this.state.isValidating = false;
+    this.bubbleState();
+    this.form.onValidateEmitter.fire(this.form.state);
+  }
+  async _runAsyncValidate() {
+    const errors = [];
+    const warnings = [];
+    const result = await this.form.validateIn(this.name);
+    if (!result) {
+      return {};
+    } else {
+      const feedback = toFeedback(result, this.name);
+      if (!feedback) {
+        return {};
+      }
+      if (isFieldWarning(feedback)) {
+        warnings.push(feedback);
+      } else {
+        errors.push(feedback);
+      }
+    }
+    return { errors, warnings };
+  }
+  updateState(s) {
+  }
+  dispose() {
+    this.children.map((c) => c.dispose());
+    this.toDispose.dispose();
+    this.form.fieldMap.delete(this.path.toString());
+  }
+  onDispose(fn) {
+    this.toDispose.onDispose(fn);
+  }
+};
+
+// src/core/field-array-model.ts
+import { Emitter as Emitter2 } from "@flowgram.ai/utils";
+var FieldArrayModel = class extends FieldModel {
+  constructor() {
+    super(...arguments);
+    this.onAppendEmitter = new Emitter2();
+    this.onAppend = this.onAppendEmitter.event;
+    this.onDeleteEmitter = new Emitter2();
+    this.onDelete = this.onDeleteEmitter.event;
+  }
+  get children() {
+    const fields = [];
+    this.form.fieldMap.forEach((field, name) => {
+      if (this.path.isChild(name)) {
+        fields.push(field);
+      }
+    });
+    return fields.sort((f1, f2) => {
+      const p1 = f1.path.value;
+      const p2 = f2.path.value;
+      const i1 = parseInt(p1[p1.length - 1]);
+      const i2 = parseInt(p1[p2.length - 1]);
+      return i1 - i2;
+    });
+  }
+  map(cb) {
+    const fields = (this.value || []).map((v, i) => {
+      const pathString = this.path.concat(i).toString();
+      let field = this.form.getField(pathString);
+      if (!field) {
+        field = this.form.createField(pathString);
+      }
+      return field;
+    });
+    return fields.map(cb);
+  }
+  append(value) {
+    const curLength = this.value?.length || 0;
+    const newElemPath = this.path.concat(curLength).toString();
+    const newElemField = this.form.createField(newElemPath);
+    const newArrayValue = this.value ? [...this.value, value] : [value];
+    const prevFormValues = this.form.values;
+    this.form.store.setIn(new Path(this.name), newArrayValue);
+    this.form.fireOnFormValuesChange({
+      values: this.form.values,
+      prevValues: prevFormValues,
+      name: this.name,
+      options: {
+        action: "array-append",
+        indexes: [curLength]
+      }
+    });
+    this.form.fireOnFormValuesInit({
+      values: this.form.values,
+      prevValues: prevFormValues,
+      name: newElemPath
+    });
+    this.onAppendEmitter.fire({
+      value,
+      arrayValue: this.value,
+      index: this.value.length - 1
+    });
+    return newElemField;
+  }
+  /**
+   * 删除数组项，该操作会删除数组项的值并销毁数组项的Field模型
+   * @param index
+   */
+  delete(index) {
+    this._splice(index, 1);
+    this.onDeleteEmitter.fire({ arrayValue: this.value, index });
+  }
+  _splice(start, deleteCount = 1) {
+    if (start < 0 || deleteCount < 0) {
+      throw new Error(
+        `[Form] Error in FieldArrayModel.splice: Invalid Params, start and deleteCount should > 0`
+      );
+    }
+    if (!this.value || this.value.length === 0 || deleteCount > this.value.length) {
+      throw new Error(
+        `[Form] Error in FieldArrayModel.splice: delete count exceeds array length, tried to delete ${deleteCount} elements, but array length is ${this.value?.length || 0}`
+      );
+    }
+    const oldFormValues = this.form.values;
+    const tempValue = [...this.value];
+    tempValue.splice(start, deleteCount);
+    this.form.store.setIn(new Path(this.name), tempValue);
+    this.form.fireOnFormValuesChange({
+      values: this.form.values,
+      prevValues: oldFormValues,
+      name: this.name,
+      options: {
+        action: "array-splice",
+        indexes: Array.from({ length: deleteCount }, (_, i) => i + start)
+      }
+    });
+    const children = this.children;
+    if (start + deleteCount >= children.length) {
+      for (let i = start; i < children.length; i++) {
+        this.form.disposeField(children[i].name);
+      }
+    }
+    const toDispose = [];
+    const newFieldMap = new Map(this.form.fieldMap);
+    const recursiveHandleChildField = (field, index) => {
+      if (field.children?.length) {
+        field.children.forEach((cField) => {
+          recursiveHandleChildField(cField, index);
+        });
+      }
+      if (index < start) {
+        newFieldMap.set(field.name, field);
+      } else if (index < start + deleteCount) {
+        toDispose.push(field);
+      } else {
+        const originName = field.name;
+        const targetName = field.path.replaceParent(this.path.concat(index), this.path.concat(index - deleteCount)).toString();
+        newFieldMap.set(targetName, field);
+        if (!field.children.length) {
+          field.updateNameForLeafState(targetName);
+          field.bubbleState();
+        }
+        field.name = targetName;
+        if (index > children.length - deleteCount - 1) {
+          newFieldMap.delete(originName);
+        }
+      }
+    };
+    children.map((field, index) => {
+      recursiveHandleChildField(field, index);
+    });
+    toDispose.forEach((f) => {
+      f.dispose();
+    });
+    this.form.fieldMap = newFieldMap;
+  }
+  swap(from, to) {
+    if (!this.value) {
+      return;
+    }
+    if (from < 0 || to < 0 || from > this.value.length - 1 || to > this.value.length - 1) {
+      throw new Error(
+        `[Form]: FieldArrayModel.swap Error: invalid params 'form' and 'to', form=${from} to=${to}. expect the value between 0 to ${length - 1}`
+      );
+    }
+    const tempValue = [...this.value];
+    const fromValue = tempValue[from];
+    const toValue = tempValue[to];
+    tempValue[to] = fromValue;
+    tempValue[from] = toValue;
+    this.form.setValueIn(this.name, tempValue);
+  }
+  move(from, to) {
+    if (!this.value) {
+      return;
+    }
+    if (from < 0 || to < 0 || from > this.value.length - 1 || to > this.value.length - 1) {
+      throw new Error(
+        `[Form]: FieldArrayModel.move Error: invalid params 'form' and 'to', form=${from} to=${to}. expect the value between 0 to ${length - 1}`
+      );
+    }
+    const tempValue = [...this.value];
+    const fromValue = tempValue[from];
+    tempValue.splice(from, 1);
+    tempValue.splice(to, 0, fromValue);
+    this.form.setValueIn(this.name, tempValue);
+  }
+};
+
+// src/core/form-model.ts
+var findMatchPaths = Glob.findMatchPaths;
+var FormModel = class {
+  constructor() {
+    this._fieldMap = /* @__PURE__ */ new Map();
+    this.store = new Store();
+    this._options = {};
+    this.onFieldModelCreateEmitter = new Emitter3();
+    this.onFieldModelCreate = this.onFieldModelCreateEmitter.event;
+    this.onFormValuesChangeEmitter = new Emitter3();
+    this.onFormValuesChange = this.onFormValuesChangeEmitter.event;
+    this.onFormValuesInitEmitter = new Emitter3();
+    this.onFormValuesInit = this.onFormValuesInitEmitter.event;
+    this.onFormValuesUpdatedEmitter = new Emitter3();
+    this.onFormValuesUpdated = this.onFormValuesUpdatedEmitter.event;
+    this.onValidateEmitter = new Emitter3();
+    this.onValidate = this.onValidateEmitter.event;
+    this._state = new ReactiveState2(
+      createFormModelState()
+    );
+    this._initialized = false;
+  }
+  set fieldMap(map) {
+    this._fieldMap = map;
+  }
+  /**
+   * 表单初始值，初始化设置后不可修改
+   * @protected
+   */
+  // protected _initialValues?: TValues;
+  get fieldMap() {
+    return this._fieldMap;
+  }
+  get context() {
+    return this._options.context;
+  }
+  get initialValues() {
+    return this._options.initialValues;
+  }
+  get values() {
+    return cloneDeep(this.store.values) || cloneDeep(this.initialValues);
+  }
+  get validationTrigger() {
+    return this._options.validateTrigger;
+  }
+  get state() {
+    return this._state.value;
+  }
+  get reactiveState() {
+    return this._state;
+  }
+  get fields() {
+    return Array.from(this.fieldMap.values());
+  }
+  updateState(state) {
+  }
+  get initialized() {
+    return this._initialized;
+  }
+  fireOnFormValuesChange(payload) {
+    this.onFormValuesChangeEmitter.fire(payload);
+    this.onFormValuesUpdatedEmitter.fire(payload);
+  }
+  fireOnFormValuesInit(payload) {
+    this.onFormValuesInitEmitter.fire(payload);
+    this.onFormValuesUpdatedEmitter.fire(payload);
+  }
+  init(options) {
+    this._options = options;
+    if (options.initialValues) {
+      const prevValues = this.store.values;
+      this.store.setInitialValues(options.initialValues);
+      this.fireOnFormValuesInit({
+        values: options.initialValues,
+        prevValues,
+        name: ""
+      });
+    }
+    this._initialized = true;
+  }
+  createField(name, isArray2) {
+    const path = new Path(name);
+    const pathString = path.toString();
+    if (this.fieldMap.get(pathString)) {
+      return this.fieldMap.get(pathString);
+    }
+    const field = isArray2 ? new FieldArrayModel(path, this) : new FieldModel(path, this);
+    this.fieldMap.set(pathString, field);
+    field.onDispose(() => {
+      this.fieldMap.delete(pathString);
+    });
+    this.onFieldModelCreateEmitter.fire(field);
+    return field;
+  }
+  createFieldArray(name, value) {
+    return this.createField(name, true);
+  }
+  /**
+   * 销毁Field 模型和子模型,但不会删除field的值
+   * @param name
+   */
+  disposeField(name) {
+    const field = this.fieldMap.get(name);
+    if (field) {
+      field.dispose();
+    }
+  }
+  /**
+   * 删除field, 会删除值和 Field 模型， 以及对应的子模型
+   * @param name
+   */
+  deleteField(name) {
+    const field = this.fieldMap.get(name);
+    if (field) {
+      field.clear();
+      field.dispose();
+    }
+  }
+  getField(name) {
+    return this.fieldMap.get(new Path(name).toString());
+  }
+  getValueIn(name) {
+    return this.store.getIn(new Path(name));
+  }
+  setValueIn(name, value) {
+    const prevValues = this.values;
+    this.store.setIn(new Path(name), value);
+    this.fireOnFormValuesChange({
+      values: this.values,
+      prevValues,
+      name
+    });
+  }
+  setInitValueIn(name, value) {
+    const path = new Path(name);
+    const prevValue = this.store.getIn(path);
+    if (prevValue === void 0) {
+      const prevValues = this.values;
+      this.store.setIn(new Path(name), value);
+      this.fireOnFormValuesInit({
+        values: this.values,
+        prevValues,
+        name
+      });
+    }
+  }
+  clearValueIn(name) {
+    this.setValueIn(name, void 0);
+  }
+  async validateIn(name) {
+    if (!this._options.validate) {
+      return;
+    }
+    const validateKey = Object.keys(this._options.validate).find(
+      (pattern) => Glob.isMatch(pattern, name)
+    );
+    if (validateKey) {
+      const validate = this._options.validate[validateKey];
+      return validate({
+        value: this.getValueIn(name),
+        formValues: this.values,
+        context: this.context,
+        name
+      });
+    }
+  }
+  async validate() {
+    if (!this._options.validate) {
+      return [];
+    }
+    const feedbacksArrPromises = Object.keys(this._options.validate).map(async (nameRule) => {
+      const validate = this._options.validate[nameRule];
+      const paths = findMatchPaths(this.values, nameRule);
+      return Promise.all(
+        paths.map(async (path) => {
+          const result = await validate({
+            value: get4(this.values, path),
+            formValues: this.values,
+            context: this.context,
+            name: path
+          });
+          const feedback = toFeedback(result, path);
+          const field = this.getField(path);
+          const errors = feedbackToFieldErrorsOrWarnings(path, feedback);
+          const warnings = feedbackToFieldErrorsOrWarnings(path, feedback);
+          if (field) {
+            field.state.errors = errors;
+            field.state.warnings = warnings;
+            field.bubbleState();
+          }
+          this.state.errors = mergeFeedbacks(this.state.errors, errors);
+          this.state.warnings = mergeFeedbacks(this.state.warnings, warnings);
+          this.state.invalid = !getValidByErrors(this.state.errors);
+          return feedback;
+        })
+      );
+    });
+    this.state.isValidating = true;
+    const feedbacksArr = await Promise.all(feedbacksArrPromises);
+    this.state.isValidating = false;
+    this.onValidateEmitter.fire(this.state);
+    return flatten2(feedbacksArr).filter(Boolean);
+  }
+  dispose() {
+    this.fieldMap.forEach((f) => f.dispose());
+    this.store.dispose();
+    this._initialized = false;
+  }
+};
+
+// src/core/create-form.ts
+function createForm(options) {
+  const { disableAutoInit = false, ...formOptions } = options || {};
+  const formModel = new FormModel();
+  if (!disableAutoInit) {
+    formModel.init(formOptions || {});
+  }
+  return {
+    form: toForm(formModel),
+    control: {
+      _formModel: formModel,
+      getField: (name) => {
+        const fieldModel = formModel.getField(name);
+        if (fieldModel) {
+          return fieldModel instanceof FieldArrayModel ? toFieldArray(fieldModel) : toField(fieldModel);
+        }
+      },
+      init: () => formModel.init(formOptions || {})
+    }
+  };
+}
+
+// src/react/form.tsx
+function Form(props) {
+  const { children, keepModelOnUnMount = false, control, ...restOptions } = props;
+  const { _formModel: formModel } = useMemo2(
+    () => control ? control : createForm(restOptions).control,
+    [control]
+  );
+  useEffect2(
+    () => () => {
+      if (!keepModelOnUnMount) {
+        formModel.dispose();
+      }
+    },
+    []
+  );
+  const form = useMemo2(() => toForm(formModel), [formModel]);
+  return /* @__PURE__ */ React3.createElement(FormModelContext.Provider, { value: formModel }, children ? isFunction2(children) ? children({ form }) : Children.only(children) : null);
+}
+
+// src/react/use-form.ts
+function useForm() {
+  const formModel = useFormModel();
+  return toForm(formModel);
+}
+
+// src/react/use-watch.ts
+import { useEffect as useEffect3 } from "react";
+import { useRefresh as useRefresh2 } from "@flowgram.ai/utils";
+function useWatch(name) {
+  const refresh = useRefresh2();
+  const formModel = useFormModel();
+  if (!formModel) {
+    throw new Error("[Form] error in useWatch, formModel not found");
+  }
+  const value = formModel.getValueIn(name);
+  useEffect3(() => {
+    const disposable = formModel.onFormValuesUpdated(({ name: updatedName }) => {
+      if (updatedName === name) {
+        refresh();
+      }
+    });
+    return () => disposable.dispose();
+  }, [name, formModel]);
+  return value;
+}
+
+// src/react/field-array.tsx
+import * as React4 from "react";
+import { isFunction as isFunction3 } from "lodash";
+import { DisposableCollection as DisposableCollection3, useRefresh as useRefresh3 } from "@flowgram.ai/utils";
+import { useReadonlyReactiveState as useReadonlyReactiveState2 } from "@flowgram.ai/reactive";
+function FieldArray({
+  name,
+  defaultValue,
+  deps,
+  render,
+  children
+}) {
+  const formModel = useFormModel();
+  const fieldModel = React4.useMemo(
+    () => formModel.getField(name) || formModel.createFieldArray(name),
+    []
+  );
+  const field = React4.useMemo(() => toFieldArray(fieldModel), [fieldModel]);
+  const refresh = useRefresh3();
+  const fieldModelState = useReadonlyReactiveState2(fieldModel.reactiveState);
+  const formModelState = useReadonlyReactiveState2(formModel.reactiveState);
+  const fieldState = toFieldState(fieldModelState);
+  const formState = React4.useMemo(() => toFormState(formModelState), [formModelState]);
+  React4.useEffect(() => {
+    fieldModel.renderCount = fieldModel.renderCount + 1;
+    if (!formModel.getValueIn(name) !== void 0 && defaultValue !== void 0) {
+      formModel.setInitValueIn(name, defaultValue);
+      refresh();
+    }
+    const disposableCollection = new DisposableCollection3();
+    disposableCollection.push(
+      fieldModel.onValueChange(() => {
+        refresh();
+      })
+    );
+    if (deps) {
+      deps.forEach((dep) => {
+        const disposable = formModel.getField(dep)?.onValueChange(() => {
+          refresh();
+        });
+        if (disposable) {
+          disposableCollection.push(disposable);
+        }
+      });
+    }
+    return () => {
+      disposableCollection.dispose();
+      if (fieldModel.renderCount > 1) {
+        fieldModel.renderCount = fieldModel.renderCount - 1;
+      } else {
+        fieldModel.dispose();
+      }
+    };
+  }, [fieldModel]);
+  const renderInner = () => {
+    if (render && isFunction3(render)) {
+      return render({ field, fieldState, formState });
+    }
+    if (isFunction3(children)) {
+      return children({ field, fieldState, formState });
+    }
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, "Invalid Array render");
+  };
+  return /* @__PURE__ */ React4.createElement(FieldModelContext.Provider, { value: fieldModel }, renderInner());
+}
+
+// src/react/use-field.ts
+import { useContext as useContext2, useEffect as useEffect5 } from "react";
+import { useRefresh as useRefresh4 } from "@flowgram.ai/utils";
+function useField(name) {
+  const currentFieldModel = useContext2(FieldModelContext);
+  const formModel = useFormModel();
+  const refresh = useRefresh4();
+  const fieldModel = name ? formModel.getField(name) : currentFieldModel;
+  useEffect5(() => {
+    let disposable;
+    if (fieldModel) {
+      disposable = fieldModel.onValueChange(() => refresh());
+    }
+    return () => {
+      disposable?.dispose();
+    };
+  }, [fieldModel]);
+  if (!fieldModel) {
+    return void 0;
+  }
+  if (fieldModel.map) {
+    return toFieldArray(fieldModel);
+  }
+  return toField(fieldModel);
+}
+
+// src/react/use-form-state.ts
+import { useObserve } from "@flowgram.ai/reactive";
+function useFormState(control) {
+  return useObserve(control?._formModel.reactiveState.value || {});
+}
+function useFormErrors(control) {
+  return useObserve(control?._formModel.reactiveState.value || {})?.errors;
+}
+function useFormWarnings(control) {
+  return useObserve(control?._formModel.reactiveState.value || {})?.warnings;
+}
+
+// src/react/use-field-validate.ts
+import { useCallback, useContext as useContext3 } from "react";
+function useFieldValidate(name) {
+  const currentFieldModel = useContext3(FieldModelContext);
+  const formModel = useFormModel();
+  return useCallback(() => {
+    const fieldModel = name ? formModel.getField(name) : currentFieldModel;
+    fieldModel?.validate();
+  }, [currentFieldModel]);
+}
+
+// src/react/use-current-field.ts
+import { useContext as useContext4 } from "react";
+function useCurrentField() {
+  const fieldModel = useContext4(FieldModelContext);
+  if (!fieldModel) {
+    throw new Error(
+      `[Form] useCurrentField Error: field not found, make sure that you are using this hook in a child Component of a Field`
+    );
+  }
+  return fieldModel.map ? toFieldArray(fieldModel) : toField(fieldModel);
+}
+
+// src/react/use-current-field-state.ts
+import { useContext as useContext5, useMemo as useMemo4 } from "react";
+import { useReadonlyReactiveState as useReadonlyReactiveState3 } from "@flowgram.ai/reactive";
+function useCurrentFieldState() {
+  const fieldModel = useContext5(FieldModelContext);
+  if (!fieldModel) {
+    throw new Error(
+      `[Form] useCurrentField Error: field not found, make sure that you are using this hook in a child Component of a Field`
+    );
+  }
+  const fieldModelState = useReadonlyReactiveState3(fieldModel.reactiveState);
+  return useMemo4(() => toFieldState(fieldModelState), [fieldModelState]);
+}
+export {
+  Field,
+  FieldArray,
+  FieldArrayModel,
+  FieldModel,
+  Form,
+  FormModel,
+  Glob,
+  Path,
+  ValidateTrigger,
+  createForm,
+  toField,
+  toFieldArray,
+  toFieldState,
+  toForm,
+  toFormState,
+  useCurrentField,
+  useCurrentFieldState,
+  useField,
+  useFieldValidate,
+  useForm,
+  useFormErrors,
+  useFormState,
+  useFormWarnings,
+  useWatch
+};
+//# sourceMappingURL=index.js.map