@tmagic/form 1.5.12 → 1.5.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.12",
+  "version": "1.5.14",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,8 +51,8 @@
   "peerDependencies": {
     "vue": ">=3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.12",
-    "@tmagic/utils": "1.5.12"
+    "@tmagic/design": "1.5.14",
+    "@tmagic/utils": "1.5.14"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -63,7 +63,7 @@ const props = withDefaults(
     keyProp?: string;
     popperClass?: string;
     preventSubmitDefault?: boolean;
-    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
@@ -101,7 +101,7 @@ const formState: FormState = reactive<FormState>({
   parentValues: props.parentValues,
   values,
   lastValuesProcessed,
-  $emit: emit as (event: string, ...args: any[]) => void,
+  $emit: emit as (_event: string, ..._args: any[]) => void,
   fields,
   setField: (prop: string, field: any) => fields.set(prop, field),
   getField: (prop: string) => fields.get(prop),

package/src/FormDrawer.vue

@@ -82,7 +82,7 @@ withDefaults(
     labelPosition?: string;
     preventSubmitDefault?: boolean;
     /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
-    beforeClose?: (done: (cancel?: boolean) => void) => void;
+    beforeClose?: (_done: (_cancel?: boolean) => void) => void;
   }>(),
   {
     closeOnPressEscape: true,

package/src/containers/Container.vue

@@ -228,6 +228,7 @@ import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import type { ChildConfig, ContainerChangeEventData, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
@@ -423,6 +424,12 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
           prop: itemProp.value,
           config: props.config,
           changeRecords: newChangeRecords,
+          setModel: (key: string, value: any) => {
+            setValueByKeyPath(key, value, props.model);
+            if (props.config.name) {
+              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
+            }
+          },
         })) ?? value;
     }
     value = trimHandler(trim, value) ?? value;
@@ -445,7 +452,6 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
     delete eventData.modifyKey;
   } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
     // field内容下包含field-link时，model===value, 这里避免循环引用
-    // eslint-disable-next-line vue/no-mutating-props
     props.model[name.value] = value;
   }
 

package/src/containers/Table.vue

@@ -273,22 +273,18 @@ const isFullscreen = ref(false);
 
 const modelName = computed(() => props.name || props.config.name || '');
 
-const data = computed(() =>
-  props.config.pagination
-    ? (props.model[modelName.value] || []).filter(
-        (item: any, index: number) =>
-          index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
-      )
-    : props.model[modelName.value],
-);
+const getDataByPage = (data: any[] = []) =>
+  data.filter(
+    (item: any, index: number) =>
+      index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
+  );
+
+const pageinationData = computed(() => getDataByPage(props.model[modelName.value]));
+
+const data = computed(() => (props.config.pagination ? pageinationData.value : props.model[modelName.value]));
 
 const lastData = computed(() =>
-  props.config.pagination
-    ? (props.lastValues[modelName.value] || []).filter(
-        (item: any, index: number) =>
-          index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
-      )
-    : props.lastValues[modelName.value] || [],
+  props.config.pagination ? getDataByPage(props.lastValues[modelName.value]) : props.lastValues[modelName.value] || [],
 );
 
 const sortChange = ({ prop, order }: SortProp) => {
@@ -320,6 +316,8 @@ const rowDrop = () => {
   }
   sortable = Sortable.create(tBodyEl, {
     draggable: '.tmagic-design-table-row',
+    filter: 'input', // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
+    preventOnFilter: false, // 允许选字
     direction: 'vertical',
     onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
       if (typeof newIndex === 'undefined') return;

package/src/containers/Tabs.vue

@@ -41,21 +41,21 @@
           config.dynamic
             ? (name ? model[name] : model)[tabIndex]
             : tab.name
-            ? (name ? model[name] : model)[tab.name]
-            : name
-            ? model[name]
-            : model
+              ? (name ? model[name] : model)[tab.name]
+              : name
+                ? model[name]
+                : model
         "
         :last-values="
           isEmpty(lastValues)
             ? {}
             : config.dynamic
-            ? (name ? lastValues[name] : lastValues)[tabIndex]
-            : tab.name
-            ? (name ? lastValues[name] : lastValues)[tab.name]
-            : name
-            ? lastValues[name]
-            : lastValues
+              ? (name ? lastValues[name] : lastValues)[tabIndex]
+              : tab.name
+                ? (name ? lastValues[name] : lastValues)[tab.name]
+                : name
+                  ? lastValues[name]
+                  : lastValues
         "
         :is-compare="isCompare"
         :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"

package/src/fields/Display.vue

@@ -13,7 +13,6 @@ defineOptions({
 const props = defineProps<FieldProps<DisplayConfig>>();
 
 if (props.config.initValue && props.model) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
   props.model[props.name] = props.config.initValue;
 }
 

package/src/fields/Select.vue

@@ -21,7 +21,7 @@
   >
     <template v-if="config.group">
       <component
-        v-for="(group, index) in (options as SelectGroupOption[])"
+        v-for="(group, index) in options as SelectGroupOption[]"
         :key="index"
         :is="optionGroupComponent?.component || 'el-option-group'"
         v-bind="
@@ -55,7 +55,7 @@
     </template>
     <template v-else>
       <component
-        v-for="option in (options as SelectOption[])"
+        v-for="option in options as SelectOption[]"
         class="tmagic-design-option"
         :key="config.valueKey ? option.value[config.valueKey] : option.value"
         :is="optionComponent?.component || 'el-option'"

package/src/fields/Timerange.vue

@@ -31,7 +31,6 @@ const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-// eslint-disable-next-line vue/no-setup-props-destructure
 const { names } = props.config;
 const value = ref<(Date | undefined)[] | null>([]);
 

package/src/index.ts

@@ -101,7 +101,6 @@ export default {
   install(app: App, opt: FormInstallOptions = {}) {
     const option = Object.assign(defaultInstallOpt, opt);
 
-    // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$MAGIC_FORM = option;
     setConfig(option);
 

package/src/schema.ts

@@ -196,6 +196,7 @@ export interface OnChangeHandlerData {
   config: any;
   prop: string;
   changeRecords: ChangeRecord[];
+  setModel: (prop: string, value: any) => void;
 }
 
 export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;

package/src/utils/form.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-param-reassign */
 import { toRaw } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';