cnhis-design-vue 3.1.8 → 3.1.9-beta.11

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

@@ -0,0 +1,124 @@
+import { defineComponent, provide, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, createVNode, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
+import { createForm, onFieldValueChange } from '@formily/core';
+import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue';
+import { cloneDeep } from 'lodash-es';
+import { NForm } from 'naive-ui';
+import * as index from './components/index.js';
+import { InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectAsyncQueue, InjectionSchemaField } from './constants/index.js';
+import { injectOrProvide } from './utils/index.js';
+import { useBusinessBinding } from './hooks/useBusinessBinding.js';
+import { useAsyncQueue } from './hooks/useAsyncQueue.js';
+import { useChangeContext } from './hooks/useChangeContext.js';
+import { useFormItemDeps } from './hooks/useFormItemDeps.js';
+import { useFieldVisitor } from './hooks/useFieldVisitor.js';
+import { useFieldList2Schema } from './hooks/useFieldList2Schema.js';
+
+const _hoisted_1 = { 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 },
+    parallelism: { type: Number, default: 3 },
+    schema: { type: Object },
+    components: {
+      type: Object,
+      default: () => ({})
+    },
+    scope: { type: Object, default: () => ({}) },
+    consumer: { type: Boolean, default: false }
+  },
+  emits: [
+    "formChange"
+  ],
+  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 formModel = createForm({
+      initialValues: props.initialData,
+      effects() {
+        onFieldValueChange("*", (field) => {
+          const fieldKey = field.props.name.toString();
+          emit("formChange", {
+            fieldInstance: field,
+            fieldKey,
+            fieldName: field.title,
+            value: field.value,
+            context: changeContextCollector.getContext(fieldKey)
+          });
+          businessCollector.trigger(formModel, fieldKey, field.value);
+          formItemDepsCollector.trigger(fieldKey);
+        });
+      }
+    });
+    const SchemaField = injectOrProvide(InjectionSchemaField, () => createSchemaField({
+      components: { ...index, ...props.components },
+      scope: props.scope
+    }).SchemaField);
+    const { traverse } = useFieldVisitor();
+    const { transform } = useFieldList2Schema(businessCollector);
+    const renderSchema = computed(() => {
+      if (props.schema) {
+        return props.schema;
+      }
+      if (props.fieldList) {
+        const _fieldList = traverse(cloneDeep(props.fieldList), props.fieldVisitor);
+        return { type: "object", properties: transform(_fieldList) };
+      }
+      return { type: "object", properties: {} };
+    });
+    function validate() {
+      return formModel.validate().catch((err) => {
+        if (Array.isArray(err)) {
+          return Promise.reject(err.map((e) => {
+            e.title = formModel.query(e.path).get("title");
+            return e;
+          }));
+        } else {
+          return Promise.reject(err);
+        }
+      });
+    }
+    expose({
+      validate,
+      getFormValues() {
+        return formModel.getFormState().values;
+      },
+      setFieldState: formModel.setFieldState.bind(formModel)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NForm), {
+        class: "form-render__wrapper",
+        style: normalizeStyle({ "--column": __props.column })
+      }, {
+        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.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
+                default: withCtx(({ form }) => [
+                  createElementVNode("div", _hoisted_1, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+          }, 8, ["form"])
+        ]),
+        _: 3
+      }, 8, ["style"]);
+    };
+  }
+});
+
+export { script as default };

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

@@ -1,10 +1,14 @@
-import { AnyObject } from 'cnhis-design-vue/es/src/types';
-import { FormRequestType } from "../types";
-import { PropType } from "vue";
+import { AnyObject, ArrayAble } from '../../../../../es/src/types';
+import { FormRequestType } from '../types';
+import { PropType } from 'vue';
+declare type DependKeyObj = {
+    paramName: string;
+    paramValue: string;
+};
 declare type UrlConfig = {
     method: FormRequestType;
     nameKey: string;
-    dependKey: string;
+    dependKey: ArrayAble<string> | ArrayAble<DependKeyObj>;
     url: string;
     valueKey: string;
 };
@@ -20,6 +24,8 @@ export declare const SEARCH_CASCADE: import("vue").DefineComponent<{
     urlConfig: {
         type: PropType<UrlConfig>;
     };
+    onChange: {};
+    value: {};
 }, () => 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<{
     options: {
         type: PropType<AnyObject[]>;
@@ -32,6 +38,8 @@ export declare const SEARCH_CASCADE: import("vue").DefineComponent<{
     urlConfig: {
         type: PropType<UrlConfig>;
     };
+    onChange: {};
+    value: {};
 }>> & {
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -1,10 +1,10 @@
-import { defineComponent, ref, inject, computed, watch, createVNode, mergeProps } from 'vue';
-import { InjectAsyncQueue } from '../constants/index2.mjs';
-import { assignUpdateValue, formRenderLog } from '../utils/index2.mjs';
-import { isObject } from '@vueuse/core';
-import { useFormField } from '../hooks/useFormField2.mjs';
+import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
+import { isObject, isString } from 'lodash-es';
+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",
@@ -19,12 +19,13 @@ const script = defineComponent({
     },
     urlConfig: {
       type: Object
-    }
+    },
+    onChange: {},
+    value: {}
   },
   emits: ["update:value"],
   setup(props, {
     slots,
-    attrs,
     emit
   }) {
     const _options = ref(null);
@@ -37,7 +38,9 @@ const script = defineComponent({
       if (!option && _options.value)
         return;
       const config = props.urlConfig;
-      if (!config || !isObject(config)) {
+      if (!config)
+        return;
+      if (!isObject(config)) {
         formRenderLog(`invalid urlConfig (${config}) in CASCADER => ${title.value}`, "warn");
         return;
       }
@@ -48,11 +51,17 @@ const script = defineComponent({
         lvlnr: parentDepth + 1 + ""
       };
       if (option) {
-        if (!props.urlConfig.dependKey) {
-          formRenderLog(`invalid urlConfig.dependKey ${props.urlConfig.dependKey} in CASCADER => ${title.value}`, "warn");
+        if (!config.dependKey) {
+          formRenderLog(`invalid urlConfig.dependKey ${config.dependKey} in CASCADER => ${title.value}`, "warn");
           return;
         }
-        params[props.urlConfig.dependKey] = option[config.valueKey];
+        arrayed(config.dependKey).forEach((key) => {
+          if (isString(key)) {
+            params[key] = option[config.valueKey];
+          } else if (isObject(key)) {
+            params[key.paramName] = option[key.paramValue];
+          }
+        });
       }
       const data = await asyncQueue.addAsync({
         ...config,
@@ -73,31 +82,51 @@ const script = defineComponent({
     const renderOptions = computed(() => {
       return _options.value || props.options || [];
     });
-    watch(() => attrs.value, (n, o) => {
+    watch(() => props.value, (n, o) => {
       if (n != null && o == null) {
         fetchData();
       }
     }, {
       immediate: true
     });
-    const cascaderRef = ref();
-    function updateValue(v) {
-      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";
+    });
+    const _value = computed(() => {
+      try {
+        const parsed = Array.isArray(props.value) ? props.value : JSON.parse(props.value || "");
+        if (Array.isArray(parsed)) {
+          return parsed.map((option) => option[labelKey.value]).join(" / ");
+        }
+      } catch (e) {
+        return "";
+      }
+    });
+    function updateValue(_, __, options) {
+      const payload = Array.isArray(options) ? options.map((option) => ({
+        ...option,
+        label: option[labelKey.value],
+        children: void 0
+      })) : options;
+      emit("update:value", payload);
     }
     return () => {
-      var _a, _b, _c, _d;
-      return createVNode(NCascader, mergeProps({
-        "ref": cascaderRef
-      }, attrs, {
+      return createVNode(NCascader, {
+        "value": _value.value,
         "onUpdate:value": updateValue,
         "remote": true,
-        "labelField": (_b = (_a = props.urlConfig) == null ? void 0 : _a.nameKey) != null ? _b : "text",
-        "valueField": (_d = (_c = props.urlConfig) == null ? void 0 : _c.valueKey) != null ? _d : "value",
+        "labelField": labelKey.value,
+        "valueField": valueKey.value,
         "options": renderOptions.value,
         "checkStrategy": "child",
         "onLoad": fetchData,
         "onUpdate:show": (show) => show && fetchData()
-      }), slots);
+      }, slots);
     };
   }
 });

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

@@ -1,4 +1,4 @@
-import { AnyObject } from 'cnhis-design-vue/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.mjs → checkbox.js}

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../utils/index2.mjs';
+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/{collapse2.mjs → collapse.js}

@@ -32,12 +32,12 @@ const script = defineComponent({
     }
     return () => {
       return createVNode("section", {
-        "class": "formily-render__collapse"
+        "class": "form-render__collapse"
       }, [createVNode("header", {
-        "class": "formily-render__collapseHeader",
+        "class": "form-render__collapseHeader",
         "onClick": toggleShow
       }, [props.title]), createVNode(NCollapseTransition, {
-        "class": "formily-render__collapseItem",
+        "class": "form-render__collapseItem",
         "show": _show.value,
         "appear": false
       }, slots)]);

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

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, createVNode, createTextVNode, toRaw } from 'vue';
-import { assignUpdateValue, formRenderLog } from '../utils/index2.mjs';
+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.mjs';
-import script$1 from '../FormRender.vue_vue_type_script_setup_true_lang.mjs';
+import '../FormRender.js';
+import script$1 from '../FormRender.vue_vue_type_script_setup_true_lang.js';
 
 const script = defineComponent({
   name: "FormCombination",
@@ -71,20 +71,22 @@ const script = defineComponent({
       event.stopPropagation();
     }
     function onChange(idx, {
-      field,
+      fieldKey,
       value
     }) {
       !_values.value[idx] && (_values.value[idx] = {});
-      _values.value[idx][field] = value;
+      _values.value[idx][fieldKey] = value;
       emitChange();
     }
     const FormRenderComponent = script$1;
     return () => {
       return createVNode("section", {
-        "class": "formily-render__combination"
+        "class": "form-render__combination"
       }, [createVNode("header", {
-        "class": "formily-render__combinationHeader"
-      }, [createVNode("h3", null, [createTextVNode(" "), props.title]), createVNode(NButton, {
+        "class": "form-render__combinationHeader"
+      }, [createVNode("div", {
+        "class": "form-render__combinationHeaderText"
+      }, [props.title]), createVNode(NButton, {
         "onClick": add,
         "type": "info",
         "text": true
@@ -94,7 +96,7 @@ const script = defineComponent({
         length: combinationRepeat.value
       }).map((_, idx) => {
         return createVNode("section", {
-          "class": "formily-render__combinationContent"
+          "class": "form-render__combinationContent"
         }, [createVNode(FormRenderComponent, {
           "initialData": toRaw(_values.value[idx]) || {},
           "schema": _schema.value,
@@ -104,7 +106,7 @@ const script = defineComponent({
           "onChange": stop,
           "onFormChange": (payload) => onChange(idx, payload)
         }, null), idx !== 0 ? createVNode("i", {
-          "class": "formily-render__combinationClose",
+          "class": "form-render__combinationClose",
           "onClick": () => remove(idx)
         }, ["-"]) : null]);
       })]);

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

@@ -0,0 +1,13 @@
+export declare const COMPLEX: import("vue").DefineComponent<{
+    span: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => 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;
+    };
+}>>, {
+    span: number;
+}>;

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

@@ -0,0 +1,31 @@
+import { defineComponent, createVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { assignUpdateValue } from '../../../../packages/form-render/src/utils';
+
+const script = defineComponent({
+  props: {
+    span: {
+      type: Number,
+      default: 6
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    function onChange(e) {
+      e.stopPropagation();
+    }
+    return () => {
+      return createVNode("section", {
+        "class": "form-render__complex"
+      }, [createVNode("section", {
+        "class": "form-render__complexContent",
+        "onChange": onChange
+      }, [slots.default && slots.default()])]);
+    };
+  }
+});
+const COMPLEX = connect(script, mapProps(assignUpdateValue));
+
+export { COMPLEX };