cnhis-design-vue 3.1.13-beta.1 → 3.1.13-beta.4

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

@@ -1,294 +1,9 @@
 export declare const FORM_ITEM: import("vue").DefineComponent<{
-    readonly label: StringConstructor;
-    readonly labelWidth: import("vue").PropType<string | number>;
-    readonly labelStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    readonly labelAlign: import("vue").PropType<import("naive-ui/es/form/src/interface").LabelAlign>;
-    readonly labelPlacement: import("vue").PropType<import("naive-ui/es/form/src/interface").LabelPlacement>;
-    readonly path: StringConstructor;
-    readonly first: BooleanConstructor;
-    readonly rulePath: StringConstructor;
-    readonly required: BooleanConstructor;
-    readonly showRequireMark: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
-    readonly showFeedback: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly rule: import("vue").PropType<import("naive-ui").FormItemRule | import("naive-ui").FormItemRule[]>;
-    readonly size: import("vue").PropType<"small" | "medium" | "large">;
-    readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"success" | "warning" | "error">;
-    readonly feedback: StringConstructor;
-    readonly showLabel: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
-    readonly theme: import("vue").PropType<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("naive-ui/es/_mixins/use-theme").ExtractThemeOverrides<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("naive-ui/es/_mixins/use-theme").ExtractThemeOverrides<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>>;
-}, {
-    cssVars: import("vue").ComputedRef<{
-        '--n-bezier': string;
-        '--n-line-height': string;
-        '--n-blank-height': string;
-        '--n-label-font-size': string;
-        '--n-label-text-align': string;
-        '--n-label-height': string;
-        '--n-label-padding': string;
-        '--n-asterisk-color': string;
-        '--n-label-text-color': string;
-        '--n-feedback-padding': string;
-        '--n-feedback-font-size': string;
-        '--n-feedback-height': string;
-        '--n-feedback-text-color': string;
-        '--n-feedback-text-color-warning': string;
-        '--n-feedback-text-color-error': string;
-    }> | undefined;
-    themeClass: import("vue").Ref<string>;
-    onRender: () => void;
-    validate: import("naive-ui/es/form/src/interface").FormItemValidate;
-    restoreValidation: () => void;
-    path?: string | undefined;
-    internalValidate: import("naive-ui/es/form/src/interface").FormItemInternalValidate;
-    mergedSize: import("vue").ComputedRef<import("naive-ui/es/form/src/interface").Size>;
-    validationErrored: import("vue").Ref<boolean>;
-    mergedLabelStyle: import("vue").ComputedRef<(import("vue").StyleValue | undefined)[]>;
-    mergedLabelPlacement: import("vue").ComputedRef<import("naive-ui/es/form/src/interface").LabelPlacement>;
-    mergedLabelAlign: import("vue").ComputedRef<import("naive-ui/es/form/src/interface").LabelAlign | undefined>;
-    mergedShowRequireMark: import("vue").ComputedRef<boolean | undefined>;
-    mergedRequireMarkPlacement: import("vue").ComputedRef<"left" | "right" | "right-hanging">;
-    mergedValidationStatus: import("vue").ComputedRef<"success" | "warning" | "error" | undefined>;
-    mergedShowFeedback: import("vue").ComputedRef<boolean>;
-    mergedShowLabel: import("vue").ComputedRef<boolean>;
-    labelElementRef: import("vue").Ref<HTMLLabelElement | null>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
-    mergedRequired: import("vue").ComputedRef<boolean>;
-    feedbackId: import("vue").Ref<string>;
-    renderExplains: import("vue").Ref<{
-        key: string;
-        render: () => import("vue").VNodeChild;
-    }[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly label: StringConstructor;
-    readonly labelWidth: import("vue").PropType<string | number>;
-    readonly labelStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    readonly labelAlign: import("vue").PropType<import("naive-ui/es/form/src/interface").LabelAlign>;
-    readonly labelPlacement: import("vue").PropType<import("naive-ui/es/form/src/interface").LabelPlacement>;
-    readonly path: StringConstructor;
-    readonly first: BooleanConstructor;
-    readonly rulePath: StringConstructor;
-    readonly required: BooleanConstructor;
-    readonly showRequireMark: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
-    readonly showFeedback: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly rule: import("vue").PropType<import("naive-ui").FormItemRule | import("naive-ui").FormItemRule[]>;
-    readonly size: import("vue").PropType<"small" | "medium" | "large">;
-    readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"success" | "warning" | "error">;
-    readonly feedback: StringConstructor;
-    readonly showLabel: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
-    readonly theme: import("vue").PropType<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("naive-ui/es/_mixins/use-theme").ExtractThemeOverrides<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("naive-ui/es/_mixins/use-theme").ExtractThemeOverrides<import("naive-ui/es/_mixins").Theme<"Form", {
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
-        lineHeight: string;
-        labelTextColor: string;
-        asteriskColor: string;
-        feedbackTextColorError: string;
-        feedbackTextColorWarning: string;
-        feedbackTextColor: string;
-        feedbackPadding: string;
-        feedbackHeightSmall: string;
-        feedbackHeightMedium: string;
-        feedbackHeightLarge: string;
-        feedbackFontSizeSmall: string;
-        feedbackFontSizeMedium: string;
-        feedbackFontSizeLarge: string;
-        labelFontSizeLeftSmall: string;
-        labelFontSizeLeftMedium: string;
-        labelFontSizeLeftLarge: string;
-        labelFontSizeTopSmall: string;
-        labelFontSizeTopMedium: string;
-        labelFontSizeTopLarge: string;
-        labelHeightSmall: string;
-        labelHeightMedium: string;
-        labelHeightLarge: string;
-        labelPaddingVertical: string;
-        labelPaddingHorizontal: string;
-        labelTextAlignVertical: string;
-        labelTextAlignHorizontal: string;
-    }, any>>>;
-}>>, {
-    readonly required: boolean;
-    readonly first: boolean;
-    readonly showRequireMark: boolean | undefined;
-    readonly showFeedback: boolean | undefined;
-    readonly showLabel: boolean | undefined;
-    readonly ignorePathChange: boolean;
-}>;
+    label: StringConstructor;
+    propertyKey: StringConstructor;
+    annotation: {};
+}, () => 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<{
+    label: StringConstructor;
+    propertyKey: StringConstructor;
+    annotation: {};
+}>>, {}>;

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

@@ -1,8 +1,141 @@
+import { defineComponent, inject, computed, ref, createVNode } from 'vue';
 import { isVoidField } from '@formily/core';
 import { connect, mapProps } from '@formily/vue';
-import { NFormItem } from 'naive-ui';
+import { FileTrayFull, FileTray } from '@vicons/ionicons5';
+import { isBoolean } from 'lodash-es';
+import { NFormItem, NPopover, NIcon, NInput } from 'naive-ui';
+import { InjectionAnnotation } from '../../../../../packages/form-render/src/constants';
 
-const FORM_ITEM = connect(NFormItem, mapProps({
+const script = defineComponent({
+  props: {
+    label: String,
+    propertyKey: String,
+    annotation: {}
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const annotation = inject(InjectionAnnotation);
+    const annotationContent = computed({
+      get() {
+        return annotation.value[props.propertyKey];
+      },
+      set(value) {
+        annotation.value = {
+          property: props.propertyKey,
+          value
+        };
+      }
+    });
+    function renderTextarea() {
+      return createVNode(NInput, {
+        "type": "textarea",
+        "value": annotationContent.value,
+        "onUpdate:value": ($event) => annotationContent.value = $event
+      }, null);
+    }
+    const __showPopper = ref(false);
+    const showPopper = computed({
+      get() {
+        return __showPopper.value;
+      },
+      async set(value) {
+        __showPopper.value = value;
+        if (!value && isEdit.value) {
+          await new Promise((resolve) => setTimeout(resolve, 200));
+          isEdit.value = false;
+        }
+      }
+    });
+    const isEdit = ref(false);
+    let clickTimer;
+    function iconClick() {
+      clearTimeout(clickTimer);
+      if (showPopper.value && isEdit.value) {
+        showPopper.value = false;
+        return;
+      }
+      clickTimer = setTimeout(() => {
+        if (!annotationContent.value) {
+          isEdit.value = showPopper.value = true;
+        }
+      }, 200);
+    }
+    function iconDbClick() {
+      clearTimeout(clickTimer);
+      if (!annotationContent.value)
+        return;
+      showPopper.value = true;
+      isEdit.value = true;
+    }
+    function iconMouseenter() {
+      if (!annotationContent.value)
+        return;
+      showPopper.value = true;
+    }
+    function iconMouseleave() {
+      if (!annotationContent.value || isEdit.value)
+        return;
+      showPopper.value = false;
+    }
+    function renderAnnotation() {
+      return createVNode("section", {
+        "class": ["form-render__formItemLabel--annotation", {
+          "is-active": !!annotationContent.value
+        }],
+        "style": {
+          "--icon-right": attrs.required ? "-30" : "-20"
+        },
+        "form-item-hover-show": !annotationContent.value && !isEdit.value
+      }, [createVNode(NPopover, {
+        "style": {
+          maxWidth: "200px",
+          wordBreak: "break-all"
+        },
+        "show": showPopper.value,
+        "onUpdate:show": ($event) => showPopper.value = $event,
+        "trigger": "manual",
+        "duration": 100
+      }, {
+        default: renderDefault,
+        trigger: renderTrigger
+      })]);
+      function renderText() {
+        return createVNode("span", null, [annotationContent.value]);
+      }
+      function renderDefault() {
+        return createVNode("div", null, [isEdit.value ? renderTextarea() : renderText()]);
+      }
+      function renderTrigger() {
+        return createVNode("div", {
+          "onMouseleave": iconMouseleave,
+          "onMouseenter": iconMouseenter,
+          "onDblclick": iconDbClick,
+          "onClick": iconClick
+        }, [createVNode(NIcon, {
+          "component": annotationContent.value ? FileTrayFull : FileTray
+        }, null)]);
+      }
+    }
+    const showAnnotation = computed(() => {
+      return annotation.value && (!isBoolean(props.annotation) || props.annotation);
+    });
+    const showLabel = computed(() => props.label && props.label !== " ");
+    function renderLabel() {
+      return showLabel.value ? createVNode("section", {
+        "class": "form-render__formItemLabel"
+      }, [createVNode("span", {
+        "class": "form-render__formItemLabel--text"
+      }, [props.label]), showAnnotation.value ? renderAnnotation() : null]) : null;
+    }
+    return () => createVNode(NFormItem, null, {
+      ...slots,
+      label: renderLabel
+    });
+  }
+});
+const FORM_ITEM = connect(script, mapProps({
   title: "label"
 }, (props, field) => {
   var _a;

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

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

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 || {}
         }

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/utils/index.d.ts

@@ -1,7 +1,7 @@
-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 { InjectionKey, VNode } from 'vue';
 import { AgeContext, 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];
@@ -17,3 +17,6 @@ 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;
+};

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';
@@ -95,5 +95,19 @@ 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;
+    }
+  };
+}
 
-export { arrayed, assignUpdateValue, formRenderLog, generateUrlParams, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, transformDateFormat, traverseSchema, uuidGenerator };
+export { arrayed, assignUpdateValue, createSlot, formRenderLog, generateUrlParams, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, transformDateFormat, traverseSchema, uuidGenerator };

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

@@ -12,6 +12,23 @@
 .form-render__formItem .n-date-picker {
   width: 100%;
 }
+.form-render__formItemLabel {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.form-render__formItemLabel--annotation {
+  position: absolute;
+  top: 0;
+  right: calc(var(--icon-right) * 1px);
+  cursor: pointer;
+  color: #0067ee;
+  font-size: 16px;
+  user-select: none;
+}
+.form-render__formItemLabel--annotation.is-active {
+  color: rgba(255, 152, 40);
+}
 .form-render__linebar {
   grid-column: span var(--column) / span var(--column);
 }
@@ -97,3 +114,9 @@
   display: flex !important;
   gap: 0 8px;
 }
+.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;
+}