@tmagic/form 1.7.7 → 1.7.8-beta.2

package/package.json

@@ -1,19 +1,20 @@
 {
-  "version": "1.7.7",
+  "version": "1.7.8-beta.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
     "dist/style.css",
+    "dist/es/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-form.umd.cjs",
-  "module": "dist/tmagic-form.js",
+  "module": "dist/es/index.js",
   "style": "dist/style.css",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-form.js",
+      "import": "./dist/es/index.js",
       "require": "./dist/tmagic-form.umd.cjs"
     },
     "./dist/style.css": {
@@ -51,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/utils": "1.7.7",
-    "@tmagic/design": "1.7.7",
-    "@tmagic/form-schema": "1.7.7"
+    "@tmagic/design": "1.7.8-beta.2",
+    "@tmagic/utils": "1.7.8-beta.2",
+    "@tmagic/form-schema": "1.7.8-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -218,13 +218,13 @@ const getTextByName = (name: string, config: FormConfig = props.config): string
           return typeof item.text === 'string' ? item.text : undefined;
         }
 
-        if (item.items && Array.isArray(item.items)) {
+        if ('items' in item && Array.isArray(item.items)) {
           const result = findInConfig(item.items, remainingParts);
           if (result !== undefined) return result;
         }
       }
 
-      if (item.items && Array.isArray(item.items)) {
+      if ('items' in item && Array.isArray(item.items)) {
         const result = findInConfig(item.items, parts);
         if (result !== undefined) return result;
       }

package/src/containers/Container.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :data-tmagic-id="config.id"
+    :data-tmagic-id="(config as Record<string, any>).id"
     :data-tmagic-form-item-prop="itemProp"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}${config.tip ? ' has-tip' : ''}`"
     :style="config.style"
   >
-    <m-fields-hidden v-if="type === 'hidden'" v-bind="fieldsProps" :model="model"></m-fields-hidden>
+    <MHidden v-if="type === 'hidden'" :name="`${name}`" :prop="itemProp" :model="model"></MHidden>
 
     <component
       v-else-if="items && !text && type && display"
@@ -28,7 +28,7 @@
           <FormLabel
             :tip="config.tip"
             :type="type"
-            :use-label="config.useLabel"
+            :use-label="(config as CheckboxConfig).useLabel"
             :label-title="config.labelTitle"
             :text="text"
           ></FormLabel>
@@ -61,7 +61,7 @@
         ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -80,7 +80,7 @@
           <FormLabel
             :tip="config.tip"
             :type="type"
-            :use-label="config.useLabel"
+            :use-label="(config as CheckboxConfig).useLabel"
             :label-title="config.labelTitle"
             :text="text"
           ></FormLabel>
@@ -95,7 +95,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -112,7 +112,7 @@
           <FormLabel
             :tip="config.tip"
             :type="type"
-            :use-label="config.useLabel"
+            :use-label="(config as CheckboxConfig).useLabel"
             :label-title="config.labelTitle"
             :text="text"
           ></FormLabel>
@@ -127,7 +127,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -172,14 +172,18 @@ import { isEqual } from 'lodash-es';
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
+import MHidden from '../fields/Hidden.vue';
 import type {
+  CheckboxConfig,
   ChildConfig,
+  ComponentConfig,
   ContainerChangeEventData,
   ContainerCommonConfig,
   FormState,
   FormValue,
   ToolTipConfigType,
 } from '../schema';
+import { getField } from '../utils/config';
 import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 import FormLabel from './FormLabel.vue';
@@ -248,11 +252,20 @@ const itemProp = computed(() => {
   return `${n}`;
 });
 
+const type = computed((): string => {
+  let { type } = props.config;
+  type = type && filterFunction<string>(mForm, type, props);
+  if (type === 'form') return '';
+  if (type === 'container') return '';
+  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
+});
+
 const tagName = computed(() => {
-  if (type.value === 'component' && props.config.component) {
-    return props.config.component;
+  if (type.value === 'component' && (props.config as ComponentConfig).component) {
+    return (props.config as ComponentConfig).component;
   }
-  return `m-${items.value ? 'form' : 'fields'}-${type.value}`;
+
+  return getField(type.value || 'container') || `m-${items.value ? 'form' : 'fields'}-${type.value}`;
 });
 
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
@@ -276,14 +289,6 @@ const tooltip = computed(() => {
 
 const rule = computed(() => getRules(mForm, props.config.rules, props));
 
-const type = computed((): string => {
-  let { type } = props.config;
-  type = type && filterFunction<string>(mForm, type, props);
-  if (type === 'form') return '';
-  if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
-});
-
 const display = computed((): boolean => {
   const value = displayFunction(mForm, props.config.display, props);
 
@@ -299,7 +304,7 @@ const fieldsProps = computed(() => ({
   name: name.value,
   disabled: disabled.value,
   prop: itemProp.value,
-  key: props.config[mForm?.keyProps],
+  key: (props.config as Record<string, any>)[mForm?.keyProps],
   style: props.config.fieldStyle,
 }));
 

package/src/containers/GroupListItem.vue

@@ -144,7 +144,9 @@ const rowConfig = computed(() => ({
   span: props.config.span || 24,
   items: props.config.items,
   labelWidth: props.config.labelWidth,
-  [mForm?.keyProp || '__key']: `${props.config[mForm?.keyProp || '__key']}${String(props.index)}`,
+  [mForm?.keyProp || '__key']: `${(props.config as Record<string, any>)[mForm?.keyProp || '__key']}${String(
+    props.index,
+  )}`,
 }));
 
 const title = computed(() => {

package/src/fields/Hidden.vue

@@ -3,14 +3,18 @@
 </template>
 
 <script setup lang="ts">
-import type { FieldProps, HiddenConfig } from '../schema';
+import type { FormValue } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormHidden',
 });
 
-const props = defineProps<FieldProps<HiddenConfig>>();
+const props = defineProps<{
+  model: FormValue;
+  name: string;
+  prop: string;
+}>();
 
 useAddField(props.prop);
 </script>

package/src/fields/RadioGroup.vue

@@ -10,7 +10,7 @@
       <TMagicTooltip :disabled="!Boolean(option.tooltip)" placement="top-start" :content="option.tooltip">
         <div>
           <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
-          <span>{{ option.text }}</span>
+          <span v-if="option.text">{{ option.text }}</span>
         </div>
       </TMagicTooltip>
     </component>

package/src/fields/Timerange.vue

@@ -21,7 +21,7 @@ import dayjs from 'dayjs';
 
 import { TMagicTimePicker } from '@tmagic/design';
 
-import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, FieldProps, TimerangeConfig } from '../schema';
 import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -29,7 +29,7 @@ defineOptions({
   name: 'MFormTimeRange',
 });
 
-const props = defineProps<FieldProps<DaterangeConfig>>();
+const props = defineProps<FieldProps<TimerangeConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/index.ts

@@ -16,44 +16,8 @@
  * limitations under the License.
  */
 
-import type { App } from 'vue';
-
-import Container from './containers/Container.vue';
-import Fieldset from './containers/Fieldset.vue';
-import FlexLayout from './containers/FlexLayout.vue';
-import GroupList from './containers/GroupList.vue';
-import Panel from './containers/Panel.vue';
-import Row from './containers/Row.vue';
-import MStep from './containers/Step.vue';
-import Tabs from './containers/Tabs.vue';
-import Cascader from './fields/Cascader.vue';
-import Checkbox from './fields/Checkbox.vue';
-import CheckboxGroup from './fields/CheckboxGroup.vue';
-import ColorPicker from './fields/ColorPicker.vue';
-import Date from './fields/Date.vue';
-import Daterange from './fields/Daterange.vue';
-import DateTime from './fields/DateTime.vue';
-import Display from './fields/Display.vue';
-import DynamicField from './fields/DynamicField.vue';
-import Hidden from './fields/Hidden.vue';
-import Link from './fields/Link.vue';
-import Number from './fields/Number.vue';
-import NumberRange from './fields/NumberRange.vue';
-import RadioGroup from './fields/RadioGroup.vue';
-import Select from './fields/Select.vue';
-import Switch from './fields/Switch.vue';
-import Text from './fields/Text.vue';
-import Textarea from './fields/Textarea.vue';
-import Time from './fields/Time.vue';
-import Timerange from './fields/Timerange.vue';
-import Table from './table/Table.vue';
-import { setConfig } from './utils/config';
-import Form from './Form.vue';
-import FormDialog from './FormDialog.vue';
 import type { FormConfig } from './schema';
 
-import './theme/index.scss';
-
 export * from './schema';
 export * from './utils/form';
 export * from './utils/useAddField';
@@ -91,52 +55,14 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
-export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
-
-export interface FormInstallOptions {
-  [key: string]: any;
-}
-
-const defaultInstallOpt: FormInstallOptions = {};
+export {
+  deleteField as deleteFormField,
+  getField as getFormField,
+  registerField as registerFormField,
+} from './utils/config';
 
-export default {
-  install(app: App, opt: FormInstallOptions = {}) {
-    const option = Object.assign(defaultInstallOpt, opt);
+export type { FormInstallOptions } from './plugin';
 
-    app.config.globalProperties.$MAGIC_FORM = option;
-    setConfig(option);
+export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
 
-    app.component('m-form', Form);
-    app.component('m-form-dialog', FormDialog);
-    app.component('m-form-container', Container);
-    app.component('m-form-fieldset', Fieldset);
-    app.component('m-form-group-list', GroupList);
-    app.component('m-form-panel', Panel);
-    app.component('m-form-row', Row);
-    app.component('m-form-step', MStep);
-    app.component('m-form-table', Table);
-    app.component('m-form-tab', Tabs);
-    app.component('m-form-flex-layout', FlexLayout);
-    app.component('m-fields-text', Text);
-    app.component('m-fields-img-upload', Text);
-    app.component('m-fields-number', Number);
-    app.component('m-fields-number-range', NumberRange);
-    app.component('m-fields-textarea', Textarea);
-    app.component('m-fields-hidden', Hidden);
-    app.component('m-fields-date', Date);
-    app.component('m-fields-datetime', DateTime);
-    app.component('m-fields-daterange', Daterange);
-    app.component('m-fields-timerange', Timerange);
-    app.component('m-fields-time', Time);
-    app.component('m-fields-checkbox', Checkbox);
-    app.component('m-fields-switch', Switch);
-    app.component('m-fields-color-picker', ColorPicker);
-    app.component('m-fields-checkbox-group', CheckboxGroup);
-    app.component('m-fields-radio-group', RadioGroup);
-    app.component('m-fields-display', Display);
-    app.component('m-fields-link', Link);
-    app.component('m-fields-select', Select);
-    app.component('m-fields-cascader', Cascader);
-    app.component('m-fields-dynamic-field', DynamicField);
-  },
-};
+export { default } from './plugin';

package/src/plugin.ts

@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type App } from 'vue';
+
+import Container from './containers/Container.vue';
+import Fieldset from './containers/Fieldset.vue';
+import FlexLayout from './containers/FlexLayout.vue';
+import GroupList from './containers/GroupList.vue';
+import Panel from './containers/Panel.vue';
+import Row from './containers/Row.vue';
+import MStep from './containers/Step.vue';
+import Tabs from './containers/Tabs.vue';
+import Cascader from './fields/Cascader.vue';
+import Checkbox from './fields/Checkbox.vue';
+import CheckboxGroup from './fields/CheckboxGroup.vue';
+import ColorPicker from './fields/ColorPicker.vue';
+import Date from './fields/Date.vue';
+import Daterange from './fields/Daterange.vue';
+import DateTime from './fields/DateTime.vue';
+import Display from './fields/Display.vue';
+import DynamicField from './fields/DynamicField.vue';
+import Hidden from './fields/Hidden.vue';
+import Link from './fields/Link.vue';
+import Number from './fields/Number.vue';
+import NumberRange from './fields/NumberRange.vue';
+import RadioGroup from './fields/RadioGroup.vue';
+import Select from './fields/Select.vue';
+import Switch from './fields/Switch.vue';
+import Text from './fields/Text.vue';
+import Textarea from './fields/Textarea.vue';
+import Time from './fields/Time.vue';
+import Timerange from './fields/Timerange.vue';
+import Table from './table/Table.vue';
+import { setConfig } from './utils/config';
+import Form from './Form.vue';
+import FormDialog from './FormDialog.vue';
+
+import './theme/index.scss';
+
+export interface FormInstallOptions {
+  [key: string]: any;
+}
+
+const defaultInstallOpt: FormInstallOptions = {};
+
+export default {
+  install(app: App, opt: FormInstallOptions = {}) {
+    const option = Object.assign(defaultInstallOpt, opt);
+
+    app.config.globalProperties.$MAGIC_FORM = option;
+    setConfig(option);
+
+    app.component('m-form', Form);
+    app.component('m-form-dialog', FormDialog);
+    app.component('m-form-container', Container);
+    app.component('m-form-fieldset', Fieldset);
+    app.component('m-form-group-list', GroupList);
+    app.component('m-form-panel', Panel);
+    app.component('m-form-row', Row);
+    app.component('m-form-step', MStep);
+    app.component('m-form-table', Table);
+    app.component('m-form-tab', Tabs);
+    app.component('m-form-flex-layout', FlexLayout);
+    app.component('m-fields-text', Text);
+    app.component('m-fields-img-upload', Text);
+    app.component('m-fields-number', Number);
+    app.component('m-fields-number-range', NumberRange);
+    app.component('m-fields-textarea', Textarea);
+    app.component('m-fields-hidden', Hidden);
+    app.component('m-fields-date', Date);
+    app.component('m-fields-datetime', DateTime);
+    app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-timerange', Timerange);
+    app.component('m-fields-time', Time);
+    app.component('m-fields-checkbox', Checkbox);
+    app.component('m-fields-switch', Switch);
+    app.component('m-fields-color-picker', ColorPicker);
+    app.component('m-fields-checkbox-group', CheckboxGroup);
+    app.component('m-fields-radio-group', RadioGroup);
+    app.component('m-fields-display', Display);
+    app.component('m-fields-link', Link);
+    app.component('m-fields-select', Select);
+    app.component('m-fields-cascader', Cascader);
+    app.component('m-fields-dynamic-field', DynamicField);
+  },
+};

package/src/table/useSortable.ts

@@ -1,5 +1,5 @@
 import { inject, nextTick, type Ref, type ShallowRef, watchEffect } from 'vue';
-import Sortable, { type SortableEvent } from 'sortablejs';
+import type { default as SortableType, SortableEvent } from 'sortablejs';
 
 import { type TMagicTable } from '@tmagic/design';
 import type { FormState } from '@tmagic/form-schema';
@@ -8,6 +8,9 @@ import { sortArray } from '../utils/form';
 
 import type { TableProps } from './type';
 
+let SortablePromise: Promise<typeof SortableType> | undefined;
+const loadSortable = () => (SortablePromise ??= import('sortablejs').then((m) => m.default));
+
 export const useSortable = (
   props: TableProps,
   emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
@@ -17,15 +20,16 @@ export const useSortable = (
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
-  let sortable: Sortable | undefined;
-  const rowDrop = () => {
+  let sortable: SortableType | undefined;
+  const rowDrop = async () => {
     sortable?.destroy();
     const tableEl = tMagicTableRef.value?.getEl();
     const tBodyEl = tableEl?.querySelector('.el-table__body > tbody') || tableEl?.querySelector('.t-table__body');
     if (!tBodyEl) {
       return;
     }
-    sortable = Sortable.create(tBodyEl, {
+
+    sortable = (await loadSortable()).create(tBodyEl, {
       draggable: '.tmagic-design-table-row',
       filter: 'input', // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
       preventOnFilter: false, // 允许选字

package/src/utils/config.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import type { Component } from 'vue';
+
 let $MAGIC_FORM = {} as any;
 
 const setConfig = (option: any): void => {
@@ -24,4 +26,17 @@ const setConfig = (option: any): void => {
 
 const getConfig = <T = unknown>(key: string): T => $MAGIC_FORM[key];
 
-export { getConfig, setConfig };
+const fieldRegistry = new Map<string, Component>();
+
+const registerField = (tagName: string, component: Component): void => {
+  if (fieldRegistry.has(tagName)) {
+    return;
+  }
+  fieldRegistry.set(tagName, component);
+};
+
+const getField = (tagName: string): Component | undefined => fieldRegistry.get(tagName);
+
+const deleteField = (tagName: string): boolean => fieldRegistry.delete(tagName);
+
+export { deleteField, getConfig, getField, registerField, setConfig };

package/src/utils/form.ts

@@ -29,11 +29,13 @@ import {
   DaterangeConfig,
   FilterFunction,
   FormConfig,
+  FormItem,
   FormState,
   FormValue,
   HtmlField,
   Rule,
   SortProp,
+  TableConfig,
   TabPaneConfig,
   TypeFunction,
 } from '../schema';
@@ -118,7 +120,7 @@ const initValueItem = function (
 ) {
   const { items } = item as ContainerCommonConfig;
   const { names } = item as DaterangeConfig;
-  const { type, name } = item as ChildConfig;
+  const { type, name } = item as FormItem;
 
   if (isTableSelect(type) && name) {
     value[name] = initValue[name] ?? '';
@@ -148,14 +150,15 @@ const initValueItem = function (
   setValue(mForm, value, initValue, item);
 
   if (type === 'table') {
-    if (item.defautSort) {
-      sortChange(value[name], item.defautSort);
-    } else if (item.defaultSort) {
-      sortChange(value[name], item.defaultSort);
+    const tableConfig = item as TableConfig;
+    if (tableConfig.defautSort) {
+      sortChange(value[name], tableConfig.defautSort);
+    } else if (tableConfig.defaultSort) {
+      sortChange(value[name], tableConfig.defaultSort);
     }
 
-    if (item.sort && item.sortKey) {
-      value[name].sort((a: any, b: any) => b[item.sortKey] - a[item.sortKey]);
+    if (tableConfig.sort && tableConfig.sortKey) {
+      value[name].sort((a: any, b: any) => b[tableConfig.sortKey!] - a[tableConfig.sortKey!]);
     }
   }