@tmagic/form 1.7.0-beta.3 → 1.7.0-beta.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.4",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -37,23 +37,23 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
+    "@element-plus/icons-vue": "^2.3.2",
     "@popperjs/core": "^2.11.8",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.19",
     "lodash-es": "^4.17.21",
-    "sortablejs": "^1.15.2"
+    "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",
-    "@types/sortablejs": "^1.15.8",
+    "@types/sortablejs": "^1.15.9",
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.22",
+    "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.0-beta.3",
-    "@tmagic/utils": "1.7.0-beta.3",
-    "@tmagic/form-schema": "1.7.0-beta.3"
+    "@tmagic/design": "1.7.0-beta.4",
+    "@tmagic/utils": "1.7.0-beta.4",
+    "@tmagic/form-schema": "1.7.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/FormDialog.vue

@@ -8,7 +8,10 @@
     :width="width"
     :zIndex="zIndex"
     :fullscreen="fullscreen"
-    :close-on-click-modal="false"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :destroy-on-close="destroyOnClose"
+    :show-close="showClose"
     @close="closeHandler"
   >
     <div
@@ -42,7 +45,7 @@
         </TMagicCol>
         <TMagicCol :span="12">
           <slot name="footer">
-            <TMagicButton @click="cancel" size="small">取 消</TMagicButton>
+            <TMagicButton v-if="showCancel" @click="cancel" size="small">取 消</TMagicButton>
             <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
               >上一步</TMagicButton
             >
@@ -87,11 +90,21 @@ const props = withDefaults(
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
     preventSubmitDefault?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    destroyOnClose?: boolean;
+    showClose?: boolean;
+    showCancel?: boolean;
   }>(),
   {
     config: () => [],
     values: () => ({}),
     confirmText: '确定',
+    closeOnClickModal: false,
+    closeOnPressEscape: false,
+    destroyOnClose: false,
+    showClose: true,
+    showCancel: true,
   },
 );
 

package/src/containers/Container.vue

@@ -24,15 +24,23 @@
 
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
-        <template #label
-          ><span v-html="type === 'checkbox' && !config.useLabel ? '' : text" :title="config.labelTitle"></span
-        ></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
+
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
             v-bind="fieldsProps"
             :is="tagName"
             :model="model"
             :last-values="lastValues"
+            :is-compare="isCompare"
             @change="onChangeHandler"
             @addDiffCount="onAddDiffCount"
           ></component>
@@ -47,12 +55,13 @@
           :is="tagName"
           :model="model"
           :last-values="lastValues"
+          :is-compare="isCompare"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
         ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -67,7 +76,15 @@
         v-bind="formItemProps"
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
           <template #content>
@@ -78,7 +95,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -91,7 +108,15 @@
         :style="config.tip ? 'flex: 1' : ''"
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
           <template #content>
@@ -102,7 +127,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -157,6 +182,8 @@ import type {
 } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
+import FormLabel from './FormLabel.vue';
+
 defineOptions({
   name: 'MFormContainer',
 });

package/src/containers/FormLabel.vue

@@ -0,0 +1,26 @@
+<template>
+  <span v-if="tip" style="display: inline-flex; align-items: center">
+    <span v-html="type === 'checkbox' && !useLabel ? '' : text" :title="labelTitle"></span>
+    <TMagicTooltip v-if="tip && (type !== 'checkbox' || useLabel)" placement="top">
+      <TMagicIcon style="margin-left: 5px; display: flex"><warning-filled /></TMagicIcon>
+      <template #content>
+        <div v-html="tip"></div>
+      </template>
+    </TMagicTooltip>
+  </span>
+  <span v-else v-html="type === 'checkbox' && !useLabel ? '' : text" :title="labelTitle"></span>
+</template>
+
+<script setup lang="ts">
+import { WarningFilled } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicTooltip } from '@tmagic/design';
+
+defineProps<{
+  tip?: string;
+  type?: string;
+  useLabel?: boolean;
+  text?: string;
+  labelTitle?: string;
+}>();
+</script>

package/src/containers/GroupList.vue

@@ -33,11 +33,12 @@
       <div style="display: flex; justify-content: flex-end; flex: 1">
         <TMagicButton
           v-if="addable"
-          type="primary"
           :size="config.enableToggleMode ? 'small' : 'default'"
+          :icon="Plus"
+          v-bind="config.addButtonConfig?.props || { type: 'primary' }"
           :disabled="disabled"
           @click="addHandler"
-          >新增</TMagicButton
+          >{{ config.addButtonConfig?.text || '新增' }}</TMagicButton
         >
       </div>
     </div>
@@ -46,7 +47,7 @@
 
 <script setup lang="ts">
 import { computed, inject } from 'vue';
-import { Grid } from '@element-plus/icons-vue';
+import { Grid, Plus } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';

package/src/containers/Panel.vue

@@ -8,8 +8,11 @@
       <div style="width: 100%; display: flex; align-items: center">
         <TMagicButton style="padding: 0" link :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
         </TMagicButton>
+        <slot name="header">
+          <span style="cursor: pointer" @click="expand = !expand">{{ filter(config.title) }}</span>
+        </slot>
+
         <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
-        <slot name="header">{{ filter(config.title) }}</slot>
       </div>
     </template>
 
@@ -101,4 +104,12 @@ const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
   emit('change', props.model, eventData);
 };
 const onAddDiffCount = () => emit('addDiffCount');
+
+defineExpose({
+  getExpand: () => expand.value,
+
+  setExpand: (v: boolean) => {
+    expand.value = v;
+  },
+});
 </script>

package/src/fields/Number.vue

@@ -1,7 +1,7 @@
 <template>
   <TMagicInputNumber
     v-if="model"
-    :model-value="model[name]"
+    v-model="value"
     clearable
     controls-position="right"
     :size="size"
@@ -10,13 +10,13 @@
     :step="config.step"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   ></TMagicInputNumber>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
 
@@ -34,6 +34,18 @@ const emit = defineEmits<{
   input: [values: number];
 }>();
 
+const value = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');

package/src/fields/NumberRange.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="m-fields-number-range">
     <TMagicInput
-      :model-value="model[name][0]"
+      v-model="firstValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="minChangeHandler"
+      @change="minChangeHandler"
     ></TMagicInput>
     <span class="split-tag">-</span>
     <TMagicInput
-      :model-value="model[name][1]"
+      v-model="secondValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="maxChangeHandler"
+      @change="maxChangeHandler"
     ></TMagicInput>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue';
+
 import { TMagicInput } from '@tmagic/design';
 
 import type { FieldProps, NumberRangeConfig } from '../schema';
@@ -34,6 +36,21 @@ const emit = defineEmits<{
   change: [values: [number, number]];
 }>();
 
+const firstValue = ref<number>();
+const secondValue = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  ([first, second]) => {
+    firstValue.value = first;
+    secondValue.value = second;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
 useAddField(props.prop);
 
 if (!Array.isArray(props.model[props.name])) {

package/src/fields/Text.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="m-fields-text">
     <TMagicInput
-      :model-value="model[name]"
+      v-model="value"
       ref="input"
       clearable
       :size="size"
       :placeholder="config.placeholder"
       :disabled="disabled"
-      @update:model-value="changeHandler"
+      @change="changeHandler"
       @input="inputHandler"
       @keyup="keyUpHandler($event)"
     >
@@ -67,6 +67,18 @@ useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 const appendConfig = computed(() => {
   if (typeof props.config.append === 'string') {
     return {

package/src/fields/Textarea.vue

@@ -1,20 +1,20 @@
 <template>
   <TMagicInput
-    :model-value="model[name]"
+    v-model="value"
     type="textarea"
     :size="size"
     clearable
     :placeholder="config.placeholder"
     :disabled="disabled"
     :rows="config.rows"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   >
   </TMagicInput>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
@@ -32,6 +32,18 @@ const emit = defineEmits<{
   input: [value: string];
 }>();
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');

package/src/table/Table.vue

@@ -60,8 +60,16 @@
               >清空</TMagicButton
             >
           </div>
-          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-            >新增一行</TMagicButton
+          <TMagicButton
+            v-if="addable"
+            class="m-form-table-add-button"
+            size="small"
+            plain
+            :icon="Plus"
+            v-bind="config.addButtonConfig?.props || { type: 'primary' }"
+            :disabled="disabled"
+            @click="newHandler()"
+            >{{ config.addButtonConfig?.text || '新增一行' }}</TMagicButton
           >
         </div>
 
@@ -85,7 +93,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from 'vue';
-import { FullScreen, Grid } from '@element-plus/icons-vue';
+import { FullScreen, Grid, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
 

package/src/table/useSortable.ts

@@ -20,7 +20,7 @@ export const useSortable = (
   const rowDrop = () => {
     sortable?.destroy();
     const tableEl = tMagicTableRef.value?.getEl();
-    const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
+    const tBodyEl = tableEl?.querySelector('.el-table__body > tbody') || tableEl?.querySelector('.t-table__body');
     if (!tBodyEl) {
       return;
     }

package/src/table/useTableColumns.ts

@@ -1,7 +1,8 @@
 import { computed, h, inject, type Ref } from 'vue';
+import { WarningFilled } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { TableColumnOptions } from '@tmagic/design';
+import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import type { FormState, TableColumnConfig } from '@tmagic/form-schema';
 
 import Container from '../containers/Container.vue';
@@ -43,6 +44,19 @@ export const useTableColumns = (
     return fuc;
   };
 
+  const titleTip = (fuc: any) => {
+    if (typeof fuc === 'function') {
+      return fuc(mForm, {
+        values: mForm?.initValues,
+        model: props.model,
+        formValue: mForm ? mForm.values : props.model,
+        prop: props.prop,
+      });
+    }
+
+    return fuc;
+  };
+
   const selection = computed(() => {
     if (typeof props.config.selection === 'function') {
       return props.config.selection(mForm, { model: props.model[modelName.value] });
@@ -87,10 +101,16 @@ export const useTableColumns = (
       });
     }
 
-    columns.push({
+    let actionFixed: 'left' | 'right' | undefined = props.config.fixed === false ? undefined : 'left';
+
+    if (typeof props.config.fixed === 'string' && ['left', 'right'].includes(props.config.fixed)) {
+      actionFixed = props.config.fixed;
+    }
+
+    const actionClumn = {
       props: {
         label: '操作',
-        fixed: props.config.fixed === false ? undefined : 'left',
+        fixed: actionFixed,
         width: props.config.operateColWidth || 112,
         align: 'center',
       },
@@ -110,7 +130,11 @@ export const useTableColumns = (
             emit('change', v);
           },
         }),
-    });
+    };
+
+    if (actionFixed !== 'right') {
+      columns.push(actionClumn);
+    }
 
     if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
       columns.push({
@@ -158,6 +182,8 @@ export const useTableColumns = (
 
     for (const column of props.config.items) {
       if (column.type !== 'hidden' && display(column.display)) {
+        const titleTipValue = titleTip(column.titleTip);
+
         columns.push({
           props: {
             prop: column.name,
@@ -181,10 +207,39 @@ export const useTableColumns = (
               onChange: changeHandler,
               onAddDiffCount,
             }),
+          title: titleTipValue
+            ? () =>
+                h(
+                  TMagicTooltip,
+                  { placement: 'top' },
+                  {
+                    default: () =>
+                      h(
+                        'span',
+                        {
+                          style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '5px',
+                          },
+                        },
+                        [h('span', column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })],
+                      ),
+                    content: () =>
+                      h('div', {
+                        innerHTML: titleTipValue,
+                      }),
+                  },
+                )
+            : undefined,
         });
       }
     }
 
+    if (actionFixed === 'right') {
+      columns.push(actionClumn);
+    }
+
     return columns;
   });
 

package/src/utils/form.ts

@@ -341,7 +341,7 @@ export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortK
     }
   }
 
-  return newData;
+  return cloneDeep(newData);
 };
 
 export const sortChange = (data: any[], { prop, order }: SortProp) => {

package/types/index.d.ts

@@ -109,6 +109,11 @@ type __VLS_Props$t = {
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
     preventSubmitDefault?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    destroyOnClose?: boolean;
+    showClose?: boolean;
+    showCancel?: boolean;
 };
 declare var __VLS_19$1: {};
 declare var __VLS_32: {};
@@ -350,8 +355,13 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {
     values: Object;
+    closeOnClickModal: boolean;
+    closeOnPressEscape: boolean;
+    destroyOnClose: boolean;
+    showClose: boolean;
     config: FormConfig;
     confirmText: string;
+    showCancel: boolean;
 }, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$u: __VLS_WithSlots$4<typeof __VLS_base$4, __VLS_Slots$4>;
 declare const _default$v: typeof __VLS_export$u;
@@ -992,7 +1002,10 @@ type __VLS_Slots$1 = {} & {
 } & {
     default?: (props: typeof __VLS_18) => any;
 };
-declare const __VLS_base$1: _vue_runtime_core.DefineComponent<__VLS_Props$n, {}, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
+declare const __VLS_base$1: _vue_runtime_core.DefineComponent<__VLS_Props$n, {
+    getExpand: () => boolean;
+    setExpand: (v: boolean) => void;
+}, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
     change: (v: any, eventData: ContainerChangeEventData) => any;
     addDiffCount: () => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$n> & Readonly<{