fix(comp:transfer): update transfer style and demo (#1234)

* docs(comp:transfer): update customListBody demo * style(comp:transfer): change transfer icon size to 16px * fix(comp:transfer): fix margin-left of clear-icon after search input * docs(comp:transfer): change custion operations demo style
IDuxFE · Oct 26, 2022 · d93b815 · d93b815
1 parent 5d3f260
commit d93b815
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/packages/components/transfer/demo/CustomListBody.vue b/packages/components/transfer/demo/CustomListBody.vue
@@ -4,25 +4,26 @@
     class="transer-demo-custom-transfer-body__transfer"
     :data-source="dataSource"
     :disabled="disabled"
-    :scroll="{ height: 300, fullHeight: true }"
+    :pagination="pagination"
+    :scroll="{ width: { source: 400 } }"
     :show-select-all="false"
   >
     <template #default="params">
       <IxTable
         :selected-row-keys="params.selectedKeys"
         :columns="getColumns(params)"
         :data-source="params.paginatedData"
-        :pagination="params.pagination"
+        :pagination="false"
+        auto-height
       />
     </template>
-    <template #footer />
   </IxTransfer>
 </template>
 
 <script setup lang="ts">
-import type { TransferData, TransferListSlotParams } from '@idux/components/transfer'
+import type { TransferData, TransferListSlotParams, TransferPaginationProps } from '@idux/components/transfer'
 
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { TableColumn, TableColumnSelectable } from '@idux/components/table'
 
@@ -79,15 +80,26 @@ const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
   address: 'London No.1 Lake Park',
 }))
 
+const sourcePageIndex = ref(1)
+const targetPageIndex = ref(1)
+const pagination = computed<TransferPaginationProps>(() => ({
+  pageIndex: [sourcePageIndex.value, targetPageIndex.value],
+  pageSize: [10, 10],
+  onChange(isSource, pageIndex) {
+    isSource ? (sourcePageIndex.value = pageIndex) : (targetPageIndex.value = pageIndex)
+  },
+}))
+
 const disabled = ref(false)
 </script>
 <style lang="less">
 .transer-demo-custom-transfer-body__transfer {
-  .ix-transfer-content {
-    height: auto;
-  }
-  .ix-transfer-content-source {
-    width: 500px;
+  height: 300px;
+
+  .ix-table {
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
   }
 }
 </style>
diff --git a/packages/components/transfer/demo/CustomOperations.vue b/packages/components/transfer/demo/CustomOperations.vue
@@ -15,24 +15,28 @@
       <div class="demo-transfer-custom-operations__operations">
         <IxButton
           class="demo-transfer-custom-operations__operations-btn"
+          size="xs"
           :disabled="appendAllDisabled"
           :onClick="() => triggerAppendAll()"
           >all</IxButton
         >
         <IxButton
           class="demo-transfer-custom-operations__operations-btn"
+          size="xs"
           :disabled="appendDisabled"
           :onClick="() => triggerAppend()"
           >append</IxButton
         >
         <IxButton
           class="demo-transfer-custom-operations__operations-btn"
+          size="xs"
           :disabled="removeDisabled"
           :onClick="() => triggerRemove()"
           >remove</IxButton
         >
         <IxButton
           class="demo-transfer-custom-operations__operations-btn"
+          size="xs"
           :disabled="clearDisabled"
           :onClick="() => triggerClear()"
           >clear</IxButton
@@ -74,7 +78,7 @@ const disabled = ref(false)
   justify-content: center;
 
   &-btn {
-    width: 80px;
+    width: 40px;
 
     & + & {
       margin-top: 8px;

diff --git a/packages/components/transfer/style/content.less b/packages/components/transfer/style/content.less
@@ -77,7 +77,8 @@
     margin-left: auto;
   }
   &-clear-icon + &-suffix,
-  &-search-input + &-suffix {
+  &-search-input + &-suffix,
+  &-search-input + &-clear-icon {
     margin-left: @transfer-header-suffix-margin-left;
   }
 }

diff --git a/packages/components/transfer/style/themes/default.variable.less b/packages/components/transfer/style/themes/default.variable.less
@@ -27,12 +27,12 @@
 
 @transer-search-width: 110px;
 
-@transfer-clear-icon-font-size: @font-size-md;
+@transfer-clear-icon-font-size: @font-size-lg;
 @transfer-clear-icon-color: @color-graphite-d20;
 @transfer-clear-icon-hover-color: @color-primary;
 @transfer-clear-icon-active-color: @color-primary;
 
-@transfer-search-icon-font-size: @font-size-md;
+@transfer-search-icon-font-size: @font-size-lg;
 @transfer-search-icon-color: @color-graphite;
 
 @transfer-list-item-font-size: @font-size-md;
@@ -42,8 +42,7 @@
 @transfer-list-item-hover-color: @color-graphite-l50;
 
 @transfer-list-close-icon-padding: 0 @spacing-md;
-@transfer-list-clear-icon-font-size: @font-size-md;
-@transfer-list-close-icon-font-size: @font-size-md;
+@transfer-list-close-icon-font-size: @font-size-lg;
 @transfer-list-close-icon-color: @color-graphite-d20;
 @transfer-list-close-icon-hover-color: @color-primary;
 @transfer-list-close-icon-active-color: @color-primary;