cnhis-design-vue 3.1.9 → 3.1.11-beta.1

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

@@ -0,0 +1,154 @@
+import { defineComponent, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString } from 'vue';
+import { createForm, onFieldValueChange } from '@formily/core';
+import { FormProvider, FormConsumer } from '@formily/vue';
+import { cloneDeep } from 'lodash-es';
+import { NForm, NTabs, NTabPane } from 'naive-ui';
+import { useFormContext } from './hooks/useFormContext.js';
+import { useInitialData } from './hooks/useInitialData.js';
+import { useAnchor } from './hooks/useAnchor.js';
+import { useFieldVisitor } from './hooks/useFieldVisitor.js';
+import { useFieldList2Schema } from './hooks/useFieldList2Schema.js';
+
+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: {
+      type: Object,
+      default: () => ({})
+    },
+    scope: { type: Object, default: () => ({}) },
+    consumer: { type: Boolean, default: false }
+  },
+  emits: [
+    "formChange"
+  ],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const {
+      SchemaField,
+      businessCollector,
+      formItemDepsCollector,
+      changeContextCollector
+    } = useFormContext(props);
+    const formModel = createForm({
+      initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
+      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 { traverse } = useFieldVisitor();
+    const { transform } = useFieldList2Schema(businessCollector);
+    const parsedSchema = 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: {} };
+    });
+    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;
+    }
+    function validate() {
+      return formModel.validate().catch((err) => {
+        return Promise.reject(Array.isArray(err) ? err.map(bindTitle) : err);
+      });
+    }
+    function getFormValues() {
+      return formModel.getFormState().values;
+    }
+    const setFieldState = formModel.setFieldState.bind(formModel);
+    expose({
+      validate,
+      getFormValues,
+      setFieldState
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NForm), null, {
+        default: withCtx(() => [
+          __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))
+              ]),
+              _: 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"])
+                ]),
+                __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
+      });
+    };
+  }
+});
+
+export { script as default };

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/{cascader.d.ts → renderer/cascader.d.ts}

@@ -1,10 +1,14 @@
-import { AnyObject } from 'cnhis-design-vue/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;
+    paramValue: string;
+};
 declare type UrlConfig = {
     method: FormRequestType;
     nameKey: string;
-    dependKey: string;
+    dependKey: ArrayAble<string> | ArrayAble<DependKeyObj>;
     url: string;
     valueKey: string;
 };

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

@@ -1,10 +1,10 @@
 import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
-import { InjectAsyncQueue } from '../constants/index.mjs';
-import { assignUpdateValue, formRenderLog } from '../utils/index.mjs';
-import { isObject } from '@vueuse/core';
+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.mjs';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const script = defineComponent({
   name: "FormCascader",
@@ -26,7 +26,6 @@ const script = defineComponent({
   emits: ["update:value"],
   setup(props, {
     slots,
-    attrs,
     emit
   }) {
     const _options = ref(null);
@@ -52,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,
@@ -77,7 +82,7 @@ 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();
       }
@@ -102,7 +107,7 @@ const script = defineComponent({
         return "";
       }
     });
-    function updateValue(v, _, options) {
+    function updateValue(_, __, options) {
       const payload = Array.isArray(options) ? options.map((option) => ({
         ...option,
         label: option[labelKey.value],

package/es/packages/form-render/src/components/{checkbox.d.ts → renderer/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/{checkbox.mjs → renderer/checkbox.js}

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

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, createVNode, createTextVNode, toRaw } from 'vue';
-import { assignUpdateValue, formRenderLog } from '../utils/index.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 '../FormRender.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",

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

@@ -1,6 +1,6 @@
 import { defineComponent, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
-import { assignUpdateValue } from 'cnhis-design-vue/es/packages/form-render/src/utils';
+import { assignUpdateValue } from '../../utils/index.js';
 
 const script = defineComponent({
   props: {

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/{input.mjs → renderer/input.js}

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

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

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../utils/index.mjs';
+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,4 +1,4 @@
-export declare const COLLAPSE: import("vue").DefineComponent<{
+export declare const LINEBAR: import("vue").DefineComponent<{
     show: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -1,6 +1,8 @@
-import { defineComponent, ref, onMounted, createVNode } from 'vue';
+import { defineComponent, ref, onMounted, inject, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
 import { NCollapseTransition } from 'naive-ui';
+import { useFormField } from '../../../../../packages/form-render';
+import { InjectionFormItemDepsCollector, FormItemLineBarDepKeyPrepend } from '../../constants/index.js';
 
 const script = defineComponent({
   name: "FormCollapse",
@@ -30,25 +32,32 @@ const script = defineComponent({
         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__collapse"
+        "class": "form-render__linebar",
+        "anchor-target": true
       }, [createVNode("header", {
-        "class": "form-render__collapseHeader",
+        "class": "form-render__linebarHeader",
         "onClick": toggleShow
       }, [props.title]), createVNode(NCollapseTransition, {
-        "class": "form-render__collapseItem",
-        "show": _show.value,
-        "appear": false
+        "class": "form-render__linebarItem",
+        "show": _show.value
       }, slots)]);
     };
   }
 });
-const COLLAPSE = connect(script, mapProps((props, field) => {
+const LINEBAR = connect(script, mapProps((props, field) => {
   return {
     ...props,
     title: field.title
   };
 }));
 
-export { COLLAPSE };
+export { LINEBAR };

package/es/packages/form-render/src/components/{radio.d.ts → renderer/radio.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 RADIO: import("vue").DefineComponent<{
     options: {

package/es/packages/form-render/src/components/{radio.mjs → renderer/radio.js}

@@ -1,7 +1,7 @@
 import { defineComponent, createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
 import { NRadioGroup, NSpace, NRadio } from 'naive-ui';
-import { assignUpdateValue } from '../utils/index.mjs';
+import { assignUpdateValue } from '../../utils/index.js';
 
 const script = defineComponent({
   props: {

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

@@ -1,13 +1,18 @@
-import { AnyObject } from 'cnhis-design-vue/es/src/types';
-import { FormRequestType } from '../types';
+import { AnyObject } from '../../../../../../es/src/types';
+import { FormRequestType } from '../../types';
 import { PropType } from 'vue';
 declare type UrlConfig = {
     method: FormRequestType;
+    dependKey?: string | string[];
     nameKey: string;
     url: string;
+    params?: AnyObject;
     valueKey: string;
 };
 export declare const SELECT: import("vue").DefineComponent<{
+    value: {
+        type: StringConstructor;
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -18,7 +23,10 @@ export declare const SELECT: import("vue").DefineComponent<{
     onChange: {
         type: FunctionConstructor;
     };
-}, () => 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<{
+}, () => 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: StringConstructor;
+    };
     options: {
         type: PropType<AnyObject[]>;
         default: () => never[];
@@ -29,7 +37,9 @@ export declare const SELECT: import("vue").DefineComponent<{
     onChange: {
         type: FunctionConstructor;
     };
-}>>, {
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
     options: AnyObject[];
 }>;
 export {};

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

@@ -0,0 +1,136 @@
+import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
+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 { connect, mapProps } from '@formily/vue';
+import { NSelect } from 'naive-ui';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const script = defineComponent({
+  name: "FormSelect",
+  props: {
+    value: {
+      type: String
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    urlConfig: {
+      type: Object
+    },
+    onChange: {
+      type: Function
+    }
+  },
+  emits: ["update:value"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const _options = ref(null);
+    let cachedOptions = null;
+    let lastSearch = ref("");
+    const asyncQueue = inject(InjectAsyncQueue);
+    const {
+      title,
+      field,
+      fieldKey
+    } = useFormField();
+    function filterOption(options, searchContent) {
+      return options.filter((option) => {
+        return !searchContent || String(option[labelKey.value]).includes(searchContent);
+      });
+    }
+    async function fetchData(content) {
+      if (content === lastSearch.value) {
+        if (cachedOptions)
+          return;
+      } else {
+        lastSearch.value = content || "";
+      }
+      const config = props.urlConfig;
+      if (!config) {
+        return cachedOptions = _options.value = null;
+      }
+      if (!isObject(config)) {
+        formRenderLog(`invalid urlConfig (${config}) in SELECT => ${title.value}`, "warn");
+        return cachedOptions = _options.value = null;
+      }
+      if (cachedOptions) {
+        return _options.value = filterOption(cachedOptions, content);
+      }
+      try {
+        const data = await asyncQueue.addAsync({
+          ...config,
+          key: title.value,
+          params: Object.assign({}, config.params, generateUrlParams(field.value, config.dependKey))
+        });
+        _options.value = data.reduce((res, d) => {
+          var _a;
+          if (((_a = d[labelKey.value]) == null ? void 0 : _a.includes(content)) || !content) {
+            res.push(d);
+          }
+          return res;
+        }, []);
+        cachedOptions = _options.value;
+      } catch (e) {
+        _options.value = null;
+      }
+    }
+    const renderOptions = computed(() => {
+      if (_options.value)
+        return _options.value;
+      if (!Array.isArray(props.options))
+        return [];
+      return filterOption(props.options, lastSearch.value);
+    });
+    const formItemDepsCollector = inject(InjectionFormItemDepsCollector);
+    watch(() => props.urlConfig, (config) => {
+      cachedOptions = null;
+      config && formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], () => {
+        cachedOptions = null;
+        props.value && fetchData();
+      });
+    }, {
+      immediate: true
+    });
+    watch(() => props.value, (n, o) => {
+      if (o == null && n != null) {
+        fetchData();
+      }
+    }, {
+      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";
+    });
+    return () => createVNode(NSelect, {
+      "value": props.value,
+      "onUpdate:value": update,
+      "remote": true,
+      "filterable": true,
+      "labelField": labelKey.value,
+      "valueField": valueKey.value,
+      "onSearch": fetchData,
+      "onUpdate:show": (show) => show && fetchData(),
+      "options": renderOptions.value
+    }, slots);
+  }
+});
+const SELECT = connect(script, mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { SELECT };

package/es/packages/form-render/src/components/{slider.mjs → renderer/slider.js}

@@ -1,6 +1,6 @@
 import { connect, mapProps } from '@formily/vue';
 import { NSlider } from 'naive-ui';
-import { assignUpdateValue } from 'cnhis-design-vue/es/packages/form-render/src/utils';
+import { assignUpdateValue } from '../../utils/index.js';
 
 const SLIDER = connect(NSlider, mapProps((props, field) => {
   const _props = assignUpdateValue(props, field);

package/es/packages/form-render/src/components/{switch.mjs → renderer/switch.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, createVNode, createTextVNode } from 'vue';
 import { NSwitch } from 'naive-ui';
-import { assignUpdateValue } from '../utils/index.mjs';
+import { assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 
 const script = defineComponent({