diff --git a/.vscode/settings.json b/.vscode/settings.json index 924352daf..2965f349d 100644 --- 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 index 1cd55e707..dc0de6c0b 100644 --- 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 @@
是否禁用： - +
diff --git a/packages/design/aurora/src/pager/index.ts b/packages/design/aurora/src/pager/index.ts index e08b70474..aeb4d6598 100644 --- 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 index e08b70474..aeb4d6598 100644 --- 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 index 92ff96444..79719c456 100644 --- 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 deleted file mode 100644 index f9c45149e..000000000 --- a/packages/design/smb/src/pager/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { - state: { - pageSizeText: '', - align: 'right' - } -} diff --git a/packages/renderless/src/pager/index.ts b/packages/renderless/src/pager/index.ts index ff135c9f2..bcc22976c 100644 --- 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) => + (): 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) => (e: Event): void => { diff --git a/packages/renderless/src/pager/vue.ts b/packages/renderless/src/pager/vue.ts index 643d0262e..6a3e1b0e4 100644 --- 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 }), diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less index 0aa1f5315..cb2819a4f 100644 --- a/packages/theme/src/pager/index.less +++ b/packages/theme/src/pager/index.less @@ -25,14 +25,18 @@ .component-css-vars-pager(); text-align: left; - padding: var(--ti-pager-selector-padding-vertical) 0; - color: var(--ti-pager-text-color); + padding: var(--tv-Pager-padding-y) 0; + color: var(--tv-Pager-text-color); & &__group { display: inline-flex; align-items: center; vertical-align: middle; - font-size: var(--ti-pager-font-size); + font-size: var(--tv-Pager-font-size); + + & + .@{pager-prefix-cls}__sizes { + margin-left: 16px; + } > span { display: inline-block; @@ -41,13 +45,11 @@ } & &__total { - height: var(--ti-pager-total-height); - line-height: var(--ti-pager-total-line-height); - font-size: var(--ti-pager-total-font-size); - color: var(--ti-pager-normal-text-color); + height: var(--tv-Pager-height); + line-height: var(--tv-Pager-height); &-num { - font-family: var(--ti-pager-number-font-family); + font-family: var(--tv-Pager-number-font-family); } } @@ -57,50 +59,49 @@ & &__pull-left { float: left; - height: var(--ti-pager-height); + height: var(--tv-Pager-height); } & &__pages { display: inline-flex; - font-size: var(--ti-pager-font-size); - font-family: var(--ti-pager-number-font-family); + font-size: var(--tv-Pager-font-size); + font-family: var(--tv-Pager-number-font-family); li { background: transparent; display: inline-block; - font-size: var(--ti-pager-font-size); + font-size: var(--tv-Pager-font-size); cursor: pointer; margin-right: 4px; text-align: center; - line-height: calc(var(--ti-pager-height) - 2px); - border-radius: var(--ti-pager-li-border-radius); - height: var(--ti-pager-height); - width: var(--ti-pager-width); - min-width: var(--ti-pager-min-width); - color: var(--ti-pager-text-color); - padding: var(--ti-pager-poplist-item-padding-vertical) var(--ti-pager-poplist-item-padding-horizontal); + line-height: calc(var(--tv-Pager-height) - 2px); + border-radius: var(--tv-Pager-page-item-border-radius); + height: var(--tv-Pager-height); + min-width: var(--tv-Pager-page-item-min-width); + color: var(--tv-Pager-text-color-secondary); + padding: 0 var(--tv-Pager-page-item-padding-x); box-sizing: border-box; - border: 1px solid var(--ti-pager-li-border-color); + border: 1px solid var(--tv-Pager-page-item-border-color); transition: all 0.5s ease; a { - color: var(--ti-pager-text-color); + color: var(--tv-Pager-text-color-secondary); } svg { - fill: var(--ti-pager-text-color); + fill: var(--tv-Pager-icon-color); + color: var(--tv-Pager-icon-color); vertical-align: middle; } &:not(.dot):not(.is-active):hover { - color: var(--ti-pager-list-item-hover-text-color); - background-color: var(--ti-pager-poplist-item-hover-bg-color); - box-shadow: var(--ti-pager-poplist-item-unchecked-box-shadow); - border: 1px solid var(--ti-pager-poplist-item-hover-border-color); - font-weight: var(--ti-pager-li-item-hover-font-weight); + color: var(--tv-Pager-list-item-hover-text-color); + background-color: var(--tv-Pager-bg-color-hover); + border: 1px solid var(--tv-Pager-page-item-border-color-hover); + font-weight: var(--tv-Pager-page-item-font-weight-hover); svg { - fill: var(--ti-pager-list-item-hover-text-color); + fill: var(--tv-Pager-icon-color-hover); } } @@ -108,21 +109,21 @@ &.quicknext, &.quickprev { svg { - font-size: var(--ti-pager-dot-is-popup-svg-font-size); + font-size: var(--tv-Pager-icon-size); } &.is-popup { svg { - display: var(--ti-pager-dot-is-popup-display); + display: inline; } } } &.is-active { - font-weight: var(--ti-pager-active-font-weight); - color: var(--ti-pager-active-font-color); - background-color: var(--ti-pager-active-bg-color); - border: 1px solid var(--ti-pager-poplist-item-hover-border-color); + font-weight: bold; + color: var(--tv-Pager-text-color); + background-color: var(--tv-Pager-page-item-bg-color-active); + border: 1px solid var(--tv-Pager-page-item-border-color-hover); } } li:last-child { @@ -143,49 +144,47 @@ font-size: 0; input[type='text'] { - width: var(--ti-pager-input-width); + width: 48px; text-align: center; vertical-align: top; - border-radius: var(--ti-pager-input-border-radius); + border-radius: var(--tv-Pager-input-border-radius); display: inline-block; position: inherit; - height: var(--ti-pager-input-height); - line-height: var(--ti-pager-input-height); - border: 1px solid var(--ti-pager-input-border-color); - color: var(--ti-pager-normal-text-color); - font-size: var(--ti-pager-font-size); + height: var(--tv-Pager-input-height); + line-height: var(--tv-Pager-input-height); + border: 1px solid var(--tv-Pager-border-color); + color: var(--tv-Pager-text-color); + font-size: var(--tv-Pager-font-size); transition: border 0.3s; outline: 0; box-sizing: border-box; margin-right: 4px; &:hover { - border: 1px solid var(--ti-pager-input-hover-border-color); - color: var(--ti-pager-normal-text-color); + border: 1px solid var(--tv-Pager-border-color-hover); } &:focus, &:active, &.active, &[active] { - border: 1px solid var(--ti-pager-primary-border-color); + border: 1px solid var(--tv-Pager-border-color-active); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } &[disabled] { - color: var(--ti-pager-disabled-text-color); - border-color: var(--ti-pager-select-disabled-border-color); - background: var(--ti-pager-select-disabled-bg-color); + color: var(--tv-Pager-text-color-disabled); + border-color: var(--tv-Pager-border-color-disabled); + background: var(--tv-Pager-bg-color-disabled); cursor: not-allowed; } } &-text { - color: var(--ti-pager-normal-text-color); - font-size: var(--ti-pager-font-size); - padding-left: var(--ti-pager-normal-text-padding-left); + font-size: var(--tv-Pager-font-size); + padding-left: var(--tv-Pager-goto-left-padding-left); margin-right: 8px; - line-height: var(--ti-pager-input-height); + line-height: var(--tv-Pager-input-height); &-sufix { padding-left: 4px; @@ -193,14 +192,13 @@ } button { - height: var(--ti-pager-input-height); - line-height: var(--ti-pager-input-height); + height: var(--tv-Pager-input-height); + line-height: var(--tv-Pager-input-height); border: 1px solid #d9d9d9; - color: var(--ti-pager-goto-text-color); vertical-align: middle; - border-radius: var(--ti-pager-input-border-radius); + border-radius: var(--tv-Pager-input-border-radius); background: #fff; - font-size: var(--ti-pager-font-size); + font-size: var(--tv-Pager-font-size); padding: 0 8px; text-align: center; display: inline-block; @@ -217,13 +215,13 @@ .user-select(none); &:hover { - border: 1px solid var(--ti-pager-goto-btn-border-hover-color); - color: var(--ti-pager-goto-btn-text-hover-color); + border: 1px solid var(--tv-Pager-border-color-hover); + color: var(--tv-Pager-text-color); } &.is-disabled { - color: var(--ti-pager-disabled-text-color); - border-color: var(--ti-pager-disabled-border-color); + color: var(--tv-Pager-text-color-disabled); + border-color: var(--tv-Pager-page-item-border-color-disabled); cursor: not-allowed; } } @@ -231,45 +229,41 @@ &__btn-prev, &__btn-next { - width: var(--ti-pager-width); - height: var(--ti-pager-height); - line-height: calc(var(--ti-pager-height) - 2px); + height: var(--tv-Pager-height); + line-height: calc(var(--tv-Pager-height) - 2px); display: inline-flex; justify-content: center; align-items: center; - font-size: var(--ti-pager-font-size); + font-size: var(--tv-Pager-font-size); font-weight: bolder; - color: var(--ti-pagination-prev-next-color); outline: none; - border: 1px solid var(--ti-pager-li-border-color); + border: 1px solid var(--tv-Pager-page-item-border-color); background: transparent; margin-top: 0; - margin-right: var(--ti-pager-prev-margin-right); - margin-bottom: 0px; - margin-left: var(--ti-pager-prev-margin-left); - padding-top: 0px; - padding-right: var(--ti-pager-prev-padding-right); - padding-bottom: 0px; - padding-left: var(--ti-pager-prev-padding-left); + margin-right: var(--tv-Pager-prev-margin-right); + margin-bottom: 0; + margin-left: var(--tv-Pager-prev-margin-left); + padding: 0; + vertical-align: middle; cursor: pointer; span { - color: var(--ti-pager-primary-text-color); + color: var(--tv-Pager-custom-prev-next-text-color); } svg { - fill: var(--ti-pager-btn-svg-fill-color); - font-size: var(--ti-pager-svg-font-size); + fill: var(--tv-Pager-icon-color); + font-size: var(--tv-Pager-icon-size); vertical-align: middle; } &:hover { - background-color: var(--ti-pager-prev-next-hover-bg-color); - border: 1px solid var(--ti-pager-poplist-item-hover-border-color); + background-color: var(--tv-Pager-prev-next-bg-color-hover); + border: 1px solid var(--tv-Pager-page-item-border-color-hover); svg { - fill: var(--ti-pager-poplist-item-hover-text-color); + fill: var(--tv-Pager-icon-color-hover); } } @@ -281,32 +275,30 @@ } span { - color: var(--ti-pager-prev-next-text-color-disabled); + color: var(--tv-Pager-text-color-disabled); } svg { - fill: var(--ti-pager-prev-next-text-color-disabled); + fill: var(--tv-Pager-icon-color-disabled); } } } &__btn-next { - margin-right: var(--ti-pager-next-margin-right); - margin-left: var(--ti-pager-next-margin-left); - padding-right: var(--ti-pager-next-padding-right); + margin-right: var(--tv-Pager-next-margin-right); + margin-left: var(--tv-Pager-next-margin-left); } &__selector { .component-css-vars-pager(); &.@{popover-prefix-cls}.@{popper-prefix-cls} { - min-width: var(--ti-pager-sizes-input-min-width); border: 0; padding: 8px 0; - border-radius: var(--ti-pager-pop-body-border-radius); + border-radius: var(--tv-Pager-input-border-radius); &[x-placement^='bottom'] { - margin-top: var(--ti-pager-pop-body-margin-top); + margin-top: 4px; } &[x-placement^='top'] { @@ -322,9 +314,10 @@ &-poplist { .list-item { - min-height: var(--ti-pager-poplist-item-min-height); + color: var(--tv-Pager-text-color); + min-height: var(--tv-Pager-sizes-popup-item-height); padding: 0 16px; - line-height: var(--ti-pager-poplist-item-min-height); + line-height: var(--tv-Pager-sizes-popup-item-height); max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -332,30 +325,25 @@ &:hover { cursor: pointer; - background: var(--ti-pager-poplist-item-hover-bg-color); - color: var(--ti-pager-poplist-item-hover-text-color); + background: var(--tv-Pager-sizes-popup-bg-color-hover); } &.is-selected { - background: var(--ti-pager-poplist-item-selected-bg-color); - color: var(--ti-pager-normal-text-color); - &:hover { - background: var(--ti-pager-poplist-item-selected-bg-color); + background: var(--tv-Pager-page-item-bg-color-hover); } } &.select-pre { - background: var(--ti-pager-poplist-item-hover-bg-color); - color: var(--ti-pager-poplist-item-hover-text-color); + background: var(--tv-Pager-sizes-popup-bg-color-hover); &.is-selected { - color: var(--ti-pager-poplist-item-selected-text-color); + color: var(--tv-Pager-sizes-popup-text-color-active); background: transparent; font-weight: bold; &:hover { - background: var(--ti-pager-poplist-item-selected-bg-color); + background: var(--tv-Pager-page-item-bg-color-hover); } } } @@ -380,27 +368,16 @@ } } - & &__group { - & + .@{pager-prefix-cls}__sizes { - margin-top: 0; - margin-right: var(--ti-pager-group-sizes-margin-right); - margin-bottom: 0; - margin-left: 16px; - } - } - &__page-size { - min-width: var(--ti-pager-sizes-input-min-width); max-width: 200px; position: relative; text-align: left; - height: var(--ti-pager-input-height); - line-height: calc(var(--ti-pager-input-height) - 2px); - border: 1px solid var(--ti-pager-input-border-color); - color: var(--ti-pager-normal-text-color); - border-radius: var(--ti-pager-input-border-radius); + height: var(--tv-Pager-input-height); + line-height: calc(var(--tv-Pager-input-height) - 2px); + border: 1px solid var(--tv-Pager-border-color); + border-radius: var(--tv-Pager-input-border-radius); background: #fff; - font-size: var(--ti-pager-font-size); + font-size: var(--tv-Pager-font-size); padding: 0; padding-left: 12px; padding-right: 4px; @@ -413,20 +390,19 @@ &:hover { outline: 0; - color: var(--ti-pager-sizes-input-hover-text-color); - border-color: var(--ti-pager-input-hover-border-color); + border-color: var(--tv-Pager-border-color-hover); } &:active, &:focus { outline: 0; - border-color: var(--ti-pager-input-hover-border-color); + border-color: var(--tv-Pager-border-color-hover); } &-btn { - padding: 0 var(--ti-pager-input-btn-padding-horizontal); - height: var(--ti-pager-height); - line-height: calc(var(--ti-pager-height) - 2px); + padding: 0 var(--tv-Pager-sizes-arrow-padding-x); + height: var(--tv-Pager-height); + line-height: calc(var(--tv-Pager-height) - 2px); position: relative; float: right; top: -1px; @@ -437,15 +413,19 @@ cursor: pointer; svg { - font-size: var(--ti-pager-svg-font-size); - fill: var(--ti-pager-total-svg-fill-color); + font-size: var(--tv-Pager-icon-size); + fill: var(--tv-Pager-icon-color); vertical-align: middle; + + &:hover { + fill: var(--tv-Pager-icon-color-hover); + } } } .sizes { - margin-right: var(--ti-pager-sizes-num-margin-right); - font-family: var(--ti-pager-number-font-family); + margin-right: var(--tv-Pager-sizes-num-margin-right); + font-family: var(--tv-Pager-number-font-family); } } @@ -460,27 +440,33 @@ &&--mini { & .@{pager-prefix-cls}__total { - font-size: var(--ti-pager-mini-font-size); + font-size: var(--tv-Pager-font-size-xs); } .@{pager-prefix-cls}__goto-text { - font-size: var(--ti-pager-mini-font-size); - line-height: var(--ti-pager-mini-input-height); + font-size: var(--tv-Pager-font-size-xs); + line-height: var(--tv-Pager-input-height-xs); } .@{pager-prefix-cls}__goto { input { - height: var(--ti-pager-mini-input-height); - line-height: var(--ti-pager-mini-input-height); + height: var(--tv-Pager-input-height-xs); + line-height: var(--tv-Pager-input-height-xs); } } + .@{pager-prefix-cls}__page-size, + .@{pager-prefix-cls}__page-size-btn { + height: var(--tv-Pager-input-height-xs); + line-height: calc(var(--tv-Pager-input-height-xs) - 2px); + } + li { - min-width: var(--ti-pager-mini-min-width); - height: 24px; + min-width: var(--tv-Pager-min-width-xs); + height: var(--tv-Pager-input-height-xs); padding: 0 4px; - line-height: 22px; - font-size: var(--ti-pager-mini-font-size); + line-height: calc(var(--tv-Pager-input-height-xs) - 2px); + font-size: var(--tv-Pager-font-size-xs); } .@{pager-prefix-cls}__btn-prev svg, @@ -489,57 +475,56 @@ } .@{pager-prefix-cls}__input input { - height: 24px; - line-height: 22px; + height: var(--tv-Pager-input-height-xs); + line-height: calc(var(--tv-Pager-input-height-xs) - 2px); } .@{pager-prefix-cls}__input-btn { - height: 24px; - line-height: 22px; + height: var(--tv-Pager-input-height-xs); + line-height: calc(var(--tv-Pager-input-height-xs) - 2px); } } &.is-disabled { .@{pager-prefix-cls}__total { - color: var(--ti-pager-disabled-text-color); + color: var(--tv-Pager-text-color-disabled); } ul li { cursor: not-allowed; - color: var(--ti-pager-disabled-text-color); + color: var(--tv-Pager-text-color-disabled); background-color: transparent; - border-color: var(--ti-pager-disabled-border-color); + border-color: var(--tv-Pager-page-item-border-color-disabled); &.is-active, &:not(.dot):not(.is-active):hover { - color: var(--ti-pager-disabled-text-color); + color: var(--tv-Pager-text-color-disabled); font-weight: normal; background-color: transparent; - border-color: var(--ti-pager-disabled-border-color); + border-color: var(--tv-Pager-page-item-border-color-disabled); } svg { - fill: var(--ti-pager-disabled-text-color); + fill: var(--tv-Pager-icon-color-disabled); } } .@{pager-prefix-cls}__page-size { - color: var(--ti-pager-disabled-text-color); + color: var(--tv-Pager-text-color-disabled); cursor: not-allowed; - border-color: var(--ti-pager-select-disabled-border-color); - background: var(--ti-pager-select-disabled-bg-color); + border-color: var(--tv-Pager-border-color-disabled); + background: var(--tv-Pager-bg-color-disabled); } .@{pager-prefix-cls}__page-size-btn { svg { - fill: var(--ti-pager-disabled-text-color); - color: var(--ti-pager-disabled-text-color); + fill: var(--tv-Pager-icon-color-disabled); cursor: not-allowed; } } .@{pager-prefix-cls}__goto-text { - color: var(--ti-pager-disabled-text-color); + color: var(--tv-Pager-text-color-disabled); } } @@ -547,7 +532,7 @@ .component-css-vars-pager(); .tiny-option-label { - font-family: var(--ti-pager-number-font-family); + font-family: var(--tv-Pager-number-font-family); } } } diff --git a/packages/theme/src/pager/old-theme.js b/packages/theme/src/pager/old-theme.js index 6e9823cd3..6b76f1f49 100644 --- a/packages/theme/src/pager/old-theme.js +++ b/packages/theme/src/pager/old-theme.js @@ -1,45 +1,44 @@ export const tinyPagerOldTheme = { - 'ti-pager-sizes-num-margin-right': 'var(--ti-common-space-base, 4px)', - 'ti-pager-mini-min-width': '18px', - 'ti-pager-selector-padding-vertical': 'var(--ti-common-space-3x, 12px)', - 'ti-pager-input-btn-padding-horizontal': '6px', - 'ti-pager-sizes-input-hover-text-color': 'var(--ti-common-color-info-normal, #252b3a)', - 'ti-pager-group-sizes-margin-right': '16px', - 'ti-pager-prev-next-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)', - 'ti-pager-dot-is-popup-svg-font-size': '14px', - 'ti-pager-svg-font-size': 'var(--ti-pager-font-size)', - 'ti-pager-total-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)', - 'ti-pager-total-line-height': '24px', - 'ti-pager-total-height': '24px', - 'ti-pager-total-font-size': '12px', - 'ti-pager-btn-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)', - 'ti-pager-next-margin-left': '6px', - 'ti-pager-next-margin-right': '6px', - 'ti-pager-next-padding-right': '4px', - 'ti-pager-prev-margin-right': '4px', - 'ti-pager-prev-margin-left': '4px', - 'ti-pager-prev-padding-right': '6px', - '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-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)', - 'ti-pager-li-item-hover-font-weight': 'var(--ti-common-font-weight-normal)', - 'ti-pager-li-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)', - 'ti-pager-li-border-radius': 'var(--ti-common-border-radius-normal, 2px)', - 'ti-pager-poplist-item-padding-horizontal': 'var(--ti-common-space-6, 6px)', - 'ti-pager-input-padding-horizontal': '0', - 'ti-pager-input-width': '40px', - 'ti-pager-min-width': 'auto', - 'ti-pager-height': 'var(--ti-common-size-height-mini, 24px)', - 'ti-pager-normal-text-padding-left': 'calc(var(--ti-common-space-base) * 3 + 2px, 14px)', - 'ti-pager-mini-font-size': 'var(--ti-common-font-size-base, 12px)', - 'ti-pager-input-padding-vertical': '10px', - 'ti-pager-input-height': 'var(--ti-common-size-height-mini, 24px)', - 'ti-pager-input-border-color': 'var(--ti-common-color-border, #adb0b8)', - 'ti-pager-active-font-weight': 'var(--ti-common-font-weight-normal)', - 'ti-pager-active-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)', - 'ti-pager-active-font-color': 'var(--ti-common-color-text-white, #fff)', - 'ti-pager-primary-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)' + 'tv-Pager-sizes-num-margin-right': 'var(--ti-common-space-base, 4px)', + 'tv-Pager-mini-min-width': '18px', + 'tv-Pager-selector-padding-y': 'var(--ti-common-space-3x, 12px)', + 'tv-Pager-input-btn-padding-horizontal': '6px', + 'tv-Pager-sizes-input-hover-text-color': 'var(--ti-common-color-info-normal, #252b3a)', + 'tv-Pager-prev-next-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)', + 'tv-Pager-dot-is-popup-svg-font-size': '14px', + 'tv-Pager-svg-font-size': 'var(--tv-Pager-font-size)', + 'tv-Pager-total-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)', + 'tv-Pager-total-line-height': '24px', + 'tv-Pager-total-height': '24px', + 'tv-Pager-total-font-size': '12px', + 'tv-Pager-btn-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)', + 'tv-Pager-next-margin-left': '6px', + 'tv-Pager-next-margin-right': '6px', + 'tv-Pager-next-padding-right': '4px', + 'tv-Pager-prev-margin-right': '4px', + 'tv-Pager-prev-margin-left': '4px', + 'tv-Pager-prev-padding-right': '6px', + 'tv-Pager-prev-padding-left': '6px', + 'tv-Pager-goto-btn-text-hover-color': 'var(--ti-common-color-text-highlight, #526ecc)', + 'tv-Pager-poplist-item-min-height': '30px', + 'tv-Pager-poplist-item-selected-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)', + 'tv-Pager-poplist-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)', + 'tv-Pager-poplist-item-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)', + 'tv-Pager-li-item-hover-font-weight': 'var(--ti-common-font-weight-normal)', + 'tv-Pager-li-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)', + 'tv-Pager-li-border-radius': 'var(--ti-common-border-radius-normal, 2px)', + 'tv-Pager-poplist-item-padding-horizontal': 'var(--ti-common-space-6, 6px)', + 'tv-Pager-input-padding-horizontal': '0', + 'tv-Pager-input-width': '40px', + 'tv-Pager-min-width': 'auto', + 'tv-Pager-height': 'var(--ti-common-size-height-mini, 24px)', + 'tv-Pager-normal-text-padding-left': 'calc(var(--ti-common-space-base) * 3 + 2px, 14px)', + 'tv-Pager-mini-font-size': 'var(--ti-common-font-size-base, 12px)', + 'tv-Pager-input-padding-y': '10px', + 'tv-Pager-input-height': 'var(--ti-common-size-height-mini, 24px)', + 'tv-Pager-input-border-color': 'var(--ti-common-color-border, #adb0b8)', + 'tv-Pager-active-font-weight': 'var(--ti-common-font-weight-normal)', + 'tv-Pager-active-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)', + 'tv-Pager-active-font-color': 'var(--ti-common-color-text-white, #fff)', + 'tv-Pager-primary-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)' } diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less index fa444362e..3c4188806 100644 --- a/packages/theme/src/pager/vars.less +++ b/packages/theme/src/pager/vars.less @@ -11,161 +11,98 @@ */ .component-css-vars-pager() { - // 分页默认文本色(不含前往按钮|页码项) - --ti-pager-normal-text-color: var(--ti-common-color-info-normal, #252b3a); - // 分页页码选中项背景色 - --ti-pager-primary-bg-color: var(--ti-common-color-bg-white-emphasize); - // 分页页码选中项文字色 - --ti-pager-active-font-color: var(--ti-common-color-text-primary); - // 分页页码选中项背景色 - --ti-pager-active-bg-color: #f5f5f5; - // 自定义上下页按钮文本色 - --ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc); - // 分页跳转输入框激活颜色 - --ti-pager-primary-border-color: var(--ti-common-color-line-active, #5e7ce0); - // 分页主色调悬浮色 - --ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); - // 分页页码选中字重 - --ti-pager-active-font-weight: var(--ti-common-font-weight-bold); - // 分页禁用状态下字体颜色 - --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); - // 分页输入框和选择框悬浮边框色 - --ti-pager-input-hover-border-color: var(--ti-common-color-line-hover, #575d6c); - // 分页输入框渐变结束点色值 - --ti-pager-input-stop-color: var(--ti-common-color-line-normal, #adb0b8); - // 分页输入框 光源的色 - --ti-pager-input-lighting-color: var(--ti-common-color-line-active, #5e7ce0); - // 分页输入框圆角 - --ti-pager-input-border-radius: var(--ti-common-border-radius-normal, 2px); - // 分页选择框|输入框|前往按钮高度 - --ti-pager-input-height: var(--ti-common-size-height-normal); - // mini分页选择框|输入框|前往按钮高度 - --ti-pager-mini-input-height: var(--ti-common-size-height-mini, 24px); - // 分页输入框纵向内边距 - --ti-pager-input-padding-vertical: var(--ti-common-space-3x); - // 分页字号 - --ti-pager-font-size: var(--ti-common-font-size-base, 12px); - // mini分页字号 - --ti-pager-mini-font-size: var(--ti-common-font-size-0); - // 分页文字左边内边距 - --ti-pager-normal-text-padding-left: var(--ti-common-space-4x); - // 分页前往按钮|页码项文本色 - --ti-pager-text-color: var(--ti-common-color-text-secondary, #575d6c); - // 分页下拉框按钮图标色 - --ti-pager-normal-icon-color: var(--ti-common-color-icon-normal, #575d6c); - // 分页页码项高度 - --ti-pager-height: var(--ti-common-size-height-normal); - // 分页页码项宽度 - --ti-pager-width: auto; - // 分页页码项最小宽度 - --ti-pager-min-width: var(--ti-common-size-height-normal); - // 分页输入框宽度 - --ti-pager-input-width: 48px; - // 分页输入框水平内边距 - --ti-pager-input-padding-horizontal: var(--it-common-space-2x); - // 分页页码项垂直内边距 - --ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0, 0); - // 分页页码项水平内边距 - --ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-2x); - // 分页未选中页码项悬浮阴影 - --ti-pager-poplist-item-unchecked-box-shadow: none; - - // 分页项圆角 - --ti-pager-li-border-radius: var(--ti-common-border-radius-6); - // 分页项边框颜色 - --ti-pager-li-border-color: var(--ti-common-color-transparent, transparent); - // 分页项悬浮颜色 - --ti-pager-li-item-hover-text-color: var(--ti-pager-text-color); - // 分页项悬浮字重 - --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-text-color: var(--ti-common-color-text-primary); - // 分页下拉框选中项默认背景色 - --ti-pager-poplist-item-selected-bg-color: #f5f5f5; - // 分页下拉框项选中字体颜色 - --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); - // 分页下拉框圆角 - --ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal, 2px); - // 分页下拉框顶部外边距 - --ti-pager-pop-body-margin-top: var(--ti-common-space-base); - // 分页下拉项最小高度 - --ti-pager-poplist-item-min-height: 32px; - - // 分页下一页文字禁用色 - --ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); - // 分页跳转输入框文字颜色 - --ti-pager-goto-text-color: var(--ti-common-color-text-secondary, #575d6c); - // 分页跳转输入框边框悬浮颜色 - --ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover, #575d6c); - // 分页跳转输入框文字颜色 - --ti-pager-goto-btn-text-hover-color: var(--ti-common-color-selected-text-color); - // 分页上一页左侧内边距 - --ti-pager-prev-padding-left: var(--ti-common-space-0); - // 分页上一页右侧内边距 - --ti-pager-prev-padding-right: var(--ti-common-space-0); - // 分页上一页左侧外边距 - --ti-pager-prev-margin-left: var(--ti-common-space-4x); - // 分页上一页右侧外边距 - --ti-pager-prev-margin-right: var(--ti-common-space-2x); - // 分页下一页右侧内边距 - --ti-pager-next-padding-right: var(--ti-common-space-0); - // 分页下一页右侧外边距 - --ti-pager-next-margin-right: var(--ti-common-space-0); - // 分页下一页左侧外边距 - --ti-pager-next-margin-left: var(--ti-common-space-2x); - // 分页上一页和下一页图标填充 - --ti-pager-btn-svg-fill-color: var(--ti-common-color-icon-normal); - - // 分页总条数字体大小 - --ti-pager-total-font-size: var(--ti-common-font-size-base); - // 分页总条数高度 - --ti-pager-total-height: var(--ti-common-line-height-2); - // 分页总条数行高 - --ti-pager-total-line-height: var(--ti-common-line-height-2); - // 分页总条数图标填充色 - --ti-pager-total-svg-fill-color: var(--ti-common-color-icon-normal); - // 分页图标大小 - --ti-pager-svg-font-size: var(--ti-common-font-size-2); - - // 分页页码折叠时svg显示 - --ti-pager-dot-is-popup-display: inline; - // 分页页码折叠时svg大小 - --ti-pager-dot-is-popup-svg-font-size: var(--ti-common-font-size-2); - - // 分页前进和后退按钮悬浮背景色 - --ti-pager-prev-next-hover-bg-color: transparent; - // 分页页码项右侧外边距 - --ti-pager-group-sizes-margin-right: var(--ti-common-space-0); - // 分页页码选项框宽度 - --ti-pager-sizes-input-min-width: var(--ti-common-size-10x, 80px); - // 分页选择框悬浮文本色 - --ti-pager-sizes-input-hover-text-color: #595959; - // 分页选择框右侧下拉按钮水平内边距 - --ti-pager-input-btn-padding-horizontal: var(--ti-common-size-2x); - - // 分页下拉弹出框纵向内边距 - --ti-pager-selector-padding-vertical: var(--ti-common-space-2x); - - // 小尺寸分页最小宽度 - --ti-pager-mini-min-width: var(--ti-common-size-width-mini); - // 分页大小数字右侧外边距 - --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; + --tv-Pager-number-font-family: arial, helvetica, sans-serif; + // 分页字号 + --tv-Pager-font-size: var(--tv-font-size-md); + // 分页文本色 + --tv-Pager-text-color: var(--tv-color-text); + // 分页禁用文本色 + --tv-Pager-text-color-disabled: var(--tv-color-text-disabled); + // 分页二级文本颜色，页码项文本色 + --tv-Pager-text-color-secondary: var(--tv-color-text-secondary); + // 页码悬浮文本色 + --tv-Pager-list-item-hover-text-color: var(--tv-color-text); + // 分页图标大小 + --tv-Pager-icon-size: 16px; + // 分页图标颜色 + --tv-Pager-icon-color: var(--tv-color-icon); + // 分页图标悬浮颜色 + --tv-Pager-icon-color-hover: var(--tv-color-icon-hover); + // 分页图标禁用颜色 + --tv-Pager-icon-color-disabled: var(--tv-color-icon-disabled); + // 分页边框颜色 + --tv-Pager-border-color: var(--tv-color-border); + // 分页边框悬浮颜色 + --tv-Pager-border-color-hover: var(--tv-color-border-hover); + // 分页边框激活颜色 + --tv-Pager-border-color-active: var(--tv-color-border-active); + // 分页边框禁用颜色 + --tv-Pager-border-color-disabled: var(--tv-color-border-disabled); + // 分页悬浮背景颜色 + --tv-Pager-bg-color-hover: var(--tv-color-bg-hover); + // 分页禁用背景颜色 + --tv-Pager-bg-color-disabled: var(--tv-color-bg-disabled); + // 分页高度 + --tv-Pager-height: var(--tv-size-height-md); + // 分页纵向内边距 + --tv-Pager-padding-y: var(--tv-space-md); + // -------mini分页相关样式------- + // mini分页字号 + --tv-Pager-font-size-xs: var(--tv-font-size-sm); + // mini分页选择框|输入框|前往按钮高度 + --tv-Pager-input-height-xs: var(--tv-size-height-xs); + // 小尺寸分页页码项最小宽度 + --tv-Pager-min-width-xs: 24px; + // -------分页页码相关样式------- + // 分页页码选中时背景色 + --tv-Pager-page-item-bg-color-active: var(--tv-color-bg); + // 分页页码悬浮时背景色 + --tv-Pager-page-item-bg-color-hover: var(--tv-color-bg); + // 分页页码边框颜色 + --tv-Pager-page-item-border-color: transparent; + // 分页页码禁用状态下边框颜色 + --tv-Pager-page-item-border-color-disabled: transparent; + // 分页页码项默认悬浮边框色 + --tv-Pager-page-item-border-color-hover: transparent; + // 分页页码项项圆角 + --tv-Pager-page-item-border-radius: var(--tv-border-radius-round); + // 分页页码悬浮字重 + --tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-medium); + // 分页页码项最小宽度 + --tv-Pager-page-item-min-width: 32px; + // 分页页码项水平内边距 + --tv-Pager-page-item-padding-x: var(--tv-space-md); + // -------上一页、下一页相关样式------- + // 分页前进和后退按钮悬浮背景色 + --tv-Pager-prev-next-bg-color-hover: transparent; + // 自定义上下页按钮文本色 + --tv-Pager-custom-prev-next-text-color: var(--tv-color-text-link); + // 分页上一页左侧外边距 + --tv-Pager-prev-margin-left: var(--tv-space-xl); + // 分页上一页右侧外边距 + --tv-Pager-prev-margin-right: var(--tv-space-md); + // 分页下一页右侧外边距 + --tv-Pager-next-margin-right: 0; + // 分页下一页左侧外边距 + --tv-Pager-next-margin-left: var(--tv-space-md); + // -------分页输入框相关样式------- + // 分页输入框圆角 + --tv-Pager-input-border-radius: var(--tv-border-radius-md); + // 分页选择框|输入框|前往按钮高度 + --tv-Pager-input-height: var(--tv-size-height-md); + // -------跳至相关样式------ + // 跳至左侧文字左侧内边距 + --tv-Pager-goto-left-padding-left: var(--tv-space-xl); + // -------分页大小下拉面板相关样式 + // 分页大小下拉图标水平内边距 + --tv-Pager-sizes-arrow-padding-x: var(--tv-space-md); + // 分页大小数字右侧外边距 + --tv-Pager-sizes-num-margin-right: var(--tv-space-sm); + // 分页大小选项悬浮背景色 + --tv-Pager-sizes-popup-bg-color-hover: var(--tv-color-bg-hover); + // 分页大小下拉框选项选中字体颜色 + --tv-Pager-sizes-popup-text-color-active: var(--tv-color-text-active); + // 分页下拉项最小高度 + --tv-Pager-sizes-popup-item-height: 32px; }