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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.2",
+  "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/utils": "1.7.0-beta.2",
-    "@tmagic/design": "1.7.0-beta.2",
-    "@tmagic/form-schema": "1.7.0-beta.2"
+    "@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 type="default" @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/FormDrawer.vue

@@ -42,7 +42,7 @@
         </TMagicCol>
         <TMagicCol :span="12">
           <slot name="footer">
-            <TMagicButton type="default" @click="handleClose">关闭</TMagicButton>
+            <TMagicButton @click="handleClose">关闭</TMagicButton>
             <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
               confirmText
             }}</TMagicButton>

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

@@ -2,7 +2,7 @@
   <div class="m-fields-group-list">
     <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
     <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
-      <span class="el-table__empty-text">暂无数据</span>
+      <span class="el-table__empty-text t-table__empty">暂无数据</span>
     </div>
 
     <MFieldsGroupListItem
@@ -26,22 +26,28 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton
-      v-if="addable"
-      type="primary"
-      :size="config.enableToggleMode ? 'small' : 'default'"
-      :disabled="disabled"
-      @click="addHandler"
-      >新增</TMagicButton
-    >
-
-    <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
+    <div class="m-fields-group-list-footer">
+      <TMagicButton v-if="config.enableToggleMode" :icon="Grid" size="small" @click="toggleMode"
+        >切换为表格</TMagicButton
+      >
+      <div style="display: flex; justify-content: flex-end; flex: 1">
+        <TMagicButton
+          v-if="addable"
+          :size="config.enableToggleMode ? 'small' : 'default'"
+          :icon="Plus"
+          v-bind="config.addButtonConfig?.props || { type: 'primary' }"
+          :disabled="disabled"
+          @click="addHandler"
+          >{{ config.addButtonConfig?.text || '新增' }}</TMagicButton
+        >
+      </div>
+    </div>
   </div>
 </template>
 
 <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/GroupListItem.vue

@@ -1,90 +1,92 @@
 <template>
-  <div class="m-fields-group-list-item">
-    <div>
-      <TMagicButton link :disabled="disabled" @click="expandHandler">
-        <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
-      </TMagicButton>
-
-      <TMagicButton
-        v-show="showDelete"
-        type="danger"
-        size="small"
-        link
-        :icon="Delete"
-        :disabled="disabled"
-        @click="removeHandler"
-      ></TMagicButton>
-
-      <TMagicButton
-        v-if="copyable"
-        link
-        size="small"
-        type="primary"
-        :icon="DocumentCopy"
-        :disabled="disabled"
-        @click="copyHandler"
-        >复制</TMagicButton
-      >
-
-      <template v-if="movable">
+  <TMagicCard class="m-fields-group-list-item" :body-style="{ display: expand ? 'block' : 'none' }">
+    <template #header>
+      <div>
+        <TMagicButton link :disabled="disabled" @click="expandHandler">
+          <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
+        </TMagicButton>
+
         <TMagicButton
-          v-show="index !== 0"
-          link
+          v-show="showDelete"
+          type="danger"
           size="small"
+          link
+          :icon="Delete"
           :disabled="disabled"
-          :icon="CaretTop"
-          @click="changeOrder(-1)"
-          >上移</TMagicButton
-        >
+          @click="removeHandler"
+        ></TMagicButton>
+
         <TMagicButton
-          v-show="index !== length - 1"
+          v-if="copyable"
           link
           size="small"
+          type="primary"
+          :icon="DocumentCopy"
           :disabled="disabled"
-          :icon="CaretBottom"
-          @click="changeOrder(1)"
-          >下移</TMagicButton
+          @click="copyHandler"
+          >复制</TMagicButton
         >
-      </template>
-
-      <TMagicPopover
-        v-if="config.moveSpecifyLocation"
-        trigger="click"
-        placement="top"
-        width="200"
-        :visible="moveSpecifyLocationVisible"
-      >
-        <template #reference>
+
+        <template v-if="movable">
+          <TMagicButton
+            v-show="index !== 0"
+            link
+            size="small"
+            :disabled="disabled"
+            :icon="CaretTop"
+            @click="changeOrder(-1)"
+            >上移</TMagicButton
+          >
           <TMagicButton
+            v-show="index !== length - 1"
             link
             size="small"
-            type="primary"
-            :icon="Position"
             :disabled="disabled"
-            @click="moveSpecifyLocationVisible = true"
-            >移动至</TMagicButton
+            :icon="CaretBottom"
+            @click="changeOrder(1)"
+            >下移</TMagicButton
           >
         </template>
-        <div>
-          <div>
-            第<TMagicInputNumber
-              style="margin: 0 5px"
-              v-model="moveSpecifyLocationIndex"
+
+        <TMagicPopover
+          v-if="config.moveSpecifyLocation"
+          trigger="click"
+          placement="top"
+          width="200"
+          :visible="moveSpecifyLocationVisible"
+        >
+          <template #reference>
+            <TMagicButton
+              link
               size="small"
-              :min="1"
+              type="primary"
+              :icon="Position"
               :disabled="disabled"
-            ></TMagicInputNumber
-            >行
-          </div>
-          <div style="text-align: right; margin-top: 20px">
-            <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
-            <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+              @click="moveSpecifyLocationVisible = true"
+              >移动至</TMagicButton
+            >
+          </template>
+          <div>
+            <div>
+              第<TMagicInputNumber
+                style="margin: 0 5px"
+                v-model="moveSpecifyLocationIndex"
+                size="small"
+                :min="1"
+                :disabled="disabled"
+              ></TMagicInputNumber
+              >行
+            </div>
+            <div style="text-align: right; margin-top: 20px">
+              <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
+              <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+            </div>
           </div>
-        </div>
-      </TMagicPopover>
+        </TMagicPopover>
 
-      <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
-    </div>
+        <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+      </div>
+    </template>
 
     <Container
       v-if="expand"
@@ -99,14 +101,14 @@
       @change="changeHandler"
       @addDiffCount="onAddDiffCount()"
     ></Container>
-  </div>
+  </TMagicCard>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete, DocumentCopy, Position } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';

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/Link.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, readonly, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
 
@@ -54,7 +54,8 @@ const formConfig = computed(() => {
   if (typeof props.config.form === 'function') {
     return props.config.form(mForm, {
       model: props.model || {},
-      values: props.values || {},
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
     });
   }
   return props.config.form;

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])) {