cnhis-design-vue 3.1.9-beta.2 → 3.1.9-beta.3

package/es/packages/field-set/style/index.less

@@ -1,157 +1,157 @@
-.c-field-set {
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-  
-  .fields-set-content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    .fields-table {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-    }
-  }
-  
-  height: 100%;
-  position: relative;
-  .n-spin-container {
-    width: 100%;
-    height: 100%;
-  }
-  .n-spin-content {
-    height: 100%;
-  }
-  .setting-title {
-    background: #f2f2f4;
-    border: 1px solid #f2f2f2;
-    height: 52px;
-    line-height: 52px;
-    span {
-      display: inline-block;
-    }
-    &.seting-title-api {
-      .width-large {
-        width: 15%;
-      }
-    }
-  }
-  .set-show {
-    min-height: 100px;
-    overflow-y: auto;
-    &.set-show-api {
-      .width-large {
-        width: 15%;
-      }
-    }
-
-    .left-style.sortable-chosen {
-      background: #fafafa;
-      box-shadow: 0px 0px 10px 0px #d5d5d5;
-    }
-
-    li {
-      padding: 5px 0;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid #e8e8e8;
-      height: 52px;
-      line-height: 52px;
-    }
-    .alias-style {
-      outline: none;
-      border-radius: 4px 4px 4px 4px;
-      border: solid 1px #d5d5d5;
-      height: 32px;
-      text-indent: 16px;
-      color: #38454f;
-      width: 100%;
-    }
-    .is-sort-style {
-      outline: none;
-      border-radius: 4px 4px 4px 4px;
-      border: solid 1px #d5d5d5;
-      height: 32px;
-      text-indent: 6px;
-      color: #38454f;
-      width: 87px;
-      margin-right: 5px;
-      &:disabled {
-        cursor: not-allowed;
-        background: #f5f5f5;
-      }
-    }
-    .col-width-style {
-      width: 70px;
-    }
-    .title-item {
-      display: inline-flex;
-      justify-content: flex-start;
-      align-items: center;
-      text-align: left;
-      > span {
-        display: inline-block;
-        max-width: calc(100% - 20px);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  .alias-style {
-    outline: none;
-    border-radius: 4px 4px 4px 4px;
-    border: solid 1px rgba(212, 222, 229, 1);
-    height: 32px;
-    text-indent: 16px;
-    color: #38454f;
-  }
-  .btn-operate {
-    border-top: 1px solid #d5d5d5;
-    padding: 12px 0 12px;
-  }
-
-  .width-show {
-    display: inline-block;
-    width: 10%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .drag-icon-wrap {
-    width: 5% !important;
-    cursor: pointer;
-    text-align: center;
-  }
-  .width-showed {
-    display: inline-block;
-    width: 15%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    select {
-      width: 90% !important;
-    }
-  }
-  .width-word {
-    display: inline-block;
-    width: 20%;
-    line-height: 52px;
-    overflow: hidden;
-    white-space: nowrap;
-    input {
-      width: 90% !important;
-    }
-  }
-  .width-large {
-    display: inline-block;
-    width: 20%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
+.c-field-set {
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .fields-set-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .fields-table {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+    }
+  }
+  
+  height: 100%;
+  position: relative;
+  .n-spin-container {
+    width: 100%;
+    height: 100%;
+  }
+  .n-spin-content {
+    height: 100%;
+  }
+  .setting-title {
+    background: #f2f2f4;
+    border: 1px solid #f2f2f2;
+    height: 52px;
+    line-height: 52px;
+    span {
+      display: inline-block;
+    }
+    &.seting-title-api {
+      .width-large {
+        width: 15%;
+      }
+    }
+  }
+  .set-show {
+    min-height: 100px;
+    overflow-y: auto;
+    &.set-show-api {
+      .width-large {
+        width: 15%;
+      }
+    }
+
+    .left-style.sortable-chosen {
+      background: #fafafa;
+      box-shadow: 0px 0px 10px 0px #d5d5d5;
+    }
+
+    li {
+      padding: 5px 0;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #e8e8e8;
+      height: 52px;
+      line-height: 52px;
+    }
+    .alias-style {
+      outline: none;
+      border-radius: 4px 4px 4px 4px;
+      border: solid 1px #d5d5d5;
+      height: 32px;
+      text-indent: 16px;
+      color: #38454f;
+      width: 100%;
+    }
+    .is-sort-style {
+      outline: none;
+      border-radius: 4px 4px 4px 4px;
+      border: solid 1px #d5d5d5;
+      height: 32px;
+      text-indent: 6px;
+      color: #38454f;
+      width: 87px;
+      margin-right: 5px;
+      &:disabled {
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+    .col-width-style {
+      width: 70px;
+    }
+    .title-item {
+      display: inline-flex;
+      justify-content: flex-start;
+      align-items: center;
+      text-align: left;
+      > span {
+        display: inline-block;
+        max-width: calc(100% - 20px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .alias-style {
+    outline: none;
+    border-radius: 4px 4px 4px 4px;
+    border: solid 1px rgba(212, 222, 229, 1);
+    height: 32px;
+    text-indent: 16px;
+    color: #38454f;
+  }
+  .btn-operate {
+    border-top: 1px solid #d5d5d5;
+    padding: 12px 0 12px;
+  }
+
+  .width-show {
+    display: inline-block;
+    width: 10%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .drag-icon-wrap {
+    width: 5% !important;
+    cursor: pointer;
+    text-align: center;
+  }
+  .width-showed {
+    display: inline-block;
+    width: 15%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    select {
+      width: 90% !important;
+    }
+  }
+  .width-word {
+    display: inline-block;
+    width: 20%;
+    line-height: 52px;
+    overflow: hidden;
+    white-space: nowrap;
+    input {
+      width: 90% !important;
+    }
+  }
+  .width-large {
+    display: inline-block;
+    width: 20%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

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

@@ -186,10 +186,9 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         onFormChange?: ((...args: any[]) => any) | undefined;
     }>>;
     emit: (event: "formChange", ...args: any[]) => void;
-    create: () => import("./src/hooks").BusinessCollector;
-    trigger: (collector: import("./src/hooks").BusinessCollector, formModel: import("@formily/core").Form<any>, fieldName: string, value: unknown) => void;
     businessCollector: import("./src/hooks").BusinessCollector;
     changeContextCollector: import("./src/hooks").ContextCollector;
+    formItemDepsCollector: import("./src/hooks").FormItemDepsCollector;
     formModel: import("@formily/core").Form<{
         [x: string]: any;
     }>;

package/es/packages/form-render/index.mjs

@@ -12,7 +12,7 @@ export { useTypeNormalize } from './src/hooks/useTypeNormalize.mjs';
 export { useFormValidator } from './src/hooks/useFormValidator.mjs';
 export { BusinessCollector, useBusinessBinding } from './src/hooks/useBusinessBinding.mjs';
 export { ContextCollector, useChangeContext } from './src/hooks/useChangeContext.mjs';
-export { useUrlDeps } from './src/hooks/useUrlDeps.mjs';
+export { FormItemDepsCollector, useFormItemDeps } from './src/hooks/useFormItemDeps.mjs';
 
 const FormRender = script;
 FormRender.install = function(app) {

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

@@ -186,10 +186,9 @@ declare const _default: import("vue").DefineComponent<{
         onFormChange?: ((...args: any[]) => any) | undefined;
     }>>;
     emit: (event: "formChange", ...args: any[]) => void;
-    create: () => import("./hooks").BusinessCollector;
-    trigger: (collector: import("./hooks").BusinessCollector, formModel: import("@formily/core").Form<any>, fieldName: string, value: unknown) => void;
     businessCollector: import("./hooks").BusinessCollector;
     changeContextCollector: import("./hooks").ContextCollector;
+    formItemDepsCollector: import("./hooks").FormItemDepsCollector;
     formModel: import("@formily/core").Form<{
         [x: string]: any;
     }>;

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

@@ -1,13 +1,14 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, renderSlot, createBlock, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, provide, computed, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, renderSlot, createBlock, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
 import { injectOrProvide } from './utils/index.mjs';
 import { cloneDeep } from 'lodash-es';
-import { InjectionBusinessCollector, InjectAsyncQueue, InjectionChangeContextCollector, InjectionSchemaField } from './constants/index.mjs';
+import { InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectAsyncQueue, InjectionSchemaField } from './constants/index.mjs';
 import * as index from './components/index.mjs';
 import { createForm, onFieldValueChange } from '@formily/core';
 import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue';
 import { useBusinessBinding } from './hooks/useBusinessBinding.mjs';
 import { useAsyncQueue } from './hooks/useAsyncQueue.mjs';
 import { useChangeContext } from './hooks/useChangeContext.mjs';
+import { useFormItemDeps } from './hooks/useFormItemDeps.mjs';
 import { useFieldVisitor } from './hooks/useFieldVisitor.mjs';
 import { useFieldList2Schema } from './hooks/useFieldList2Schema.mjs';
 
@@ -33,10 +34,13 @@ var script = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { expose, emit }) {
     const props = __props;
-    const { create, trigger } = useBusinessBinding();
-    const businessCollector = injectOrProvide(InjectionBusinessCollector, create);
     injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism));
-    const changeContextCollector = injectOrProvide(InjectionChangeContextCollector, useChangeContext().create);
+    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() {
@@ -49,7 +53,8 @@ var script = /* @__PURE__ */ defineComponent({
             value: field.value,
             context: changeContextCollector.getContext(fieldKey)
           });
-          trigger(businessCollector, formModel, fieldKey, field.value);
+          businessCollector.trigger(formModel, fieldKey, field.value);
+          formItemDepsCollector.trigger(fieldKey);
         });
       }
     });

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

@@ -1,10 +1,14 @@
-import { AnyObject } from 'cnhis-design-vue/es/src/types';
+import { AnyObject, ArrayAble } from 'cnhis-design-vue/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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
+import { isObject, isString } from 'lodash-es';
 import { InjectAsyncQueue } from '../constants/index.mjs';
-import { assignUpdateValue, formRenderLog } from '../utils/index.mjs';
-import { isObject } from '@vueuse/core';
+import { assignUpdateValue, formRenderLog, arrayed } from '../utils/index.mjs';
 import { connect, mapProps } from '@formily/vue';
 import { NCascader } from 'naive-ui';
 import { useFormField } from '../hooks/useFormField.mjs';
@@ -52,11 +52,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,

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

@@ -3,8 +3,10 @@ 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<{

package/es/packages/form-render/src/components/select.mjs

@@ -1,9 +1,9 @@
 import { defineComponent, ref, inject, computed, watch, createVNode } from 'vue';
 import { cloneDeep } from 'lodash-es';
-import { InjectAsyncQueue, InjectionChangeContextCollector } from '../constants/index.mjs';
-import { assignUpdateValue, formRenderLog } from '../utils/index.mjs';
+import { InjectAsyncQueue, InjectionFormItemDepsCollector, InjectionChangeContextCollector } from '../constants/index.mjs';
+import { assignUpdateValue, formRenderLog, generateUrlParams } from '../utils/index.mjs';
 import { isObject } from '@vueuse/core';
-import { useField, connect, mapProps } from '@formily/vue';
+import { connect, mapProps } from '@formily/vue';
 import { NSelect } from 'naive-ui';
 import { useFormField } from '../hooks/useFormField.mjs';
 
@@ -35,7 +35,9 @@ const script = defineComponent({
     let lastSearch;
     const asyncQueue = inject(InjectAsyncQueue);
     const {
-      title
+      title,
+      field,
+      fieldKey
     } = useFormField();
     async function fetchData(content) {
       if (content === lastSearch && cachedOptions)
@@ -58,7 +60,8 @@ const script = defineComponent({
       try {
         const data = await asyncQueue.addAsync({
           ...config,
-          key: title.value
+          key: title.value,
+          params: Object.assign({}, config.params, generateUrlParams(field.value, config.dependKey))
         });
         _options.value = data.reduce((res, d) => {
           var _a;
@@ -75,8 +78,15 @@ const script = defineComponent({
     const renderOptions = computed(() => {
       return _options.value || props.options || [];
     });
-    watch(() => props.urlConfig, () => {
+    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(() => attrs.value, (n, o) => {
       if (o == null && n != null) {
@@ -85,10 +95,6 @@ const script = defineComponent({
     }, {
       immediate: true
     });
-    const field = useField();
-    const fieldKey = computed(() => {
-      return field.value.props.name.toString();
-    });
     const changeContextCollector = inject(InjectionChangeContextCollector);
     function update(v, option) {
       changeContextCollector == null ? void 0 : changeContextCollector.setContext(fieldKey.value, "currentOption", cloneDeep(option));

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

@@ -1,11 +1,12 @@
 import { ContextCollector } from 'cnhis-design-vue/es/packages/form-render/src/hooks/useChangeContext';
-import { BusinessCollector } from '../hooks';
+import { BusinessCollector, FormItemDepsCollector } from '../hooks';
 import { FormAsyncQueue } from '../types';
 import { Component, InjectionKey } 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 enum FIELD_BUSINESS_TYPE {
     PASSWORD = "password",
     ID_CARD = "id_card",

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

@@ -2,6 +2,7 @@ const InjectAsyncQueue = Symbol("InjectAsyncQueue");
 const InjectionSchemaField = Symbol("InjectionSchemaField");
 const InjectionBusinessCollector = Symbol("InjectionBusinessCollector");
 const InjectionChangeContextCollector = Symbol("InjectionChangeContextCollector");
+const InjectionFormItemDepsCollector = Symbol("InjectionFormItemDepsCollector");
 var FIELD_BUSINESS_TYPE = /* @__PURE__ */ ((FIELD_BUSINESS_TYPE2) => {
   FIELD_BUSINESS_TYPE2["PASSWORD"] = "password";
   FIELD_BUSINESS_TYPE2["ID_CARD"] = "id_card";
@@ -24,4 +25,4 @@ var FIELD_SEX_VALUE = /* @__PURE__ */ ((FIELD_SEX_VALUE2) => {
   return FIELD_SEX_VALUE2;
 })(FIELD_SEX_VALUE || {});
 
-export { FIELD_BUSINESS_TYPE, FIELD_SEX_VALUE, InjectAsyncQueue, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionSchemaField };
+export { FIELD_BUSINESS_TYPE, FIELD_SEX_VALUE, InjectAsyncQueue, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionSchemaField };

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

@@ -8,4 +8,4 @@ export * from './useTypeNormalize';
 export * from './useFormValidator';
 export * from './useBusinessBinding';
 export * from './useChangeContext';
-export * from './useUrlDeps';
+export * from './useFormItemDeps';

package/es/packages/form-render/src/hooks/index.mjs

@@ -8,4 +8,4 @@ export { useTypeNormalize } from './useTypeNormalize.mjs';
 export { useFormValidator } from './useFormValidator.mjs';
 export { BusinessCollector, useBusinessBinding } from './useBusinessBinding.mjs';
 export { ContextCollector, useChangeContext } from './useChangeContext.mjs';
-export { useUrlDeps } from './useUrlDeps.mjs';
+export { FormItemDepsCollector, useFormItemDeps } from './useFormItemDeps.mjs';

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

@@ -6,8 +6,10 @@ export declare class BusinessCollector {
     collect(type: FIELD_BUSINESS_TYPE, fieldName: string): void;
     getField(type: FIELD_BUSINESS_TYPE): string[];
     getType(fieldName: string): FIELD_BUSINESS_TYPE | undefined;
+    handlerIdCardType(formModel: Form, value: unknown): void;
+    handlerMap: Map<FIELD_BUSINESS_TYPE, (formModel: Form, value: unknown) => void>;
+    trigger(formModel: Form, fieldName: string, value: unknown): void;
 }
 export declare function useBusinessBinding(): {
     create: () => BusinessCollector;
-    trigger: (collector: BusinessCollector, formModel: Form, fieldName: string, value: unknown) => void;
 };

package/es/packages/form-render/src/hooks/useBusinessBinding.mjs

@@ -6,6 +6,7 @@ class BusinessCollector {
   constructor() {
     this.typeCollector = /* @__PURE__ */ new Map();
     this.fieldNameCollector = /* @__PURE__ */ new Map();
+    this.handlerMap = /* @__PURE__ */ new Map([[FIELD_BUSINESS_TYPE.ID_CARD, this.handlerIdCardType.bind(this)]]);
   }
   collect(type, fieldName) {
     const set = this.typeCollector.get(type) || /* @__PURE__ */ new Set();
@@ -19,42 +20,41 @@ class BusinessCollector {
   getType(fieldName) {
     return this.fieldNameCollector.get(fieldName);
   }
-}
-function useBusinessBinding() {
-  function create() {
-    return new BusinessCollector();
-  }
-  function handlerIdCardType(formModel, collector, value) {
+  handlerIdCardType(formModel, value) {
     if (!value || !isString(value) || !isIdCard(value))
       return;
     const info = parseIdCard(value);
-    const ageFields = collector.getField(FIELD_BUSINESS_TYPE.AGE);
+    const ageFields = this.getField(FIELD_BUSINESS_TYPE.AGE);
     ageFields.forEach((field) => {
       formModel.setFieldState(field, (state) => {
         state.value = info.age;
       });
     });
-    const sexFields = collector.getField(FIELD_BUSINESS_TYPE.SEX);
+    const sexFields = this.getField(FIELD_BUSINESS_TYPE.SEX);
     sexFields.forEach((field) => {
       formModel.setFieldState(field, (state) => {
         state.value = info.sex;
       });
     });
-    const birthdayFields = collector.getField(FIELD_BUSINESS_TYPE.BIRTHDAY);
+    const birthdayFields = this.getField(FIELD_BUSINESS_TYPE.BIRTHDAY);
     birthdayFields.forEach((field) => {
       formModel.setFieldState(field, (state) => {
         state.value = info.birthday;
       });
     });
   }
-  const handlerMap = /* @__PURE__ */ new Map([[FIELD_BUSINESS_TYPE.ID_CARD, handlerIdCardType]]);
-  function trigger(collector, formModel, fieldName, value) {
-    const type = collector.getType(fieldName);
-    if (!type || !handlerMap.has(type))
+  trigger(formModel, fieldName, value) {
+    const type = this.getType(fieldName);
+    if (!type || !this.handlerMap.has(type))
       return;
-    handlerMap.get(type)(formModel, collector, value);
+    this.handlerMap.get(type)(formModel, value);
+  }
+}
+function useBusinessBinding() {
+  function create() {
+    return new BusinessCollector();
   }
-  return { create, trigger };
+  return { create };
 }
 
 export { BusinessCollector, useBusinessBinding };

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

@@ -1,4 +1,5 @@
 export declare function useFormField(): {
     field: import("vue").Ref<import("@formily/core").GeneralField>;
     title: import("vue").ComputedRef<any>;
+    fieldKey: import("vue").ComputedRef<string>;
 };

package/es/packages/form-render/src/hooks/useFormField.mjs

@@ -3,7 +3,13 @@ import { computed } from 'vue';
 
 function useFormField() {
   const field = useField();
-  return { field, title: computed(() => field.value.title) };
+  return {
+    field,
+    title: computed(() => field.value.title),
+    fieldKey: computed(() => {
+      return field.value.props.name.toString();
+    })
+  };
 }
 
 export { useFormField };