@tmagic/form 1.5.0-beta.8 → 1.5.0

package/src/containers/GroupListItem.vue

@@ -48,7 +48,7 @@ import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-v
 
 import { TMagicButton, TMagicIcon } from '@tmagic/design';
 
-import { FormState, GroupListConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -103,7 +103,9 @@ const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, p
 
 const removeHandler = () => emit('remove-item', props.index);
 
-const changeHandler = () => emit('change');
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 
 const expandHandler = () => {
   expand.value = !expand.value;

package/src/containers/Panel.vue

@@ -63,7 +63,7 @@ import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicCard } from '@tmagic/design';
 
-import { FormState, PanelConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -84,7 +84,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -94,6 +97,8 @@ const items = computed(() => props.config.items);
 
 const filter = (config: any) => filterFunction(mForm, config, props);
 
-const changeHandler = () => emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Row.vue

@@ -24,7 +24,7 @@ import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
 
-import { FormState, RowConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
@@ -45,10 +45,15 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
-const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.name ? props.model[props.name] : props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Step.vue

@@ -37,7 +37,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
 
-import { FormState, StepConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, StepConfig } from '../schema';
 
 import Container from './Container.vue';
 
@@ -48,6 +48,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     model: any;
+    name?: string;
     lastValues?: any;
     isCompare?: boolean;
     config: StepConfig;
@@ -61,7 +62,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const active = ref(1);
@@ -75,8 +79,9 @@ const stepClick = (index: number) => {
   mForm?.$emit('update:stepActive', active.value);
 };
 
-const changeHandler = () => {
-  emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
+
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Table.vue

@@ -113,7 +113,7 @@
                     :lastValues="lastData[scope.$index]"
                     :is-compare="isCompare"
                     :size="size"
-                    @change="$emit('change', model[modelName])"
+                    @change="changeHandler"
                     @addDiffCount="onAddDiffCount()"
                   ></Container>
                 </template>
@@ -206,7 +206,7 @@ import {
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
-import { FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -395,7 +395,15 @@ const newHandler = async (row?: any) => {
   }
 
   props.model[modelName.value].push(inputs);
-  emit('change', props.model[modelName.value]);
+
+  emit('change', props.model[modelName.value], {
+    changeRecords: [
+      {
+        propPath: `${props.prop}.${props.model[modelName.value].length - 1}`,
+        value: inputs,
+      },
+    ],
+  });
 };
 
 onMounted(() => {
@@ -644,6 +652,10 @@ const getProp = (index: number) => {
 
 const onAddDiffCount = () => emit('addDiffCount');
 
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
+
 defineExpose({
   toggleRowSelection,
 });

package/src/containers/Tabs.vue

@@ -71,12 +71,12 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 
 import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
-import { FormState, TabConfig, TabPaneConfig } from '../schema';
-import { display as displayFunc, filterFunction } from '../utils/form';
+import type { ContainerChangeEventData, FormState, TabConfig, TabPaneConfig } from '../schema';
+import { display as displayFunc, filterFunction, initValue } from '../utils/form';
 
 import Container from './Container.vue';
 
@@ -137,7 +137,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const activeTabName = ref(getActive(mForm, props, ''));
@@ -166,8 +169,8 @@ const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.it
 
 const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
 
-const onTabAdd = () => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+const onTabAdd = async () => {
+  if (!props.name) throw new Error('dynamic tab 必须配置name');
 
   if (typeof props.config.onTabAdd === 'function') {
     props.config.onTabAdd(mForm, {
@@ -175,17 +178,32 @@ const onTabAdd = () => {
       prop: props.prop,
       config: props.config,
     });
-  } else if (tabs.value.length > 0) {
-    const newObj = cloneDeep(tabs.value[0]);
+    emit('change', props.model);
+  } else {
+    const newObj = await initValue(mForm, {
+      config: props.config.items,
+      initValues: {},
+    });
+
     newObj.title = `标签${tabs.value.length + 1}`;
-    props.model[props.config.name].push(newObj);
+
+    props.model[props.name].push(newObj);
+
+    emit('change', props.model[props.name], {
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+          value: newObj,
+        },
+      ],
+    });
   }
-  emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+
+  mForm?.$emit('field-change', props.prop, props.model[props.name]);
 };
 
 const onTabRemove = (tabName: string) => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+  if (!props.name) throw new Error('dynamic tab 必须配置name');
 
   if (typeof props.config.onTabRemove === 'function') {
     props.config.onTabRemove(mForm, tabName, {
@@ -194,23 +212,20 @@ const onTabRemove = (tabName: string) => {
       config: props.config,
     });
   } else {
-    props.model[props.config.name].splice(+tabName, 1);
+    props.model[props.name].splice(+tabName, 1);
 
     // 防止删除后没有选中的问题
-    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
+    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
       activeTabName.value = (+activeTabName.value - 1).toString();
       tabClick(mForm, { name: activeTabName.value }, props);
     }
   }
   emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+  mForm?.$emit('field-change', props.prop, props.model[props.name]);
 };
 
-const changeHandler = () => {
-  emit('change', props.model);
-  if (typeof props.config.onChange === 'function') {
-    props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
-  }
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
 
 // 在tabs组件中收集事件触发次数，即该tab下的差异数

package/src/fields/DateTime.vue

@@ -32,9 +32,9 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-const value = props.model?.[props.name].toString();
+const value = props.model?.[props.name]?.toString();
 if (props.model) {
-  if (value === 'Invalid Date') {
+  if (!value || value === 'Invalid Date') {
     props.model[props.name] = '';
   } else {
     props.model[props.name] = datetimeFormatter(

package/src/fields/DynamicField.vue

@@ -59,7 +59,7 @@ const changeFieldMap = async () => {
     let oldVal = props.model?.[v.name] || '';
     if (!oldVal && v.defaultValue !== undefined) {
       oldVal = v.defaultValue;
-      emit('change', oldVal, v.name);
+      emit('change', oldVal, { modifyKey: v.name });
     }
     fieldMap.value[v.name] = oldVal;
     fieldLabelMap.value[v.name] = v.label || '';
@@ -85,6 +85,8 @@ onBeforeUnmount(() => {
 });
 
 const inputChangeHandler = (key: string) => {
-  emit('change', fieldMap.value[key], key);
+  emit('change', fieldMap.value[key], {
+    modifyKey: key,
+  });
 };
 </script>

package/src/fields/Text.vue

@@ -1,43 +1,48 @@
 <template>
-  <TMagicPopover width="220px" :visible="popoverVisible" :destroy-on-close="true">
-    <template #reference>
-      <TMagicInput
-        v-model="model[name]"
-        clearable
-        :size="size"
-        :placeholder="config.placeholder"
-        :disabled="disabled"
-        @change="changeHandler"
-        @input="inputHandler"
-        @keyup="keyUpHandler($event)"
-      >
-        <template #append v-if="appendConfig">
-          <TMagicButton
-            v-if="appendConfig.type === 'button'"
-            style="color: #409eff"
-            :size="size"
-            @click.prevent="buttonClickHandler"
-          >
-            {{ appendConfig.text }}
-          </TMagicButton>
-        </template>
-      </TMagicInput>
-    </template>
-
-    <div class="m-form-item__content">
-      <div class="m-form-validate__warning">输入内容前后有空格，是否移除空格？</div>
-      <div style="display: flex; justify-content: flex-end">
-        <TMagicButton link size="small" @click="popoverVisible = false">保持原样</TMagicButton>
-        <TMagicButton type="primary" size="small" @click="confirmTrimHandler">移除空格</TMagicButton>
+  <div style="width: 100%">
+    <TMagicInput
+      v-model="model[name]"
+      ref="input"
+      clearable
+      :size="size"
+      :placeholder="config.placeholder"
+      :disabled="disabled"
+      @change="changeHandler"
+      @input="inputHandler"
+      @keyup="keyUpHandler($event)"
+    >
+      <template #append v-if="appendConfig">
+        <TMagicButton
+          v-if="appendConfig.type === 'button'"
+          style="color: #409eff"
+          :size="size"
+          @click.prevent="buttonClickHandler"
+        >
+          {{ appendConfig.text }}
+        </TMagicButton>
+      </template>
+    </TMagicInput>
+
+    <Teleport to="body">
+      <div v-if="popoverVisible" class="tmagic-form-text-popper m-form-item__content" ref="popoverEl">
+        <div class="m-form-validate__warning">输入内容前后有空格，是否移除空格？</div>
+        <div style="display: flex; justify-content: flex-end">
+          <TMagicButton link size="small" @click="popoverVisible = false">保持原样</TMagicButton>
+          <TMagicButton type="primary" size="small" @click="confirmTrimHandler">移除空格</TMagicButton>
+        </div>
+        <span class="tmagic-form-text-popper-arrow" data-popper-arrow></span>
       </div>
-    </div>
-  </TMagicPopover>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, shallowRef, watch } from 'vue';
+import type { Instance } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+import { debounce } from 'lodash-es';
 
-import { TMagicButton, TMagicInput, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
 import type { FieldProps, FormState, TextConfig } from '../schema';
@@ -85,11 +90,11 @@ const confirmTrimHandler = () => {
   popoverVisible.value = false;
 };
 
-const checkWhiteSpace = (value: unknown) => {
+const checkWhiteSpace = debounce((value: unknown) => {
   if (typeof value === 'string' && !props.config.trim) {
     popoverVisible.value = value.trim() !== value;
   }
-};
+}, 300);
 
 const changeHandler = (value: string) => {
   emit('change', value);
@@ -167,4 +172,34 @@ const keyUpHandler = ($event: KeyboardEvent) => {
   props.model[props.name] = `${num}${unit || ''}`;
   emit('change', props.model[props.name]);
 };
+
+const popoverEl = ref<HTMLDivElement>();
+const input = ref<InstanceType<typeof TMagicInput>>();
+const instanceRef = shallowRef<Instance | undefined>();
+
+watch(popoverEl, (el) => {
+  destroyPopover();
+
+  if (!input.value?.$el || !el) return;
+
+  instanceRef.value = createPopper(input.value.$el, el, {
+    placement: props.config.tooltip ? 'top' : 'bottom',
+    strategy: 'absolute',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ],
+  });
+});
+
+const destroyPopover = () => {
+  if (!instanceRef.value) return;
+
+  instanceRef.value.destroy();
+  instanceRef.value = undefined;
+};
 </script>

package/src/index.ts

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

package/src/schema.ts

@@ -16,11 +16,23 @@
  * limitations under the License.
  */
 
+import type { TMagicMessage, TMagicMessageBox } from '@tmagic/design';
+
 export interface ValidateError {
   message: string;
   field: string;
 }
 
+export interface ChangeRecord {
+  propPath?: string;
+  value: any;
+}
+
+export interface ContainerChangeEventData {
+  modifyKey?: string;
+  changeRecords?: ChangeRecord[];
+}
+
 export interface FieldProps<T = any> {
   config: T;
   model: any;
@@ -49,6 +61,8 @@ export type FormState = {
   setField: (prop: string, field: any) => void;
   getField: (prop: string) => any;
   deleteField: (prop: string) => any;
+  $messageBox: TMagicMessageBox;
+  $message: TMagicMessage;
   [key: string]: any;
 };
 
@@ -157,34 +171,34 @@ export interface Input {
 export type TypeFunction = (
   mForm: FormState | undefined,
   data: {
-    model: Record<any, any>;
+    model: FormValue;
   },
 ) => string;
 
 export type FilterFunction<T = boolean> = (
   mForm: FormState | undefined,
   data: {
-    model: Record<any, any>;
-    values: Record<any, any>;
-    parent?: Record<any, any>;
-    formValue: Record<any, any>;
+    model: FormValue;
+    values: FormValue;
+    parent?: FormValue;
+    formValue: FormValue;
     prop: string;
     config: any;
     index?: number;
   },
 ) => T;
 
-type OnChangeHandler = (
-  mForm: FormState | undefined,
-  value: any,
-  data: {
-    model: Record<any, any>;
-    values: Record<any, any>;
-    parent?: Record<any, any>;
-    formValue: Record<any, any>;
-    config: any;
-  },
-) => any;
+export interface OnChangeHandlerData {
+  model: FormValue;
+  values?: FormValue;
+  parent?: FormValue;
+  formValue?: FormValue;
+  config: any;
+  prop: string;
+  changeRecords: ChangeRecord[];
+}
+
+export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
 
 type DefaultValueFunction = (mForm: FormState | undefined) => any;
 

package/src/theme/form.scss

@@ -29,13 +29,13 @@
     margin-bottom: 10px;
   }
 
-  .el-form-item.hidden {
+  .el-form-item.tmagic-form-hidden {
     > .el-form-item__label {
       display: none;
     }
   }
 
-  .t-form__item.hidden {
+  .t-form__item.tmagic-form-hidden {
     > .t-form__label {
       display: none;
     }

package/src/theme/text.scss

@@ -4,3 +4,59 @@
   width: 100%;
   line-height: 1.4;
 }
+
+.tmagic-form-text-popper {
+  min-width: 150px;
+  line-height: 1.4;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  padding: 10px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.tmagic-form-text-popper[data-popper-placement^="top"]
+  > .tmagic-form-text-popper-arrow {
+  bottom: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="bottom"]
+  > .tmagic-form-text-popper-arrow {
+  top: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="left"]
+  > .tmagic-form-text-popper-arrow {
+  right: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="right"]
+  > .tmagic-form-text-popper-arrow {
+  left: -4px;
+}
+
+.tmagic-form-text-popper-arrow,
+.tmagic-form-text-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tmagic-form-text-popper-arrow {
+  visibility: hidden;
+}
+
+.tmagic-form-text-popper-arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}