fix(pager): [pager] fix pager hover style (#2111)

* fix(pager): [pager] fix pager hover style * feat(pager): [pager] add simplest pager to adaptive x-design
opentiny · Sep 14, 2024 · ea39960 · ea39960
1 parent b059b1e
commit ea39960
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 17 deletions.
diff --git a/packages/design/aurora/src/pager/index.ts b/packages/design/aurora/src/pager/index.ts
@@ -1,6 +1,6 @@
 export default {
   state: {
-    showJumperSufix: false,
+    showJumperSuffix: false,
     align: 'right',
     totalI18n: 'total',
     totalFixedLeft: true

diff --git a/packages/design/saas/src/pager/index.ts b/packages/design/saas/src/pager/index.ts
@@ -1,6 +1,6 @@
 export default {
   state: {
-    showJumperSufix: false,
+    showJumperSuffix: false,
     align: 'right',
     totalI18n: 'total',
     totalFixedLeft: true

diff --git a/packages/renderless/src/pager/vue.ts b/packages/renderless/src/pager/vue.ts
@@ -91,7 +91,7 @@ export const renderless = (
     internalLayout: computed(() => api.computedInternalLayout()),
     totalText: computed(() => api.computedTotalText()),
     internalPageCount: computed(() => api.computedInternalPageCount()),
-    showJumperSufix: designConfig?.state?.showJumperSufix ?? true,
+    showJumperSuffix: designConfig?.state?.showJumperSuffix ?? true,
     align: props.align || designConfig?.state?.align || 'left',
     totalI18n: designConfig?.state?.totalI18n || 'totals',
     totalFixedLeft: computed(

diff --git a/packages/renderless/types/pager.type.ts b/packages/renderless/types/pager.type.ts
@@ -52,7 +52,7 @@ export interface IPagerState {
   internalLayout: string[]
   totalText: string
   internalPageCount: number | null
-  showJumperSufix: boolean
+  showJumperSuffix: boolean
   align: 'left' | 'center' | 'right'
   totalI18n: 'total' | 'totals'
   totalFixedLeft: boolean

diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less
@@ -45,6 +45,10 @@
     line-height: var(--ti-pager-total-line-height);
     font-size: var(--ti-pager-total-font-size);
     color: var(--ti-pager-normal-text-color);
+
+    &-num {
+      font-family: var(--ti-pager-number-font-family);
+    }
   }
 
   & &__total-allpage {
@@ -59,6 +63,7 @@
   & &__pages {
     display: inline-flex;
     font-size: var(--ti-pager-font-size);
+    font-family: var(--ti-pager-number-font-family);
 
     li {
       background: transparent;
@@ -296,7 +301,8 @@
 
     &.@{popover-prefix-cls}.@{popper-prefix-cls} {
       min-width: var(--ti-pager-sizes-input-min-width);
-      padding: 0;
+      border: 0;
+      padding: 8px 0;
       border-radius: var(--ti-pager-pop-body-border-radius);
 
       &[x-placement^='bottom'] {
@@ -317,13 +323,12 @@
     &-poplist {
       .list-item {
         min-height: var(--ti-pager-poplist-item-min-height);
-        padding: 0 8px;
+        padding: 0 16px;
         line-height: var(--ti-pager-poplist-item-min-height);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        text-align: center;
 
         &:hover {
           cursor: pointer;
@@ -346,7 +351,12 @@
 
           &.is-selected {
             color: var(--ti-pager-poplist-item-selected-text-color);
-            background: var(--ti-pager-poplist-item-selected-bg-color);
+            background: transparent;
+            font-weight: bold;
+
+            &:hover {
+              background: var(--ti-pager-poplist-item-selected-bg-color);
+            }
           }
         }
       }
@@ -435,6 +445,7 @@
 
     .sizes {
       margin-right: var(--ti-pager-sizes-num-margin-right);
+      font-family: var(--ti-pager-number-font-family);
     }
   }
 
@@ -536,14 +547,8 @@
     .component-css-vars-pager();
 
     .tiny-option-label {
-      text-align: center;
       font-family: var(--ti-pager-number-font-family);
     }
-
-    .tiny-option.selected {
-      color: var(--ti-pager-poplist-item-selected-text-color);
-      background: var(--ti-pager-poplist-item-selected-bg-color);
-    }
   }
 }
 

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -95,7 +95,7 @@
   // 分页下拉框选中项默认背景色
   --ti-pager-poplist-item-selected-bg-color: #f5f5f5;
   // 分页下拉框项选中字体颜色
-  --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
+  --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight);
   // 分页页码项默认悬浮边框色
   --ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent);
   // 分页下拉框圆角
@@ -166,4 +166,6 @@
   --ti-pager-sizes-num-margin-right: var(--ti-common-dropdown-gap);
   // 页码悬浮文本色
   --ti-pager-list-item-hover-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // 分页数字字体
+  --ti-pager-number-font-family: arial, helvetica, sans-serif;
 }
diff --git a/packages/vue/src/pager/src/pc.vue b/packages/vue/src/pager/src/pc.vue
@@ -43,7 +43,7 @@
             @input="handleJumperInput"
             @change="handleJumperChange"
           />
-          <span v-if="state.showJumperSufix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
+          <span v-if="state.showJumperSuffix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
             t('ui.page.pageClassifier')
           }}</span>
         </div>
@@ -160,7 +160,9 @@
           </template>
           <template v-else>
             <span>{{ t('ui.page.totals') }}</span>
-            <span> {{ customTotal ? state.totalText : state.internalTotal }} </span>
+            <span :class="{ 'tiny-pager__total-num': !customTotal }">
+              {{ customTotal ? state.totalText : state.internalTotal }}
+            </span>
           </template>
         </div>
       </div>