refactor(pager): [pager] refactor pager style (#2162)

* refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] inline pager design config * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style
opentiny · Sep 23, 2024 · 2f4db09 · 2f4db09
1 parent 4037cb3
commit 2f4db09
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 357 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -80,6 +80,15 @@
       "backgroundColor": "transparent",
       "bold": false,
       "italic": false
+    },
+    {
+      "tag": "--",
+      "color": "#FFFFFF",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "#5CB300",
+      "bold": false,
+      "italic": false
     }
   ],
   "vue.codeActions.enabled": false

diff --git a/examples/sites/demos/pc/app/pager/disabled-and-size.vue b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
@@ -2,7 +2,7 @@
   <div class="content">
     是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
     <tiny-pager mode="number" :total="100" :disabled="isDisabled" />
-    <tiny-pager :total="100" size="mini" :disabled="isDisabled" />
+    <tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
   </div>
 </template>
 

diff --git a/packages/design/aurora/src/pager/index.ts b/packages/design/aurora/src/pager/index.ts
@@ -1,8 +1,7 @@
 export default {
   state: {
     showJumperSuffix: false,
-    align: 'right',
     totalI18n: 'total',
-    totalFixedLeft: true
+    pageSizeText: null
   }
 }
diff --git a/packages/design/saas/src/pager/index.ts b/packages/design/saas/src/pager/index.ts
@@ -1,8 +1,7 @@
 export default {
   state: {
     showJumperSuffix: false,
-    align: 'right',
     totalI18n: 'total',
-    totalFixedLeft: true
+    pageSizeText: null
   }
 }
diff --git a/packages/design/smb/index.ts b/packages/design/smb/index.ts
@@ -8,7 +8,6 @@ import Form from './src/form'
 import FilterBox from './src/filter-box'
 import Grid from './src/grid'
 import Guide from './src/guide'
-import Pager from './src/pager'
 import Select from './src/select'
 import TreeNode from './src/tree-node'
 import TimeSpinner from './src/time-spinner'
@@ -35,7 +34,6 @@ export default {
     FilterBox,
     Grid,
     Guide,
-    Pager,
     Select,
     TreeNode,
     TimeSpinner,

diff --git a/packages/design/smb/src/pager/index.ts b/packages/design/smb/src/pager/index.ts
diff --git a/packages/renderless/src/pager/index.ts b/packages/renderless/src/pager/index.ts
@@ -87,6 +87,19 @@ export const computedSimplestPagerWidth =
     return baseWidth + num * 8
   }
 
+export const computedPageSizeText =
+  ({ props, designConfig }: Pick<IPagerRenderlessParams, 'props' | 'designConfig'>) =>
+  (): string => {
+    if (props.pageSizeText) {
+      return props.pageSizeText
+    }
+    // 默认返回空字符串，不展示"条/页", 可以通过设置pageSizeText为null来显示。亦或者自定义
+    if (designConfig?.state && Object.hasOwnProperty.call(designConfig.state, 'pageSizeText')) {
+      return designConfig.state.pageSizeText
+    }
+    return ''
+  }
+
 export const handleJumperFocus =
   ({ state }: Pick<IPagerRenderlessParams, 'state'>) =>
   (e: Event): void => {

diff --git a/packages/renderless/src/pager/vue.ts b/packages/renderless/src/pager/vue.ts
@@ -12,6 +12,7 @@ import {
   computedInternalPageCount,
   computedSimplestPagerOption,
   computedSimplestPagerWidth,
+  computedPageSizeText,
   handleJumperFocus,
   handleSizeChange,
   handleJumperInput,
@@ -92,12 +93,12 @@ export const renderless = (
     totalText: computed(() => api.computedTotalText()),
     internalPageCount: computed(() => api.computedInternalPageCount()),
     showJumperSuffix: designConfig?.state?.showJumperSuffix ?? true,
-    align: props.align || designConfig?.state?.align || 'left',
+    align: props.align || designConfig?.state?.align || 'right',
     totalI18n: designConfig?.state?.totalI18n || 'totals',
     totalFixedLeft: computed(
       () => props.totalFixedLeft ?? designConfig?.state?.totalFixedLeft ?? props.mode !== 'simplest' ?? true
     ),
-    pageSizeText: props.pageSizeText ?? designConfig?.state?.pageSizeText
+    pageSizeText: computed(() => api.computedPageSizeText())
   })
 
   Object.assign(api, {
@@ -108,6 +109,7 @@ export const renderless = (
     computedInternalPageCount: computedInternalPageCount({ props, state }),
     computedSimplestPagerOption: computedSimplestPagerOption({ props, state }),
     computedSimplestPagerWidth: computedSimplestPagerWidth({ state }),
+    computedPageSizeText: computedPageSizeText({ props, designConfig }),
     getValidCurrentPage: getValidCurrentPage({ state }),
     handleJumperFocus: handleJumperFocus({ state }),
     handleSizeChange: handleSizeChange({ props, state, api, emit, vm }),