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

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)"
     >
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, shallowRef, watch } from 'vue';
+import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
 import type { Instance } from '@popperjs/core';
 import { createPopper } from '@popperjs/core';
 import { debounce } from 'lodash-es';
@@ -49,7 +49,7 @@ import { debounce } from 'lodash-es';
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
-import type { FieldProps, FormState, TextConfig } from '../schema';
+import type { ChangeRecord, ContainerChangeEventData, FieldProps, FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -59,7 +59,7 @@ defineOptions({
 const props = defineProps<FieldProps<TextConfig>>();
 
 const emit = defineEmits<{
-  change: [value: string];
+  change: [value: string, eventData?: ContainerChangeEventData];
   input: [value: string];
 }>();
 
@@ -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 {
@@ -121,10 +133,28 @@ const inputHandler = (v: string) => {
 const buttonClickHandler = () => {
   if (!appendConfig.value) return;
   if (typeof appendConfig.value.handler === 'function') {
+    const newChangeRecords: ChangeRecord[] = [];
+    const setModel = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: props.prop.replace(`${props.name}`, key), value });
+    };
+
+    const setFormValue = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: key, value });
+    };
+
     appendConfig.value.handler(mForm, {
       model: props.model,
-      values: mForm?.values,
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
+      setModel,
+      setFormValue,
     });
+
+    if (newChangeRecords.length > 0) {
+      emit('change', props.model[props.name], {
+        changeRecords: newChangeRecords,
+      });
+    }
   }
 };
 

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

@@ -1,7 +1,12 @@
 <template>
-  <div class="m-fields-table-wrap">
-    <teleport to="body" :disabled="!isFullscreen">
-      <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
+  <teleport to="body" :disabled="!isFullscreen">
+    <div
+      v-bind="$attrs"
+      class="m-fields-table-wrap"
+      :class="{ fixed: isFullscreen }"
+      :style="isFullscreen ? `z-index: ${nextZIndex()}` : ''"
+    >
+      <div 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
@@ -28,7 +33,6 @@
             <TMagicButton
               :icon="Grid"
               size="small"
-              type="defalut"
               @click="toggleMode"
               v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
               >展开配置</TMagicButton
@@ -36,7 +40,6 @@
             <TMagicButton
               :icon="FullScreen"
               size="small"
-              type="defalut"
               @click="toggleFullscreen"
               v-if="config.enableFullscreen !== false"
             >
@@ -57,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>
 
@@ -76,15 +87,15 @@
           </TMagicPagination>
         </div>
       </div>
-    </teleport>
-  </div>
+    </div>
+  </teleport>
 </template>
 
 <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 } from '@tmagic/design';
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
 
 import type { SortProp } from '../schema';
 import { sortChange } from '../utils/form';
@@ -121,6 +132,8 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
   modelName,
 );
 
+const { nextZIndex } = useZIndex();
+
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName);

package/src/table/useAdd.ts

@@ -78,6 +78,7 @@ export const useAdd = (
       if (typeof props.config.defaultAdd === 'function') {
         inputs = await props.config.defaultAdd(mForm, {
           model: props.model[modelName],
+          prop: props.prop,
           formValue: mForm?.values,
         });
       } else if (props.config.defaultAdd) {

package/src/table/useFullscreen.ts

@@ -1,22 +1,12 @@
-import { ref, useTemplateRef } from 'vue';
-
-import { useZIndex } from '@tmagic/design';
+import { ref } from 'vue';
 
 export const useFullscreen = () => {
   const isFullscreen = ref(false);
-  const mTableEl = useTemplateRef<HTMLDivElement>('mTable');
-
-  const { nextZIndex } = useZIndex();
 
   const toggleFullscreen = () => {
-    if (!mTableEl.value) return;
-
     if (isFullscreen.value) {
-      mTableEl.value.classList.remove('fixed');
       isFullscreen.value = false;
     } else {
-      mTableEl.value.classList.add('fixed');
-      mTableEl.value.style.zIndex = `${nextZIndex()}`;
       isFullscreen.value = true;
     }
   };

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/theme/group-list.scss

@@ -20,4 +20,19 @@
       border-bottom: 0;
     }
   }
+
+  .tmagic-design-card {
+    .el-card__header {
+      padding: 5px 20px;
+    }
+    .t-card__header {
+      padding: 5px 0;
+    }
+  }
+
+  .m-fields-group-list-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
 }

package/src/theme/table.scss

@@ -1,9 +1,6 @@
 .m-fields-table-wrap {
   width: 100%;
-}
 
-.m-fields-table {
-  width: 100%;
   &.fixed {
     position: fixed;
     height: 100%;
@@ -14,6 +11,8 @@
     bottom: 0;
     z-index: 100;
     background: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    display: flex;
 
     & > .el-form-item__content {
       z-index: 101;
@@ -25,6 +24,10 @@
       width: 95vw !important;
     }
   }
+}
+
+.m-fields-table {
+  width: 100%;
 
   th {
     background-color: #f2f2f2 !important;

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<{
@@ -1123,10 +1136,10 @@ declare const _default$l: typeof __VLS_export$k;
 
 type __VLS_Props$j = FieldProps<TextConfig>;
 declare const __VLS_export$j: _vue_runtime_core.DefineComponent<__VLS_Props$j, {}, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    change: (value: string) => any;
+    change: (value: string, eventData?: ContainerChangeEventData | undefined) => any;
     input: (value: string) => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$j> & Readonly<{
-    onChange?: ((value: string) => any) | undefined;
+    onChange?: ((value: string, eventData?: ContainerChangeEventData | undefined) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, false, {}, any>;
 declare const _default$k: typeof __VLS_export$j;