mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(pagination): new theme
This commit is contained in:
07akioni
parent
dbb683cba6
commit
ddbf14a4f4
@ -17,7 +17,7 @@ export default function createLocaleMixin (componentLocaleNamespace) {
|
||||
} = this
|
||||
return locales[mergedLanguage ?? fallbackLocale]
|
||||
},
|
||||
dateFnsLocale () {
|
||||
dateLocale () {
|
||||
return this.globalLocale._dateFns
|
||||
},
|
||||
locale () {
|
||||
|
||||
@ -1,67 +1,68 @@
|
||||
<template>
|
||||
<div
|
||||
ref="selfRef"
|
||||
class="n-pagination"
|
||||
:class="{
|
||||
'n-pagination--transition-disabled': transitionDisabled,
|
||||
[`n-${mergedTheme}-theme`]: mergedTheme,
|
||||
'n-pagination--disabled': disabled
|
||||
}"
|
||||
:style="cssVars"
|
||||
>
|
||||
<div
|
||||
class="n-pagination-item n-pagination-item--backward"
|
||||
class="n-pagination-item n-pagination-item--button"
|
||||
:class="{
|
||||
'n-pagination-item--disabled':
|
||||
page <= 1 || page > compitablePageCount || disabled
|
||||
}"
|
||||
@click="backward"
|
||||
@click="handleBackwardClick"
|
||||
>
|
||||
<div class="n-pagination-item__arrow-icon">
|
||||
<n-icon>
|
||||
<backward-icon />
|
||||
</div>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div
|
||||
v-for="pageItem in pageItems"
|
||||
:key="pageItem.label"
|
||||
v-for="(pageItem, index) in pageItems"
|
||||
:key="index"
|
||||
class="n-pagination-item"
|
||||
:class="{
|
||||
'n-pagination-item--active': pageItem.active,
|
||||
'n-pagination-item--fast-backward': pageItem.type === 'fastBackward',
|
||||
'n-pagination-item--fast-forward': pageItem.type === 'fastForward',
|
||||
'n-pagination-item--disabled': disabled
|
||||
}"
|
||||
@click="dispatchPageChangeAction(pageItem)"
|
||||
@click="handlePageItemClick(pageItem)"
|
||||
@mouseenter="handlePageItemMouseEnter(pageItem)"
|
||||
@mouseleave="handlePageItemMouseLeave(pageItem)"
|
||||
>
|
||||
<template v-if="pageItem.type === 'page'">
|
||||
{{ pageItem.label }}
|
||||
</template>
|
||||
<template v-if="pageItem.type === 'fastBackward'">
|
||||
<div class="n-pagination-item__more-icon">
|
||||
<more-icon />
|
||||
</div>
|
||||
<div class="n-pagination-item__arrow-icon">
|
||||
<n-icon v-if="showFastBackward">
|
||||
<fast-backward-icon />
|
||||
</div>
|
||||
</n-icon>
|
||||
<n-icon v-else>
|
||||
<more-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template v-if="pageItem.type === 'fastForward'">
|
||||
<div class="n-pagination-item__more-icon">
|
||||
<more-icon />
|
||||
</div>
|
||||
<div class="n-pagination-item__arrow-icon">
|
||||
<n-icon v-if="showFastForward">
|
||||
<fast-forward-icon />
|
||||
</div>
|
||||
</n-icon>
|
||||
<n-icon v-else>
|
||||
<more-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="n-pagination-item n-pagination-item--forward"
|
||||
class="n-pagination-item n-pagination-item--button"
|
||||
:class="{
|
||||
'n-pagination-item--disabled':
|
||||
page < 1 || page >= compitablePageCount || disabled
|
||||
}"
|
||||
@click="forward"
|
||||
@click="handleForwardClick"
|
||||
>
|
||||
<div class="n-pagination-item__arrow-icon">
|
||||
<n-icon>
|
||||
<forward-icon />
|
||||
</div>
|
||||
</n-icon>
|
||||
</div>
|
||||
<n-select
|
||||
v-if="showSizePicker"
|
||||
@ -75,7 +76,7 @@
|
||||
<div v-if="showQuickJumper" class="n-pagination-quick-jumper">
|
||||
{{ locale.goto }}
|
||||
<n-input
|
||||
v-model:value="quickJumperValue"
|
||||
v-model:value="jumperValue"
|
||||
:size="inputSize"
|
||||
placeholder=""
|
||||
:disabled="disabled"
|
||||
@ -86,9 +87,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick, computed } from 'vue'
|
||||
import { nextTick, computed, ref, toRef, watch } from 'vue'
|
||||
import { useCompitable, useMergedState } from 'vooks'
|
||||
import { NSelect } from '../../select'
|
||||
import { NInput } from '../../input'
|
||||
import { NIcon } from '../../icon'
|
||||
import {
|
||||
FastForwardIcon,
|
||||
FastBackwardIcon,
|
||||
@ -96,23 +99,141 @@ import {
|
||||
ForwardIcon,
|
||||
MoreIcon
|
||||
} from '../../_base/icons'
|
||||
import { configurable, themeable, locale, withCssr } from '../../_mixins'
|
||||
import { useLocale, useTheme } from '../../_mixins'
|
||||
import { paginationLight } from '../styles'
|
||||
import { pageItems } from './utils'
|
||||
import styles from './styles'
|
||||
import { useCompitable } from 'vooks'
|
||||
import style from './styles/index.cssr.js'
|
||||
|
||||
function useMethods (
|
||||
props,
|
||||
{
|
||||
showFastForwardRef,
|
||||
showFastBackwardRef,
|
||||
mergedPageRef,
|
||||
mergedPageSizeRef,
|
||||
compitablePageCountRef,
|
||||
jumperValueRef,
|
||||
disableTransitionOneTick
|
||||
}
|
||||
) {
|
||||
function doUpdatePage (page) {
|
||||
if (page === mergedPageRef.value) return
|
||||
const { 'onUpdate:page': onUpdatePage, onChange } = props
|
||||
if (onUpdatePage) onUpdatePage(page)
|
||||
// deprecated
|
||||
if (onChange) onChange(page)
|
||||
}
|
||||
function doUpdatePageSize (pageSize) {
|
||||
if (pageSize === mergedPageSizeRef.value) return
|
||||
const { 'onUpdate:pageSize': onUpdatePageSize, onPageSizeChange } = this
|
||||
if (onUpdatePageSize) onUpdatePageSize(pageSize)
|
||||
// deprecated
|
||||
if (onPageSizeChange) onPageSizeChange(pageSize)
|
||||
}
|
||||
function forward () {
|
||||
if (props.disabled) return
|
||||
const page = Math.min(mergedPageRef.value + 1, compitablePageCountRef.value)
|
||||
doUpdatePage(page)
|
||||
}
|
||||
function backward () {
|
||||
if (props.disabled) return
|
||||
const page = Math.max(mergedPageRef.value - 1, 1)
|
||||
doUpdatePage(page)
|
||||
}
|
||||
function fastForward () {
|
||||
if (props.disabled) return
|
||||
const page = Math.min(
|
||||
mergedPageRef.value + (props.pageSlot - 4),
|
||||
compitablePageCountRef.value
|
||||
)
|
||||
doUpdatePage(page)
|
||||
}
|
||||
function fastBackward () {
|
||||
if (props.disabled) return
|
||||
const page = Math.max(mergedPageRef.value - (props.pageSlot - 4), 1)
|
||||
doUpdatePage(page)
|
||||
}
|
||||
function handleSizePickerChange (value) {
|
||||
doUpdatePageSize(value)
|
||||
}
|
||||
function handleQuickJumperKeyUp (e) {
|
||||
if (e.code === 'Enter') {
|
||||
const page = parseInt(jumperValueRef.value)
|
||||
if (
|
||||
!Number.isNaN(page) &&
|
||||
page >= 1 &&
|
||||
page <= compitablePageCountRef.value
|
||||
) {
|
||||
doUpdatePage(page)
|
||||
jumperValueRef.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
function handlePageItemClick (pageItem) {
|
||||
if (props.disabled) return
|
||||
switch (pageItem.type) {
|
||||
case 'page':
|
||||
doUpdatePage(pageItem.label)
|
||||
break
|
||||
case 'fastBackward':
|
||||
fastBackward()
|
||||
break
|
||||
case 'fastForward':
|
||||
fastForward()
|
||||
break
|
||||
}
|
||||
}
|
||||
function handlePageItemMouseEnter (pageItem) {
|
||||
if (props.disabled) return
|
||||
switch (pageItem.type) {
|
||||
default:
|
||||
return
|
||||
case 'fastBackward':
|
||||
showFastBackwardRef.value = true
|
||||
break
|
||||
case 'fastForward':
|
||||
showFastForwardRef.value = true
|
||||
break
|
||||
}
|
||||
disableTransitionOneTick()
|
||||
}
|
||||
function handlePageItemMouseLeave (pageItem) {
|
||||
if (props.disabled) return
|
||||
switch (pageItem.type) {
|
||||
default:
|
||||
return
|
||||
case 'fastBackward':
|
||||
showFastBackwardRef.value = false
|
||||
break
|
||||
case 'fastForward':
|
||||
showFastForwardRef.value = false
|
||||
break
|
||||
}
|
||||
disableTransitionOneTick()
|
||||
}
|
||||
return {
|
||||
handleBackwardClick: backward,
|
||||
handleForwardClick: forward,
|
||||
handlePageItemClick,
|
||||
handleSizePickerChange,
|
||||
handleQuickJumperKeyUp,
|
||||
handlePageItemMouseEnter,
|
||||
handlePageItemMouseLeave
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
components: {
|
||||
NSelect,
|
||||
NInput,
|
||||
NIcon,
|
||||
BackwardIcon,
|
||||
ForwardIcon,
|
||||
MoreIcon,
|
||||
FastForwardIcon,
|
||||
FastBackwardIcon
|
||||
},
|
||||
mixins: [configurable, themeable, withCssr(styles), locale('Pagination')],
|
||||
props: {
|
||||
page: {
|
||||
type: Number,
|
||||
@ -124,6 +245,12 @@ export default {
|
||||
},
|
||||
default: undefined
|
||||
},
|
||||
defaultPageCount: {
|
||||
validator (value) {
|
||||
return Number.isInteger(value) && value > 0
|
||||
},
|
||||
default: 1
|
||||
},
|
||||
showSizePicker: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -132,6 +259,10 @@ export default {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
defaultPageSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@ -175,18 +306,135 @@ export default {
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme(
|
||||
'Pagination',
|
||||
'Pagination',
|
||||
style,
|
||||
paginationLight,
|
||||
props
|
||||
)
|
||||
const selfRef = ref(null)
|
||||
const compitablePageCountRef = useCompitable(props, ['total', 'pageCount'])
|
||||
const jumperValueRef = ref('')
|
||||
const uncontrolledPageRef = ref(props.defaultPage)
|
||||
const uncontrolledPageSizeRef = ref(props.defaultPageSize)
|
||||
const mergedPageRef = useMergedState(
|
||||
toRef(props, 'page'),
|
||||
uncontrolledPageRef
|
||||
)
|
||||
const mergedPageSizeRef = useMergedState(
|
||||
toRef(props, 'pageSize'),
|
||||
uncontrolledPageSizeRef
|
||||
)
|
||||
const showFastForwardRef = ref(false)
|
||||
const showFastBackwardRef = ref(false)
|
||||
const transitionDisabledRef = ref(false)
|
||||
const disableTransitionOneTick = () => {
|
||||
transitionDisabledRef.value = true
|
||||
nextTick(() => {
|
||||
void selfRef.value.offsetWidth
|
||||
transitionDisabledRef.value = false
|
||||
})
|
||||
}
|
||||
watch(mergedPageRef, disableTransitionOneTick)
|
||||
return {
|
||||
...useLocale('Pagination'),
|
||||
...useMethods(props, {
|
||||
showFastForwardRef,
|
||||
showFastBackwardRef,
|
||||
mergedPageRef,
|
||||
mergedPageSizeRef,
|
||||
compitablePageCountRef,
|
||||
jumperValueRef,
|
||||
disableTransitionOneTick
|
||||
}),
|
||||
selfRef,
|
||||
showFastBackward: showFastBackwardRef,
|
||||
showFastForward: showFastForwardRef,
|
||||
compitablePageCount: compitablePageCountRef,
|
||||
pageItems: computed(() =>
|
||||
pageItems(props.page, compitablePageCountRef.value, props.pageSlot)
|
||||
)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
quickJumperValue: '',
|
||||
transitionDisabled: false
|
||||
),
|
||||
jumperValue: jumperValueRef,
|
||||
transitionDisabled: transitionDisabledRef,
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
self: {
|
||||
itemSize,
|
||||
itemPadding,
|
||||
itemMargin,
|
||||
inputWidth,
|
||||
selectWidth,
|
||||
inputMargin,
|
||||
selectMargin,
|
||||
buttonBorder,
|
||||
buttonBorderHover,
|
||||
buttonBorderPressed,
|
||||
buttonIconColor,
|
||||
buttonIconColorHover,
|
||||
buttonIconColorPressed,
|
||||
buttonIconSize,
|
||||
itemTextColor,
|
||||
itemTextColorHover,
|
||||
itemTextColorPressed,
|
||||
itemTextColorActive,
|
||||
itemTextColorDisabled,
|
||||
itemColor,
|
||||
itemColorHover,
|
||||
itemColorPressed,
|
||||
itemColorActive,
|
||||
itemColorDisabled,
|
||||
itemBorder,
|
||||
itemBorderHover,
|
||||
itemBorderPressed,
|
||||
itemBorderActive,
|
||||
itemBorderDisabled,
|
||||
itemBorderRadius,
|
||||
itemFontSize,
|
||||
jumperFontSize,
|
||||
jumperTextColor,
|
||||
jumperTextColorDisabled
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--item-font-size': itemFontSize,
|
||||
'--select-width': selectWidth,
|
||||
'--select-margin': selectMargin,
|
||||
'--input-width': inputWidth,
|
||||
'--input-margin': inputMargin,
|
||||
'--item-size': itemSize,
|
||||
'--item-text-color': itemTextColor,
|
||||
'--item-text-color-disabled': itemTextColorDisabled,
|
||||
'--item-text-color-hover': itemTextColorHover,
|
||||
'--item-text-color-active': itemTextColorActive,
|
||||
'--item-text-color-pressed': itemTextColorPressed,
|
||||
'--item-color': itemColor,
|
||||
'--item-color-hover': itemColorHover,
|
||||
'--item-color-disabled': itemColorDisabled,
|
||||
'--item-color-active': itemColorActive,
|
||||
'--item-color-pressed': itemColorPressed,
|
||||
'--item-border': itemBorder,
|
||||
'--item-border-hover': itemBorderHover,
|
||||
'--item-border-disabled': itemBorderDisabled,
|
||||
'--item-border-active': itemBorderActive,
|
||||
'--item-border-pressed': itemBorderPressed,
|
||||
'--item-padding': itemPadding,
|
||||
'--item-border-radius': itemBorderRadius,
|
||||
'--bezier': cubicBezierEaseInOut,
|
||||
'--jumper-font-size': jumperFontSize,
|
||||
'--jumper-text-color': jumperTextColor,
|
||||
'--jumper-text-color-disabled': jumperTextColorDisabled,
|
||||
'--item-margin': itemMargin,
|
||||
'--button-icon-size': buttonIconSize,
|
||||
'--button-icon-color': buttonIconColor,
|
||||
'--button-icon-color-hover': buttonIconColorHover,
|
||||
'--button-icon-color-pressed': buttonIconColorPressed,
|
||||
'--button-border': buttonBorder,
|
||||
'--button-border-hover': buttonBorderHover,
|
||||
'--button-border-pressed': buttonBorderPressed
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -206,84 +454,6 @@ export default {
|
||||
}
|
||||
return 'small'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page (value) {
|
||||
this.transitionDisabled = true
|
||||
nextTick(() => {
|
||||
void this.$el.offsetWidth
|
||||
this.transitionDisabled = false
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dispatchPageChangeAction (pageItem) {
|
||||
if (this.disabled) return
|
||||
switch (pageItem.type) {
|
||||
case 'page':
|
||||
this.changeCurrentPage(pageItem.label)
|
||||
break
|
||||
case 'fastBackward':
|
||||
this.fastBackward()
|
||||
break
|
||||
case 'fastForward':
|
||||
this.fastForward()
|
||||
break
|
||||
}
|
||||
},
|
||||
changeCurrentPage (page) {
|
||||
if (page === this.page) return
|
||||
const { 'onUpdate:page': onUpdatePage, onPageSizeChange } = this
|
||||
if (onUpdatePage) this['onUpdate:page'](page)
|
||||
// deprecated
|
||||
if (onPageSizeChange) this.onChange(page)
|
||||
},
|
||||
changePageSize (pageSize) {
|
||||
if (pageSize === this.pageSize) return
|
||||
const { 'onUpdate:pageSize': onUpdatePageSize, onPageSizeChange } = this
|
||||
if (onUpdatePageSize) this['onUpdate:pageSize'](pageSize)
|
||||
// deprecated
|
||||
if (onPageSizeChange) this.onPageSizeChange(pageSize)
|
||||
},
|
||||
forward () {
|
||||
if (this.disabled) return
|
||||
const page = Math.min(this.page + 1, this.compitablePageCount)
|
||||
this.changeCurrentPage(page)
|
||||
},
|
||||
backward () {
|
||||
if (this.disabled) return
|
||||
const page = Math.max(this.page - 1, 1)
|
||||
this.changeCurrentPage(page)
|
||||
},
|
||||
fastForward () {
|
||||
if (this.disabled) return
|
||||
const page = Math.min(
|
||||
this.page + (this.pageSlot - 4),
|
||||
this.compitablePageCount
|
||||
)
|
||||
this.changeCurrentPage(page)
|
||||
},
|
||||
fastBackward () {
|
||||
if (this.disabled) return
|
||||
const page = Math.max(this.page - (this.pageSlot - 4), 1)
|
||||
this.changeCurrentPage(page)
|
||||
},
|
||||
handleSizePickerChange (value) {
|
||||
this.changePageSize(value)
|
||||
},
|
||||
handleQuickJumperKeyUp (e) {
|
||||
if (e.code === 'Enter') {
|
||||
const page = parseInt(this.quickJumperValue)
|
||||
if (
|
||||
!Number.isNaN(page) &&
|
||||
page >= 1 &&
|
||||
page <= this.compitablePageCount
|
||||
) {
|
||||
this.changeCurrentPage(page)
|
||||
this.quickJumperValue = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
147
src/pagination/src/styles/index.cssr.js
Normal file
147
src/pagination/src/styles/index.cssr.js
Normal file
@ -0,0 +1,147 @@
|
||||
import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
// vars:
|
||||
// --item-font-size
|
||||
// --select-width
|
||||
// --input-width
|
||||
// --input-margin
|
||||
// --item-size
|
||||
// --item-text-color
|
||||
// --item-text-color-disabled
|
||||
// --item-text-color-hover
|
||||
// --item-text-color-active
|
||||
// --item-color
|
||||
// --item-color-hover
|
||||
// --item-color-disabled
|
||||
// --item-color-active
|
||||
// --item-border
|
||||
// --item-border-hover
|
||||
// --item-border-disabled
|
||||
// --item-border-active
|
||||
// --item-padding
|
||||
// --item-font-size
|
||||
// --item-border-radius
|
||||
// --bezier
|
||||
// --jumper-font-size
|
||||
// --jumper-text-color
|
||||
// --jumper-text-color-disabled
|
||||
// --item-margin
|
||||
// --button-icon-size
|
||||
// --button-icon-color
|
||||
// --button-icon-color-hover
|
||||
// --button-icon-color-pressed
|
||||
export default cB('pagination', `
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
font-size: var(--item-font-size);
|
||||
flex-wrap: nowrap;
|
||||
`, [
|
||||
c('> *:not(:first-child)', {
|
||||
margin: 'var(--item-margin)'
|
||||
}),
|
||||
cB('select', {
|
||||
width: 'var(--select-width)'
|
||||
}),
|
||||
cM('transition-disabled', [
|
||||
cB('pagination-item', {
|
||||
transition: 'none!important'
|
||||
})
|
||||
]),
|
||||
cB('pagination-quick-jumper', `
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
color: var(--jumper-text-color);
|
||||
transition: color .3s var(--bezier);
|
||||
align-items: center;
|
||||
font-size: var(--jumter-font-size);
|
||||
`, [
|
||||
cB('input', `
|
||||
margin: var(--input-margin);
|
||||
width: var(--input-width);
|
||||
`, [
|
||||
cE('placeholder', {
|
||||
left: '6px',
|
||||
right: '6px'
|
||||
}),
|
||||
c('input', `
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
`)
|
||||
])
|
||||
]),
|
||||
cB('pagination-item', `
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
min-width: var(--item-size);
|
||||
height: var(--item-size);
|
||||
padding: var(--item-padding);
|
||||
background-color: var(--item-color);
|
||||
color: var(--item-text-color);
|
||||
border-radius: var(--item-border-radius);
|
||||
border: var(--item-border);
|
||||
fill: var(--button-icon-color);
|
||||
transition:
|
||||
color .3s var(--bezier),
|
||||
border-color .3s var(--bezier),
|
||||
background-color .3s var(--bezier),
|
||||
fill .3s var(--bezier);
|
||||
`, [
|
||||
|
||||
cM('button', {
|
||||
background: 'var(--item-color)',
|
||||
color: 'var(--button-icon-color)',
|
||||
border: 'var(--button-border)',
|
||||
fontSize: 'var(--button-icon-size)'
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
c('&:hover', {
|
||||
background: 'var(--item-color-hover)',
|
||||
color: 'var(--item-text-color-hover)',
|
||||
border: 'var(--item-border-hover)'
|
||||
}, [
|
||||
cM('button', {
|
||||
background: 'var(--button-color-hover)',
|
||||
border: 'var(--button-border-hover)',
|
||||
color: 'var(--button-icon-color-hover)'
|
||||
})
|
||||
]),
|
||||
c('&:active', {
|
||||
background: 'var(--item-color-pressed)',
|
||||
color: 'var(--item-text-color-pressed)',
|
||||
border: 'var(--item-border-pressed)'
|
||||
}, [
|
||||
cM('button', {
|
||||
background: 'var(--button-color-pressed)',
|
||||
border: 'var(--button-border-pressed)',
|
||||
color: 'var(--button-icon-color-pressed)'
|
||||
})
|
||||
]),
|
||||
cM('active', {
|
||||
background: 'var(--item-color-active)',
|
||||
color: 'var(--item-text-color-active)',
|
||||
border: 'var(--item-border-active)'
|
||||
})
|
||||
]),
|
||||
cM('disabled', `
|
||||
cursor: not-allowed;
|
||||
color: var(--item-text-color-disabled);
|
||||
`, [
|
||||
cM('active, button', {
|
||||
backgroundColor: 'var(--item-color-disabled)',
|
||||
border: 'var(--item-border-disabled)'
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed'
|
||||
}, [
|
||||
cB('pagination-quick-jumper', {
|
||||
color: 'var(--jumper-text-color-disabled)'
|
||||
})
|
||||
])
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
@ -1,192 +0,0 @@
|
||||
import { cTB, c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
buttonBorder,
|
||||
itemTextColor,
|
||||
itemTextColorHover,
|
||||
itemTextColorActive,
|
||||
itemTextColorDisabled,
|
||||
itemColor,
|
||||
itemColorHover,
|
||||
itemColorActive,
|
||||
itemColorDisabled,
|
||||
itemBorder,
|
||||
itemBorderActive,
|
||||
itemBorderDisabled,
|
||||
jumperTextColorDisabled,
|
||||
itemBorderRadius,
|
||||
itemPadding,
|
||||
buttonIconColor,
|
||||
buttonIconColorHover,
|
||||
itemSize,
|
||||
buttonFontSize,
|
||||
itemFontSize,
|
||||
inputWidth,
|
||||
selectWidth,
|
||||
inputMargin,
|
||||
itemMargin
|
||||
} = props.$local
|
||||
const {
|
||||
cubicBezierEaseInOut
|
||||
} = props.$global
|
||||
return cTB('pagination', {
|
||||
raw: `
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
font-size: ${itemFontSize}
|
||||
`
|
||||
}, [
|
||||
c('> *:not(:last-child)', {
|
||||
marginRight: '8px'
|
||||
}),
|
||||
cB('select', {
|
||||
width: selectWidth
|
||||
}),
|
||||
cM('transition-disabled', [
|
||||
cB('pagination-item', {
|
||||
transition: 'none'
|
||||
})
|
||||
]),
|
||||
cB('pagination-quick-jumper', {
|
||||
raw: `
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
line-height: ${itemSize};
|
||||
color: ${itemTextColor};
|
||||
transition: color .3s ${cubicBezierEaseInOut};
|
||||
`
|
||||
}, [
|
||||
cB('input', {
|
||||
raw: `
|
||||
margin: ${inputMargin};
|
||||
width: ${inputWidth};
|
||||
`
|
||||
}, [
|
||||
cE('placeholder', {
|
||||
left: '6px',
|
||||
right: '10px'
|
||||
}),
|
||||
c('input', {
|
||||
raw: `
|
||||
padding-left: 6px;
|
||||
padding-right: 10px;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('pagination-item', {
|
||||
raw: `
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
min-width: ${itemSize};
|
||||
height: ${itemSize};
|
||||
padding: ${itemPadding};
|
||||
background-color: ${itemColor};
|
||||
color: ${itemTextColor};
|
||||
border-radius: ${itemBorderRadius};
|
||||
border: ${itemBorder};
|
||||
fill: ${buttonIconColor};
|
||||
transition:
|
||||
color .3s ${cubicBezierEaseInOut},
|
||||
border-color .3s ${cubicBezierEaseInOut},
|
||||
background-color .3s ${cubicBezierEaseInOut},
|
||||
fill .3s ${cubicBezierEaseInOut};
|
||||
`
|
||||
}, [
|
||||
c('&:not(:last-child)', {
|
||||
margin: itemMargin
|
||||
}),
|
||||
cE('more-icon, arrow-icon', {
|
||||
raw: `
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
font-size: ${buttonFontSize};
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
`
|
||||
}, [
|
||||
cB('base-icon', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('fast-backward, fast-forward', [
|
||||
c('&:hover', {
|
||||
backgroundColor: itemColor
|
||||
}),
|
||||
cE('more-icon', {
|
||||
display: 'block'
|
||||
}),
|
||||
cE('arrow-icon', {
|
||||
display: 'none'
|
||||
})
|
||||
]),
|
||||
cE('more-icon, arrow-icon', {
|
||||
lineHeight: 0
|
||||
}),
|
||||
cM('active', {
|
||||
background: itemColorActive,
|
||||
color: itemTextColorActive,
|
||||
border: itemBorderActive
|
||||
}),
|
||||
cM('backward, forward', {
|
||||
backgroundColor: itemColor,
|
||||
border: buttonBorder
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
c('&:hover', {
|
||||
color: itemTextColorHover,
|
||||
backgroundColor: itemColorHover,
|
||||
fill: buttonIconColorHover
|
||||
}, [
|
||||
cM('backward, forward', {
|
||||
color: itemTextColor
|
||||
}),
|
||||
cM('fast-backward, fast-forward', {
|
||||
color: itemTextColor
|
||||
}, [
|
||||
cE('more-icon', {
|
||||
display: 'none'
|
||||
}),
|
||||
cE('arrow-icon', {
|
||||
display: 'block'
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('disabled', {
|
||||
raw: `
|
||||
cursor: not-allowed;
|
||||
fill: ${itemTextColorDisabled};
|
||||
color: ${itemTextColorDisabled};
|
||||
`
|
||||
}, [
|
||||
cM('active, backward, forward', {
|
||||
backgroundColor: itemColorDisabled,
|
||||
border: itemBorderDisabled
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed'
|
||||
}, [
|
||||
cB('pagination-quick-jumper', {
|
||||
color: jumperTextColorDisabled
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -1,9 +1,11 @@
|
||||
export default {
|
||||
itemSize: '28px',
|
||||
itemPadding: '0 4px',
|
||||
itemMargin: '0 8px 0 0',
|
||||
buttonFontSize: '16px',
|
||||
itemMargin: '0 0 0 8px',
|
||||
buttonIconSize: '16px',
|
||||
inputWidth: '60px',
|
||||
selectWidth: 'unset',
|
||||
inputMargin: '0 8px'
|
||||
inputMargin: '0 0 0 8px',
|
||||
selectMargin: '0 0 0 8px',
|
||||
jumperFontSize: '14px'
|
||||
}
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { changeColor } from 'seemly'
|
||||
import { selectDark } from '../../select/styles'
|
||||
import { inputDark } from '../../input/styles'
|
||||
import { iconDark } from '../../icon/styles'
|
||||
import { baseDark } from '../../_styles/base'
|
||||
import commonVariables from './_common.js'
|
||||
import { commonDark } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
theme: 'dark',
|
||||
peer: [baseDark, selectDark, inputDark, iconDark],
|
||||
getLocalVars (vars) {
|
||||
common: commonDark,
|
||||
peers: {
|
||||
Select: selectDark,
|
||||
Input: inputDark,
|
||||
Icon: iconDark
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2Overlay,
|
||||
primaryColor,
|
||||
primaryColorHover,
|
||||
primaryColorPressed,
|
||||
inputColorDisabledOverlay,
|
||||
textColorDisabledOverlay,
|
||||
borderColorOverlay,
|
||||
@ -21,28 +26,39 @@ export default create({
|
||||
borderRadius,
|
||||
fontSize
|
||||
} = vars
|
||||
const borderColor = changeColor(primaryColor, {
|
||||
alpha: opacity3
|
||||
})
|
||||
return {
|
||||
...commonVariables,
|
||||
buttonColor: 'transparent',
|
||||
buttonColorHover: 'transparent',
|
||||
buttonColorPressed: 'transparent',
|
||||
buttonBorder: `1px solid ${borderColorOverlay}`,
|
||||
buttonBorderHover: `1px solid ${borderColorOverlay}`,
|
||||
buttonBorderPressed: `1px solid ${borderColorOverlay}`,
|
||||
buttonIconColor: textColor2Overlay,
|
||||
buttonIconColorHover: textColor2Overlay,
|
||||
buttonIconColorPressed: textColor2Overlay,
|
||||
itemTextColor: textColor2Overlay,
|
||||
itemTextColorHover: primaryColor,
|
||||
itemTextColorHover: primaryColorHover,
|
||||
itemTextColorPressed: primaryColorPressed,
|
||||
itemTextColorActive: primaryColor,
|
||||
itemTextColorDisabled: textColorDisabledOverlay,
|
||||
itemColor: 'transparent',
|
||||
itemColorHover: 'transparent',
|
||||
itemColorPressed: 'transparent',
|
||||
itemColorActive: 'transparent',
|
||||
itemColorDisabled: inputColorDisabledOverlay,
|
||||
itemBorder: '1px solid transparent',
|
||||
itemBorderActive: `1px solid ${changeColor(primaryColor, {
|
||||
alpha: opacity3
|
||||
})}`,
|
||||
itemBorderHover: '1px solid transparent',
|
||||
itemBorderPressed: '1px solid transparent',
|
||||
itemBorderActive: `1px solid ${borderColor}`,
|
||||
itemBorderDisabled: '1px solid transparent',
|
||||
itemColorHover: 'transparent',
|
||||
itemBorderRadius: borderRadius,
|
||||
itemFontSize: fontSize,
|
||||
jumperTextColor: textColor2Overlay,
|
||||
jumperTextColorDisabled: textColorDisabledOverlay
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,38 +1,54 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { selectLight } from '../../select/styles'
|
||||
import { inputLight } from '../../input/styles'
|
||||
import { iconLight } from '../../icon/styles'
|
||||
import { baseLight } from '../../_styles/base'
|
||||
import commonVariables from './_common.js'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
theme: 'light',
|
||||
peer: [baseLight, selectLight, inputLight, iconLight],
|
||||
getLocalVars (vars) {
|
||||
common: commonLight,
|
||||
peers: {
|
||||
Select: selectLight,
|
||||
Input: inputLight,
|
||||
Icon: iconLight
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2,
|
||||
primaryColor,
|
||||
primaryColorHover,
|
||||
primaryColorPressed,
|
||||
inputColorDisabled,
|
||||
textColorDisabled,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
fontSize
|
||||
} = vars
|
||||
|
||||
return {
|
||||
...commonVariables,
|
||||
buttonColor: 'transparent',
|
||||
buttonColorHover: 'transparent',
|
||||
buttonColorPressed: 'transparent',
|
||||
buttonBorder: `1px solid ${borderColor}`,
|
||||
buttonBorderHover: `1px solid ${borderColor}`,
|
||||
buttonBorderPressed: `1px solid ${borderColor}`,
|
||||
buttonIconColor: textColor2,
|
||||
buttonIconColorHover: textColor2,
|
||||
buttonBorder: `1px solid ${borderColor}`,
|
||||
buttonIconColorPressed: textColor2,
|
||||
itemTextColor: textColor2,
|
||||
itemTextColorHover: primaryColor,
|
||||
itemTextColorHover: primaryColorHover,
|
||||
itemTextColorPressed: primaryColorPressed,
|
||||
itemTextColorActive: primaryColor,
|
||||
itemTextColorDisabled: textColorDisabled,
|
||||
itemColor: 'transparent',
|
||||
itemColorHover: 'transparent',
|
||||
itemColorPressed: 'transparent',
|
||||
itemColorActive: 'transparent',
|
||||
itemColorDisabled: inputColorDisabled,
|
||||
itemBorder: '1px solid transparent',
|
||||
itemBorderHover: '1px solid transparent',
|
||||
itemBorderPressed: '1px solid transparent',
|
||||
itemBorderActive: `1px solid ${primaryColor}`,
|
||||
itemBorderDisabled: `1px solid ${borderColor}`,
|
||||
itemBorderRadius: borderRadius,
|
||||
@ -41,4 +57,4 @@ export default create({
|
||||
jumperTextColorDisabled: textColorDisabled
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ export { baseDark, baseLight } from './_styles/base'
|
||||
// export { messageDark, messageLight } from './message/styles'
|
||||
// export { modalDark, modalLight } from './modal/styles'
|
||||
// export { notificationDark, notificationLight } from './notification/styles'
|
||||
export { paginationDark, paginationLight } from './pagination/styles'
|
||||
// export { paginationDark, paginationLight } from './pagination/styles'
|
||||
export { popconfirmDark, popconfirmLight } from './popconfirm/styles'
|
||||
export { popoverDark, popoverLight } from './popover/styles'
|
||||
export { popselectDark, popselectLight } from './popselect/styles'
|
||||
|
||||
@ -38,6 +38,7 @@ import { menuDark } from './menu/styles'
|
||||
import { messageDark } from './message/styles'
|
||||
import { modalDark } from './modal/styles'
|
||||
import { notificationDark } from './notification/styles'
|
||||
import { paginationDark } from './pagination/styles'
|
||||
|
||||
export const darkTheme = {
|
||||
common: commonDark,
|
||||
@ -79,5 +80,6 @@ export const darkTheme = {
|
||||
Menu: menuDark,
|
||||
Message: messageDark,
|
||||
Modal: modalDark,
|
||||
Notification: notificationDark
|
||||
Notification: notificationDark,
|
||||
Pagination: paginationDark
|
||||
}
|
||||
|
||||
@ -284,7 +284,7 @@ export default {
|
||||
},
|
||||
dateFnsOptions () {
|
||||
return {
|
||||
locale: this.dateFnsLocale
|
||||
locale: this.dateLocale
|
||||
}
|
||||
},
|
||||
hourInFormat () {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { h, createTextVNode } from 'vue'
|
||||
import { format, formatDistance, fromUnixTime } from 'date-fns'
|
||||
import locale from '../../_mixins/locale'
|
||||
import { useLocale } from '../../_mixins'
|
||||
|
||||
export default {
|
||||
name: 'Time',
|
||||
mixins: [locale('Time')],
|
||||
props: {
|
||||
time: {
|
||||
type: [Number, Date],
|
||||
@ -33,10 +32,13 @@ export default {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return useLocale('Time')
|
||||
},
|
||||
computed: {
|
||||
dateFnsOptions () {
|
||||
return {
|
||||
locale: this.dateFnsLocale
|
||||
locale: this.dateLocale
|
||||
}
|
||||
},
|
||||
mergedTime () {
|
||||
@ -65,7 +67,7 @@ export default {
|
||||
} else {
|
||||
return formatDistance(this.mergedTime, this.mergedTo, {
|
||||
addSuffix: true,
|
||||
locale: this.dateFnsLocale
|
||||
locale: this.dateLocale
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
|
||||
// no style, placeholder
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'Time',
|
||||
getLocalVars () {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
export default {
|
||||
name: 'Time'
|
||||
}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
|
||||
// no style, placeholder
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'Time',
|
||||
getLocalVars () {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
export default {
|
||||
name: 'Time'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user