@tmagic/form 1.3.9 → 1.3.11

package/src/containers/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <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 }">
         <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
@@ -54,7 +54,7 @@
                     type="primary"
                     :icon="ArrowUp"
                     :disabled="disabled"
-                    text
+                    link
                     @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                     @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   ></TMagicButton>
@@ -70,7 +70,7 @@
                     type="primary"
                     :icon="ArrowDown"
                     :disabled="disabled"
-                    text
+                    link
                     @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                     @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   ></TMagicButton>
@@ -202,6 +202,7 @@ import {
   TMagicTableColumn,
   TMagicTooltip,
   TMagicUpload,
+  useZIndex,
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
@@ -246,6 +247,8 @@ const emit = defineEmits(['change', 'select', 'addDiffCount']);
 let timer: any | null = null;
 const mForm = inject<FormState | undefined>('mForm');
 
+const { nextZIndex } = useZIndex();
+
 const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 const excelBtn = ref<InstanceType<typeof TMagicUpload>>();
 const mTable = ref<HTMLDivElement>();
@@ -620,11 +623,14 @@ const toggleMode = () => {
 };
 
 const toggleFullscreen = () => {
+  if (!mTable.value) return;
+
   if (isFullscreen.value) {
-    mTable.value?.classList.remove('fixed');
+    mTable.value.classList.remove('fixed');
     isFullscreen.value = false;
   } else {
-    mTable.value?.classList.add('fixed');
+    mTable.value.classList.add('fixed');
+    mTable.value.style.zIndex = `${nextZIndex()}`;
     isFullscreen.value = true;
   }
 };

package/src/fields/Link.vue

@@ -2,7 +2,7 @@
   <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
   <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
   <div v-else class="m-fields-link">
-    <TMagicButton :text="true" type="primary" @click="editHandler">点击编辑</TMagicButton>
+    <TMagicButton link type="primary" @click="editHandler">点击编辑</TMagicButton>
     <FormDialog
       ref="editor"
       :title="config.formTitle || '编辑扩展配置'"

package/src/fields/Text.vue

@@ -1,32 +1,43 @@
 <template>
-  <TMagicInput
-    v-model="model[name]"
-    clearable
-    :size="size"
-    :placeholder="config.placeholder"
-    :disabled="disabled"
-    @change="changeHandler"
-    @input="inputHandler"
-    @keyup="keyUpHandler($event)"
-  >
-    <template #append v-if="config.append">
-      <span v-if="typeof config.append === 'string'">{{ config.append }}</span>
-      <TMagicButton
-        v-if="typeof config.append === 'object' && config.append.type === 'button'"
-        style="color: #409eff"
+  <TMagicPopover :visible="popoverVisible" width="220px">
+    <template #reference>
+      <TMagicInput
+        v-model="model[name]"
+        clearable
         :size="size"
-        @click.prevent="buttonClickHandler"
+        :placeholder="config.placeholder"
+        :disabled="disabled"
+        @change="changeHandler"
+        @input="inputHandler"
+        @keyup="keyUpHandler($event)"
       >
-        {{ config.append.text }}
-      </TMagicButton>
+        <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>
-  </TMagicInput>
+
+    <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>
+    </div>
+  </TMagicPopover>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 
-import { TMagicButton, TMagicInput } from '@tmagic/design';
+import { TMagicButton, TMagicInput, TMagicPopover } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
 import type { FieldProps, FormState, TextConfig } from '../schema';
@@ -47,20 +58,53 @@ useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
+const appendConfig = computed(() => {
+  if (typeof props.config.append === 'string') {
+    return {
+      text: props.config.append,
+      type: 'button',
+      handler: undefined,
+    };
+  }
+
+  if (props.config.append && typeof props.config.append === 'object') {
+    if (props.config.append.value === 0) {
+      return false;
+    }
+
+    return props.config.append;
+  }
+
+  return false;
+});
+
+const popoverVisible = ref(false);
+
+const confirmTrimHandler = () => {
+  emit('change', props.model[props.name].trim() || '');
+  popoverVisible.value = false;
+};
+
+const checkWhiteSpace = (value: unknown) => {
+  if (typeof value === 'string' && !props.config.trim) {
+    popoverVisible.value = value.trim() !== value;
+  }
+};
+
 const changeHandler = (value: string) => {
   emit('change', value);
 };
 
 const inputHandler = (v: string) => {
+  checkWhiteSpace(v);
   emit('input', v);
   mForm?.$emit('field-input', props.prop, v);
 };
 
 const buttonClickHandler = () => {
-  if (typeof props.config.append === 'string') return;
-
-  if (props.config.append?.handler) {
-    props.config.append.handler(mForm, {
+  if (!appendConfig.value) return;
+  if (typeof appendConfig.value.handler === 'function') {
+    appendConfig.value.handler(mForm, {
       model: props.model,
       values: mForm?.values,
     });

package/src/index.ts

@@ -49,6 +49,7 @@ import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
+import type { FormConfig } from './schema';
 
 import './theme/index.scss';
 
@@ -88,6 +89,10 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
+export const createForm = function (config: FormConfig) {
+  return config;
+};
+
 export interface InstallOptions {
   [key: string]: any;
 }

package/src/schema.ts

@@ -320,8 +320,9 @@ export interface TextConfig extends FormItem, Input {
     | string
     | {
         text: string;
+        value?: 0 | 1;
         type: 'button';
-        handler: (
+        handler?: (
           mForm: FormState | undefined,
           data: {
             model: any;

package/src/theme/index.scss

@@ -2,6 +2,7 @@
 @use "./form-drawer.scss";
 @use "./form.scss";
 @use "./date-time.scss";
+@use "./text.scss";
 @use "./link.scss";
 @use "./fieldset.scss";
 @use "./group-list.scss";

package/src/theme/table.scss

@@ -1,3 +1,7 @@
+.m-fields-table-wrap {
+  width: 100%;
+}
+
 .m-fields-table {
   width: 100%;
   &.fixed {

package/src/theme/text.scss

@@ -0,0 +1,6 @@
+.m-form-validate__warning {
+  color: var(--el-color-warning);
+  font-size: 12px;
+  width: 100%;
+  line-height: 1.4;
+}

package/types/index.d.ts

@@ -1,4 +1,5 @@
 import { App } from 'vue';
+import type { FormConfig } from './schema';
 import './theme/index.scss';
 export * from './schema';
 export * from './utils/form';
@@ -34,6 +35,7 @@ export { default as MLink } from './fields/Link.vue';
 export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
+export declare const createForm: (config: FormConfig) => FormConfig;
 export interface InstallOptions {
     [key: string]: any;
 }

package/types/schema.d.ts

@@ -248,8 +248,9 @@ export interface TextConfig extends FormItem, Input {
     /** 后置元素，一般为标签或按钮 */
     append?: string | {
         text: string;
+        value?: 0 | 1;
         type: 'button';
-        handler: (mForm: FormState | undefined, data: {
+        handler?: (mForm: FormState | undefined, data: {
             model: any;
             values: any;
         }) => void;