@tmagic/form 1.3.5 → 1.3.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.5",
+  "version": "1.3.7",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -23,22 +23,17 @@
     "./*": "./*"
   },
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
-    "clear:type": "rimraf ./types"
-  },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.5",
-    "@tmagic/utils": "1.3.5",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@tmagic/design": "1.3.7",
+    "@tmagic/utils": "1.3.7",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.8"
@@ -49,15 +44,20 @@
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.12.4",
+    "@types/node": "^18.19.0",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.3.8",
     "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.4.4",
-    "vue-tsc": "^1.6.5"
+    "vite": "^5.0.7",
+    "vue-tsc": "^1.8.25"
+  },
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   }
-}
+}

package/src/containers/Container.vue

@@ -1,6 +1,8 @@
 <template>
   <div
     v-if="config"
+    :id="config.id"
+    :data-magic-id="config.id"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >

package/src/containers/Table.vue

@@ -1,180 +1,182 @@
 <template>
-  <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
-    <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
-    <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
-      <TMagicTable
-        v-if="model[modelName]"
-        ref="tMagicTable"
-        style="width: 100%"
-        :row-key="config.rowKey || 'id'"
-        :data="data"
-        :lastData="lastData"
-        :border="config.border"
-        :max-height="config.maxHeight"
-        :default-expand-all="true"
-        :key="updateKey"
-        @select="selectHandle"
-        @sort-change="sortChange"
-      >
-        <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
-          <template v-slot="scope">
-            <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
-          </template>
-        </TMagicTableColumn>
-
-        <TMagicTableColumn
-          label="操作"
-          :width="config.operateColWidth || 55"
-          align="center"
-          :fixed="config.fixed === false ? undefined : 'left'"
+  <teleport to="body" :disabled="!isFullscreen">
+    <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
+      <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
+      <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+        <TMagicTable
+          v-if="model[modelName]"
+          ref="tMagicTable"
+          style="width: 100%"
+          :row-key="config.rowKey || 'id'"
+          :data="data"
+          :lastData="lastData"
+          :border="config.border"
+          :max-height="config.maxHeight"
+          :default-expand-all="true"
+          :key="updateKey"
+          @select="selectHandle"
+          @sort-change="sortChange"
         >
-          <template v-slot="scope">
-            <slot name="operateCol" :scope="scope"></slot>
-            <TMagicIcon
-              v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-              class="m-table-delete-icon"
-              @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-              ><Delete
-            /></TMagicIcon>
-          </template>
-        </TMagicTableColumn>
-
-        <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
-          <template v-slot="scope">
-            <TMagicTooltip
-              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
-              content="点击上移，双击置顶"
-              placement="top"
-            >
-              <TMagicButton
-                plain
-                size="small"
-                type="primary"
-                :icon="ArrowUp"
-                :disabled="disabled"
-                text
-                @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-              ></TMagicButton>
-            </TMagicTooltip>
-            <TMagicTooltip
-              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
-              content="点击下移，双击置底"
-              placement="top"
-            >
-              <TMagicButton
-                plain
-                size="small"
-                type="primary"
-                :icon="ArrowDown"
-                :disabled="disabled"
-                text
-                @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-              ></TMagicButton>
-            </TMagicTooltip>
-          </template>
-        </TMagicTableColumn>
-
-        <TMagicTableColumn
-          v-if="selection"
-          align="center"
-          header-align="center"
-          type="selection"
-          width="45"
-        ></TMagicTableColumn>
-
-        <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
-          <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
-        </TMagicTableColumn>
+          <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+            <template v-slot="scope">
+              <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
+            </template>
+          </TMagicTableColumn>
 
-        <template v-for="(column, index) in config.items">
           <TMagicTableColumn
-            v-if="column.type !== 'hidden' && display(column.display)"
-            :prop="column.name"
-            :width="column.width"
-            :label="column.label"
-            :sortable="column.sortable"
-            :sort-orders="['ascending', 'descending']"
-            :key="column[mForm?.keyProp || '__key'] ?? index"
-            :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+            label="操作"
+            :width="config.operateColWidth || 55"
+            align="center"
+            :fixed="config.fixed === false ? undefined : 'left'"
           >
-            <template #default="scope">
-              <Container
-                v-if="scope.$index > -1"
-                labelWidth="0"
-                :disabled="disabled"
-                :prop="getProp(scope.$index)"
-                :rules="column.rules"
-                :config="makeConfig(column, scope.row)"
-                :model="scope.row"
-                :lastValues="lastData[scope.$index]"
-                :is-compare="isCompare"
-                :size="size"
-                @change="$emit('change', model[modelName])"
-                @addDiffCount="onAddDiffCount()"
-              ></Container>
+            <template v-slot="scope">
+              <slot name="operateCol" :scope="scope"></slot>
+              <TMagicIcon
+                v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
+                class="m-table-delete-icon"
+                @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                ><Delete
+              /></TMagicIcon>
             </template>
           </TMagicTableColumn>
-        </template>
-      </TMagicTable>
-    </TMagicTooltip>
-    <slot></slot>
-
-    <div style="display: flex; justify-content: space-between; margin: 10px 0">
-      <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-        >新增一行</TMagicButton
-      >
-
-      <div style="display: flex">
-        <TMagicButton
-          :icon="Grid"
-          size="small"
-          type="primary"
-          @click="toggleMode"
-          v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
-          >展开配置</TMagicButton
-        >
-        <TMagicButton
-          :icon="FullScreen"
-          size="small"
-          type="primary"
-          @click="toggleFullscreen"
-          v-if="config.enableFullscreen !== false"
-        >
-          {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
-        </TMagicButton>
-        <TMagicUpload
-          v-if="importable"
-          style="display: inline-block"
-          ref="excelBtn"
-          action="/noop"
-          :disabled="disabled"
-          :on-change="excelHandler"
-          :auto-upload="false"
-        >
-          <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
-        </TMagicUpload>
-        <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
-          >清空</TMagicButton
+
+          <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
+            <template v-slot="scope">
+              <TMagicTooltip
+                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
+                content="点击上移，双击置顶"
+                placement="top"
+              >
+                <TMagicButton
+                  plain
+                  size="small"
+                  type="primary"
+                  :icon="ArrowUp"
+                  :disabled="disabled"
+                  text
+                  @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                ></TMagicButton>
+              </TMagicTooltip>
+              <TMagicTooltip
+                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
+                content="点击下移，双击置底"
+                placement="top"
+              >
+                <TMagicButton
+                  plain
+                  size="small"
+                  type="primary"
+                  :icon="ArrowDown"
+                  :disabled="disabled"
+                  text
+                  @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                ></TMagicButton>
+              </TMagicTooltip>
+            </template>
+          </TMagicTableColumn>
+
+          <TMagicTableColumn
+            v-if="selection"
+            align="center"
+            header-align="center"
+            type="selection"
+            width="45"
+          ></TMagicTableColumn>
+
+          <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
+            <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
+          </TMagicTableColumn>
+
+          <template v-for="(column, index) in config.items">
+            <TMagicTableColumn
+              v-if="column.type !== 'hidden' && display(column.display)"
+              :prop="column.name"
+              :width="column.width"
+              :label="column.label"
+              :sortable="column.sortable"
+              :sort-orders="['ascending', 'descending']"
+              :key="column[mForm?.keyProp || '__key'] ?? index"
+              :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+            >
+              <template #default="scope">
+                <Container
+                  v-if="scope.$index > -1"
+                  labelWidth="0"
+                  :disabled="disabled"
+                  :prop="getProp(scope.$index)"
+                  :rules="column.rules"
+                  :config="makeConfig(column, scope.row)"
+                  :model="scope.row"
+                  :lastValues="lastData[scope.$index]"
+                  :is-compare="isCompare"
+                  :size="size"
+                  @change="$emit('change', model[modelName])"
+                  @addDiffCount="onAddDiffCount()"
+                ></Container>
+              </template>
+            </TMagicTableColumn>
+          </template>
+        </TMagicTable>
+      </TMagicTooltip>
+      <slot></slot>
+
+      <div style="display: flex; justify-content: space-between; margin: 10px 0">
+        <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+          >新增一行</TMagicButton
         >
+
+        <div style="display: flex">
+          <TMagicButton
+            :icon="Grid"
+            size="small"
+            type="primary"
+            @click="toggleMode"
+            v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
+            >展开配置</TMagicButton
+          >
+          <TMagicButton
+            :icon="FullScreen"
+            size="small"
+            type="primary"
+            @click="toggleFullscreen"
+            v-if="config.enableFullscreen !== false"
+          >
+            {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+          </TMagicButton>
+          <TMagicUpload
+            v-if="importable"
+            style="display: inline-block"
+            ref="excelBtn"
+            action="/noop"
+            :disabled="disabled"
+            :on-change="excelHandler"
+            :auto-upload="false"
+          >
+            <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
+          </TMagicUpload>
+          <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+            >清空</TMagicButton
+          >
+        </div>
       </div>
-    </div>
 
-    <div class="bottom" style="text-align: right" v-if="config.pagination">
-      <TMagicPagination
-        layout="total, sizes, prev, pager, next, jumper"
-        :hide-on-single-page="model[modelName].length < pagesize"
-        :current-page="pagecontext + 1"
-        :page-sizes="[pagesize, 60, 120, 300]"
-        :page-size="pagesize"
-        :total="model[modelName].length"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      >
-      </TMagicPagination>
+      <div class="bottom" style="text-align: right" v-if="config.pagination">
+        <TMagicPagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :hide-on-single-page="model[modelName].length < pagesize"
+          :current-page="pagecontext + 1"
+          :page-sizes="[pagesize, 60, 120, 300]"
+          :page-size="pagesize"
+          :total="model[modelName].length"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+        </TMagicPagination>
+      </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">

package/src/fields/Cascader.vue

@@ -23,7 +23,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
 
-import type { CascaderConfig, FieldProps, FormState } from '../schema';
+import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -43,7 +43,7 @@ const requestFunc = getConfig('request') as Function;
 
 const tMagicCascader = ref<InstanceType<typeof TMagicCascader>>();
 
-const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
+const options = ref<CascaderOption[]>([]);
 const remoteData = ref<any>(null);
 
 const setRemoteOptions = async function () {
@@ -86,6 +86,10 @@ if (typeof props.config.options === 'function' && props.model && mForm) {
   );
 } else if (!props.config.options?.length || props.config.remote) {
   Promise.resolve(setRemoteOptions());
+} else if (Array.isArray(props.config.options)) {
+  watchEffect(() => {
+    options.value = props.config.options as CascaderOption[];
+  });
 }
 
 const changeHandler = (value: any) => {

package/src/fields/Select.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
+import { inject, nextTick, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
@@ -331,12 +331,15 @@ if (typeof props.config.options === 'function') {
 }
 
 if (props.config.remote) {
-  const unWacth = watch(
+  const unWatch = watch(
     () => tMagicSelect.value?.scrollbarWrap,
     (scrollbarWrap) => {
       if (!scrollbarWrap) {
         return;
       }
+
+      nextTick(() => unWatch());
+
       scrollbarWrap.addEventListener('scroll', async (e: Event) => {
         const el = e.currentTarget as HTMLDivElement;
         if (moreLoadingVisible.value) {
@@ -353,7 +356,6 @@ if (props.config.remote) {
         options.value = await getOptions();
         moreLoadingVisible.value = false;
       });
-      unWacth();
     },
     {
       immediate: true,

package/src/theme/table.scss

@@ -2,22 +2,15 @@
   width: 100%;
   &.fixed {
     position: fixed;
+    height: 100%;
+    overflow: auto;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     z-index: 100;
-    &::before {
-      content: " ";
-      display: block;
-      background: rgba(0, 0, 0, 0.5);
-      position: fixed;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      z-index: 100;
-    }
+    background: rgba(0, 0, 0, 0.5);
+
     & > .el-form-item__content {
       z-index: 101;
       position: relative;

package/types/Form.vue.d.ts

@@ -40,7 +40,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     changeHandler: () => void;
     resetForm: () => any;
     submitForm: (native?: boolean | undefined) => Promise<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "field-input": (...args: any[]) => void;
+    "field-change": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */

package/types/FormBox.vue.d.ts

@@ -126,7 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: (event: "change" | "field-input" | "field-change", ...args: any[]) => void;
+        $emit: ((event: "change", ...args: any[]) => void) & ((event: "field-input", ...args: any[]) => void) & ((event: "field-change", ...args: any[]) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             config: {
@@ -200,7 +200,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             changeHandler: () => void;
             resetForm: () => any;
             submitForm: (native?: boolean | undefined) => Promise<any>;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], string, {
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            change: (...args: any[]) => void;
+            "field-input": (...args: any[]) => void;
+            "field-change": (...args: any[]) => void;
+        }, string, {
             config: FormConfig;
             initValues: Record<string, any>;
             lastValues: Record<string, any>;
@@ -310,7 +314,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     bodyHeight: import("vue").Ref<number>;
     show: () => void;
     hide: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "submit" | "error")[], "change" | "submit" | "error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     config?: FormConfig | undefined;
     values?: Object | undefined;
     parentValues?: Object | undefined;
@@ -353,11 +361,11 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/types/FormDialog.vue.d.ts

@@ -129,7 +129,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: (event: "change" | "field-input" | "field-change", ...args: any[]) => void;
+        $emit: ((event: "change", ...args: any[]) => void) & ((event: "field-input", ...args: any[]) => void) & ((event: "field-change", ...args: any[]) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             config: {
@@ -203,7 +203,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             changeHandler: () => void;
             resetForm: () => any;
             submitForm: (native?: boolean | undefined) => Promise<any>;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], string, {
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            change: (...args: any[]) => void;
+            "field-input": (...args: any[]) => void;
+            "field-change": (...args: any[]) => void;
+        }, string, {
             config: FormConfig;
             initValues: Record<string, any>;
             lastValues: Record<string, any>;
@@ -315,7 +319,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     save: () => Promise<void>;
     show: () => void;
     hide: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "submit" | "error" | "close")[], "change" | "submit" | "error" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     config?: FormConfig | undefined;
     values?: Object | undefined;
     parentValues?: Object | undefined;
@@ -362,11 +371,11 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};