Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pager): [pager] add simplest pager to adaptive x-design #2126

Merged
merged 2 commits into from
Sep 14, 2024
Merged

feat(pager): [pager] add simplest pager to adaptive x-design #2126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1636bdf
feat(pager): [pager] add simplest pager to adaptive x-design
gimmyhehe Sep 13, 2024
9bbb55b
feat(pager): [pager] add simplest pager to adaptive x-design
gimmyhehe Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/apis/pager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@ export default {
},
{
name: 'mode',
type: "'number' | 'simple' | 'complete' | 'fixed'",
type: "'number' | 'simple' | 'complete' | 'fixed' | 'simplest'",
defaultValue: '',
desc: {
'zh-CN': '设置分页组件显示模式，此属性优先级大于 layout',
'zh-CN': '设置分页组件显示模式，此属性优先级大于 layout, 3.19.0新增simplest',
'en-US': 'Set the display mode of pagination components, which takes priority over layout'
},
mode: ['pc'],
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/pager/disabled-and-size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ test('禁用和尺寸', async ({ page }) => {
const next = pager.locator('.tiny-pager__btn-next')

await demo.locator('.tiny-switch').click()
await expect(sizeChange).toHaveCSS('color', 'rgb(138, 142, 153)')
await expect(sizeChange).toHaveCSS('border-top-color', 'rgba(0, 0, 0, 0)')
await expect(sizeChange).toHaveCSS('color', 'rgb(194, 194, 194)')
await expect(sizeChange).toHaveCSS('border-top-color', 'rgb(219, 219, 219)')
await expect(prev).toBeDisabled()
await expect(next).toBeDisabled()
await expect(pageItem.first()).toHaveCSS('cursor', 'not-allowed')
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/pager/pager-mode-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<tiny-radio-button label="simple"></tiny-radio-button>
<tiny-radio-button label="complete"></tiny-radio-button>
<tiny-radio-button label="fixed"></tiny-radio-button>
<tiny-radio-button label="simplest"></tiny-radio-button>
</tiny-radio-group>
<tiny-pager :mode="mode" :total="100"></tiny-pager>
</div>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/pager/pager-mode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<tiny-radio-button label="simple"></tiny-radio-button>
<tiny-radio-button label="complete"></tiny-radio-button>
<tiny-radio-button label="fixed"></tiny-radio-button>
<tiny-radio-button label="simplest"></tiny-radio-button>
</tiny-radio-group>
<tiny-pager :mode="mode" :total="100"></tiny-pager>
</div>
Expand Down
3 changes: 1 addition & 2 deletions packages/design/smb/src/pager/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export default {
state: {
pageSizeText: '',
align: 'right',
totalFixedLeft: true
align: 'right'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

Reconsider the removal of totalFixedLeft property

The removal of the totalFixedLeft property from packages/design/smb/src/pager/index.ts may have unintended consequences on other parts of the codebase. Several other files still use this property:

  • packages/vue/src/pager/src/index.ts: Includes totalFixedLeft in type definitions.
  • packages/renderless/types/pager.type.ts: Defines totalFixedLeft as a boolean type.
  • packages/design/saas/src/pager/index.ts and packages/design/aurora/src/pager/index.ts: Still use totalFixedLeft: true.
  • packages/renderless/src/pager/vue.ts: Has a computed property for totalFixedLeft that falls back to design config or a default value.

Before proceeding with this change, consider the following:

  1. Review the usage of totalFixedLeft across all pager components in different design packages.
  2. Ensure that removing this property from the SMB design package doesn't break consistency with other design systems.
  3. Update the renderless package to handle cases where totalFixedLeft might be undefined in some design configs.
  4. Verify that the Vue package can handle the absence of totalFixedLeft in its type definitions.

A more comprehensive review of the changes across the entire pager component ecosystem is recommended to maintain consistency and prevent potential bugs.

Analysis chain

Verify the removal of totalFixedLeft doesn't break anything.

The removal of the totalFixedLeft property simplifies the state structure, which is a good change.

However, ensure that the component doesn't rely on the totalFixedLeft property for rendering logic or calculations. Run the following script to verify:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the removal of `totalFixedLeft` doesn't break anything.

# Test 1: Search for usages of `totalFixedLeft` in the codebase. 
# Expect: No occurrences found.
rg --type typescript $'totalFixedLeft'

# Test 2: Search for usages of `state.totalFixedLeft` in the codebase.
# Expect: No occurrences found.
rg --type typescript $'state\.totalFixedLeft'

Length of output: 154

Script:

#!/bin/bash
# Description: Verify the removal of `totalFixedLeft` doesn't break anything.

# Test 1: Search for usages of `totalFixedLeft` in all text files
echo "Searching for 'totalFixedLeft' in all text files:"
rg -i 'totalFixedLeft' --type-add 'text:*.{ts,js,tsx,jsx}' -t text

# Test 2: Use fd to find TypeScript and JavaScript files, then search within them
echo "Searching for 'totalFixedLeft' in TypeScript and JavaScript files:"
fd -e ts -e js -e tsx -e jsx | xargs grep -i 'totalFixedLeft' || echo "No matches found"

# Test 3: Search for usages of `state.totalFixedLeft` in all text files
echo "Searching for 'state.totalFixedLeft' in all text files:"
rg -i 'state\.totalFixedLeft' --type-add 'text:*.{ts,js,tsx,jsx}' -t text

# Test 4: Use fd to find TypeScript and JavaScript files, then search for `state.totalFixedLeft`
echo "Searching for 'state.totalFixedLeft' in TypeScript and JavaScript files:"
fd -e ts -e js -e tsx -e jsx | xargs grep -i 'state\.totalFixedLeft' || echo "No matches found"

Length of output: 1804

}
}
20 changes: 20 additions & 0 deletions packages/renderless/src/pager/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const computedInternalLayout =
props.mode === 'simple' && (layout = 'sizes, total, prev, current, next')
props.mode === 'complete' && (layout = 'sizes, total, prev, pager, next, jumper')
props.mode === 'fixed' && (layout = 'prev,pager,next')
props.mode === 'simplest' && (layout = 'total, prev, simplest-pager, next')
} else if ((!props.mode && props.layout) || (props.mode && props.layout)) {
layout = props.layout
} else {
Expand Down Expand Up @@ -67,6 +68,25 @@ export const computedInternalPageCount =
return null
}

export const computedSimplestPagerOption =
({ props, state }: Pick<IPagerRenderlessParams, 'props' | 'state'>) =>
(): Array<{ value: number; label: string }> => {
const itemSizes = Math.max(1, Math.ceil(props.total / state.internalPageSize))
return Array.from({ length: itemSizes }).map((item, index) => ({
value: index + 1,
label: `${index + 1}/${itemSizes}`
}))
}

export const computedSimplestPagerWidth =
({ state }: Pick<IPagerRenderlessParams, 'state'>) =>
(): number => {
const baseWidth = 60
const num = String(state.internalCurrentPage).length + String(state.simplestPagerOption.length).length
// 输入框长度 = 基本宽度加数字长度
return baseWidth + num * 8
}

export const handleJumperFocus =
({ state }: Pick<IPagerRenderlessParams, 'state'>) =>
(e: Event): void => {
Expand Down
10 changes: 9 additions & 1 deletion packages/renderless/src/pager/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
computedInternalLayout,
computedTotalText,
computedInternalPageCount,
computedSimplestPagerOption,
computedSimplestPagerWidth,
handleJumperFocus,
handleSizeChange,
handleJumperInput,
Expand Down Expand Up @@ -83,14 +85,18 @@ export const renderless = (
internalTotal: props.total,
jumperValue: '1',
jumperBackup: '1',
simplestPagerOption: computed(() => api.computedSimplestPagerOption()),
simplestPagerWidth: computed(() => api.computedSimplestPagerWidth()),
showPager: computed(() => api.computedShowPager()),
internalLayout: computed(() => api.computedInternalLayout()),
totalText: computed(() => api.computedTotalText()),
internalPageCount: computed(() => api.computedInternalPageCount()),
showJumperSufix: designConfig?.state?.showJumperSufix ?? true,
align: props.align || designConfig?.state?.align || 'left',
totalI18n: designConfig?.state?.totalI18n || 'totals',
totalFixedLeft: props.totalFixedLeft ?? designConfig?.state?.totalFixedLeft ?? false,
totalFixedLeft: computed(
() => props.totalFixedLeft ?? designConfig?.state?.totalFixedLeft ?? props.mode !== 'simplest' ?? true
),
pageSizeText: props.pageSizeText ?? designConfig?.state?.pageSizeText
})

Expand All @@ -100,6 +106,8 @@ export const renderless = (
computedInternalLayout: computedInternalLayout({ props }),
computedTotalText: computedTotalText({ props, t }),
computedInternalPageCount: computedInternalPageCount({ props, state }),
computedSimplestPagerOption: computedSimplestPagerOption({ props, state }),
computedSimplestPagerWidth: computedSimplestPagerWidth({ state }),
getValidCurrentPage: getValidCurrentPage({ state }),
handleJumperFocus: handleJumperFocus({ state }),
handleSizeChange: handleSizeChange({ props, state, api, emit, vm }),
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/base-select/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
// 小型选择器尾部图标距离输入框的垂直距离
--ti-select-input-icon-top-small: var(--ti-common-space-4x);
// 迷你型选择器尾部图标距离输入框的垂直距离
--ti-select-input-icon-top-mini: var(--ti-common-space-4x);
--ti-select-input-icon-top-mini: var(--ti-common-space-3x);
// 选择器输入框尾部图标的颜色
--ti-select-input-caret-icon-color: var(--ti-common-color-icon-normal);
// 选择器输入框尾部图标悬浮时的颜色
Expand Down
31 changes: 24 additions & 7 deletions packages/theme/src/pager/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,6 @@
.@{pager-prefix-cls}__total-loading {
width: 30px;
}
.tiny-loading__spinner {
margin-top: 3px;
}
}

&__goto {
Expand Down Expand Up @@ -169,9 +166,11 @@
border: 1px solid var(--ti-pager-primary-border-color);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

&[disabled] {
color: var(--ti-pager-disabled-text-color);
border-color: var(--ti-pager-disabled-border-color);
border-color: var(--ti-pager-select-disabled-border-color);
background: var(--ti-pager-select-disabled-bg-color);
cursor: not-allowed;
}
}
Expand All @@ -182,6 +181,7 @@
padding-left: var(--ti-pager-normal-text-padding-left);
margin-right: 8px;
line-height: var(--ti-pager-input-height);

&-sufix {
padding-left: 4px;
}
Expand Down Expand Up @@ -210,10 +210,12 @@
background 0.3s;
outline: 0;
.user-select(none);

&:hover {
border: 1px solid var(--ti-pager-goto-btn-border-hover-color);
color: var(--ti-pager-goto-btn-text-hover-color);
}

&.is-disabled {
color: var(--ti-pager-disabled-text-color);
border-color: var(--ti-pager-disabled-border-color);
Expand Down Expand Up @@ -316,11 +318,12 @@
.list-item {
min-height: var(--ti-pager-poplist-item-min-height);
padding: 0 8px;
line-height: 30px;
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;
Expand Down Expand Up @@ -512,8 +515,8 @@
.@{pager-prefix-cls}__page-size {
color: var(--ti-pager-disabled-text-color);
cursor: not-allowed;
border-color: var(--ti-pager-disabled-border-color);
background-color: var(--ti-base-color-bg-1);
border-color: var(--ti-pager-select-disabled-border-color);
background: var(--ti-pager-select-disabled-bg-color);
}

.@{pager-prefix-cls}__page-size-btn {
Expand All @@ -528,6 +531,20 @@
color: var(--ti-pager-disabled-text-color);
}
}

&__simplest-pager-popover {
.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);
}
}
}

@media (max-width: 768px) {
Expand Down
1 change: 0 additions & 1 deletion packages/theme/src/pager/old-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export const tinyPagerOldTheme = {
'ti-pager-prev-padding-left': '6px',
'ti-pager-goto-btn-text-hover-color': 'var(--ti-common-color-text-highlight, #526ecc)',
'ti-pager-poplist-item-min-height': '30px',
'ti-pager-pop-body-margin-top': '4px',
'ti-pager-poplist-item-selected-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)',
'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
'ti-pager-poplist-item-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)',
Expand Down
12 changes: 8 additions & 4 deletions packages/theme/src/pager/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
// 分页页码选中项文字色
--ti-pager-active-font-color: var(--ti-common-color-text-primary);
// 分页页码选中项背景色
--ti-pager-active-bg-color: #F5F5F5;
--ti-pager-active-bg-color: #f5f5f5;
// 自定义上下页按钮文本色
--ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc);
// 分页跳转输入框激活颜色
Expand All @@ -31,6 +31,10 @@
--ti-pager-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
// 分页禁用状态下边框颜色
--ti-pager-disabled-border-color: transparent;
// 分页禁用选择框边框颜色
--ti-pager-select-disabled-border-color: #dbdbdb;
// 分页禁用选择框背景颜色
--ti-pager-select-disabled-bg-color: var(--ti-common-color-bg-disabled);

// 分页输入框和选项框边框色
--ti-pager-input-border-color: var(--ti-common-color-line-normal);
Expand Down Expand Up @@ -85,11 +89,11 @@
--ti-pager-li-item-hover-font-weight: var(--ti-common-font-weight-6);

// 分页项默认悬浮背景色
--ti-pager-poplist-item-hover-bg-color: #F5F5F5;
--ti-pager-poplist-item-hover-bg-color: #f5f5f5;
// 分页下拉框项|列表项悬浮文本色
--ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-primary);
// 分页下拉框选中项默认背景色
--ti-pager-poplist-item-selected-bg-color: #F5F5F5;
--ti-pager-poplist-item-selected-bg-color: #f5f5f5;
// 分页下拉框项选中字体颜色
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
// 分页页码项默认悬浮边框色
Expand All @@ -99,7 +103,7 @@
// 分页下拉框顶部外边距
--ti-pager-pop-body-margin-top: var(--ti-common-space-base);
// 分页下拉项最小高度
--ti-pager-poplist-item-min-height: var(--ti-common-line-height-6);
--ti-pager-poplist-item-min-height: 32px;

// 分页下一页文字禁用色
--ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
Expand Down
36 changes: 17 additions & 19 deletions packages/vue/src/base-select/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,35 @@
{
"name": "@opentiny/vue-base-select",
"type": "module",
"version": "3.18.0",
"description": "",
"license": "MIT",
"sideEffects": false,
"main": "lib/index.js",
"module": "index.ts",
"sideEffects": false,
"type": "module",
"devDependencies": {
"@opentiny-internal/vue-test-utils": "workspace:*",
"vitest": "^0.31.0"
},
"scripts": {
"build": "pnpm -w build:ui $npm_package_name",
"//postversion": "pnpm build"
},
"dependencies": {
"@opentiny/vue-renderless": "workspace:~",
"@opentiny/vue-button": "workspace:~",
"@opentiny/vue-checkbox": "workspace:~",
"@opentiny/vue-common": "workspace:~",
"@opentiny/vue-locale": "workspace:~",
"@opentiny/vue-tag": "workspace:~",
"@opentiny/vue-filter-box": "workspace:~",
"@opentiny/vue-icon": "workspace:~",
"@opentiny/vue-input": "workspace:~",
"@opentiny/vue-locale": "workspace:~",
"@opentiny/vue-option": "workspace:~",
"@opentiny/vue-recycle-scroller": "workspace:~",
"@opentiny/vue-renderless": "workspace:~",
"@opentiny/vue-scrollbar": "workspace:~",
"@opentiny/vue-icon": "workspace:~",
"@opentiny/vue-select-dropdown": "workspace:~",
"@opentiny/vue-grid": "workspace:~",
"@opentiny/vue-tree": "workspace:~",
"@opentiny/vue-tooltip": "workspace:~",
"@opentiny/vue-filter-box": "workspace:~",
"@opentiny/vue-checkbox": "workspace:~",
"@opentiny/vue-tag": "workspace:~",
"@opentiny/vue-theme": "workspace:~",
"@opentiny/vue-recycle-scroller": "workspace:~",
"@opentiny/vue-button": "workspace:~"
"@opentiny/vue-tooltip": "workspace:~"
},
"license": "MIT"
}
"devDependencies": {
"@opentiny-internal/vue-test-utils": "workspace:*",
"vitest": "^0.31.0"
}
}
4 changes: 0 additions & 4 deletions packages/vue/src/base-select/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -540,8 +540,6 @@ import {
IconEllipsis,
IconChevronUp
} from '@opentiny/vue-icon'
import Grid from '@opentiny/vue-grid'
import Tree from '@opentiny/vue-tree'
import TinyTooltip from '@opentiny/vue-tooltip'
import FilterBox from '@opentiny/vue-filter-box'
import RecycleScroller from '@opentiny/vue-recycle-scroller'
Expand Down Expand Up @@ -593,8 +591,6 @@ export default defineComponent({
TinyTag,
TinyInput,
TinyOption,
TinyGrid: Grid,
TinyTree: Tree,
TinyButton,
IconClose: IconClose(),
TinyScrollbar,
Expand Down
27 changes: 14 additions & 13 deletions packages/vue/src/pager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
{
"name": "@opentiny/vue-pager",
"type": "module",
"version": "3.18.0",
"description": "",
"license": "MIT",
"sideEffects": false,
"main": "lib/index.js",
"module": "index.ts",
"sideEffects": false,
"type": "module",
"devDependencies": {
"@opentiny-internal/vue-test-utils": "workspace:*",
"vitest": "^0.31.0"
},
"scripts": {
"build": "pnpm -w build:ui $npm_package_name",
"//postversion": "pnpm build"
},
"dependencies": {
"@opentiny/vue-renderless": "workspace:~",
"@opentiny/vue-base-select": "workspace:~",
"@opentiny/vue-common": "workspace:~",
"@opentiny/vue-icon": "workspace:~",
"@opentiny/vue-popover": "workspace:~",
"@opentiny/vue-pager-item": "workspace:~",
"@opentiny/vue-loading": "workspace:~",
"@opentiny/vue-theme": "workspace:~",
"@opentiny/vue-common": "workspace:~"
"@opentiny/vue-pager-item": "workspace:~",
"@opentiny/vue-popover": "workspace:~",
"@opentiny/vue-renderless": "workspace:~",
"@opentiny/vue-theme": "workspace:~"
},
"license": "MIT"
}
"devDependencies": {
"@opentiny-internal/vue-test-utils": "workspace:*",
"vitest": "^0.31.0"
}
}
Loading
Loading