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

package/es/packages/form-render/src/FormRender.vue.d.ts

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

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

@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed, inject, watch, createVNode } from 'vue';
 import { isField } from '@formily/core';
 import { isEqual } from 'lodash-es';
+import { useCommonInjection } from '../../../../../packages/form-render/src/hooks/useCommonInjection';
 import { InjectAsyncQueue } from '../../constants/index.js';
 import { assignUpdateValue, traverseDependKey } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
@@ -123,13 +124,12 @@ const script = defineComponent({
         return (_a = target == null ? void 0 : target.depth) != null ? _a : -1;
       }
     }
-    watch(() => props.value, (n, o) => {
-      var _a, _b;
-      n != null && o == null && fetchData();
-      isField(field.value) && field.value.visited && ((_b = (_a = field.value).validate) == null ? void 0 : _b.call(_a));
-    }, {
-      immediate: true
-    });
+    const {
+      injectValueValidate,
+      injectValueWatchFromEmpty
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(() => props.value, fetchData);
+    injectValueValidate(() => props.value);
     watch(() => props.urlConfig, async (config, oldConfig) => {
       if (isEqual(config, oldConfig))
         return;

package/es/packages/form-render/src/components/renderer/combination/hooks/useDeepValidate.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+import { FormRenderExpose } from '../../../../../../../../es/packages/form-render';
+export declare function useDeepValidate(): {
+    bindDeepValidate: (formRenderRefs: Ref<FormRenderExpose[]>) => void;
+};

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

@@ -0,0 +1,32 @@
+import { isField } from '@formily/core';
+import { flatten } from 'lodash-es';
+import { onMounted } from 'vue';
+import { useFormField } from '../../../../../../../packages/form-render';
+import { arrayed } from '../../../../../../../packages/form-render/src/utils';
+
+function useDeepValidate() {
+  function bindDeepValidate(formRenderRefs) {
+    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) : []
+      ];
+    });
+  }
+  return { bindDeepValidate };
+}
+
+export { useDeepValidate };

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

@@ -1,4 +1,4 @@
-import { FieldItem } from '../../types';
+import { FieldItem } from '../../../../../../../es/packages/form-render';
 import { PropType } from 'vue';
 export declare const COMBINATION: import("vue").DefineComponent<{
     title: {
@@ -15,6 +15,9 @@ export declare const COMBINATION: import("vue").DefineComponent<{
         type: PropType<() => FieldItem[]>;
         default: () => never[];
     };
+    onInput: {};
+    onBlur: {};
+    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<{
     title: {
         type: StringConstructor;
@@ -30,6 +33,9 @@ export declare const COMBINATION: import("vue").DefineComponent<{
         type: PropType<() => FieldItem[]>;
         default: () => never[];
     };
+    onInput: {};
+    onBlur: {};
+    onChange: {};
 }>> & {
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -0,0 +1,157 @@
+import { defineComponent, ref, computed, watch, onMounted, createVNode, createTextVNode } from 'vue';
+import { isField } from '@formily/core';
+import { Path } from '@formily/path';
+import { isNumber, isEqual } from 'lodash-es';
+import { useDeepValidate } from '../../../../../../packages/form-render/src/components/renderer/combination/hooks/useDeepValidate';
+import { assignUpdateValue, mergeDeepProperties, formRenderLog } from '../../../utils/index.js';
+import { connect, mapProps } from '@formily/vue';
+import { useDebounceFn, isObject } from '@vueuse/core';
+import { NButton } from 'naive-ui';
+import FormRender from '../../../FormRender.js';
+
+const script = defineComponent({
+  name: "FormCombination",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String
+    },
+    maxGroupNum: {
+      type: Number
+    },
+    getProperties: {
+      type: Function,
+      default: () => []
+    },
+    onInput: {},
+    onBlur: {},
+    onChange: {}
+  },
+  emits: ["update:value"],
+  setup(props, {
+    emit
+  }) {
+    const emitChange = useDebounceFn(function emitChange2() {
+      emit("update:value", JSON.stringify(combinationData.value));
+    }, 300);
+    const combinationData = ref([]);
+    const currentGroupNum = computed(() => combinationData.value.length);
+    function setCombinationData(data, withInitialData = false) {
+      const parsedData = getParsedData(data);
+      if (!needLoad(parsedData))
+        return;
+      parsedData.splice(maxGroupNum.value);
+      parsedData.forEach(setCombinationItemData);
+      combinationData.value.splice(parsedData.length);
+      combinationData.value.forEach(setFormRenderData);
+      function needLoad(_data) {
+        return !!_data && !isEqual(_data, combinationData.value);
+      }
+      function setCombinationItemData(v, idx) {
+        if (!isObject(v))
+          return;
+        combinationData.value[idx] = v;
+        withInitialData && mergeDeepProperties(v, props.getProperties());
+      }
+      function getParsedData(data2) {
+        try {
+          if (!data2)
+            return null;
+          const result = JSON.parse(data2);
+          if (!Array.isArray(result))
+            return null;
+          return result;
+        } catch (e) {
+          formRenderLog(`invalid JSON value ${data2} in COMBINATION => ${props.title}`, "warn");
+          return null;
+        }
+      }
+    }
+    watch(() => props.value, (value) => setCombinationData(value));
+    onMounted(() => {
+      setCombinationData(props.value || "[{}]", true);
+      emitChange();
+    });
+    const formRenderRefs = ref([]);
+    useDeepValidate().bindDeepValidate(formRenderRefs);
+    function setFormRenderData(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);
+      });
+    }
+    function setFormRenderRef(idx, _ref) {
+      formRenderRefs.value[idx] = _ref;
+      setFormRenderData(combinationData.value[idx] || {}, idx);
+    }
+    function addGroup() {
+      combinationData.value.push(mergeDeepProperties({}, props.getProperties()));
+      emitChange();
+    }
+    function removeGroup(idx) {
+      combinationData.value.splice(idx, 1);
+      formRenderRefs.value.splice(idx, 1);
+      emitChange();
+    }
+    const maxGroupNum = computed(() => {
+      if (!isNumber(props.maxGroupNum))
+        return Infinity;
+      if (props.maxGroupNum < 1)
+        return 0;
+      return ~~props.maxGroupNum;
+    });
+    watch(maxGroupNum, (value) => {
+      if (currentGroupNum.value <= value)
+        return;
+      combinationData.value.splice(value);
+      emitChange();
+      formRenderRefs.value.splice(value);
+    }, {
+      immediate: true
+    });
+    function onChange(idx, {
+      fieldKey,
+      value
+    }) {
+      !combinationData.value[idx] && (combinationData.value[idx] = {});
+      Path.setIn(combinationData.value[idx], fieldKey, value);
+      emitChange();
+    }
+    const FormRenderComponent = FormRender;
+    return () => {
+      return createVNode("section", {
+        "class": "form-render__combination"
+      }, [createVNode("header", {
+        "class": "form-render__combinationHeader"
+      }, [createVNode("div", {
+        "class": "form-render__combinationHeaderText"
+      }, [props.title]), createVNode(NButton, {
+        "onClick": addGroup,
+        "type": "info",
+        "text": true,
+        "disabled": currentGroupNum.value >= maxGroupNum.value
+      }, {
+        default: () => [createTextVNode("\u65B0\u589E")]
+      })]), Array.from({
+        length: currentGroupNum.value
+      }).map((_, idx) => createVNode("section", {
+        "class": "form-render__combinationContent"
+      }, [createVNode(FormRenderComponent, {
+        "ref": (_ref) => setFormRenderRef(idx, _ref),
+        "fieldList": props.getProperties(),
+        "onFormChange": (payload) => onChange(idx, payload)
+      }, null), idx === 0 ? null : createVNode("i", {
+        "class": "form-render__combinationClose",
+        "onClick": () => removeGroup(idx)
+      }, ["-"])]))]);
+    };
+  }
+});
+const COMBINATION = connect(script, mapProps(assignUpdateValue));
+
+export { COMBINATION };

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

@@ -1,5 +1,6 @@
 import { CSSProperties, PropType } from 'vue';
 export declare const COMPLEX: import("vue").DefineComponent<{
+    onChange: {};
     span: {
         type: NumberConstructor;
         default: number;
@@ -13,6 +14,7 @@ export declare const COMPLEX: import("vue").DefineComponent<{
         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<{
+    onChange: {};
     span: {
         type: NumberConstructor;
         default: number;

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

@@ -4,6 +4,7 @@ import { assignUpdateValue } from '../../utils/index.js';
 
 const script = defineComponent({
   props: {
+    onChange: {},
     span: {
       type: Number,
       default: 6
@@ -20,16 +21,12 @@ const script = defineComponent({
   setup(props, {
     slots
   }) {
-    function onChange(e) {
-      e.stopPropagation();
-    }
     return () => {
       return createVNode("section", {
         "class": "form-render__complex"
       }, [createVNode("section", {
         "class": `form-render__complexContent--${props.display}`,
-        "style": props.wrapperStyle,
-        "onChange": onChange
+        "style": props.wrapperStyle
       }, [slots.default && slots.default()])]);
     };
   }

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

@@ -1,7 +1,36 @@
+import { PropType } from 'vue';
 export declare const DATE: import("vue").DefineComponent<{
     onChange: {};
     value: {};
+    validate: {
+        type: PropType<Partial<{
+            [key: string]: any;
+            obj_type: "password" | "sex" | "age" | "email" | "id_card" | "age_unit" | "mobile" | "telephone" | "birthday" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
+            vali_obj: string;
+            max_value: string | number;
+            min_value: string | number;
+            min_length: string | number;
+            max_length: string | number;
+            decimal_length: string | number;
+            regular_expression: string | RegExp;
+            regular_error_tip: string;
+        }>>;
+    };
 }, () => 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: {};
     value: {};
+    validate: {
+        type: PropType<Partial<{
+            [key: string]: any;
+            obj_type: "password" | "sex" | "age" | "email" | "id_card" | "age_unit" | "mobile" | "telephone" | "birthday" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
+            vali_obj: string;
+            max_value: string | number;
+            min_value: string | number;
+            min_length: string | number;
+            max_length: string | number;
+            decimal_length: string | number;
+            regular_expression: string | RegExp;
+            regular_error_tip: string;
+        }>>;
+    };
 }>>, {}>;

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

@@ -1,18 +1,75 @@
-import { defineComponent, createVNode } from 'vue';
+import { defineComponent, computed, createVNode } from 'vue';
 import { isField } from '@formily/core';
 import { connect, mapProps } from '@formily/vue';
 import { isObject } from '@vueuse/core';
 import { NDatePicker } from 'naive-ui';
+import { useCommonInjection } from '../../../../../packages/form-render/src/hooks/useCommonInjection';
 
 const script = defineComponent({
   props: {
     onChange: {},
-    value: {}
+    value: {},
+    validate: {
+      type: Object
+    }
   },
-  setup(_) {
-    return () => {
-      return createVNode(NDatePicker, null, null);
-    };
+  setup(props) {
+    useCommonInjection().injectValueValidate(() => props.value);
+    function minCurrentDate() {
+      var _a;
+      return ((_a = props.validate) == null ? void 0 : _a.min_date) === "currTime";
+    }
+    function maxCurrentDate() {
+      var _a;
+      return ((_a = props.validate) == null ? void 0 : _a.max_date) === "currTime";
+    }
+    function isDateDisabled(time) {
+      return minCurrentDate() && time < yesterday() || maxCurrentDate() && time > Date.now();
+      function yesterday() {
+        return Date.now() - 24 * 60 * 60 * 1e3;
+      }
+    }
+    function isTimeDisabled(time) {
+      const checkDate = new Date(time);
+      const currentDate = new Date();
+      return {
+        isHourDisabled,
+        isMinuteDisabled
+      };
+      function checkHour() {
+        return checkDate.getHours();
+      }
+      function currentHour() {
+        return currentDate.getHours();
+      }
+      function currentMinute() {
+        return currentDate.getMinutes();
+      }
+      function isHourDisabled(hour) {
+        return minCurrentDate() && hour < currentHour() || maxCurrentDate() && hour > currentHour();
+      }
+      function isMinuteDisabled(minute) {
+        if (checkHour() === currentHour()) {
+          return minCurrentDate() && minute < currentMinute() || maxCurrentDate() && minute > currentMinute();
+        }
+        return minCurrentDate() && checkHour() < currentHour() || maxCurrentDate() && checkHour() > currentHour();
+      }
+    }
+    const validateConfig = computed(() => {
+      const result = {};
+      if (isObject(props.validate)) {
+        const {
+          min_date,
+          max_date
+        } = props.validate;
+        if (min_date || max_date) {
+          result.isDateDisabled = isDateDisabled;
+          result.isTimeDisabled = isTimeDisabled;
+        }
+      }
+      return result;
+    });
+    return () => createVNode(NDatePicker, validateConfig.value, null);
   }
 });
 const DATE = connect(script, mapProps((props, field) => {
@@ -26,58 +83,8 @@ const DATE = connect(script, mapProps((props, field) => {
         field.setValue(v);
       }
     });
-    if (isObject(props.validate)) {
-      const {
-        min_date,
-        max_date
-      } = props.validate;
-      if (min_date || max_date) {
-        _props.isDateDisabled = isDateDisabled;
-        _props.isTimeDisabled = isTimeDisabled;
-      }
-    }
   }
   return _props;
-  function minCurrentDate() {
-    var _a;
-    return ((_a = props.validate) == null ? void 0 : _a.min_date) === "currTime";
-  }
-  function maxCurrentDate() {
-    var _a;
-    return ((_a = props.validate) == null ? void 0 : _a.max_date) === "currTime";
-  }
-  function isDateDisabled(time) {
-    return minCurrentDate() && time < yesterday() || maxCurrentDate() && time > Date.now();
-    function yesterday() {
-      return Date.now() - 24 * 60 * 60 * 1e3;
-    }
-  }
-  function isTimeDisabled(time) {
-    const checkDate = new Date(time);
-    const currentDate = new Date();
-    return {
-      isHourDisabled,
-      isMinuteDisabled
-    };
-    function checkHour() {
-      return checkDate.getHours();
-    }
-    function currentHour() {
-      return currentDate.getHours();
-    }
-    function currentMinute() {
-      return currentDate.getMinutes();
-    }
-    function isHourDisabled(hour) {
-      return minCurrentDate() && hour < currentHour() || maxCurrentDate() && hour > currentHour();
-    }
-    function isMinuteDisabled(minute) {
-      if (checkHour() === currentHour()) {
-        return minCurrentDate() && minute < currentMinute() || maxCurrentDate() && minute > currentMinute();
-      }
-      return minCurrentDate() && checkHour() < currentHour() || maxCurrentDate() && checkHour() > currentHour();
-    }
-  }
 }));
 
 export { DATE };

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

@@ -1,7 +1,6 @@
 import { defineComponent, inject, computed, createVNode } from 'vue';
 import { isVoidField } from '@formily/core';
 import { connect, mapProps } from '@formily/vue';
-import { isBoolean } from 'lodash-es';
 import { NFormItem } from 'naive-ui';
 import AnnotationEdit from '../../../../../packages/annotation-edit';
 import { InjectionAnnotation } from '../../../../../packages/form-render/src/constants';
@@ -18,7 +17,8 @@ const script = defineComponent({
     const annotation = inject(InjectionAnnotation);
     const annotationContent = computed({
       get() {
-        return annotation.value[props.propertyKey];
+        var _a, _b;
+        return (_b = (_a = annotation.value) == null ? void 0 : _a[props.propertyKey]) != null ? _b : "";
       },
       set(value) {
         annotation.value = {
@@ -35,7 +35,7 @@ const script = defineComponent({
       }, null);
     }
     const showAnnotation = computed(() => {
-      return annotation.value && (!isBoolean(props.annotation) || props.annotation);
+      return annotation.value && props.annotation !== false;
     });
     const showLabel = computed(() => props.label && props.label !== " ");
     function renderLabel() {

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

@@ -7,7 +7,7 @@ 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 { COMBINATION } from './combination/index.js';
 export { CHECKBOX } from './checkbox.js';
 export { SWITCH } from './switch.js';
 export { RADIO } from './radio.js';

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

@@ -1,5 +1,6 @@
 import { defineComponent, computed, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
+import { isNumber } from 'lodash-es';
 import { NRadioGroup, NSpace, NRadio } from 'naive-ui';
 import { assignUpdateValue } from '../../utils/index.js';
 
@@ -23,7 +24,9 @@ const script = defineComponent({
     emit
   }) {
     function dangerousTypeTransform(value) {
-      return value + "";
+      if (isNumber(value))
+        return value + "";
+      return value;
     }
     const valueRef = computed({
       get() {

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

@@ -13,6 +13,10 @@ export declare const SELECT: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;
     };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -28,6 +32,10 @@ export declare const SELECT: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;
     };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -43,5 +51,6 @@ export declare const SELECT: import("vue").DefineComponent<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }, {
     options: AnyObject[];
+    lazyRequest: boolean;
 }>;
 export {};