cnhis-design-vue 3.1.14-beta.8 → 3.1.15-beta.0

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

@@ -1,10 +1,13 @@
-import { defineComponent, ref, createVNode, createTextVNode, toRaw } from 'vue';
-import { assignUpdateValue, formRenderLog } from '../../utils/index.js';
+import { defineComponent, onMounted, ref, computed, watch, createVNode, createTextVNode } from 'vue';
+import { isField } from '@formily/core';
+import { Path } from '../../../../../node_modules/@formily/path/esm/index.js';
+import { flatten, isNumber } from 'lodash-es';
+import { useFormField } from '../../../../../packages/form-render';
+import { arrayed, assignUpdateValue, formRenderLog } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { useDebounceFn, isObject } from '@vueuse/core';
 import { NButton } from 'naive-ui';
-import '../../FormRender.js';
-import script$1 from '../../FormRender.vue_vue_type_script_setup_true_lang.js';
+import FormRender from '../../FormRender.js';
 
 const script = defineComponent({
   name: "FormCombination",
@@ -16,6 +19,9 @@ const script = defineComponent({
     value: {
       type: String
     },
+    maxGroupNum: {
+      type: Number
+    },
     getProperties: {
       type: Function,
       default: () => []
@@ -27,18 +33,54 @@ const script = defineComponent({
   }) {
     const emitChange = useDebounceFn(function emitChange2() {
       emit("update:value", JSON.stringify(_values.value));
+      formRenderRefs.value.splice(groupNum.value);
     }, 300);
-    const combinationRepeat = ref(1);
+    const {
+      field
+    } = useFormField();
+    onMounted(() => {
+      if (!isField(field.value))
+        return;
+      const tempValidator = field.value.validator;
+      field.value.validator = [{
+        async validator() {
+          return Promise.allSettled(formRenderRefs.value.map((formRenderRef) => formRenderRef.validate())).then((resultList) => {
+            const rejected = resultList.filter((res) => res.status === "rejected");
+            if (!rejected.length)
+              return "";
+            return flatten(rejected.map((res) => res.reason));
+          });
+        }
+      }, ...tempValidator ? arrayed(tempValidator) : []];
+    });
+    const formRenderRefs = ref([]);
+    const groupNum = ref(1);
+    const maxGroupNum = computed(() => {
+      if (!isNumber(props.maxGroupNum))
+        return Infinity;
+      if (props.maxGroupNum < 1)
+        return 0;
+      return ~~props.maxGroupNum;
+    });
     function add() {
-      combinationRepeat.value++;
+      groupNum.value++;
       _values.value.push({});
       emitChange();
     }
     function remove(idx) {
-      combinationRepeat.value--;
+      groupNum.value--;
       _values.value.splice(idx, 1);
       emitChange();
     }
+    watch(maxGroupNum, (value) => {
+      if (groupNum.value <= value)
+        return;
+      groupNum.value = value;
+      _values.value.splice(value);
+      emitChange();
+    }, {
+      immediate: true
+    });
     const _values = ref([{}]);
     function initValues(data) {
       if (!data)
@@ -48,19 +90,32 @@ const script = defineComponent({
         if (!Array.isArray(parsed))
           throw new Error();
         parsed.forEach((v, idx) => {
-          if (isObject(v)) {
-            _values.value[idx] = v;
-          } else {
-            _values.value[idx] = {};
-            formRenderLog(`invalid Object value ${v} in COMBINATION => ${props.title}[${idx}]`, "warn");
-          }
+          if (idx > maxGroupNum.value - 1)
+            return;
+          if (isObject(v))
+            return _values.value[idx] = v;
+          _values.value[idx] = {};
+          formRenderLog(`invalid Object value ${v} in COMBINATION => ${props.title}[${idx}]`, "warn");
         });
-        combinationRepeat.value = _values.value.length;
+        groupNum.value = Math.min(_values.value.length, maxGroupNum.value);
       } catch (e) {
         formRenderLog(`invalid JSON value ${data} in COMBINATION => ${props.title}`, "warn");
+      } finally {
+        setFormValueByInitValue();
+      }
+      function setFormValueByInitValue() {
+        _values.value.forEach((item, idx) => {
+          var _a;
+          (_a = formRenderRefs.value[idx]) == null ? void 0 : _a.setFieldState("*", (state) => {
+            if (!isField(state))
+              return;
+            state.value = Path.getIn(item, state.path);
+          });
+        });
       }
     }
-    initValues(props.value);
+    watch(() => props.value, (value) => initValues(value));
+    onMounted(() => initValues(props.value));
     function stop(event) {
       event.stopPropagation();
     }
@@ -69,10 +124,10 @@ const script = defineComponent({
       value
     }) {
       !_values.value[idx] && (_values.value[idx] = {});
-      _values.value[idx][fieldKey] = value;
+      Path.setIn(_values.value[idx], fieldKey, value);
       emitChange();
     }
-    const FormRenderComponent = script$1;
+    const FormRenderComponent = FormRender;
     return () => {
       return createVNode("section", {
         "class": "form-render__combination"
@@ -83,16 +138,17 @@ const script = defineComponent({
       }, [props.title]), createVNode(NButton, {
         "onClick": add,
         "type": "info",
-        "text": true
+        "text": true,
+        "disabled": groupNum.value >= maxGroupNum.value
       }, {
         default: () => [createTextVNode("\u65B0\u589E")]
       })]), Array.from({
-        length: combinationRepeat.value
+        length: groupNum.value
       }).map((_, idx) => {
         return createVNode("section", {
           "class": "form-render__combinationContent"
         }, [createVNode(FormRenderComponent, {
-          "initialData": toRaw(_values.value[idx]) || {},
+          "ref": (_ref) => formRenderRefs.value[idx] = _ref,
           "fieldList": props.getProperties(),
           "onUpdateValue": () => false,
           "onInput": stop,

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

@@ -60,7 +60,7 @@ const FORM_ITEM = connect(script, mapProps({
   const feedback = !isVoidField(field) ? field.selfErrors.length ? field.selfErrors.join(",") : void 0 : void 0;
   return {
     ...props,
-    required: field.required,
+    required: isVoidField(field) ? void 0 : field.required,
     class: "form-render__formItem",
     style: {
       "--form-item-column": (_a = props.span) != null ? _a : 3

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

@@ -1,5 +1,5 @@
-import { defineComponent, computed, createVNode, Fragment } from 'vue';
-import { createSlot, assignUpdateValue } from '../../utils/index.js';
+import { defineComponent, createVNode } from 'vue';
+import { createInputSlot, assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInput } from 'naive-ui';
 
@@ -13,21 +13,10 @@ const script = defineComponent({
       type: String
     }
   },
-  setup(props, {
-    attrs
-  }) {
-    const _slots = computed(() => {
-      const res = {};
-      if (props.prefix) {
-        res.prefix = () => createVNode(Fragment, null, [createSlot(props.prefix, props).default()]);
-      }
-      if (props.suffix) {
-        res.suffix = () => createVNode(Fragment, null, [createSlot(props.suffix, props).default()]);
-      }
-      return res;
-    });
+  setup(props) {
+    const _slots = createInputSlot(props);
     return () => {
-      return createVNode(NInput, attrs, _slots.value);
+      return createVNode(NInput, null, _slots.value);
     };
   }
 });

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

@@ -1,5 +1,17 @@
 export declare const INPUT_NUMBER: import("vue").DefineComponent<{
     onChange: {};
+    prefix: {
+        type: StringConstructor;
+    };
+    suffix: {
+        type: StringConstructor;
+    };
 }, () => 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<{
     onChange: {};
+    prefix: {
+        type: StringConstructor;
+    };
+    suffix: {
+        type: StringConstructor;
+    };
 }>>, {}>;

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

@@ -1,15 +1,22 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../../utils/index.js';
+import { createInputSlot, assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInputNumber } from 'naive-ui';
 
 const script = defineComponent({
   props: {
-    onChange: {}
+    onChange: {},
+    prefix: {
+      type: String
+    },
+    suffix: {
+      type: String
+    }
   },
-  setup(_) {
+  setup(props) {
+    const _slots = createInputSlot(props);
     return () => {
-      return createVNode(NInputNumber, null, null);
+      return createVNode(NInputNumber, null, _slots.value);
     };
   }
 });

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

@@ -1,7 +1,9 @@
 import { AnyObject } from '../../../../../../es/src/types';
 import { PropType } from 'vue';
 export declare const RADIO: import("vue").DefineComponent<{
-    value: {};
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -10,8 +12,11 @@ export declare const RADIO: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => 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<{
-    value: {};
+    onChange: {};
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -20,7 +25,10 @@ export declare const RADIO: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    onChange: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
     options: AnyObject[];
     vertical: boolean;
 }>;

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

@@ -1,11 +1,13 @@
-import { defineComponent, createVNode } from 'vue';
+import { defineComponent, computed, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
 import { NRadioGroup, NSpace, NRadio } from 'naive-ui';
 import { assignUpdateValue } from '../../utils/index.js';
 
 const script = defineComponent({
   props: {
-    value: {},
+    value: {
+      type: [String, Number]
+    },
     options: {
       type: Array,
       default: () => []
@@ -13,12 +15,28 @@ const script = defineComponent({
     vertical: {
       type: Boolean,
       default: false
-    }
+    },
+    onChange: {}
   },
-  setup(props) {
+  emits: ["update:value"],
+  setup(props, {
+    emit
+  }) {
+    function dangerousTypeTransform(value) {
+      return value + "";
+    }
+    const valueRef = computed({
+      get() {
+        return dangerousTypeTransform(props.value);
+      },
+      set(v) {
+        emit("update:value", v);
+      }
+    });
     return () => {
       return createVNode(NRadioGroup, {
-        "value": props.value
+        "value": valueRef.value,
+        "onUpdate:value": ($event) => valueRef.value = $event
       }, {
         default: () => [createVNode(NSpace, {
           "vertical": props.vertical

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

@@ -1,9 +1,8 @@
-import { defineComponent, ref, inject, computed, watch, nextTick, createVNode } from 'vue';
+import { defineComponent, ref, computed, inject, watch, createVNode } from 'vue';
 import { isField } from '@formily/core';
-import { cloneDeep } from 'lodash-es';
-import { InjectAsyncQueue, InjectionFormItemDepsCollector, InjectionChangeContextCollector } from '../../constants/index.js';
-import { assignUpdateValue, formRenderLog, generateUrlParams } from '../../utils/index.js';
-import { isObject } from '@vueuse/core';
+import { isEqual, cloneDeep } from 'lodash-es';
+import { InjectionChangeContextCollector, InjectAsyncQueue, InjectionFormItemDepsCollector } from '../../constants/index.js';
+import { assignUpdateValue, traverseDependKey } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NSelect } from 'naive-ui';
 import { useFormField } from '../../hooks/useFormField.js';
@@ -33,43 +32,52 @@ const script = defineComponent({
   }) {
     const remoteOptions = ref(null);
     const lastSearch = ref("");
-    const asyncQueue = inject(InjectAsyncQueue);
+    const labelKey = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.nameKey) != null ? _b : "text";
+    });
+    const valueKey = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.valueKey) != null ? _b : "value";
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    function update(v, option) {
+      changeContextCollector == null ? void 0 : changeContextCollector.setContext(fieldKey.value, "currentOption", cloneDeep(option));
+      emit("update:value", v);
+    }
     const {
       title,
       field,
       fieldKey
     } = useFormField();
-    function filterOption(options, searchContent) {
-      return options.filter((option) => {
-        return !searchContent || String(option[labelKey.value]).includes(searchContent);
-      });
-    }
+    const asyncQueue = inject(InjectAsyncQueue);
     async function fetchData(content) {
       lastSearch.value = content || "";
-      if (remoteOptions.value)
-        return;
-      const config = props.urlConfig;
-      if (!config) {
+      if (!configFor(props)) {
         return remoteOptions.value = null;
       }
-      if (!isObject(config)) {
-        formRenderLog(`invalid urlConfig (${config}) in SELECT => ${title.value}`, "warn");
-        return remoteOptions.value = null;
-      }
-      try {
-        remoteOptions.value = await asyncQueue.addAsync({
-          ...createParams(config, field.value),
-          key: title.value
+      if (remoteOptions.value)
+        return;
+      remoteOptions.value = await asyncQueue.addAsync({
+        ...createParams(configFor(props), field.value, title.value)
+      });
+      function createParams(config, field2, key) {
+        const _params = {};
+        traverseDependKey(config.dependKey, (dependKey, valueKey2) => {
+          const _field = field2.query(dependKey).take();
+          if (isField(_field)) {
+            _params[valueKey2] = _field.value;
+          }
         });
-      } catch (e) {
-        remoteOptions.value = null;
-      }
-      function createParams(config2, field2) {
         return {
-          ...config2,
-          params: Object.assign({}, config2.params, generateUrlParams(field2, config2.dependKey))
+          ...config,
+          params: Object.assign({}, config.params, _params),
+          key
         };
       }
+      function configFor(target) {
+        return target.urlConfig;
+      }
     }
     const parsedOptions = computed(() => {
       if (remoteOptions.value)
@@ -77,42 +85,34 @@ const script = defineComponent({
       if (!Array.isArray(props.options))
         return [];
       return filterOption(props.options, lastSearch.value);
+      function filterOption(options, searchContent) {
+        return options.filter((option) => {
+          return !searchContent || String(option[labelKey.value]).includes(searchContent);
+        });
+      }
     });
     const formItemDepsCollector = inject(InjectionFormItemDepsCollector);
-    watch(() => props.urlConfig, (config) => {
+    watch(() => props.urlConfig, (config, oldConfig) => {
+      if (isEqual(config, oldConfig))
+        return;
       remoteOptions.value = null;
-      config && formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
+      if (!config)
+        return;
+      formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
         remoteOptions.value = null;
-        await nextTick();
-        props.value != null && await fetchData();
+        emit("update:value", null);
       });
+      props.value && fetchData();
     }, {
       immediate: true
     });
     watch(() => props.value, (n, o) => {
       var _a, _b;
-      if (o == null && n != null) {
-        fetchData();
-      }
-      if (isField(field.value) && field.value.visited) {
-        (_b = (_a = field.value).validate) == null ? void 0 : _b.call(_a);
-      }
+      o == null && n != null && fetchData();
+      isField(field.value) && field.value.visited && ((_b = (_a = field.value).validate) == null ? void 0 : _b.call(_a));
     }, {
       immediate: true
     });
-    const changeContextCollector = inject(InjectionChangeContextCollector);
-    function update(v, option) {
-      changeContextCollector == null ? void 0 : changeContextCollector.setContext(fieldKey.value, "currentOption", cloneDeep(option));
-      emit("update:value", v);
-    }
-    const labelKey = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.nameKey) != null ? _b : "text";
-    });
-    const valueKey = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.valueKey) != null ? _b : "value";
-    });
     function focusDecorator(onFocus) {
       return (...args) => {
         if (isField(field.value)) {
@@ -122,16 +122,16 @@ const script = defineComponent({
       };
     }
     return () => createVNode(NSelect, {
-      "value": props.value,
-      "onUpdate:value": update,
       "remote": true,
       "filterable": true,
+      "value": props.value,
+      "onUpdate:value": update,
       "labelField": labelKey.value,
       "valueField": valueKey.value,
+      "options": parsedOptions.value,
       "onSearch": fetchData,
       "onUpdate:show": (show) => show && fetchData(),
-      "onFocus": focusDecorator(props.onFocus),
-      "options": parsedOptions.value
+      "onFocus": focusDecorator(props.onFocus)
     }, slots);
   }
 });

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

@@ -1,2 +1,17 @@
-export declare const TEXT: (props: any) => JSX.Element;
-export declare const BUTTON: (props: any) => JSX.Element;
+import { AnyObject } from '../../../../../../es/src/types';
+export declare const TEXT: {
+    (props: AnyObject): JSX.Element;
+    props: {
+        content: {};
+        fieldItem: {};
+        value: {};
+    };
+};
+export declare const BUTTON: {
+    (props: AnyObject): JSX.Element;
+    props: {
+        onClick: {};
+        fieldItem: {};
+        content: {};
+    };
+};

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

@@ -1,12 +1,9 @@
-import { createVNode, mergeProps, isVNode } from 'vue';
+import { createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
 import { isFunction } from 'lodash-es';
 import { NButton } from 'naive-ui';
 import { createSlot } from '../../../../../packages/form-render/src/utils';
 
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 function createPropFor(props) {
   return (property) => {
     var _a;
@@ -15,8 +12,12 @@ function createPropFor(props) {
 }
 const textScript = (props) => {
   var _a, _b, _c;
-  const propFor = createPropFor(props);
-  return createVNode("div", (_a = propFor("componentProps")) != null ? _a : {}, [(_c = (_b = createSlot(props.content, props)).default) == null ? void 0 : _c.call(_b)]);
+  return createVNode("div", null, [(_c = (_b = createSlot((_a = props.content) != null ? _a : props.value, props)).default) == null ? void 0 : _c.call(_b)]);
+};
+textScript.props = {
+  content: {},
+  fieldItem: {},
+  value: {}
 };
 const TEXT = connect(textScript, mapProps((props) => {
   var _a;
@@ -26,19 +27,20 @@ const TEXT = connect(textScript, mapProps((props) => {
   };
 }));
 const buttonScript = (props) => {
-  var _a;
-  let _slot;
   const propFor = createPropFor(props);
   function onClick() {
-    var _a2;
-    const cb = propFor("onClick") || ((_a2 = propFor("componentProps")) == null ? void 0 : _a2.onClick);
+    var _a;
+    const cb = propFor("onClick") || ((_a = propFor("componentProps")) == null ? void 0 : _a.onClick);
     return () => isFunction(cb) && cb(props.fieldItem);
   }
-  return createVNode(NButton, mergeProps((_a = propFor("componentProps")) != null ? _a : {}, {
+  return createVNode(NButton, {
     "onClick": onClick()
-  }), _isSlot(_slot = createSlot(props.content, props)) ? _slot : {
-    default: () => [_slot]
-  });
+  }, createSlot(props.content, props));
+};
+buttonScript.props = {
+  onClick: {},
+  fieldItem: {},
+  content: {}
 };
 const BUTTON = connect(buttonScript, mapProps((props) => {
   var _a;

package/es/packages/form-render/src/hooks/useAsyncQueue.d.ts

@@ -34,7 +34,7 @@ export declare class AsyncQueue<T = any, K = any, R = any> {
 export declare function useAsyncQueue(): {
     create: (parallelism?: number) => AsyncQueue<FormAsyncQueueItem, any, {
         label: string;
-        value: any;
+        value: unknown;
     }[]>;
 };
 export {};

package/es/packages/form-render/src/hooks/useAsyncQueue.js

@@ -120,7 +120,7 @@ function useAsyncQueue() {
           const { data, success } = res;
           if (!success)
             throw res;
-          cb(void 0, data);
+          cb(void 0, Array.isArray(data) ? data : []);
         } catch (e) {
           cb(new Error(`Request error => ${e}`));
           removeCache();

package/es/packages/form-render/src/hooks/useChangeContext.d.ts

@@ -1,7 +1,7 @@
 import { FormChangeContext } from '../types';
 export declare class ContextCollector {
     private readonly contextMap;
-    setContext(key: string, prop: keyof FormChangeContext, value: any): void;
+    setContext<T extends keyof FormChangeContext>(key: string, prop: T, value: FormChangeContext[T]): void;
     getContext(key: string): Partial<{
         currentOption: import("../../../../src/types").AnyObject;
     }>;

package/es/packages/form-render/src/hooks/useChangeContext.js

@@ -4,7 +4,7 @@ class ContextCollector {
   }
   setContext(key, prop, value) {
     const context = this.contextMap.get(key) || {};
-    Reflect.set(context, prop, value);
+    context[prop] = value;
     this.contextMap.set(key, context);
   }
   getContext(key) {