fix: pagination mini size style
parent
2bf85998ba
commit
afb2619a81
|
@ -82,7 +82,7 @@ export default defineComponent({
|
||||||
props: paginationProps(),
|
props: paginationProps(),
|
||||||
// emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
|
// emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
|
||||||
setup(props, { slots, attrs }) {
|
setup(props, { slots, attrs }) {
|
||||||
const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
|
const { prefixCls, configProvider, direction, size } = useConfigInject('pagination', props);
|
||||||
|
|
||||||
// style
|
// style
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
|
@ -94,50 +94,45 @@ export default defineComponent({
|
||||||
const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale'));
|
const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale'));
|
||||||
const getIconsProps = (pre: string) => {
|
const getIconsProps = (pre: string) => {
|
||||||
const ellipsis = <span class={`${pre}-item-ellipsis`}>•••</span>;
|
const ellipsis = <span class={`${pre}-item-ellipsis`}>•••</span>;
|
||||||
let prevIcon = (
|
const prevIcon = (
|
||||||
<button class={`${pre}-item-link`} type="button" tabindex={-1}>
|
<button class={`${pre}-item-link`} type="button" tabindex={-1}>
|
||||||
<LeftOutlined />
|
{direction.value === 'rtl' ? <RightOutlined /> : <LeftOutlined />}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
let nextIcon = (
|
const nextIcon = (
|
||||||
<button class={`${pre}-item-link`} type="button" tabindex={-1}>
|
<button class={`${pre}-item-link`} type="button" tabindex={-1}>
|
||||||
<RightOutlined />
|
{direction.value === 'rtl' ? <LeftOutlined /> : <RightOutlined />}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
let jumpPrevIcon = (
|
const jumpPrevIcon = (
|
||||||
<a rel="nofollow" class={`${pre}-item-link`}>
|
<a rel="nofollow" class={`${pre}-item-link`}>
|
||||||
{/* You can use transition effects in the container :) */}
|
|
||||||
<div class={`${pre}-item-container`}>
|
<div class={`${pre}-item-container`}>
|
||||||
<DoubleLeftOutlined class={`${pre}-item-link-icon`} />
|
{direction.value === 'rtl' ? (
|
||||||
|
<DoubleRightOutlined class={`${pre}-item-link-icon`} />
|
||||||
|
) : (
|
||||||
|
<DoubleLeftOutlined class={`${pre}-item-link-icon`} />
|
||||||
|
)}
|
||||||
{ellipsis}
|
{ellipsis}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
let jumpNextIcon = (
|
const jumpNextIcon = (
|
||||||
<a rel="nofollow" class={`${pre}-item-link`}>
|
<a rel="nofollow" class={`${pre}-item-link`}>
|
||||||
{/* You can use transition effects in the container :) */}
|
|
||||||
<div class={`${pre}-item-container`}>
|
<div class={`${pre}-item-container`}>
|
||||||
<DoubleRightOutlined class={`${pre}-item-link-icon`} />
|
{direction.value === 'rtl' ? (
|
||||||
|
<DoubleLeftOutlined class={`${pre}-item-link-icon`} />
|
||||||
|
) : (
|
||||||
|
<DoubleRightOutlined class={`${pre}-item-link-icon`} />
|
||||||
|
)}
|
||||||
{ellipsis}
|
{ellipsis}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
// change arrows direction in right-to-left direction
|
return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
|
||||||
if (direction.value === 'rtl') {
|
|
||||||
[prevIcon, nextIcon] = [nextIcon, prevIcon];
|
|
||||||
[jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon];
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
prevIcon,
|
|
||||||
nextIcon,
|
|
||||||
jumpPrevIcon,
|
|
||||||
jumpNextIcon,
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const {
|
const {
|
||||||
size,
|
|
||||||
itemRender = slots.itemRender,
|
itemRender = slots.itemRender,
|
||||||
buildOptionText = slots.buildOptionText,
|
buildOptionText = slots.buildOptionText,
|
||||||
selectComponentClass,
|
selectComponentClass,
|
||||||
|
@ -145,7 +140,8 @@ export default defineComponent({
|
||||||
...restProps
|
...restProps
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const isSmall = size === 'small' || !!(breakpoint.value?.xs && !size && responsive);
|
const isSmall =
|
||||||
|
size.value === 'small' || !!(breakpoint.value?.xs && !size.value && responsive);
|
||||||
const paginationProps = {
|
const paginationProps = {
|
||||||
...restProps,
|
...restProps,
|
||||||
...getIconsProps(prefixCls.value),
|
...getIconsProps(prefixCls.value),
|
||||||
|
@ -156,7 +152,10 @@ export default defineComponent({
|
||||||
buildOptionText,
|
buildOptionText,
|
||||||
...attrs,
|
...attrs,
|
||||||
class: classNames(
|
class: classNames(
|
||||||
{ mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
|
{
|
||||||
|
[`${prefixCls.value}-mini`]: isSmall,
|
||||||
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||||
|
},
|
||||||
attrs.class,
|
attrs.class,
|
||||||
hashId.value,
|
hashId.value,
|
||||||
),
|
),
|
||||||
|
|
|
@ -57,7 +57,16 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
|
||||||
|
|
||||||
[`&${componentCls}-disabled`]: {
|
[`&${componentCls}-disabled`]: {
|
||||||
cursor: 'not-allowed',
|
cursor: 'not-allowed',
|
||||||
|
[`&${componentCls}-mini`]: {
|
||||||
|
[`
|
||||||
|
&:hover ${componentCls}-item:not(${componentCls}-item-active),
|
||||||
|
&:active ${componentCls}-item:not(${componentCls}-item-active),
|
||||||
|
&:hover ${componentCls}-item-link,
|
||||||
|
&:active ${componentCls}-item-link
|
||||||
|
`]: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
[`${componentCls}-item`]: {
|
[`${componentCls}-item`]: {
|
||||||
cursor: 'not-allowed',
|
cursor: 'not-allowed',
|
||||||
|
|
||||||
|
@ -89,27 +98,39 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
|
||||||
[`${componentCls}-item-link`]: {
|
[`${componentCls}-item-link`]: {
|
||||||
color: token.colorTextDisabled,
|
color: token.colorTextDisabled,
|
||||||
cursor: 'not-allowed',
|
cursor: 'not-allowed',
|
||||||
|
|
||||||
'&:hover, &:active': {
|
'&:hover, &:active': {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${componentCls}-simple&`]: {
|
[`${componentCls}-simple&`]: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
|
'&:hover, &:active': {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${componentCls}-item-link-icon`]: {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
|
|
||||||
[`${componentCls}-item-ellipsis`]: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
|
|
||||||
[`${componentCls}-simple-pager`]: {
|
[`${componentCls}-simple-pager`]: {
|
||||||
color: token.colorTextDisabled,
|
color: token.colorTextDisabled,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
|
||||||
|
[`${componentCls}-item-link-icon`]: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-item-ellipsis`]: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`&${componentCls}-simple`]: {
|
||||||
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||||
|
[`&${componentCls}-disabled ${componentCls}-item-link`]: {
|
||||||
|
'&:hover, &:active': {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -134,6 +155,12 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||||
[`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
|
[`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: 'transparent',
|
borderColor: 'transparent',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
|
[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
|
||||||
|
@ -141,6 +168,15 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||||
height: token.paginationItemSizeSM,
|
height: token.paginationItemSizeSM,
|
||||||
margin: 0,
|
margin: 0,
|
||||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||||
|
[`&:hover ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
[`&:active ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
|
[`&${componentCls}-disabled:hover ${componentCls}-item-link`]: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`
|
[`
|
||||||
|
@ -200,7 +236,12 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
|
||||||
height: token.paginationItemSizeSM,
|
height: token.paginationItemSizeSM,
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
border: 0,
|
border: 0,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: token.colorBgTextHover,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
backgroundColor: token.colorBgTextActive,
|
||||||
|
},
|
||||||
'&::after': {
|
'&::after': {
|
||||||
height: token.paginationItemSizeSM,
|
height: token.paginationItemSizeSM,
|
||||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||||
|
|
Loading…
Reference in New Issue