cnhis-design-vue 3.1.14 → 3.1.15-beta.10

package/es/packages/form-config/src/constants/index.d.ts

@@ -0,0 +1,28 @@
+import { WithUndefined } from '../../../../../es/src/types';
+import { InjectionKey, Ref } from 'vue';
+import { FieldItem } from '../../../../../es/packages/form-render';
+export declare const WidgetTextMap: {
+    INPUT: string;
+    SELECT: string;
+    TEXTAREA: string;
+    CASCADER: string;
+    SWITCH: string;
+    RADIO: string;
+    TEXT: string;
+    BUTTON: string;
+    CHECKBOX: string;
+    LINEBAR: string;
+    LINE_BREAKS: string;
+};
+export declare enum EditAbleField {
+    ALIAS = "alias",
+    TIP = "tip",
+    DEFAULT_VAL = "default_val",
+    ELEM_WIDTH = "elem_width",
+    PLACEHOLDER = "placeholder",
+    IS_SHOW = "is_show",
+    IS_NOT_FOLD = "is_not_fold",
+    IS_NULL = "is_null",
+    IS_EDIT = "is_edit"
+}
+export declare const InjectionActiveFieldItem: InjectionKey<Ref<WithUndefined<FieldItem>>>;

package/es/packages/form-config/src/constants/index.js

@@ -0,0 +1,28 @@
+const WidgetTextMap = {
+  INPUT: "\u8F93\u5165\u6846",
+  SELECT: "\u4E0B\u62C9\u6846",
+  TEXTAREA: "\u6587\u672C\u57DF",
+  CASCADER: "\u7EA7\u8054\u4E0B\u62C9\u6846",
+  SWITCH: "\u5F00\u5173",
+  RADIO: "\u5355\u9009",
+  TEXT: "\u6587\u672C",
+  BUTTON: "\u6309\u94AE",
+  CHECKBOX: "\u591A\u9009",
+  LINEBAR: "\u5206\u884C\u7B26",
+  LINE_BREAKS: "\u5206\u7EBF\u680F"
+};
+var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
+  EditAbleField2["ALIAS"] = "alias";
+  EditAbleField2["TIP"] = "tip";
+  EditAbleField2["DEFAULT_VAL"] = "default_val";
+  EditAbleField2["ELEM_WIDTH"] = "elem_width";
+  EditAbleField2["PLACEHOLDER"] = "placeholder";
+  EditAbleField2["IS_SHOW"] = "is_show";
+  EditAbleField2["IS_NOT_FOLD"] = "is_not_fold";
+  EditAbleField2["IS_NULL"] = "is_null";
+  EditAbleField2["IS_EDIT"] = "is_edit";
+  return EditAbleField2;
+})(EditAbleField || {});
+const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
+
+export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap };

package/es/packages/form-config/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePresetRenderer';
+export * from './useSortable';

package/es/packages/form-config/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { usePresetRenderer } from './usePresetRenderer.js';
+export { useSortable } from './useSortable.js';

package/es/packages/form-config/src/hooks/useConfigurationField.d.ts

@@ -0,0 +1,6 @@
+import { EditAbleField } from '../../../../../es/packages/form-config/src/constants';
+import { FieldItem } from '../../../../../es/packages/form-render';
+export declare function useConfigurationField(): {
+    generateFieldListByKeys: (keyList: EditAbleField[]) => FieldItem[];
+    generateFieldListByFieldItem: (fieldItem: FieldItem) => FieldItem[];
+};

package/es/packages/form-config/src/hooks/useConfigurationField.js

@@ -0,0 +1,103 @@
+import { EditAbleField } from '../../../../packages/form-config/src/constants';
+
+function useConfigurationField() {
+  const fieldMap = /* @__PURE__ */ new Map([
+    [EditAbleField.ALIAS, { alias: "\u540D\u79F0", elem_width: 12, is_null: "0", val_key: "alias", html_type: "INPUT" }],
+    [EditAbleField.TIP, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 12, val_key: "tip", html_type: "INPUT" }],
+    [
+      EditAbleField.DEFAULT_VAL,
+      { alias: "\u9ED8\u8BA4\u503C", val_key: "default_val", elem_width: 12, html_type: "INPUT", validate: { max_length: 20 } }
+    ],
+    [
+      EditAbleField.ELEM_WIDTH,
+      {
+        alias: "\u5BBD\u5EA6",
+        fieldType: "number",
+        val_key: "elem_width",
+        html_type: "SELECT",
+        elem_width: 12,
+        option: [
+          { text: "\u6574\u884C", value: 12 },
+          { text: "\u534A\u884C", value: 6 },
+          { text: "5/6", value: 10 },
+          { text: "2/3", value: 8 },
+          { text: "1/3", value: 4 },
+          { text: "3/4", value: 9 },
+          { text: "1/4", value: 3 },
+          { text: "1/6", value: 2 }
+        ]
+      }
+    ],
+    [
+      EditAbleField.PLACEHOLDER,
+      { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 12, val_key: "placeholder", html_type: "INPUT", validate: { max_length: 30 } }
+    ],
+    [
+      EditAbleField.IS_SHOW,
+      {
+        val_key: "is_show",
+        alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: "1" },
+        close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: "0" }
+      }
+    ],
+    [
+      EditAbleField.IS_NOT_FOLD,
+      {
+        val_key: "is_not_fold",
+        alias: "\u662F\u5426\u53EF\u6298\u53E0",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u53EF\u6298\u53E0", value: "0" },
+        close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: "1" }
+      }
+    ],
+    [
+      EditAbleField.IS_EDIT,
+      {
+        val_key: "is_edit",
+        alias: "\u662F\u5426\u53EF\u7F16\u8F91",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u53EF\u7F16\u8F91", value: "1" },
+        close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: "0" }
+      }
+    ],
+    [
+      EditAbleField.IS_NULL,
+      {
+        val_key: "is_null",
+        alias: "\u662F\u5426\u5FC5\u586B",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u5FC5\u586B", value: "0" },
+        close: { describe: "\u4E0D\u5FC5\u586B", value: "1" }
+      }
+    ]
+  ]);
+  function generateFieldListByKeys(keyList) {
+    return keyList.map((key) => fieldMap.get(key));
+  }
+  function generateFieldListByFieldItem(fieldItem) {
+    const htmlMap = new Map([
+      ["LINEBAR", [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH, EditAbleField.IS_SHOW, EditAbleField.IS_NOT_FOLD]],
+      ...["LINE_BREAKS", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH]])
+    ]);
+    const defaultItems = [
+      EditAbleField.ALIAS,
+      EditAbleField.DEFAULT_VAL,
+      EditAbleField.ELEM_WIDTH,
+      EditAbleField.PLACEHOLDER,
+      EditAbleField.TIP,
+      EditAbleField.IS_EDIT,
+      EditAbleField.IS_NULL
+    ];
+    const keys = htmlMap.get(fieldItem.html_type) || defaultItems;
+    return generateFieldListByKeys(keys);
+  }
+  return { generateFieldListByKeys, generateFieldListByFieldItem };
+}
+
+export { useConfigurationField };

package/es/packages/form-config/src/hooks/usePresetRenderer.d.ts

@@ -0,0 +1,5 @@
+import { FieldItem } from '../../../../../es/packages/form-render';
+import { FormConfigTextFormatter } from '../types';
+export declare function usePresetRenderer(textFormatter: FormConfigTextFormatter): {
+    getRenderer: (fieldItem: FieldItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+};

package/es/packages/form-config/src/hooks/usePresetRenderer.js

@@ -0,0 +1,117 @@
+import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue';
+import { isString, isArray, isFunction } from 'lodash-es';
+import Draggable from 'vuedraggable';
+import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
+import { useSortable } from '../../../../packages/form-config/src/hooks';
+import { NEllipsis } from 'naive-ui';
+
+function usePresetRenderer(textFormatter) {
+  const renderDefaultNode = {
+    matcher: () => true,
+    renderer({
+      fieldItem
+    }) {
+      const currentActiveEditField = inject(InjectionActiveFieldItem);
+      return createVNode("section", {
+        "onClick": () => currentActiveEditField.value = fieldItem,
+        "class": {
+          "is-active": currentActiveEditField.value === fieldItem
+        }
+      }, [createVNode(NEllipsis, {
+        "class": ["form-config__renderer--default", {
+          "is-required": fieldItem.is_null === "0",
+          "is-disabled": fieldItem.is_edit === "0"
+        }]
+      }, {
+        default: () => getDisplayText()
+      })]);
+      function getDisplayText() {
+        return textFormatter(fieldItem, `${fieldItem.alias}(${WidgetTextMap[fieldItem.html_type] || "\u63A7\u4EF6"})`);
+      }
+    }
+  };
+  const renderComplexNode = {
+    matcher: ["COMPLEX", "COMBINATION"],
+    renderer: defineComponent({
+      props: {
+        fieldItem: {
+          type: Object,
+          required: true
+        }
+      },
+      setup(props) {
+        function fieldFor(key) {
+          return props.fieldItem[key];
+        }
+        const classList = computed(() => {
+          return `form-config__renderer--complex form-config__renderer--complex--${fieldFor("display") || "grid"}`;
+        });
+        const style = computed(() => {
+          return {
+            "--item-column": fieldFor("elem_width"),
+            ...fieldFor("wrapperStyle")
+          };
+        });
+        function renderField(fieldItem) {
+          const Renderer = getRenderer(fieldItem);
+          return createVNode("div", {
+            "class": "form-config__displayContentItem",
+            "style": {
+              "--item-column": fieldItem.elem_width
+            }
+          }, [createVNode(Renderer, {
+            "fieldItem": fieldItem
+          }, null)]);
+        }
+        const childrenList = computed({
+          get() {
+            return fieldFor("html_type") === "COMBINATION" ? fieldFor("children") : fieldFor("properties");
+          },
+          set(v) {
+            if (fieldFor("html_type") === "COMBINATION") {
+              props.fieldItem.children = v;
+            } else {
+              props.fieldItem.properties = v;
+            }
+          }
+        });
+        const {
+          commonConfig
+        } = useSortable();
+        const DraggableComponent = Draggable;
+        return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
+          "class": classList.value,
+          "style": style.value,
+          "group": fieldFor("val_key"),
+          "modelValue": childrenList.value,
+          "onUpdate:modelValue": ($event) => childrenList.value = $event
+        }), {
+          item: ({
+            element
+          }) => renderField(element)
+        });
+      }
+    })
+  };
+  const rendererWithPreset = computed(() => {
+    return [renderComplexNode, renderDefaultNode];
+  });
+  function getRenderer(fieldItem) {
+    return rendererWithPreset.value.find(({
+      matcher
+    }) => {
+      if (isString(matcher))
+        return matcher === fieldItem.html_type;
+      if (isArray(matcher))
+        return matcher.includes(fieldItem.html_type);
+      if (isFunction(matcher))
+        return matcher(fieldItem.html_type);
+      return matcher.test(fieldItem.html_type);
+    }).renderer;
+  }
+  return {
+    getRenderer
+  };
+}
+
+export { usePresetRenderer };

package/es/packages/form-config/src/hooks/useSortable.d.ts

@@ -0,0 +1,11 @@
+import Sortable from 'sortablejs';
+export declare function useSortable(): {
+    commonConfig: {
+        onMove: ({ to, from }: Sortable.SortableEvent) => void;
+        onChoose: ({ target, item }: Sortable.SortableEvent) => void;
+        onUnchoose: ({ from, to, target, item }: Sortable.SortableEvent) => void;
+        tag: string;
+        animation: string;
+        'item-key': string;
+    };
+};

package/es/packages/form-config/src/hooks/useSortable.js

@@ -0,0 +1,31 @@
+function useSortable() {
+  let timer = null;
+  function onChoose({ target, item }) {
+    timer = setTimeout(() => {
+      target.classList.add("is-choosing-area");
+      item.classList.add("is-choosing");
+    }, 200);
+  }
+  function onUnchoose({ from, to, target, item }) {
+    clearTimeout(timer);
+    [from, to, target].forEach((ele) => {
+      ele.classList.remove("is-choosing-area");
+    });
+    item.classList.remove("is-choosing");
+  }
+  let prevTo;
+  function onMove({ to, from }) {
+    if (to === from) {
+      prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
+      prevTo = null;
+    } else {
+      from.classList.remove("is-choosing-area");
+      prevTo = to;
+    }
+    to.classList.add("is-choosing-area");
+  }
+  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "val_key" };
+  return { commonConfig };
+}
+
+export { useSortable };

package/es/packages/form-config/src/types/index.d.ts

@@ -0,0 +1,18 @@
+import { Component, FunctionalComponent } from 'vue';
+import { ArrayAble } from '../../../../../es/src/types';
+import { FieldItem } from '../../../../../es/packages/form-render';
+interface Matcher {
+    (type: string): boolean;
+}
+export declare type FormConfigRenderer = {
+    matcher: ArrayAble<string> | RegExp | Matcher;
+    renderer: Component | FunctionalComponent;
+};
+export interface FormConfigTextFormatter {
+    (fieldItem: FieldItem, parsedText: string): string;
+}
+export interface FormConfigExpose {
+    loadData(payload: Record<'fieldList' | 'materialList', FieldItem[]>): void;
+    getData(): Record<'fieldList' | 'materialList', FieldItem[]>;
+}
+export {};

package/es/packages/form-config/src/types/index.js

@@ -0,0 +1 @@
+

package/es/packages/form-config/style/index.css

@@ -0,0 +1,108 @@
+.form-config {
+  display: flex;
+  justify-content: space-between;
+}
+.form-config__material {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 200px;
+  min-height: 400px;
+  background: white;
+}
+.form-config__materialHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__materialContent {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-config__materialContentItem {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__displayWrapper {
+  padding: 16px;
+  box-sizing: border-box;
+  flex: 1;
+  padding: 16px 0;
+}
+.form-config__displayHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__displayContent {
+  padding: 16px;
+  box-sizing: border-box;
+  height: fit-content;
+  background: #eeeeee;
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+}
+.form-config__displayContentItem {
+  grid-column: span var(--item-column) / span var(--item-column);
+  position: relative;
+}
+.form-config__config {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 220px;
+  background: white;
+}
+.form-config__renderer--default {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  user-select: none;
+  position: relative;
+  width: 100%;
+}
+.form-config__renderer--complex {
+  border: 1px dashed lightblue;
+  padding: 8px;
+}
+.form-config__renderer--complex--grid {
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__renderer--complex--flex {
+  display: flex;
+}
+.form-config .is-disabled {
+  background: #e5e5e5;
+}
+.form-config .is-required {
+  padding-left: 16px !important;
+}
+.form-config .is-required::before {
+  position: absolute;
+  content: '*';
+  left: 8px;
+  color: red;
+}
+.form-config .is-active {
+  color: #5585f5;
+}
+.form-config .is-choosing {
+  box-shadow: #5585f5 0 0 0 2px !important;
+}
+.form-config .is-choosing-area {
+  background: #f0f7ff;
+}

package/es/packages/form-render/index.d.ts

@@ -109,6 +109,13 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
     uuid: {
         type: StringConstructor;
     };
+    lifeCycle: {
+        type: import("vue").PropType<Partial<{
+            onSetup(): void;
+            beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
+            afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
+        }>>;
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         fieldList: {
@@ -217,6 +224,13 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         uuid: {
             type: StringConstructor;
         };
+        lifeCycle: {
+            type: import("vue").PropType<Partial<{
+                onSetup(): void;
+                beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
+                afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
+            }>>;
+        };
     }>> & {
         onFormChange?: ((...args: any[]) => any) | undefined;
     }>>;
@@ -226,10 +240,11 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
     businessCollector: import("./src/hooks").BusinessCollector;
     formItemDepsCollector: import("./src/hooks").FormItemDepsCollector;
     changeContextCollector: import("./src/hooks").ContextCollector;
-    formUUID: any;
+    formUUID: string;
     formModel: import("@formily/core").Form<{
         [x: string]: any;
     }>;
+    scrollbarRef: import("vue").Ref<HTMLElement | undefined>;
     schemaAdaptor: (fieldList: import("./src/types").FieldItem[]) => Record<string, import("@formily/json-schema").Stringify<{
         [key: symbol]: any;
         [key: `x-${string}`]: any;
@@ -345,7 +360,6 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         "x-compile-omitted"?: string[] | undefined;
     }>>;
     currentAnchor: import("vue").WritableComputedRef<string>;
-    scrollbarRef: import("vue").Ref<HTMLElement | undefined>;
     generateAnchorList: (schema: import("@formily/json-schema").Stringify<{
         [key: symbol]: any;
         [key: `x-${string}`]: any;
@@ -407,7 +421,7 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         name: string;
         title: string;
     }[]>;
-    formHeight: import("vue").ComputedRef<any>;
+    formHeight: import("vue").ComputedRef<string | undefined>;
     onScroll: () => void;
     queryWidget: (key: string, wrapperElement: HTMLElement, fieldList: import("./src/types").FieldItem[]) => Promise<{
         widgetElement: HTMLInputElement | null | undefined;
@@ -1712,6 +1726,13 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
     uuid: {
         type: StringConstructor;
     };
+    lifeCycle: {
+        type: import("vue").PropType<Partial<{
+            onSetup(): void;
+            beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
+            afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
+        }>>;
+    };
 }>> & {
     onFormChange?: ((...args: any[]) => any) | undefined;
 }, {

package/es/packages/form-render/src/FormRender.js

@@ -1,10 +1,11 @@
-import { defineComponent, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, isRef, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, nextTick } from 'vue';
+import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, isRef, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, nextTick } from 'vue';
 import { createForm, onFieldValueChange, isField } from '@formily/core';
 import { FormProvider, FormConsumer } from '@formily/vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isArray, isObject } from 'lodash-es';
 import { NForm, NTabs, NTabPane, NConfigProvider } from 'naive-ui';
 import { FormItemLineBarDepKeyPrepend } from '../../../packages/form-render/src/constants';
-import { queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
+import { useFormRenderLifeCycle } from '../../../packages/form-render/src/hooks/useFormRenderLifeCycle';
+import { arrayed, queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
 import { useNuiThemeOverrides } from '../../../packages/form-table/src/hooks/useNuiThemeOverrides';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 import { useFormContext } from './hooks/useFormContext.js';
@@ -37,7 +38,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     scope: { type: Object, default: () => ({}) },
     annotation: { type: Object },
     consumer: { type: Boolean, default: false },
-    uuid: { type: String }
+    uuid: { type: String },
+    lifeCycle: { type: Object }
   },
   emits: [
     "formChange"
@@ -45,6 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose, emit }) {
     const props = __props;
     const { nuiThemeOverrides } = useNuiThemeOverrides();
+    useFormRenderLifeCycle(props).callLifeCycle("onSetup");
     const { SchemaField, businessCollector, formItemDepsCollector, changeContextCollector, formUUID } = useFormContext(props);
     const formModel = createForm({
       initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
@@ -63,6 +66,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       }
     });
+    const scrollbarRef = ref();
     const { schemaAdaptor } = useFieldListAdaptor(businessCollector, formUUID);
     const parsedSchema = computed(() => {
       if (props.schema) {
@@ -74,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return { type: "object", properties: {} };
     });
-    const { currentAnchor, scrollbarRef, generateAnchorList, anchorIdList, formHeight, onScroll } = useAnchor(props, formItemDepsCollector);
+    const { currentAnchor, generateAnchorList, anchorIdList, formHeight, onScroll } = useAnchor(props, scrollbarRef, formItemDepsCollector);
     watch(parsedSchema, generateAnchorList, { immediate: true });
     async function queryWidget(key, wrapperElement, fieldList) {
       if (!scrollbarRef.value)
@@ -95,9 +99,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     expose({
       validate(path = "*") {
         return formModel.validate(path).catch((err) => {
-          return Promise.reject(Array.isArray(err) ? err.map(bindInfo) : err);
+          return Promise.reject(Array.isArray(err) ? err.reduce(errInfoNormalize, []) : err);
         });
+        function errInfoNormalize(result, error) {
+          let hasChildMessage = false;
+          if (isArray(error.messages)) {
+            error.messages.forEach((message) => {
+              if (!isObject(message))
+                return;
+              result.push(...arrayed(message).map(bindInfo));
+              hasChildMessage = true;
+            });
+          }
+          !hasChildMessage && result.push(bindInfo(error));
+          return result;
+        }
         function bindInfo(info) {
+          if (info.decoratorElement)
+            return info;
           info.title = formModel.query(info.path).get("title");
           info.decoratorElement = queryDecorator(info.path, scrollbarRef.value, formUUID);
           Object.assign(info, queryInput(info.decoratorElement));