feat(grid): [grid] grid custom panel adapt to x-design

Author: gimmyhehe

examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue

@@ -14,11 +14,11 @@
         <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
       </tiny-grid-column>
     </tiny-grid-column>
-    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+    <tiny-grid-column title="描述" header-align="center">
       <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
       <tiny-grid-column
         field="area"
-        :title="renderHeaderArea"
+        title="分区"
         :editor="{ component: 'select', options }"
         sortable
         width="600"
@@ -27,7 +27,7 @@
     <tiny-grid-column :title="renderHeaderRelation" header-align="center">
       <tiny-grid-column
         field="address"
-        :title="renderHeaderAddress"
+        title="地区"
         :editor="{ component: 'input', autoselect: true }"
         sortable
         width="600"
@@ -44,7 +44,7 @@
     <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
       <tiny-grid-column
         field="address"
-        :title="renderHeaderAddress"
+        title="地区"
         :editor="{ component: 'input', autoselect: true }"
         sortable
         width="150"
@@ -165,15 +165,6 @@ const options = ref([
   { label: '华南区', value: '华南区' }
 ])
 
-function renderHeaderDescription(h) {
-  return (
-    <span>
-      {' '}
-      <TinyIconAdministrator />
-      Description
-    </span>
-  )
-}
 function renderHeaderRelation(h) {
   return (
     <span>
@@ -182,24 +173,6 @@ function renderHeaderRelation(h) {
   )
 }
 
-function renderHeaderArea(h) {
-  return (
-    <span>
-      <TinyIconMarkOn />
-      Description
-    </span>
-  )
-}
-
-function renderHeaderAddress(h) {
-  return (
-    <span>
-      <TinyIconUser />
-      Description
-    </span>
-  )
-}
-
 function rendererCellOperate(h) {
   return (
     <div style="text-align: center; font-size: 16px;">

examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue

@@ -14,11 +14,11 @@
         <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
       </tiny-grid-column>
     </tiny-grid-column>
-    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+    <tiny-grid-column title="描述" header-align="center">
       <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
       <tiny-grid-column
         field="area"
-        :title="renderHeaderArea"
+        title="分区"
         :editor="{ component: 'select', options }"
         sortable
         width="600"
@@ -27,7 +27,7 @@
     <tiny-grid-column :title="renderHeaderRelation" header-align="center">
       <tiny-grid-column
         field="address"
-        :title="renderHeaderAddress"
+        title="地区"
         :editor="{ component: 'input', autoselect: true }"
         sortable
         width="600"
@@ -44,7 +44,7 @@
     <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
       <tiny-grid-column
         field="address"
-        :title="renderHeaderAddress"
+        title="地区"
         :editor="{ component: 'input', autoselect: true }"
         sortable
         width="150"
@@ -172,17 +172,6 @@ export default {
     }
   },
   methods: {
-    renderHeaderDescription(h) {
-      const IconAdministrator = this.IconAdministrator
-
-      return (
-        <span>
-          {' '}
-          <IconAdministrator />
-          Description
-        </span>
-      )
-    },
     renderHeaderRelation(h) {
       const IconVersiontree = this.IconVersiontree
 
@@ -193,28 +182,6 @@ export default {
       )
     },
 
-    renderHeaderArea(h) {
-      const IconMarkOn = this.IconMarkOn
-
-      return (
-        <span>
-          <IconMarkOn />
-          Description
-        </span>
-      )
-    },
-
-    renderHeaderAddress(h) {
-      const IconUser = this.IconUser
-
-      return (
-        <span>
-          <IconUser />
-          Description
-        </span>
-      )
-    },
-
     rendererCellOperate(h) {
       const IconAssociation = this.IconAssociation
       const IconHelpful = this.IconHelpful

examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue

@@ -120,7 +120,7 @@ function renderHeaderRelation() {
 
 function renderHeaderArea() {
   return (
-    <span>
+    <span style="order: -1">
       <IconMarkOn />
       Description
     </span>
@@ -129,7 +129,7 @@ function renderHeaderArea() {
 
 function renderHeaderAddress() {
   return (
-    <span>
+    <span style="order: -1">
       <IconUser />
       Description
     </span>

examples/sites/demos/pc/app/grid/header/custom-grid-header.vue

@@ -132,7 +132,7 @@ export default {
       const IconMarkOn = this.IconMarkOn
 
       return (
-        <span>
+        <span style="order: -1">
           <IconMarkOn />
           Description
         </span>
@@ -143,7 +143,7 @@ export default {
       const IconUser = this.IconUser
 
       return (
-        <span>
+        <span style="order: -1">
           <IconUser />
           Description
         </span>

examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
-      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
+      <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>

examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
-      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
+      <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>

packages/theme/src/grid/custom.less

@@ -20,6 +20,10 @@
 .@{grid-custom-prefix-cls} {
   width: 100%;
 
+  .tiny-modal__header {
+    margin-bottom: 16px;
+  }
+
   & &__tabs {
     .@{css-prefix}tabs__content {
       margin: 0;
@@ -35,7 +39,7 @@
         }
 
         .@{grid-custom-prefix-cls}__setting {
-          border-bottom: 1px solid var(--ti-grid-border-color);
+          border-bottom: 1px solid transparent;
           padding: 12px 0 24px;
 
           .setting-item {
@@ -44,7 +48,7 @@
             overflow: hidden;
             position: relative;
             display: flex;
-            align-items: flex-start;
+            align-items: center;
             justify-content: space-between;
 
             .setting-icon {
@@ -122,9 +126,9 @@
   }
 
   & &__footer {
-    margin: 12px;
+    margin-bottom: 32px;
     text-align: center;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
   }
 }

packages/theme/src/grid/radio.less

@@ -37,8 +37,7 @@
     & + .@{grid-radio-prefix-cls}__icon {
       position: relative;
       display: inline-block;
-      width: 1em;
-      height: 1em;
+      line-height: 1;
       vertical-align: middle;
       border-radius: 50%;
       font-size: var(--ti-common-font-size-2);

packages/theme/src/grid/table.less

@@ -464,6 +464,14 @@
       .CellEllipsis();
     }
 
+    &.col__selection {
+      .tiny-grid-cell {
+        &:has(> .@{grid-prefix-cls}-checkbox) {
+          line-height: 1;
+        }
+      }
+    }
+
     border-bottom: 1px solid var(--ti-grid-body-td-border-color);
   }
 
@@ -1113,13 +1121,12 @@
       height: 72px;
 
       .@{grid-prefix-cls}-cell__valid {
-        --td-padding-x: 8px;
         position: absolute;
         top: auto;
         right: auto;
         bottom: 1px;
-        left: var(--td-padding-x);
-        width: calc(100% - 2 * var(--td-padding-x));
+        left: var(--ti-grid-td-padding-horizontal);
+        width: calc(100% - 2 * var(--ti-grid-td-padding-horizontal));
         height: 16px;
         line-height: 1;
         transform: translate(0, 0);
@@ -1128,10 +1135,12 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: #f5222d;
+        color: var(--ti-grid-error-color);
 
         .@{grid-prefix-cls}-cell__valid-icon {
           margin-right: 8px;
+          fill: var(--ti-grid-error-color);
+          font-size: 16px;
         }
 
         .@{grid-prefix-cls}-cell__valid-msg {

packages/vue/src/grid-toolbar/src/custom.vue

@@ -136,9 +136,6 @@
           class="tiny-grid-custom__footer"
           :dir="TinyTheme === 'saas' ? 'rtl' : 'ltr'"
         >
-          <tiny-button type="primary" @click="saveSettings" :disabled="saveDisabled">
-            {{ t('ui.grid.individuation.saveBtn') }}
-          </tiny-button>
           <tiny-button @click="handleReset">
             {{ t('ui.grid.individuation.resetBtn') }}
           </tiny-button>
@@ -148,6 +145,9 @@
           <tiny-button @click="cancelSettings">
             {{ t('ui.grid.individuation.cancelBtn') }}
           </tiny-button>
+          <tiny-button type="primary" @click="saveSettings" :disabled="saveDisabled">
+            {{ t('ui.grid.individuation.saveBtn') }}
+          </tiny-button>
         </div>
       </div>
     </template>