@tmagic/form 1.3.0-alpha.2 → 1.3.0-alpha.20

package/src/containers/Table.vue

@@ -1,162 +1,160 @@
 <template>
   <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>
-    <div class="el-form-item__content">
-      <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"
+    <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'"
         >
-          <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-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
-            label="操作"
-            :width="config.operateColWidth || 55"
-            align="center"
-            :fixed="config.fixed === false ? undefined : 'left'"
-          >
-            <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="selection"
+          align="center"
+          header-align="center"
+          type="selection"
+          width="45"
+        ></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 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="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>
+            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 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>
-      <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-        >添加</TMagicButton
-      >
-      &nbsp;
-      <TMagicButton
-        :icon="Grid"
-        size="small"
-        type="primary"
-        @click="toggleMode"
-        v-if="enableToggleMode && !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
-      >&nbsp;
-      <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
-        >清空</TMagicButton
-      >
-    </div>
+        </template>
+      </TMagicTable>
+    </TMagicTooltip>
+    <slot></slot>
+    <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+      >新增一行</TMagicButton
+    >
+    &nbsp;
+    <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
+    >&nbsp;
+    <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+      >清空</TMagicButton
+    >
 
     <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination
@@ -174,7 +172,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormTable">
+<script setup lang="ts">
 import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
@@ -197,6 +195,10 @@ import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTable',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;

package/src/containers/Tabs.vue

@@ -2,13 +2,13 @@
   <component
     v-model="activeTabName"
     v-bind="
-      tabsComponent.props({
+      tabsComponent?.props({
         type: config.tabType,
         editable: config.editable || false,
         tabPosition: config.tabPosition || 'top',
-      })
+      }) || {}
     "
-    :is="tabsComponent.component"
+    :is="tabsComponent?.component || 'el-tabs'"
     :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
     @tab-click="tabClickHandler"
     @tab-add="onTabAdd"
@@ -16,9 +16,11 @@
   >
     <component
       v-for="(tab, tabIndex) in tabs"
-      :is="tabPaneComponent.component"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-      v-bind="tabPaneComponent.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })"
+      v-bind="
+        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+      "
     >
       <template #label>
         <span>
@@ -67,7 +69,7 @@
   </component>
 </template>
 
-<script setup lang="ts" name="MFormTabs">
+<script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
@@ -78,12 +80,16 @@ import { display as displayFunc, filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTabs',
+});
+
 type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;

package/src/fields/Cascader.vue

@@ -14,26 +14,20 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts" name="MFormCascader">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
 
-import { CascaderConfig, FormState } from '../schema';
+import type { CascaderConfig, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: CascaderConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormCascader',
+});
+
+const props = defineProps<FieldProps<CascaderConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Checkbox.vue

@@ -10,25 +10,19 @@
   >
 </template>
 
-<script setup lang="ts" name="MFormCheckbox">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { CheckboxConfig } from '../schema';
+import type { CheckboxConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: CheckboxConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormCheckbox',
+});
+
+const props = defineProps<FieldProps<CheckboxConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/CheckboxGroup.vue

@@ -11,26 +11,20 @@
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup name="MFormCheckGroup">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import { CheckboxGroupConfig, FormState } from '../schema';
+import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
-import { filterFunction } from '..';
-
-const props = defineProps<{
-  config: CheckboxGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+
+defineOptions({
+  name: 'MFormCheckGroup',
+});
+
+const props = defineProps<FieldProps<CheckboxGroupConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/ColorPicker.vue

@@ -8,25 +8,21 @@
   ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup name="MFormColorPicker">
+<script lang="ts" setup>
 import { TMagicColorPicker } from '@tmagic/design';
 
-import { ColorPickConfig } from '../schema';
+import type { ColorPickConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: ColorPickConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormColorPicker',
+});
+
+const props = defineProps<FieldProps<ColorPickConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Date.vue

@@ -6,31 +6,27 @@
     :placeholder="config.placeholder"
     :disabled="disabled"
     :format="config.format"
-    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDate">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateConfig } from '../schema';
+import type { DateConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: DateConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormDate',
+});
+
+const props = defineProps<FieldProps<DateConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/DateTime.vue

@@ -6,33 +6,29 @@
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    :format="config.format || 'YYYY-MM-DD HH:mm:ss'"
-    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :format="config.format || 'YYYY/MM/DD HH:mm:ss'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :default-time="config.defaultTime"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateTime">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateTimeConfig } from '../schema';
+import type { DateTimeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: DateTimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormDateTime',
+});
+
+const props = defineProps<FieldProps<DateTimeConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Daterange.vue

@@ -13,26 +13,20 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateRange">
+<script lang="ts" setup>
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DaterangeConfig } from '../schema';
+import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: DaterangeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormDateRange',
+});
+
+const props = defineProps<FieldProps<DaterangeConfig>>();
 
 const emit = defineEmits(['change']);