From 8322bcf843a0ad23fe679be7f357d92c8fbf06d5 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Thu, 27 Jan 2022 16:52:45 +0800
Subject: [PATCH] refactor(components): [el-pagination] optimize component
 style (#5666)

---
 docs/examples/pagination/basic-usage.vue      |  17 ++-
 docs/examples/pagination/more-elements.vue    |  42 ++++++-
 .../pagination/src/components/jumper.vue      |   2 +-
 .../pagination/src/components/sizes.vue       |   6 +-
 .../pagination/src/components/total.vue       |   6 +-
 .../components/pagination/src/pagination.ts   |  13 ++
 packages/components/select/src/select.vue     |   3 +
 packages/theme-chalk/src/common/var.scss      |   2 +-
 packages/theme-chalk/src/pagination.scss      | 111 ++++++++++--------
 packages/theme-chalk/src/select.scss          |   6 +-
 10 files changed, 145 insertions(+), 63 deletions(-)

diff --git a/docs/examples/pagination/basic-usage.vue b/docs/examples/pagination/basic-usage.vue
index 7ffde1d5fa..446182e3ee 100644
--- a/docs/examples/pagination/basic-usage.vue
+++ b/docs/examples/pagination/basic-usage.vue
@@ -1,10 +1,19 @@
 <template>
-  <div class="block">
-    <span class="demonstration">When you have few pages</span>
+  <div class="demo-pagination-block">
+    <div class="demonstration">When you have few pages</div>
     <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
   </div>
-  <div class="block">
-    <span class="demonstration">When you have more than 7 pages</span>
+  <div class="demo-pagination-block">
+    <div class="demonstration">When you have more than 7 pages</div>
     <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
   </div>
 </template>
+
+<style>
+.demo-pagination-block + .demo-pagination-block {
+  margin-top: 10px;
+}
+.demo-pagination-block .demonstration {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/docs/examples/pagination/more-elements.vue b/docs/examples/pagination/more-elements.vue
index 644bef12b9..42bfbaaaa8 100644
--- a/docs/examples/pagination/more-elements.vue
+++ b/docs/examples/pagination/more-elements.vue
@@ -1,9 +1,28 @@
 <template>
+  <div class="flex items-center mb-4">
+    <el-radio-group v-model="small" class="mr-4">
+      <el-radio-button :label="false">default</el-radio-button>
+      <el-radio-button :label="true">small</el-radio-button>
+    </el-radio-group>
+    <div>
+      background:
+      <el-switch v-model="background" class="ml-2"></el-switch>
+    </div>
+    <div class="ml-4">
+      disabled: <el-switch v-model="disabled" class="ml-2"></el-switch>
+    </div>
+  </div>
+
+  <hr class="my-4" />
+
   <div class="demo-pagination-block">
-    <span class="demonstration">Total item count</span>
+    <div class="demonstration">Total item count</div>
     <el-pagination
       v-model:currentPage="currentPage1"
       :page-size="100"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
       layout="total, prev, pager, next"
       :total="1000"
       @size-change="handleSizeChange"
@@ -12,11 +31,14 @@
     </el-pagination>
   </div>
   <div class="demo-pagination-block">
-    <span class="demonstration">Change page size</span>
+    <div class="demonstration">Change page size</div>
     <el-pagination
       v-model:currentPage="currentPage2"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
       layout="sizes, prev, pager, next"
       :total="1000"
       @size-change="handleSizeChange"
@@ -25,10 +47,13 @@
     </el-pagination>
   </div>
   <div class="demo-pagination-block">
-    <span class="demonstration">Jump to</span>
+    <div class="demonstration">Jump to</div>
     <el-pagination
       v-model:currentPage="currentPage3"
       :page-size="100"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
       layout="prev, pager, next, jumper"
       :total="1000"
       @size-change="handleSizeChange"
@@ -37,11 +62,14 @@
     </el-pagination>
   </div>
   <div class="demo-pagination-block">
-    <span class="demonstration">All combined</span>
+    <div class="demonstration">All combined</div>
     <el-pagination
       v-model:currentPage="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
       layout="total, sizes, prev, pager, next, jumper"
       :total="400"
       @size-change="handleSizeChange"
@@ -57,6 +85,9 @@ const currentPage1 = ref(5)
 const currentPage2 = ref(5)
 const currentPage3 = ref(5)
 const currentPage4 = ref(4)
+const small = ref(false)
+const background = ref(false)
+const disabled = ref(false)
 
 const handleSizeChange = (val: number) => {
   console.log(`${val} items per page`)
@@ -70,4 +101,7 @@ const handleCurrentChange = (val: number) => {
 .demo-pagination-block + .demo-pagination-block {
   margin-top: 10px;
 }
+.demo-pagination-block .demonstration {
+  margin-bottom: 16px;
+}
 </style>
diff --git a/packages/components/pagination/src/components/jumper.vue b/packages/components/pagination/src/components/jumper.vue
index b33d2f3c4d..8089a055be 100644
--- a/packages/components/pagination/src/components/jumper.vue
+++ b/packages/components/pagination/src/components/jumper.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="el-pagination__jump">
+  <span class="el-pagination__jump" :disabled="disabled">
     {{ t('el.pagination.goto') }}
     <el-input
       size="small"
diff --git a/packages/components/pagination/src/components/sizes.vue b/packages/components/pagination/src/components/sizes.vue
index 8fd7571689..972fd43331 100644
--- a/packages/components/pagination/src/components/sizes.vue
+++ b/packages/components/pagination/src/components/sizes.vue
@@ -4,7 +4,7 @@
       :model-value="innerPageSize"
       :disabled="disabled"
       :popper-class="popperClass"
-      size="small"
+      :size="size"
       @change="handleChange"
     >
       <el-option
@@ -41,6 +41,10 @@ const paginationSizesProps = buildProps({
     default: '',
   },
   disabled: Boolean,
+  size: {
+    type: String,
+    default: 'default',
+  },
 } as const)
 
 export default defineComponent({
diff --git a/packages/components/pagination/src/components/total.vue b/packages/components/pagination/src/components/total.vue
index be3dffd5b4..d90b740e35 100644
--- a/packages/components/pagination/src/components/total.vue
+++ b/packages/components/pagination/src/components/total.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="el-pagination__total">
+  <span class="el-pagination__total" :disabled="disabled">
     {{
       t('el.pagination.total', {
         total,
@@ -11,7 +11,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useLocale } from '@element-plus/hooks'
-
+import { usePagination } from '../usePagination'
 import type { ExtractPropTypes } from 'vue'
 
 const paginationTotalProps = {
@@ -29,8 +29,10 @@ export default defineComponent({
 
   setup() {
     const { t } = useLocale()
+    const { disabled } = usePagination()
     return {
       t,
+      disabled,
     }
   },
 })
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index 5bbe617bb8..bd0931b836 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -234,6 +234,15 @@ export default defineComponent({
       emit('next-click', currentPageBridge.value)
     }
 
+    function addClass(element: any, cls: string) {
+      if (element) {
+        if (!element.props) {
+          element.props = {}
+        }
+        element.props.class = [element.props.class, cls].join(' ')
+      }
+    }
+
     provide(elPaginationKey, {
       pageCount: pageCountBridge,
       disabled: computed(() => props.disabled),
@@ -286,6 +295,7 @@ export default defineComponent({
           pageSizes: props.pageSizes,
           popperClass: props.popperClass,
           disabled: props.disabled,
+          size: props.small ? 'small' : 'default',
         }),
         slot: slots?.default?.() ?? null,
         total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),
@@ -313,6 +323,9 @@ export default defineComponent({
         rootChildren.unshift(rightWrapperRoot)
       }
 
+      addClass(rootChildren[0], 'is-first')
+      addClass(rootChildren[rootChildren.length - 1], 'is-last')
+
       return h(
         'div',
         {
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 41f1e47928..6374f43592 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -419,6 +419,9 @@ export default defineComponent({
       if (_selectSize) {
         classList.push(`el-select--${_selectSize}`)
       }
+      if (props.disabled) {
+        classList.push(`el-select--disabled`)
+      }
       return classList
     })
 
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3da79a3bc0..60776b058e 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -695,7 +695,7 @@ $table-cell-padding: map.merge(
 $pagination: () !default;
 $pagination: map.merge(
   (
-    'font-size': 13px,
+    'font-size': 14px,
     'bg-color': var(--el-color-white),
     'text-color': var(--el-text-color-primary),
     'border-radius': 3px,
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index b2a9173855..f5926b9ad5 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -5,25 +5,43 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+@mixin remove-margin {
+  & + button.btn-prev[type='button'] {
+    margin-left: 0;
+  }
+
+  & + .el-pager {
+    .number {
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
 @include b(pagination) {
   @include set-component-css-var('pagination', $pagination);
 
   white-space: nowrap;
   padding: 2px 5px;
   color: var(--el-pagination-text-color);
-  font-weight: bold;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
   @include utils-clearfix;
 
   span:not([class*='suffix']),
   button {
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     font-size: var(--el-pagination-font-size);
     min-width: var(--el-pagination-button-width);
     height: var(--el-pagination-button-height);
     line-height: var(--el-pagination-button-height);
-    vertical-align: top;
     box-sizing: border-box;
   }
 
@@ -33,20 +51,8 @@
     line-height: normal;
   }
 
-  // pagesize 的下拉 icon
-  .#{$namespace}-input__suffix {
-    right: 0;
-    transform: scale(0.8);
-  }
-
   .#{$namespace}-select .#{$namespace}-input {
-    width: 100px;
-    margin: 0 5px;
-
-    .#{$namespace}-input__inner {
-      padding-right: 25px;
-      border-radius: var(--el-pagination-border-radius);
-    }
+    width: 128px;
   }
 
   button {
@@ -86,14 +92,6 @@
     }
   }
 
-  .btn-prev {
-    padding-right: 12px;
-  }
-
-  .btn-next {
-    padding-left: 12px;
-  }
-
   .#{$namespace}-pager li.disabled {
     color: var(--el-text-color-placeholder);
     cursor: not-allowed;
@@ -126,6 +124,7 @@
     button {
       height: var(--el-pagination-height-extra-small);
       line-height: var(--el-pagination-line-height-extra-small);
+      font-size: var(--el-font-size-extra-small);
     }
 
     @include e(editor) {
@@ -150,37 +149,41 @@
         }
       }
     }
-  }
 
-  @include e(sizes) {
-    margin: 0 10px 0 0;
-    font-weight: normal;
-    color: var(--el-text-color-regular);
-
-    .#{$namespace}-input .#{$namespace}-input__inner {
-      font-size: var(--el-pagination-font-size);
-      padding-left: 8px;
-
-      &:hover {
-        border-color: var(--el-pagination-hover-color);
-      }
+    .#{$namespace}-select .#{$namespace}-input {
+      width: 100px;
     }
   }
 
-  @include e(total) {
-    margin-right: 10px;
+  @include e(sizes) {
+    margin: 0 16px 0 0;
     font-weight: normal;
     color: var(--el-text-color-regular);
+    @include remove-margin();
+  }
+
+  @include e(total) {
+    margin-right: 16px;
+    font-weight: normal;
+    color: var(--el-text-color-regular);
+    @include remove-margin();
+    &[disabled='true'] {
+      color: var(--el-text-color-placeholder);
+    }
   }
 
   @include e(jump) {
-    margin-left: 24px;
+    margin-left: 16px;
     font-weight: normal;
     color: var(--el-text-color-regular);
 
     .#{$namespace}-input__inner {
       padding: 0 3px;
     }
+
+    &[disabled='true'] {
+      color: var(--el-text-color-placeholder);
+    }
   }
 
   @include e(rightwrapper) {
@@ -189,11 +192,11 @@
 
   @include e(editor) {
     line-height: 18px;
-    padding: 0 2px;
+    margin: 0 8px;
     height: var(--el-pagination-button-height);
+    min-width: 56px;
 
     text-align: center;
-    margin: 0 2px;
     box-sizing: border-box;
     border-radius: var(--el-pagination-border-radius);
 
@@ -224,6 +227,13 @@
 
       &.disabled {
         color: var(--el-text-color-placeholder);
+        background-color: var(--el-disabled-bg-color);
+      }
+      @include when(first) {
+        margin-left: 0;
+      }
+      @include when(last) {
+        margin-right: 0;
       }
     }
 
@@ -233,6 +243,10 @@
 
       &:disabled {
         color: var(--el-text-color-placeholder);
+        background-color: var(--el-disabled-bg-color);
+      }
+      &:hover:not([disabled]) {
+        color: var(--el-pagination-hover-color);
       }
     }
 
@@ -244,6 +258,7 @@
       &.active {
         background-color: var(--el-color-primary);
         color: var(--el-color-white);
+        font-weight: bold;
       }
     }
 
@@ -260,17 +275,16 @@
 @include b(pager) {
   user-select: none;
   list-style: none;
-  display: inline-block;
-  vertical-align: top;
   font-size: 0;
   padding: 0;
   margin: 0;
+  display: flex;
+  align-items: center;
 
   li {
     padding: 0 4px;
     background: var(--el-pagination-bg-color);
-    vertical-align: top;
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     font-size: var(--el-pagination-font-size);
@@ -280,7 +294,6 @@
     cursor: pointer;
     box-sizing: border-box;
     text-align: center;
-    margin: 1px;
 
     &.btn-quicknext,
     &.btn-quickprev {
@@ -321,4 +334,8 @@
       cursor: default;
     }
   }
+
+  & + button.btn-next[type='button'] {
+    margin-right: 0;
+  }
 }
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index cc35fa7503..41e067e164 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -34,7 +34,7 @@
     display: inline-block;
   }
 
-  &:hover {
+  &:hover:not(.#{$namespace}-select--disabled) {
     .#{$namespace}-input__inner {
       border-color: var(--el-select-border-color-hover);
     }
@@ -47,7 +47,7 @@
     display: inline-flex;
 
     &:focus {
-      border-color: var(--el-select-input-focus-border-color);
+      border-color: var(--el-select-input-focus-border-color) !important;
     }
   }
 
@@ -97,7 +97,7 @@
     }
 
     &.is-focus .#{$namespace}-input__inner {
-      border-color: var(--el-select-input-focus-border-color);
+      border-color: var(--el-select-input-focus-border-color) !important;
     }
   }