cnhis-design-vue 3.1.13-beta.0 → 3.1.13-beta.11

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
+import { defineComponent, ref, inject, computed, watch, nextTick, createVNode } from 'vue';
 import { isField } from '@formily/core';
 import { cloneDeep } from 'lodash-es';
 import { InjectAsyncQueue, InjectionFormItemDepsCollector, InjectionChangeContextCollector } from '../../constants/index.js';
@@ -21,17 +21,17 @@ const script = defineComponent({
     urlConfig: {
       type: Object
     },
-    onChange: {
+    onFocus: {
       type: Function
-    }
+    },
+    onChange: {}
   },
   emits: ["update:value"],
   setup(props, {
     slots,
     emit
   }) {
-    const _options = ref(null);
-    let cachedOptions = null;
+    const remoteOptions = ref(null);
     const lastSearch = ref("");
     const asyncQueue = inject(InjectAsyncQueue);
     const {
@@ -45,54 +45,46 @@ const script = defineComponent({
       });
     }
     async function fetchData(content) {
-      if (content === lastSearch.value) {
-        if (cachedOptions)
-          return;
-      } else {
-        lastSearch.value = content || "";
-      }
+      lastSearch.value = content || "";
+      if (remoteOptions.value)
+        return;
       const config = props.urlConfig;
       if (!config) {
-        return cachedOptions = _options.value = null;
+        return remoteOptions.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);
+        return remoteOptions.value = null;
       }
       try {
-        const data = await asyncQueue.addAsync({
-          ...config,
-          key: title.value,
-          params: Object.assign({}, config.params, generateUrlParams(field.value, config.dependKey))
+        remoteOptions.value = await asyncQueue.addAsync({
+          ...createParams(config, field.value),
+          key: title.value
         });
-        _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;
+        remoteOptions.value = null;
+      }
+      function createParams(config2, field2) {
+        return {
+          ...config2,
+          params: Object.assign({}, config2.params, generateUrlParams(field2, config2.dependKey))
+        };
       }
     }
     const parsedOptions = computed(() => {
-      if (_options.value)
-        return _options.value;
+      if (remoteOptions.value)
+        return filterOption(remoteOptions.value, lastSearch.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();
+      remoteOptions.value = null;
+      config && formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
+        remoteOptions.value = null;
+        await nextTick();
+        props.value != null && await fetchData();
       });
     }, {
       immediate: true
@@ -121,10 +113,13 @@ const script = defineComponent({
       var _a, _b;
       return (_b = (_a = props.urlConfig) == null ? void 0 : _a.valueKey) != null ? _b : "value";
     });
-    function onFocus() {
-      if (isField(field.value)) {
-        field.value.visited = true;
-      }
+    function focusDecorator(onFocus) {
+      return (...args) => {
+        if (isField(field.value)) {
+          field.value.visited = true;
+        }
+        return onFocus == null ? void 0 : onFocus(...args);
+      };
     }
     return () => createVNode(NSelect, {
       "value": props.value,
@@ -135,7 +130,7 @@ const script = defineComponent({
       "valueField": valueKey.value,
       "onSearch": fetchData,
       "onUpdate:show": (show) => show && fetchData(),
-      "onFocus": onFocus,
+      "onFocus": focusDecorator(props.onFocus),
       "options": parsedOptions.value
     }, slots);
   }

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

@@ -1,7 +1,8 @@
 import { createVNode, mergeProps, isVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
-import { isObject, isFunction } from 'lodash-es';
+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);
@@ -12,20 +13,6 @@ function createPropFor(props) {
     return (_a = props.fieldItem) == null ? void 0 : _a[property];
   };
 }
-function createSlot(renderer, props) {
-  if (isObject(renderer)) {
-    const result = {};
-    Object.entries(renderer).forEach(([key, renderer2]) => {
-      isFunction(renderer2) && (result[key] = () => renderer2(props));
-    });
-    return result;
-  }
-  return {
-    default() {
-      return isFunction(renderer) ? renderer(props) : renderer;
-    }
-  };
-}
 const textScript = (props) => {
   var _a, _b, _c;
   const propFor = createPropFor(props);

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

@@ -1,13 +1,14 @@
 import { ContextCollector } from '../../../../../es/packages/form-render/src/hooks/useChangeContext';
 import { BusinessCollector, FormItemDepsCollector } from '../hooks';
 import { FormAsyncQueue } from '../types';
-import { Component, InjectionKey } from 'vue';
+import { Component, InjectionKey, WritableComputedRef } from 'vue';
 export declare const InjectAsyncQueue: InjectionKey<FormAsyncQueue>;
 export declare const InjectionSchemaField: InjectionKey<Component>;
 export declare const InjectionBusinessCollector: InjectionKey<BusinessCollector>;
 export declare const InjectionChangeContextCollector: InjectionKey<ContextCollector>;
 export declare const InjectionFormItemDepsCollector: InjectionKey<FormItemDepsCollector>;
 export declare const InjectionFormUUID: InjectionKey<string>;
+export declare const InjectionAnnotation: InjectionKey<WritableComputedRef<Record<string, string>>>;
 export declare const FormItemLineBarDepKeyPrepend = "__dep_LINEBAR_";
 export declare enum FIELD_BUSINESS_TYPE {
     PASSWORD = "password",

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

@@ -4,6 +4,7 @@ const InjectionBusinessCollector = Symbol("InjectionBusinessCollector");
 const InjectionChangeContextCollector = Symbol("InjectionChangeContextCollector");
 const InjectionFormItemDepsCollector = Symbol("InjectionFormItemDepsCollector");
 const InjectionFormUUID = Symbol("InjectionFormUUID");
+const InjectionAnnotation = Symbol("InjectionAnnotation");
 const FormItemLineBarDepKeyPrepend = "__dep_LINEBAR_";
 var FIELD_BUSINESS_TYPE = /* @__PURE__ */ ((FIELD_BUSINESS_TYPE2) => {
   FIELD_BUSINESS_TYPE2["PASSWORD"] = "password";
@@ -37,4 +38,4 @@ var FIELD_AGE_UNIT = /* @__PURE__ */ ((FIELD_AGE_UNIT2) => {
   return FIELD_AGE_UNIT2;
 })(FIELD_AGE_UNIT || {});
 
-export { FIELD_AGE_UNIT, FIELD_BUSINESS_TYPE, FIELD_SEX_VALUE, FormItemLineBarDepKeyPrepend, InjectAsyncQueue, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionSchemaField };
+export { FIELD_AGE_UNIT, FIELD_BUSINESS_TYPE, FIELD_SEX_VALUE, FormItemLineBarDepKeyPrepend, InjectAsyncQueue, InjectionAnnotation, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionSchemaField };

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

@@ -13,7 +13,7 @@ function useFieldListAdaptor(collector, uuid) {
       "x-component": item.html_type,
       "x-component-props": {
         placeholder: item.placeholder,
-        clearable: item.is_empty === "1",
+        clearable: item.is_empty === "0",
         ...item.componentProps || {}
       },
       "x-display": item.is_show === "0" ? "hidden" : "visible",
@@ -28,6 +28,8 @@ function useFieldListAdaptor(collector, uuid) {
         "x-decorator-props": {
           span: item.elem_width,
           showLabel: item.hide_title !== "1",
+          propertyKey: item.val_key,
+          annotation: item.annotation,
           id: `${uuid}-${item.val_key}`,
           ...item.decoratorProps || {}
         }
@@ -113,7 +115,7 @@ function useFieldListAdaptor(collector, uuid) {
   const createSliderSchema = (item) => {
     const schema = createStandardSchema(item);
     Object.assign(schema["x-component-props"], {
-      step: +item.step_length,
+      step: Number(item.step_length),
       max: +item.max_length,
       min: +item.min_length,
       option: item.option

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

@@ -1,5 +1,6 @@
+import { ShallowReactive } from 'vue';
 import { AnyObject } from '../../../../../es/src/types';
-export declare function useFormContext(props: AnyObject): {
+export declare function useFormContext(props: ShallowReactive<AnyObject>): {
     asyncQueue: import("../../../../../es/packages/form-render").FormAsyncQueue;
     SchemaField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     businessCollector: import("../../../../../es/packages/form-render").BusinessCollector;

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

@@ -1,10 +1,11 @@
-import { provide } from 'vue';
+import { isObject } from 'lodash-es';
+import { provide, computed, readonly } from 'vue';
 import { createSchemaField } from '@formily/vue';
 import { useAsyncQueue, useBusinessBinding, useChangeContext, useFormItemDeps } from '../../../../packages/form-render';
 import * as components from '../../../../packages/form-render/src/components/renderer';
 import { usePresetScope } from '../../../../packages/form-render/src/hooks/usePresetScope';
 import { injectOrProvide, uuidGenerator } from '../../../../packages/form-render/src/utils';
-import { InjectAsyncQueue, InjectionSchemaField, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID } from '../../../../packages/form-render/src/constants';
+import { InjectAsyncQueue, InjectionSchemaField, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionAnnotation } from '../../../../packages/form-render/src/constants';
 
 function useFormContext(props) {
   const asyncQueue = injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism));
@@ -23,6 +24,16 @@ function useFormContext(props) {
   provide(InjectionFormItemDepsCollector, formItemDepsCollector);
   const formUUID = props.uuid || uuidGenerator();
   provide(InjectionFormUUID, formUUID);
+  provide(InjectionAnnotation, computed({
+    get() {
+      return props.annotation ? readonly(props.annotation) : null;
+    },
+    set(payload) {
+      if (!isObject(props.annotation))
+        return;
+      props.annotation[payload.property] = payload.value;
+    }
+  }));
   return {
     asyncQueue,
     SchemaField,

package/es/packages/form-render/src/types/fieldItem.d.ts

@@ -1,4 +1,5 @@
-import { AnyObject } from '../../../../../es/src/types';
+import { AnyObject, ArrayAble } from '../../../../../es/src/types';
+import { CSSProperties, VNode } from 'vue';
 export declare type ValidateItem = Partial<{
     obj_type: string;
     vali_obj: string;
@@ -20,12 +21,28 @@ export interface Ievent {
     event_field: string;
     event_type: string;
 }
+interface FormRendererPayload {
+    clearable: boolean;
+    disabled: boolean;
+    fieldItem: FieldItem;
+    readOnly: boolean;
+    value: unknown;
+}
+export interface FormRenderer {
+    (payload: FormRendererPayload): ArrayAble<VNode> | any;
+}
+interface SwitchProperty {
+    value?: any;
+    describe?: string;
+}
 export declare type FieldItem = {
     val_key: string;
-    elem_width: number;
     html_type: string;
 } & Partial<{
+    annotation: boolean;
+    val_key_unit: string;
     is_edit: string;
+    elem_width: number;
     is_show: string | number;
     is_null: string;
     name: string;
@@ -35,13 +52,47 @@ export declare type FieldItem = {
     group: string;
     hide_title: string;
     placeholder: string;
-    validate?: ValidateItem;
-    option?: OptionItem[];
-    wordbook?: AnyObject;
-    suFieldList?: any[];
-    bindEventSetting?: Ievent[];
+    validate: ValidateItem;
+    option: OptionItem[];
+    wordbook: AnyObject;
+    suFieldList: any[];
+    bindEventSetting: Ievent[];
+    open: SwitchProperty;
+    close: SwitchProperty;
+    date_format: string;
+    step_length: string | number;
+    urlConfig: Partial<{
+        url: string;
+        method: 'post' | 'get' | 'put' | 'patch' | 'delete';
+        dependKey: string | string[];
+        params: AnyObject;
+        nameKey: string;
+        valueKey: string;
+    }>;
     fieldType: 'string' | 'object' | 'array' | 'number' | 'void' | 'boolean' | 'datetime';
+    content: string | FormRenderer | Record<string, FormRenderer>;
     properties: FieldItem[];
+    children: FieldItem[];
+    componentProps: AnyObject;
+    decoratorProps: AnyObject;
+    display: 'grid' | 'flex';
+    wrapperStyle: CSSProperties | Record<string, string>;
+    validator: (value: any, fieldItem: FieldItem) => void | string;
+    reactions: {
+        target?: string;
+        dependencies?: string[];
+        fulfill: {
+            state?: Partial<{
+                value: string;
+                disabled: string;
+                display: string;
+                componentProps: AnyObject;
+                decoratorProps: AnyObject;
+                selfErrors: string;
+                [key: string]: string | AnyObject;
+            }>;
+        };
+    };
     [key: string]: any;
 }>;
 export {};

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

@@ -26,6 +26,11 @@ export declare type FormRenderExpose = {
     getFormValues(): AnyObject;
     setFieldState(path: string, setter: (field: Field) => void): void;
     resetFields(path?: string): void;
+    queryWidget(key: string): Promise<{
+        widgetElement: HTMLInputElement | null;
+        widgetElementList: HTMLInputElement[];
+        decoratorElement: HTMLElement | null;
+    }>;
 };
 export declare type FormChangeContext = Partial<{
     currentOption: AnyObject;

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

@@ -1,14 +1,14 @@
-import { AnyObject } from '../../../../../es/src/types';
+import { AnyObject, ArrayAble } from '../../../../../es/src/types';
 import { ISchema } from '@formily/json-schema/esm/types';
 import { GeneralField } from '@formily/core';
-import { InjectionKey } from 'vue';
-import { AgeContext, IdCardParseInfo } from '../types';
+import { InjectionKey, VNode } from 'vue';
+import { AgeContext, FieldItem, IdCardParseInfo } from '../types';
 export declare function formRenderLog(message: string, type?: keyof Console): void;
 export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T];
 export declare function assignUpdateValue(props: AnyObject, field: GeneralField): {
     [x: string]: any;
 };
-export declare function transformDateFormat(format: string): "date" | "datetime";
+export declare function transformDateFormat(format?: string): "date" | "datetime";
 export declare function isIdCard(idCardNo: string): boolean;
 export declare function isMobile(mobile: string): boolean;
 export declare function parseBirthday(birthday: string): AgeContext;
@@ -17,3 +17,12 @@ export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () =>
 export declare function generateUrlParams(field: GeneralField, dependKeys?: string | string[]): AnyObject;
 export declare function traverseSchema(schema: ISchema, handler: (_s: ISchema) => void): void;
 export declare function uuidGenerator(): string;
+export declare function createSlot(renderer: unknown, props: any): Record<string, () => ArrayAble<VNode>> | {
+    default(): any;
+};
+export declare function queryDecorator(key: string, wrapperElement: HTMLElement, formUUID: string): HTMLElement | null;
+export declare function queryInput(decoratorElement?: HTMLElement | null): {
+    widgetElement: HTMLInputElement | null | undefined;
+    widgetElementList: HTMLInputElement[];
+};
+export declare function getParentLinebar(key: string, fieldList: FieldItem[]): string | null;

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

@@ -1,4 +1,4 @@
-import { isObject } from 'lodash-es';
+import { isObject, isFunction } from 'lodash-es';
 import { FIELD_SEX_VALUE } from '../constants/index.js';
 import { isField } from '@formily/core';
 import differenceInDays from '../../../../node_modules/date-fns/esm/differenceInDays/index.js';
@@ -26,7 +26,7 @@ function assignUpdateValue(props, field) {
   }
   return _props;
 }
-function transformDateFormat(format) {
+function transformDateFormat(format = "") {
   return format.includes("HH") ? "datetime" : "date";
 }
 function isIdCard(idCardNo) {
@@ -95,5 +95,46 @@ function uuidGenerator() {
     return v.toString(16);
   });
 }
+function createSlot(renderer, props) {
+  if (isObject(renderer) && !isFunction(renderer)) {
+    const result = {};
+    Object.entries(renderer).forEach(([key, renderer2]) => {
+      isFunction(renderer2) && (result[key] = () => renderer2(props));
+    });
+    return result;
+  }
+  return {
+    default() {
+      return isFunction(renderer) ? renderer(props) : renderer;
+    }
+  };
+}
+function queryDecorator(key, wrapperElement, formUUID) {
+  return wrapperElement.querySelector(`#${formUUID}-${key}`);
+}
+function queryInput(decoratorElement) {
+  var _a;
+  return {
+    widgetElement: decoratorElement == null ? void 0 : decoratorElement.querySelector("input"),
+    widgetElementList: Array.from((_a = decoratorElement == null ? void 0 : decoratorElement.querySelectorAll("input")) != null ? _a : [])
+  };
+}
+function getParentLinebar(key, fieldList) {
+  let result = null;
+  for (const fieldItem of fieldList) {
+    if (fieldItem.val_key === key) {
+      if (isLinebar(fieldItem))
+        result = null;
+      break;
+    }
+    if (isLinebar(fieldItem)) {
+      result = fieldItem.val_key;
+    }
+  }
+  return result;
+  function isLinebar(field) {
+    return field.html_type === "LINEBAR";
+  }
+}
 
-export { arrayed, assignUpdateValue, formRenderLog, generateUrlParams, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, transformDateFormat, traverseSchema, uuidGenerator };
+export { arrayed, assignUpdateValue, createSlot, formRenderLog, generateUrlParams, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseSchema, uuidGenerator };

package/es/packages/form-render/style/index.css

@@ -1,7 +1,7 @@
 .form-render__wrapper {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  gap: 0 16px;
   max-height: var(--form-height);
   overflow-y: auto;
   position: relative;
@@ -12,23 +12,52 @@
 .form-render__formItem .n-date-picker {
   width: 100%;
 }
+.form-render__formItemLabel {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.form-render__formItemLabel--text.has-annotation {
+  margin-right: 15px;
+}
+.form-render__formItemLabel--icon {
+  display: inline-flex;
+  align-items: center;
+}
+.form-render__formItemLabel--annotation {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: calc(var(--icon-right) * 1px);
+  cursor: pointer;
+  color: #0067ee;
+  font-size: 16px;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+}
+.form-render__formItemLabel--annotation.is-active {
+  color: rgba(255, 152, 40);
+}
 .form-render__linebar {
   grid-column: span var(--column) / span var(--column);
 }
 .form-render__linebarHeader {
   cursor: pointer;
   display: flex;
-  background: #fafafa;
-  height: 36px;
+  background: #f2f2f2;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
   align-items: center;
   padding: 0 16px;
   margin-bottom: 8px;
-  border: 1px solid #d9d9d9;
+  border-radius: 4px;
 }
 .form-render__linebarItem {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  gap: 0 16px;
 }
 .form-render__inputGroup {
   grid-column: span var(--column) / span var(--column);
@@ -91,9 +120,18 @@
 .form-render__complexContent--grid {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  gap: 0 16px;
 }
 .form-render__complexContent--flex {
   display: flex !important;
   gap: 0 8px;
 }
+.form-render .n-form-item-label {
+  display: inline-flex;
+}
+.form-render .n-form-item-label [form-item-hover-show='true'] {
+  visibility: hidden;
+}
+.form-render .n-form-item-label:hover [form-item-hover-show='true'] {
+  visibility: visible;
+}

package/es/packages/form-table/src/hooks/useNuiThemeOverrides.d.ts

@@ -0,0 +1,4 @@
+import { GlobalThemeOverrides } from 'naive-ui';
+export declare function useNuiThemeOverrides(): {
+    nuiThemeOverrides: GlobalThemeOverrides;
+};

package/es/packages/form-table/src/hooks/useNuiThemeOverrides.js

@@ -0,0 +1,18 @@
+function useNuiThemeOverrides() {
+  const nuiThemeOverrides = {
+    Input: { paddingMedium: "8px", paddingSmall: "8px", paddingLarge: "8px", paddingTiny: "8px" },
+    InternalSelection: { paddingSingle: "8px", paddingMultiple: "8px" },
+    Form: {
+      feedbackHeightMedium: "16px",
+      feedbackHeightLarge: "16px",
+      feedbackHeightSmall: "16px",
+      feedbackFontSizeLarge: "12px",
+      feedbackFontSizeMedium: "12px",
+      feedbackFontSizeSmall: "12px",
+      feedbackPadding: "0px"
+    }
+  };
+  return { nuiThemeOverrides };
+}
+
+export { useNuiThemeOverrides };