@tmagic/form 1.7.11 → 1.7.13-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.11",
+  "version": "1.7.13-beta.0",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.33",
     "typescript": "^6.0.3",
-    "@tmagic/form-schema": "1.7.11",
-    "@tmagic/design": "1.7.11",
-    "@tmagic/utils": "1.7.11"
+    "@tmagic/design": "1.7.13-beta.0",
+    "@tmagic/form-schema": "1.7.13-beta.0",
+    "@tmagic/utils": "1.7.13-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/FormDialog.vue

@@ -150,7 +150,7 @@ const closeHandler = () => {
 
 const save = async () => {
   try {
-    const changeRecords = form.value?.changeRecords;
+    const changeRecords = [...(form.value?.changeRecords || [])];
     const values = await form.value?.submitForm();
     emit('submit', values, { changeRecords });
   } catch (e) {

package/src/containers/GroupList.vue

@@ -29,20 +29,16 @@
     <div class="m-fields-group-list-footer">
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
-        <slot name="add-button" :trigger="addHandler"></slot>
+        <slot name="add-button"></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { tMagicMessage } from '@tmagic/design';
-
-import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
-import { initValue } from '../utils/form';
+import type { ContainerChangeEventData, GroupListConfig } from '../schema';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
@@ -68,59 +64,10 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const mForm = inject<FormState | undefined>('mForm');
-
 const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
   emit('change', props.model, eventData);
 };
 
-const addHandler = async () => {
-  if (!props.name) return false;
-
-  if (props.config.max && props.model[props.name].length >= props.config.max) {
-    tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
-    return;
-  }
-
-  if (typeof props.config.beforeAddRow === 'function') {
-    const beforeCheckRes = await props.config.beforeAddRow(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-    });
-    if (!beforeCheckRes) return;
-  }
-
-  let initValues = {};
-
-  if (typeof props.config.defaultAdd === 'function') {
-    initValues = await props.config.defaultAdd(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  } else if (props.config.defaultAdd) {
-    initValues = props.config.defaultAdd;
-  }
-
-  const groupValue = await initValue(mForm, {
-    config: props.config.items,
-    initValues,
-  });
-
-  props.model[props.name].push(groupValue);
-
-  emit('change', props.model[props.name], {
-    changeRecords: [
-      {
-        propPath: `${props.prop}.${props.model[props.name].length - 1}`,
-        value: groupValue,
-      },
-    ],
-  });
-};
-
 const removeHandler = (index: number) => {
   if (!props.name) return false;
 

package/src/{table → containers/table}/ActionsColumn.vue

@@ -38,7 +38,7 @@ import { cloneDeep } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 
-import type { FormState, TableConfig } from '../schema';
+import type { FormState, TableConfig } from '../../schema';
 
 const emit = defineEmits(['change']);
 

package/src/{table → containers/table}/Table.vue

@@ -58,7 +58,7 @@
               >清空</TMagicButton
             >
           </div>
-          <slot name="add-button" :trigger="newHandler"></slot>
+          <slot name="add-button"></slot>
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">
@@ -80,16 +80,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, watch } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
 
-import type { SortProp } from '../schema';
-import { sortChange } from '../utils/form';
+import type { SortProp } from '../../schema';
+import { sortChange } from '../../utils/form';
 
 import type { TableProps } from './type';
-import { useAdd } from './useAdd';
 import { useFullscreen } from './useFullscreen';
 import { useImport } from './useImport';
 import { usePagination } from './usePagination';
@@ -109,7 +108,7 @@ const props = withDefaults(defineProps<TableProps>(), {
   isCompare: false,
 });
 
-const emit = defineEmits(['change', 'select', 'addDiffCount']);
+const emit = defineEmits(['change', 'select', 'addDiffCount', 'add']);
 
 const modelName = computed(() => props.name || props.config.name || '');
 const tMagicTableRef = useTemplateRef<InstanceType<typeof TMagicTable>>('tMagicTable');
@@ -119,22 +118,13 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
   modelName,
 );
 
-const { nextZIndex } = useZIndex();
 const updateKey = ref(1);
-const fullscreenZIndex = ref(nextZIndex());
 
-const { newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName, updateKey);
-const { isFullscreen, toggleFullscreen } = useFullscreen();
+const { isFullscreen, fullscreenZIndex, toggleFullscreen } = useFullscreen();
 
-watch(isFullscreen, (value) => {
-  if (value) {
-    fullscreenZIndex.value = nextZIndex();
-  }
-});
-
-const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
+const { importable, excelHandler, clearHandler } = useImport(props, emit);
 const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 
 const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));

package/src/containers/table/useFullscreen.ts

@@ -0,0 +1,31 @@
+import { ref, watch } from 'vue';
+
+import { useZIndex } from '@tmagic/design';
+
+export const useFullscreen = () => {
+  const { nextZIndex } = useZIndex();
+
+  const fullscreenZIndex = ref(nextZIndex());
+
+  const isFullscreen = ref(false);
+
+  const toggleFullscreen = () => {
+    if (isFullscreen.value) {
+      isFullscreen.value = false;
+    } else {
+      isFullscreen.value = true;
+    }
+  };
+
+  watch(isFullscreen, (value) => {
+    if (value) {
+      fullscreenZIndex.value = nextZIndex();
+    }
+  });
+
+  return {
+    isFullscreen,
+    fullscreenZIndex,
+    toggleFullscreen,
+  };
+};

package/src/{table → containers/table}/useImport.ts

@@ -8,8 +8,7 @@ import type { TableProps } from './type';
 
 export const useImport = (
   props: TableProps,
-  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
-  newHandler: (row: any) => void,
+  emit: (event: 'select' | 'change' | 'addDiffCount' | 'add', ...args: any[]) => void,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
   const modelName = computed(() => props.name || props.config.name || '');
@@ -41,9 +40,7 @@ export const useImport = (
       pdata.SheetNames.forEach((sheetName: string) => {
         const arr = (globalThis as any).XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
         if (arr?.[0]) {
-          arr.forEach((row: any) => {
-            newHandler(row);
-          });
+          emit('add', arr);
         }
         setTimeout(() => {
           excelBtn.value?.clearFiles();

package/src/{table → containers/table}/usePagination.ts

@@ -1,6 +1,6 @@
 import { computed, type Ref, ref } from 'vue';
 
-import { getDataByPage } from '../utils/form';
+import { getDataByPage } from '../../utils/form';
 
 import type { TableProps } from './type';
 

package/src/{table → containers/table}/useSortable.ts

@@ -4,7 +4,7 @@ import type { default as SortableType, SortableEvent } from 'sortablejs';
 import { type TMagicTable } from '@tmagic/design';
 import type { FormState } from '@tmagic/form-schema';
 
-import { sortArray } from '../utils/form';
+import { sortArray } from '../../utils/form';
 
 import type { TableProps } from './type';
 

package/src/{table → containers/table}/useTableColumns.ts

@@ -5,9 +5,9 @@ import { cloneDeep } from 'lodash-es';
 import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import type { FormItemConfig, FormState, TableColumnConfig } from '@tmagic/form-schema';
 
-import Container from '../containers/Container.vue';
-import type { ContainerChangeEventData } from '../schema';
-import { display as displayFunc, getDataByPage, sortArray } from '../utils/form';
+import type { ContainerChangeEventData } from '../../schema';
+import { display as displayFunc, getDataByPage, sortArray } from '../../utils/form';
+import Container from '../Container.vue';
 
 import ActionsColumn from './ActionsColumn.vue';
 import SortColumn from './SortColumn.vue';
@@ -187,7 +187,7 @@ export const useTableColumns = (
         columns.push({
           props: {
             prop: column.name,
-            label: column.label,
+            label: column.label || column.text,
             width: column.width,
             sortable: column.sortable,
             sortOrders: ['ascending', 'descending'],
@@ -223,7 +223,10 @@ export const useTableColumns = (
                             gap: '5px',
                           },
                         },
-                        [h('span', column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })],
+                        [
+                          h('span', column.label || column.text),
+                          h(TMagicIcon, {}, { default: () => h(WarningFilled) }),
+                        ],
                       ),
                     content: () =>
                       h('div', {

package/src/containers/{TableGroupList.vue → table-group-list/TableGroupList.vue}

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="displayMode === 'table' ? MFormTable : MFormGroupList"
+    ref="tableGroupList"
     v-bind="$attrs"
     :model="model"
     :name="`${name}`"
@@ -17,6 +18,7 @@
     @change="onChange"
     @select="onSelect"
     @addDiffCount="onAddDiffCount"
+    @add="onAdd"
   >
     <template #toggle-button>
       <TMagicButton
@@ -29,16 +31,15 @@
       </TMagicButton>
     </template>
 
-    <template #add-button="{ trigger }">
+    <template #add-button v-if="addable">
       <TMagicButton
-        v-if="addable"
         :class="displayMode === 'table' ? 'm-form-table-add-button' : ''"
         :size="addButtonSize"
         :plain="displayMode === 'table'"
         :icon="Plus"
         :disabled="disabled"
         v-bind="currentConfig.addButtonConfig?.props || { type: 'primary' }"
-        @click="trigger"
+        @click="newHandler"
       >
         {{ currentConfig.addButtonConfig?.text || (displayMode === 'table' ? '新增一行' : '新增') }}
       </TMagicButton>
@@ -47,16 +48,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { Grid, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
-import type { FormState, GroupListConfig, TableConfig } from '@tmagic/form-schema';
+import type { GroupListConfig, TableConfig } from '@tmagic/form-schema';
 
-import type { ContainerChangeEventData } from '../schema';
+import type { ContainerChangeEventData } from '../../schema';
+import MFormGroupList from '../GroupList.vue';
 import MFormTable from '../table/Table.vue';
 
-import MFormGroupList from './GroupList.vue';
+import { useAdd } from './useAdd';
 
 defineOptions({
   name: 'MFormTableGroupList',
@@ -81,28 +83,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change', 'select', 'addDiffCount']);
 
-const mForm = inject<FormState | undefined>('mForm');
-
-const addable = computed(() => {
-  const modelName = props.name || props.config.name || '';
-
-  if (!modelName) return false;
-
-  if (!props.model[modelName].length) {
-    return true;
-  }
-
-  if (typeof props.config.addable === 'function') {
-    return props.config.addable(mForm, {
-      model: props.model[modelName],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  }
-
-  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
-});
+const { addable, newHandler } = useAdd(props, emit);
 
 const isGroupListType = (type: string | undefined) => type === 'groupList' || type === 'group-list';
 
@@ -178,4 +159,15 @@ const toggleDisplayMode = () => {
 const onChange = (v: any, eventData?: ContainerChangeEventData) => emit('change', v, eventData);
 const onSelect = (...args: any[]) => emit('select', ...args);
 const onAddDiffCount = () => emit('addDiffCount');
+const onAdd = (rows: any[]) => {
+  rows.forEach((row: any) => {
+    newHandler(row);
+  });
+};
+
+const tableGroupListRef = useTemplateRef<InstanceType<typeof MFormTable>>('tableGroupList');
+
+defineExpose({
+  toggleRowSelection: (row: any, selected: boolean) => tableGroupListRef.value?.toggleRowSelection?.(row, selected),
+});
 </script>

package/src/{table → containers/table-group-list}/useAdd.ts

@@ -1,18 +1,43 @@
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormConfig, FormState } from '@tmagic/form-schema';
+import type { FormConfig, FormState, TableConfig, TableGroupListCommonConfig } from '@tmagic/form-schema';
 
-import { initValue } from '../utils/form';
-
-import type { TableProps } from './type';
+import { initValue } from '../../utils/form';
+import type { TableProps } from '../table/type';
 
 export const useAdd = (
-  props: TableProps,
-  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  props: Pick<TableProps, 'name' | 'model' | 'prop' | 'sortKey'> & {
+    config: Pick<TableGroupListCommonConfig, 'addable' | 'max' | 'beforeAddRow' | 'defaultAdd' | 'enum'> &
+      Pick<TableConfig, 'key' | 'name'> & {
+        items: { name?: string | number }[];
+      };
+  },
+  emit: (event: 'change', ...args: any[]) => void,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
+  const addable = computed(() => {
+    const modelName = props.name || props.config.name || '';
+
+    if (!modelName) return false;
+
+    if (!props.model[modelName].length) {
+      return true;
+    }
+
+    if (typeof props.config.addable === 'function') {
+      return props.config.addable(mForm, {
+        model: props.model[modelName],
+        formValue: mForm?.values,
+        prop: props.prop,
+        config: props.config,
+      });
+    }
+
+    return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+  });
+
   const newHandler = async (row?: any) => {
     const modelName = props.name || props.config.name || '';
 
@@ -91,6 +116,7 @@ export const useAdd = (
   };
 
   return {
+    addable,
     newHandler,
   };
 };

package/src/index.ts

@@ -32,9 +32,9 @@ export { default as MFlexLayout } from './containers/FlexLayout.vue';
 export { default as MPanel } from './containers/Panel.vue';
 export { default as MRow } from './containers/Row.vue';
 export { default as MTabs } from './containers/Tabs.vue';
-export { default as MTable } from './containers/TableGroupList.vue';
-export { default as MGroupList } from './containers/TableGroupList.vue';
-export { default as MTableGroupList } from './containers/TableGroupList.vue';
+export { default as MTable } from './containers/table-group-list/TableGroupList.vue';
+export { default as MGroupList } from './containers/table-group-list/TableGroupList.vue';
+export { default as MTableGroupList } from './containers/table-group-list/TableGroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
 export { default as MNumberRange } from './fields/NumberRange.vue';

package/src/plugin.ts

@@ -24,7 +24,7 @@ import FlexLayout from './containers/FlexLayout.vue';
 import Panel from './containers/Panel.vue';
 import Row from './containers/Row.vue';
 import MStep from './containers/Step.vue';
-import TableGroupList from './containers/TableGroupList.vue';
+import TableGroupList from './containers/table-group-list/TableGroupList.vue';
 import Tabs from './containers/Tabs.vue';
 import Cascader from './fields/Cascader.vue';
 import Checkbox from './fields/Checkbox.vue';

package/types/index.d.ts

@@ -1072,7 +1072,7 @@ declare const __VLS_export$21: _$_vue_runtime_core0.DefineComponent<__VLS_Props$
 }, {}, {}, {}, string, _$_vue_runtime_core0.ComponentProvideOptions, false, {}, any>;
 declare const _default$26: typeof __VLS_export$21;
 //#endregion
-//#region temp/packages/form/src/containers/TableGroupList.vue.d.ts
+//#region temp/packages/form/src/containers/table-group-list/TableGroupList.vue.d.ts
 type __VLS_Props$20 = {
   model: any;
   lastValues?: any;
@@ -1088,7 +1088,9 @@ type __VLS_Props$20 = {
   sortKey?: string;
   sort?: boolean;
 };
-declare const __VLS_export$20: _$_vue_runtime_core0.DefineComponent<__VLS_Props$20, {}, {}, {}, {}, _$_vue_runtime_core0.ComponentOptionsMixin, _$_vue_runtime_core0.ComponentOptionsMixin, {
+declare const __VLS_export$20: _$_vue_runtime_core0.DefineComponent<__VLS_Props$20, {
+  toggleRowSelection: (row: any, selected: boolean) => void | undefined;
+}, {}, {}, {}, _$_vue_runtime_core0.ComponentOptionsMixin, _$_vue_runtime_core0.ComponentOptionsMixin, {
   change: (...args: any[]) => void;
   select: (...args: any[]) => void;
   addDiffCount: (...args: any[]) => void;

package/dist/es/table/useFullscreen.js

@@ -1,15 +0,0 @@
-import { ref } from "vue";
-//#region packages/form/src/table/useFullscreen.ts
-var useFullscreen = () => {
-	const isFullscreen = ref(false);
-	const toggleFullscreen = () => {
-		if (isFullscreen.value) isFullscreen.value = false;
-		else isFullscreen.value = true;
-	};
-	return {
-		isFullscreen,
-		toggleFullscreen
-	};
-};
-//#endregion
-export { useFullscreen };

package/src/table/useFullscreen.ts

@@ -1,18 +0,0 @@
-import { ref } from 'vue';
-
-export const useFullscreen = () => {
-  const isFullscreen = ref(false);
-
-  const toggleFullscreen = () => {
-    if (isFullscreen.value) {
-      isFullscreen.value = false;
-    } else {
-      isFullscreen.value = true;
-    }
-  };
-
-  return {
-    isFullscreen,
-    toggleFullscreen,
-  };
-};