cnhis-design-vue 3.1.5-beta.16 → 3.1.5-beta.17

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

@@ -1,26 +1,28 @@
-import { defineComponent, provide, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, createVNode, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
-import { injectOrProvide } from './utils/index2.js';
+import { defineComponent, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString } from 'vue';
+import { createForm, onFieldValueChange, isField } from '@formily/core';
+import { FormProvider, FormConsumer } from '@formily/vue';
 import { cloneDeep } from 'lodash-es';
-import { InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectAsyncQueue, InjectionSchemaField } from './constants/index2.js';
-import { useFieldList2Schema } from './hooks/useFieldList2Schema2.js';
-import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue';
-import { useAsyncQueue } from './hooks/useAsyncQueue2.js';
-import { useFieldVisitor } from './hooks/useFieldVisitor2.js';
-import '@vueuse/core';
-import { useBusinessBinding } from './hooks/useBusinessBinding2.js';
-import { useChangeContext } from './hooks/useChangeContext2.js';
-import { useFormItemDeps } from './hooks/useFormItemDeps2.js';
-import * as index from './components/index2.js';
-import { createForm, onFieldValueChange } from '@formily/core';
-import { NForm } from 'naive-ui';
+import { NForm, NTabs, NTabPane } from 'naive-ui';
+import { useFormContext } from './hooks/useFormContext.js';
+import { useInitialData } from './hooks/useInitialData.js';
+import { useFieldList2Schema } from './hooks/useFieldList2Schema.js';
+import { useAnchor } from './hooks/useAnchor.js';
+import { useFieldVisitor } from './hooks/useFieldVisitor.js';
 
-const _hoisted_1 = { style: { "white-space": "pre" } };
+const _hoisted_1 = {
+  key: 0,
+  style: { "height": "50px" }
+};
+const _hoisted_2 = { style: { "white-space": "pre" } };
 var script = /* @__PURE__ */ defineComponent({
+  __name: "FormRender",
   props: {
     fieldList: { type: Array },
     initialData: { type: Object, default: () => ({}) },
     fieldVisitor: { type: Object },
     column: { type: Number, default: 12 },
+    maxHeight: { type: [Number, String], default: "" },
+    anchor: { type: Boolean, default: false },
     parallelism: { type: Number, default: 3 },
     schema: { type: Object },
     components: {
@@ -35,15 +37,14 @@ var script = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { expose, emit }) {
     const props = __props;
-    injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism));
-    const businessCollector = useBusinessBinding().create();
-    provide(InjectionBusinessCollector, businessCollector);
-    const changeContextCollector = useChangeContext().create();
-    provide(InjectionChangeContextCollector, changeContextCollector);
-    const formItemDepsCollector = useFormItemDeps().create();
-    provide(InjectionFormItemDepsCollector, formItemDepsCollector);
+    const {
+      SchemaField,
+      businessCollector,
+      formItemDepsCollector,
+      changeContextCollector
+    } = useFormContext(props);
     const formModel = createForm({
-      initialValues: props.initialData,
+      initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
       effects() {
         onFieldValueChange("*", (field) => {
           const fieldKey = field.props.name.toString();
@@ -59,13 +60,9 @@ var script = /* @__PURE__ */ defineComponent({
         });
       }
     });
-    const SchemaField = injectOrProvide(InjectionSchemaField, () => createSchemaField({
-      components: { ...index, ...props.components },
-      scope: props.scope
-    }).SchemaField);
     const { traverse } = useFieldVisitor();
     const { transform } = useFieldList2Schema(businessCollector);
-    const renderSchema = computed(() => {
+    const parsedSchema = computed(() => {
       if (props.schema) {
         return props.schema;
       }
@@ -75,39 +72,93 @@ var script = /* @__PURE__ */ defineComponent({
       }
       return { type: "object", properties: {} };
     });
-    function validate() {
-      return formModel.validate();
+    const {
+      currentAnchor,
+      scrollbarRef,
+      generateAnchorList,
+      anchorIdList,
+      formHeight,
+      scrollTo,
+      onScroll,
+      updateCurrentAnchor
+    } = useAnchor(props, formItemDepsCollector);
+    watch(parsedSchema, generateAnchorList, { immediate: true });
+    function bindTitle(info) {
+      info.title = formModel.query(info.path).get("title");
+      return info;
     }
     expose({
-      validate,
+      validate(path = "*") {
+        return formModel.validate(path).catch((err) => {
+          return Promise.reject(Array.isArray(err) ? err.map(bindTitle) : err);
+        });
+      },
       getFormValues() {
         return formModel.getFormState().values;
       },
-      setFieldState: formModel.setFieldState.bind(formModel)
+      setFieldState(path, handler) {
+        formModel.setFieldState(path, handler);
+      },
+      resetFields(path = "*") {
+        formModel.setFieldState(path, async (field) => {
+          var _a;
+          if (isField(field)) {
+            field.modified = false;
+            field.visited = false;
+            field.feedbacks = [];
+            field.selfModified = false;
+            field.caches = {};
+            field.value = (_a = field.initialValue) != null ? _a : null;
+          }
+        });
+      }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(NForm), {
-        class: "form-render__wrapper",
-        style: normalizeStyle({ "--column": __props.column })
-      }, {
+      return openBlock(), createBlock(unref(NForm), null, {
         default: withCtx(() => [
-          createVNode(unref(FormProvider), { form: unref(formModel) }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", { schemaFiled: unref(SchemaField) }, () => [
-                createVNode(unref(SchemaField), { schema: unref(renderSchema) }, null, 8, ["schema"])
+          __props.anchor ? (openBlock(), createElementBlock("section", _hoisted_1, [
+            createVNode(unref(NTabs), {
+              value: unref(currentAnchor),
+              "onUpdate:value": unref(updateCurrentAnchor),
+              type: "line"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(anchorIdList), (anchor) => {
+                  return openBlock(), createBlock(unref(NTabPane), {
+                    name: anchor.name,
+                    tab: anchor.title,
+                    key: anchor
+                  }, null, 8, ["name", "tab"]);
+                }), 128))
               ]),
-              __props.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
-                default: withCtx(({ form }) => [
-                  createElementVNode("div", _hoisted_1, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
+              _: 1
+            }, 8, ["value", "onUpdate:value"])
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("section", {
+            class: "form-render__wrapper",
+            style: normalizeStyle({ "--column": __props.column, "--form-height": unref(formHeight) }),
+            ref_key: "scrollbarRef",
+            ref: scrollbarRef,
+            onScroll: _cache[0] || (_cache[0] = (...args) => unref(onScroll) && unref(onScroll)(...args))
+          }, [
+            createVNode(unref(FormProvider), { form: unref(formModel) }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default", { schemaFiled: unref(SchemaField) }, () => [
+                  createVNode(unref(SchemaField), { schema: unref(parsedSchema) }, null, 8, ["schema"])
                 ]),
-                _: 1
-              })) : createCommentVNode("v-if", true)
-            ]),
-            _: 3
-          }, 8, ["form"])
+                __props.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
+                  default: withCtx(({ form }) => [
+                    createElementVNode("div", _hoisted_2, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
+                  ]),
+                  _: 1
+                })) : createCommentVNode("v-if", true)
+              ]),
+              _: 3
+            }, 8, ["form"])
+          ], 36)
         ]),
         _: 3
-      }, 8, ["style"]);
+      });
     };
   }
 });

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

@@ -1,16 +0,0 @@
-export * from './input';
-export * from './select';
-export * from './formItem';
-export * from './textarea';
-export * from './inputNumber';
-export * from './collapse';
-export * from './inputGroup';
-export * from './date';
-export * from './cascader';
-export * from './combination';
-export * from './checkbox';
-export * from './switch';
-export * from './radio';
-export * from './labelSelect';
-export * from './slider';
-export * from './complex';

package/es/packages/form-render/src/components/index.js

@@ -1,16 +1 @@
-export { INPUT } from './input2.js';
-export { SELECT } from './select2.js';
-export { FORM_ITEM } from './formItem2.js';
-export { TEXTAREA } from './textarea2.js';
-export { INPUT_NUMBER } from './inputNumber2.js';
-export { COLLAPSE } from './collapse2.js';
-export { INPUT_GROUP } from './inputGroup2.js';
-export { DATE } from './date2.js';
-export { SEARCH_CASCADE } from './cascader2.js';
-export { COMBINATION } from './combination2.js';
-export { CHECKBOX } from './checkbox2.js';
-export { SWITCH } from './switch2.js';
-export { RADIO } from './radio2.js';
-export { LABEL } from './labelSelect2.js';
-export { SLIDER } from './slider2.js';
-export { COMPLEX } from './complex2.js';
+

package/es/packages/form-render/src/components/{cascader.d.ts → renderer/cascader.d.ts}

@@ -1,5 +1,5 @@
-import { AnyObject, ArrayAble } from '../../../../../es/src/types';
-import { FormRequestType } from '../types';
+import { AnyObject, ArrayAble } from '../../../../../../es/src/types';
+import { FormRequestType } from '../../types';
 import { PropType } from 'vue';
 declare type DependKeyObj = {
     paramName: string;

package/es/packages/form-render/src/components/{cascader2.js → renderer/cascader.js}

@@ -1,12 +1,10 @@
 import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
 import { isObject, isString } from 'lodash-es';
-import { InjectAsyncQueue } from '../constants/index2.js';
-import { assignUpdateValue, formRenderLog, arrayed } from '../utils/index2.js';
-import '@vueuse/core';
-import { useFormField } from '../hooks/useFormField2.js';
-import '../../../../packages/form-render/src/utils';
+import { InjectAsyncQueue } from '../../constants/index.js';
+import { assignUpdateValue, formRenderLog, arrayed } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NCascader } from 'naive-ui';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const script = defineComponent({
   name: "FormCascader",
@@ -28,7 +26,6 @@ const script = defineComponent({
   emits: ["update:value"],
   setup(props, {
     slots,
-    attrs,
     emit
   }) {
     const _options = ref(null);
@@ -66,16 +63,31 @@ const script = defineComponent({
           }
         });
       }
-      const data = await asyncQueue.addAsync({
+      let data = await asyncQueue.addAsync({
         ...config,
         key: title.value,
         params
       });
+      if (!Array.isArray(data)) {
+        data = [];
+      }
+      if (!data.length && isObject(option)) {
+        option.isLeaf = true;
+        let currentOption = option;
+        const result2 = [option];
+        while (currentOption.parent) {
+          result2.unshift(currentOption.parent);
+          currentOption = currentOption.parent;
+        }
+        updateValue(null, null, result2);
+        return;
+      }
       const result = data.reduce((res, d) => {
         res.push({
           [config.nameKey]: d[config.nameKey],
           [config.valueKey]: d[config.valueKey],
           depth: parentDepth + 1,
+          parent: option,
           isLeaf: parentDepth + 2 >= props.deep
         });
         return res;
@@ -114,13 +126,20 @@ const script = defineComponent({
       const payload = Array.isArray(options) ? options.map((option) => ({
         ...option,
         label: option[labelKey.value],
-        children: void 0
+        children: void 0,
+        parent: void 0
       })) : options;
       emit("update:value", payload);
     }
+    const show = ref(false);
+    function updateShow(v) {
+      show.value = !!v;
+      v && fetchData();
+    }
     return () => {
       return createVNode(NCascader, {
         "value": _value.value,
+        "show": !!show.value,
         "onUpdate:value": updateValue,
         "remote": true,
         "labelField": labelKey.value,
@@ -128,7 +147,7 @@ const script = defineComponent({
         "options": renderOptions.value,
         "checkStrategy": "child",
         "onLoad": fetchData,
-        "onUpdate:show": (show) => show && fetchData()
+        "onUpdate:show": updateShow
       }, slots);
     };
   }

package/es/packages/form-render/src/components/{checkbox.d.ts → renderer/checkbox.d.ts}

@@ -1,4 +1,4 @@
-import { AnyObject } from '../../../../../es/src/types';
+import { AnyObject } from '../../../../../../es/src/types';
 import { PropType } from "vue";
 export declare const CHECKBOX: import("vue").DefineComponent<{
     options: {

package/es/packages/form-render/src/components/{checkbox2.js → renderer/checkbox.js}

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../utils/index2.js';
+import { assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NCheckboxGroup, NSpace, NCheckbox } from 'naive-ui';
 

package/es/packages/form-render/src/components/{combination.d.ts → renderer/combination.d.ts}

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
 export declare const COMBINATION: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;

package/es/packages/form-render/src/components/{combination2.js → renderer/combination.js}

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, createVNode, createTextVNode, toRaw } from 'vue';
-import { assignUpdateValue, formRenderLog } from '../utils/index2.js';
+import { assignUpdateValue, formRenderLog } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { useDebounceFn, isObject } from '@vueuse/core';
 import { NButton } from 'naive-ui';
-import '../FormRender2.js';
-import script$1 from '../FormRender.vue_vue_type_script_setup_true_lang.js';
+import '../../FormRender.js';
+import script$1 from '../../FormRender.vue_vue_type_script_setup_true_lang.js';
 
 const script = defineComponent({
   name: "FormCombination",

package/es/packages/form-render/src/components/{complex.d.ts → renderer/complex.d.ts}

@@ -1,13 +1,32 @@
+import { CSSProperties, PropType } from 'vue';
 export declare const COMPLEX: import("vue").DefineComponent<{
     span: {
         type: NumberConstructor;
         default: number;
     };
+    display: {
+        type: PropType<"flex" | "grid">;
+        default: string;
+    };
+    wrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     span: {
         type: NumberConstructor;
         default: number;
     };
+    display: {
+        type: PropType<"flex" | "grid">;
+        default: string;
+    };
+    wrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
 }>>, {
     span: number;
+    display: "flex" | "grid";
+    wrapperStyle: CSSProperties;
 }>;

package/es/packages/form-render/src/components/{complex2.js → renderer/complex.js}

@@ -1,17 +1,24 @@
 import { defineComponent, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
-import { assignUpdateValue } from '../../../../packages/form-render/src/utils';
+import { assignUpdateValue } from '../../utils/index.js';
 
 const script = defineComponent({
   props: {
     span: {
       type: Number,
       default: 6
+    },
+    display: {
+      type: String,
+      default: "grid"
+    },
+    wrapperStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup(props, {
-    slots,
-    attrs
+    slots
   }) {
     function onChange(e) {
       e.stopPropagation();
@@ -20,7 +27,8 @@ const script = defineComponent({
       return createVNode("section", {
         "class": "form-render__complex"
       }, [createVNode("section", {
-        "class": "form-render__complexContent",
+        "class": `form-render__complexContent--${props.display}`,
+        "style": props.wrapperStyle,
         "onChange": onChange
       }, [slots.default && slots.default()])]);
     };

package/es/packages/form-render/src/components/{formItem.d.ts → renderer/formItem.d.ts}

@@ -157,9 +157,11 @@ export declare const FORM_ITEM: import("vue").DefineComponent<{
     labelElementRef: import("vue").Ref<HTMLLabelElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedRequired: import("vue").ComputedRef<boolean>;
-    hasFeedback: import("vue").ComputedRef<number | true>;
     feedbackId: import("vue").Ref<string>;
-    explains: import("vue").Ref<string[]>;
+    renderExplains: import("vue").Ref<{
+        key: string;
+        render: () => import("vue").VNodeChild;
+    }[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly label: StringConstructor;
     readonly labelWidth: import("vue").PropType<string | number>;
@@ -283,10 +285,10 @@ export declare const FORM_ITEM: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>>;
 }>>, {
-    required: boolean;
-    first: boolean;
-    showRequireMark: boolean | undefined;
-    showFeedback: boolean | undefined;
-    showLabel: boolean | undefined;
-    ignorePathChange: boolean;
+    readonly required: boolean;
+    readonly first: boolean;
+    readonly showRequireMark: boolean | undefined;
+    readonly showFeedback: boolean | undefined;
+    readonly showLabel: boolean | undefined;
+    readonly ignorePathChange: boolean;
 }>;

package/es/packages/form-render/src/components/renderer/index.d.ts

@@ -0,0 +1,16 @@
+export * from './input';
+export * from './select';
+export * from './formItem';
+export * from './textarea';
+export * from './inputNumber';
+export * from './linebar';
+export * from './inputGroup';
+export * from './date';
+export * from './cascader';
+export * from './combination';
+export * from './checkbox';
+export * from './switch';
+export * from './radio';
+export * from './labelSelect';
+export * from './slider';
+export * from './complex';

package/es/packages/form-render/src/components/renderer/index.js

@@ -0,0 +1,16 @@
+export { INPUT } from './input.js';
+export { SELECT } from './select.js';
+export { FORM_ITEM } from './formItem.js';
+export { TEXTAREA } from './textarea.js';
+export { INPUT_NUMBER } from './inputNumber.js';
+export { LINEBAR } from './linebar.js';
+export { INPUT_GROUP } from './inputGroup.js';
+export { DATE } from './date.js';
+export { SEARCH_CASCADE } from './cascader.js';
+export { COMBINATION } from './combination.js';
+export { CHECKBOX } from './checkbox.js';
+export { SWITCH } from './switch.js';
+export { RADIO } from './radio.js';
+export { LABEL } from './labelSelect.js';
+export { SLIDER } from './slider.js';
+export { COMPLEX } from './complex.js';

package/es/packages/form-render/src/components/{input2.js → renderer/input.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, createVNode, Fragment } from 'vue';
-import { assignUpdateValue } from '../utils/index2.js';
+import { assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInput } from 'naive-ui';
 

package/es/packages/form-render/src/components/{inputNumber2.js → renderer/inputNumber.js}

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../utils/index2.js';
+import { assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInputNumber } from 'naive-ui';
 

package/es/packages/form-render/src/components/{collapse.d.ts → renderer/linebar.d.ts}

@@ -1,8 +1,12 @@
-export declare const COLLAPSE: import("vue").DefineComponent<{
+export declare const LINEBAR: import("vue").DefineComponent<{
     show: {
         type: BooleanConstructor;
         default: boolean;
     };
+    line: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     title: {
         type: StringConstructor;
         default: string;
@@ -16,6 +20,10 @@ export declare const COLLAPSE: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    line: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     title: {
         type: StringConstructor;
         default: string;
@@ -26,6 +34,7 @@ export declare const COLLAPSE: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-    show: boolean;
     title: string;
+    show: boolean;
+    line: boolean;
 }>;

package/es/packages/form-render/src/components/renderer/linebar.js

@@ -0,0 +1,75 @@
+import { defineComponent, ref, onMounted, inject, createVNode, createTextVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { NDivider, NCollapseTransition } from 'naive-ui';
+import { useFormField } from '../../../../../packages/form-render';
+import { InjectionFormItemDepsCollector, FormItemLineBarDepKeyPrepend } from '../../constants/index.js';
+
+const script = defineComponent({
+  name: "FormCollapse",
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    line: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const _show = ref(props.show);
+    onMounted(() => {
+      _show.value = props.show;
+    });
+    function toggleShow() {
+      if (props.disabled)
+        return;
+      _show.value = !_show.value;
+    }
+    const {
+      fieldKey
+    } = useFormField();
+    const formItemDepsCollector = inject(InjectionFormItemDepsCollector);
+    formItemDepsCollector.setDeps(fieldKey.value, FormItemLineBarDepKeyPrepend + fieldKey.value, (v = true) => {
+      _show.value = v;
+    });
+    return () => {
+      return createVNode("section", {
+        "class": "form-render__linebar",
+        "anchor-target": true
+      }, [props.line ? createVNode(NDivider, {
+        "style": {
+          margin: "4px 0"
+        }
+      }, {
+        default() {
+          return [props.title];
+        }
+      }) : createVNode("header", {
+        "class": "form-render__linebarHeader",
+        "onClick": toggleShow
+      }, [createTextVNode(" "), props.title, createTextVNode(" ")]), createVNode(NCollapseTransition, {
+        "class": "form-render__linebarItem",
+        "show": _show.value
+      }, slots)]);
+    };
+  }
+});
+const LINEBAR = connect(script, mapProps((props, field) => {
+  return {
+    ...props,
+    title: field.title
+  };
+}));
+
+export { LINEBAR };