@tmagic/form 1.3.8 → 1.3.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.8",
+  "version": "1.3.10",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/design": "1.3.8",
-    "@tmagic/utils": "1.3.8",
+    "@tmagic/design": "1.3.10",
+    "@tmagic/utils": "1.3.10",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.8"

package/src/containers/Container.vue

@@ -212,7 +212,7 @@
     </template>
 
     <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <TMagicButton type="primary" size="small" :disabled="false" text @click="expandHandler">{{
+      <TMagicButton type="primary" size="small" :disabled="false" link @click="expandHandler">{{
         expand ? '收起配置' : '展开更多配置'
       }}</TMagicButton>
     </div>
@@ -312,6 +312,7 @@ const type = computed((): string => {
     });
   }
   if (type === 'form') return '';
+  if (type === 'container') return '';
   return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
 });
 

package/src/containers/GroupListItem.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="m-fields-group-list-item">
     <div>
-      <TMagicButton text :disabled="disabled" :icon="expand ? CaretBottom : CaretRight" @click="expandHandler">{{
+      <TMagicButton link :disabled="disabled" :icon="expand ? CaretBottom : CaretRight" @click="expandHandler">{{
         title
       }}</TMagicButton>
 
       <TMagicButton
         v-show="showDelete(parseInt(String(index)))"
         style="color: #f56c6c"
-        text
+        link
         :icon="Delete"
         :disabled="disabled"
         @click="removeHandler"
       ></TMagicButton>
 
       <template v-if="movable()">
-        <TMagicButton v-show="index !== 0" text :disabled="disabled" size="small" @click="changeOrder(-1)"
+        <TMagicButton v-show="index !== 0" link :disabled="disabled" size="small" @click="changeOrder(-1)"
           >上移<TMagicIcon><CaretTop /></TMagicIcon
         ></TMagicButton>
-        <TMagicButton v-show="index !== length - 1" :disabled="disabled" text size="small" @click="changeOrder(1)"
+        <TMagicButton v-show="index !== length - 1" :disabled="disabled" link size="small" @click="changeOrder(1)"
           >下移<TMagicIcon><CaretBottom /></TMagicIcon
         ></TMagicButton>
       </template>

package/src/containers/Panel.vue

@@ -6,7 +6,7 @@
   >
     <template #header>
       <div style="width: 100%; display: flex; align-items: center">
-        <TMagicButton style="padding: 0" text :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
+        <TMagicButton style="padding: 0" link :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
         </TMagicButton>
         <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
         <slot name="header">{{ filter(config.title) }}</slot>

package/src/containers/Table.vue

@@ -1,182 +1,190 @@
 <template>
-  <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>
-      <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
-        <TMagicTable
-          v-if="model[modelName]"
-          ref="tMagicTable"
-          style="width: 100%"
-          :row-key="config.rowKey || 'id'"
-          :data="data"
-          :lastData="lastData"
-          :border="config.border"
-          :max-height="config.maxHeight"
-          :default-expand-all="true"
-          :key="updateKey"
-          @select="selectHandle"
-          @sort-change="sortChange"
-        >
-          <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
-            <template v-slot="scope">
-              <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn
-            label="操作"
-            :width="config.operateColWidth || 55"
-            align="center"
-            :fixed="config.fixed === false ? undefined : 'left'"
+  <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>
+        <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+          <TMagicTable
+            v-if="model[modelName]"
+            ref="tMagicTable"
+            style="width: 100%"
+            :row-key="config.rowKey || 'id'"
+            :data="data"
+            :lastData="lastData"
+            :border="config.border"
+            :max-height="config.maxHeight"
+            :default-expand-all="true"
+            :key="updateKey"
+            @select="selectHandle"
+            @sort-change="sortChange"
           >
-            <template v-slot="scope">
-              <slot name="operateCol" :scope="scope"></slot>
-              <TMagicIcon
-                v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                class="m-table-delete-icon"
-                @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ><Delete
-              /></TMagicIcon>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
-            <template v-slot="scope">
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
-                content="点击上移，双击置顶"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowUp"
-                  :disabled="disabled"
-                  text
-                  @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
-                content="点击下移，双击置底"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowDown"
-                  :disabled="disabled"
-                  text
-                  @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn
-            v-if="selection"
-            align="center"
-            header-align="center"
-            type="selection"
-            width="45"
-          ></TMagicTableColumn>
-
-          <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
-            <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
-          </TMagicTableColumn>
+            <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+              <template v-slot="scope">
+                <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
+              </template>
+            </TMagicTableColumn>
 
-          <template v-for="(column, index) in config.items">
             <TMagicTableColumn
-              v-if="column.type !== 'hidden' && display(column.display)"
-              :prop="column.name"
-              :width="column.width"
-              :label="column.label"
-              :sortable="column.sortable"
-              :sort-orders="['ascending', 'descending']"
-              :key="column[mForm?.keyProp || '__key'] ?? index"
-              :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+              label="操作"
+              :width="config.operateColWidth || 55"
+              align="center"
+              :fixed="config.fixed === false ? undefined : 'left'"
             >
-              <template #default="scope">
-                <Container
-                  v-if="scope.$index > -1"
-                  labelWidth="0"
-                  :disabled="disabled"
-                  :prop="getProp(scope.$index)"
-                  :rules="column.rules"
-                  :config="makeConfig(column, scope.row)"
-                  :model="scope.row"
-                  :lastValues="lastData[scope.$index]"
-                  :is-compare="isCompare"
-                  :size="size"
-                  @change="$emit('change', model[modelName])"
-                  @addDiffCount="onAddDiffCount()"
-                ></Container>
+              <template v-slot="scope">
+                <slot name="operateCol" :scope="scope"></slot>
+                <TMagicIcon
+                  v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  class="m-table-delete-icon"
+                  @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  ><Delete
+                /></TMagicIcon>
               </template>
             </TMagicTableColumn>
-          </template>
-        </TMagicTable>
-      </TMagicTooltip>
-      <slot></slot>
-
-      <div style="display: flex; justify-content: space-between; margin: 10px 0">
-        <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-          >新增一行</TMagicButton
-        >
-
-        <div style="display: flex">
-          <TMagicButton
-            :icon="Grid"
-            size="small"
-            type="primary"
-            @click="toggleMode"
-            v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
-            >展开配置</TMagicButton
-          >
-          <TMagicButton
-            :icon="FullScreen"
-            size="small"
-            type="primary"
-            @click="toggleFullscreen"
-            v-if="config.enableFullscreen !== false"
-          >
-            {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
-          </TMagicButton>
-          <TMagicUpload
-            v-if="importable"
-            style="display: inline-block"
-            ref="excelBtn"
-            action="/noop"
-            :disabled="disabled"
-            :on-change="excelHandler"
-            :auto-upload="false"
-          >
-            <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
-          </TMagicUpload>
-          <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
-            >清空</TMagicButton
+
+            <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
+              <template v-slot="scope">
+                <TMagicTooltip
+                  v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
+                  content="点击上移，双击置顶"
+                  placement="top"
+                >
+                  <TMagicButton
+                    plain
+                    size="small"
+                    type="primary"
+                    :icon="ArrowUp"
+                    :disabled="disabled"
+                    link
+                    @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                    @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  ></TMagicButton>
+                </TMagicTooltip>
+                <TMagicTooltip
+                  v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
+                  content="点击下移，双击置底"
+                  placement="top"
+                >
+                  <TMagicButton
+                    plain
+                    size="small"
+                    type="primary"
+                    :icon="ArrowDown"
+                    :disabled="disabled"
+                    link
+                    @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                    @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  ></TMagicButton>
+                </TMagicTooltip>
+              </template>
+            </TMagicTableColumn>
+
+            <TMagicTableColumn
+              v-if="selection"
+              align="center"
+              header-align="center"
+              type="selection"
+              width="45"
+            ></TMagicTableColumn>
+
+            <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
+              <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
+            </TMagicTableColumn>
+
+            <template v-for="(column, index) in config.items">
+              <TMagicTableColumn
+                v-if="column.type !== 'hidden' && display(column.display)"
+                :prop="column.name"
+                :width="column.width"
+                :label="column.label"
+                :sortable="column.sortable"
+                :sort-orders="['ascending', 'descending']"
+                :key="column[mForm?.keyProp || '__key'] ?? index"
+                :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+              >
+                <template #default="scope">
+                  <Container
+                    v-if="scope.$index > -1"
+                    labelWidth="0"
+                    :disabled="disabled"
+                    :prop="getProp(scope.$index)"
+                    :rules="column.rules"
+                    :config="makeConfig(column, scope.row)"
+                    :model="scope.row"
+                    :lastValues="lastData[scope.$index]"
+                    :is-compare="isCompare"
+                    :size="size"
+                    @change="$emit('change', model[modelName])"
+                    @addDiffCount="onAddDiffCount()"
+                  ></Container>
+                </template>
+              </TMagicTableColumn>
+            </template>
+          </TMagicTable>
+        </TMagicTooltip>
+        <slot></slot>
+
+        <div style="display: flex; justify-content: space-between; margin: 10px 0">
+          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+            >新增一行</TMagicButton
           >
+
+          <div style="display: flex">
+            <TMagicButton
+              :icon="Grid"
+              size="small"
+              type="primary"
+              @click="toggleMode"
+              v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
+              >展开配置</TMagicButton
+            >
+            <TMagicButton
+              :icon="FullScreen"
+              size="small"
+              type="primary"
+              @click="toggleFullscreen"
+              v-if="config.enableFullscreen !== false"
+            >
+              {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+            </TMagicButton>
+            <TMagicUpload
+              v-if="importable"
+              style="display: inline-block"
+              ref="excelBtn"
+              action="/noop"
+              :disabled="disabled"
+              :on-change="excelHandler"
+              :auto-upload="false"
+            >
+              <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
+            </TMagicUpload>
+            <TMagicButton
+              v-if="importable"
+              size="small"
+              type="warning"
+              :disabled="disabled"
+              plain
+              @click="clearHandler()"
+              >清空</TMagicButton
+            >
+          </div>
         </div>
-      </div>
 
-      <div class="bottom" style="text-align: right" v-if="config.pagination">
-        <TMagicPagination
-          layout="total, sizes, prev, pager, next, jumper"
-          :hide-on-single-page="model[modelName].length < pagesize"
-          :current-page="pagecontext + 1"
-          :page-sizes="[pagesize, 60, 120, 300]"
-          :page-size="pagesize"
-          :total="model[modelName].length"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        >
-        </TMagicPagination>
+        <div class="bottom" style="text-align: right" v-if="config.pagination">
+          <TMagicPagination
+            layout="total, sizes, prev, pager, next, jumper"
+            :hide-on-single-page="model[modelName].length < pagesize"
+            :current-page="pagecontext + 1"
+            :page-sizes="[pagesize, 60, 120, 300]"
+            :page-size="pagesize"
+            :total="model[modelName].length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+          </TMagicPagination>
+        </div>
       </div>
-    </div>
-  </teleport>
+    </teleport>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -194,6 +202,7 @@ import {
   TMagicTableColumn,
   TMagicTooltip,
   TMagicUpload,
+  useZIndex,
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
@@ -238,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>();
@@ -612,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 type="text" 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 {