@tmagic/form 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,7 @@
 {
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "name": "@tmagic/form",
+  "sideEffects": false,
   "main": "dist/tmagic-form.umd.js",
   "module": "dist/tmagic-form.es.js",
   "style": "dist/style.css",
@@ -27,7 +28,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.2",
+    "@tmagic/utils": "^1.0.0-beta.3",
     "element-plus": "^2.0.2",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",

package/src/containers/Table.vue

@@ -21,7 +21,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="50" :fixed="config.fixed === false ? undefined : 'left'">
+          <el-table-column label="操作" width="60" :fixed="config.fixed === false ? undefined : 'left'">
             <template v-slot="scope">
               <el-button
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -33,7 +33,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="70">
+          <el-table-column v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
             <template v-slot="scope">
               <el-tooltip
                 content="点击上移，双击置顶"
@@ -74,7 +74,7 @@
             width="45"
           ></el-table-column>
 
-          <el-table-column width="50" label="序号">
+          <el-table-column width="60" label="序号">
             <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
           </el-table-column>
 
@@ -107,10 +107,10 @@
       </el-tooltip>
       <slot></slot>
       <el-button v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</el-button> &nbsp;
-      <el-button icon="el-icon-s-grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
+      <el-button :icon="Grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
         >展开配置</el-button
       >
-      <el-button icon="el-icon-s-grid" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
+      <el-button :icon="FullScreen" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
         {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
       </el-button>
       <el-upload
@@ -145,7 +145,7 @@
 <script lang="ts">
 /* eslint-disable no-param-reassign */
 import { computed, defineComponent, inject, onMounted, PropType, ref, toRefs } from 'vue';
-import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons';
+import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons';
 import { ElMessage, ElTable, ElUpload } from 'element-plus';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
@@ -396,6 +396,8 @@ export default defineComponent({
       ArrowDown,
       ArrowUp,
       Delete,
+      FullScreen,
+      Grid,
 
       data: computed(() =>
         props.model[modelName.value].filter(

package/src/theme/table.scss

@@ -35,7 +35,6 @@
   }
 
   .el-table {
-    td,
     th {
       padding: 0 !important;
     }

package/dist/style.css

@@ -1,161 +0,0 @@
-.m-form-dialog .el-dialog__body {
-  padding: 0 !important;
-}
-.m-form-dialog .m-dialog-body {
-  padding: 0 20px;
-}
-.m-form-dialog .el-table .m-form-item .el-form-item {
-  margin-bottom: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-
-.m-form,
-.m-form-panel.el-card .el-card__body {
-  color: #333;
-  background-color: #fff;
-}
-
-.m-form .m-form-tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.m-form .m-form-schematic {
-  max-width: 50%;
-  height: 100%;
-}
-
-.el-table .cell > div.m-form-container {
-  display: block;
-}
-
-.magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
-  display: none;
-}
-
-div.m-fields-link {
-  width: fit-content;
-}
-
-fieldset.m-fieldset {
-  position: relative;
-  border: 1px solid #e5e5e5;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  min-inline-size: auto;
-}
-fieldset.m-fieldset legend {
-  font-size: 14px;
-  position: absolute;
-  border: 0;
-  top: -10px;
-  left: 20px;
-  background: white;
-  width: auto;
-  padding: 0px 3px;
-  font-weight: bold;
-  line-height: 20px;
-}
-fieldset.m-fieldset .m-form-tip {
-  margin-left: 5px;
-}
-
-.m-fields-group-list .el-button--text {
-  padding: 0;
-  margin-bottom: 7px;
-}
-.m-fields-group-list .el-tree-node__expand-icon {
-  padding: 0;
-  margin-bottom: 7px;
-}
-.m-fields-group-list .el-tree-node__expand-icon.expand {
-  transform: rotate(90deg);
-}
-.m-fields-group-list .m-fields-group-list-item {
-  border-bottom: 1px solid #ebeef5;
-  margin-bottom: 7px;
-}
-.m-fields-group-list .m-fields-group-list-item:last-of-type {
-  border-bottom: 0;
-}
-
-.m-form-panel .el-card__header:hover {
-  background: #f2f6fc;
-}
-.m-form-panel .el-card__header a {
-  color: #409eff;
-}
-.m-form-panel .el-card__body {
-  padding: 10px;
-}
-.m-form-panel .m-form-tip {
-  margin-left: 5px;
-}
-
-.m-fields-table {
-  width: 100%;
-}
-.m-fields-table.fixed {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-}
-.m-fields-table.fixed::before {
-  content: " ";
-  display: block;
-  background: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-}
-.m-fields-table.fixed > .el-form-item__content {
-  z-index: 101;
-  position: relative;
-  margin: 10vh auto;
-  max-width: fit-content;
-}
-.m-fields-table.fixed table {
-  width: 95vw !important;
-}
-.m-fields-table th {
-  background-color: #f2f2f2 !important;
-  color: #333 !important;
-}
-.m-fields-table .el-table td,
-.m-fields-table .el-table th {
-  padding: 0 !important;
-}
-.m-fields-table .el-table__column--dropable {
-  cursor: move;
-}
-.m-fields-table .el-form-item__content .el-input-group {
-  vertical-align: middle;
-}
-.m-fields-table.m-fields-table-item-extra tr.expanded td {
-  border-bottom: 0;
-}
-.m-fields-table .el-table__expanded-cell .m-form-tip {
-  margin-left: 80px;
-}
-.m-fields-table .el-form-item {
-  margin-bottom: 0;
-}
-
-.m-select {
-  width: 100%;
-}