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

perf(ui/pull-refresh): add class #399

Merged
merged 4 commits into from
Apr 5, 2022
+62 −52
Merged

perf(ui/pull-refresh): add class #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eea7851
perf(ui/pull-refresh): add class
wangKBweb Apr 5, 2022
32bdb84
perf(ui/popup): add class
wangKBweb Apr 5, 2022
483e701
perf(ui/pagination): add class
wangKBweb Apr 5, 2022
c3f0aa9
refactor: popup class
wangKBweb Apr 5, 2022
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
75 changes: 41 additions & 34 deletions packages/varlet-ui/src/pagination/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<template>
<ul class="var-pagination">
<ul :class="classes(n())">
<li
v-ripple="{ disabled: current <= 1 || disabled }"
class="var-pagination__item var-pagination__prev"
:class="{
'var-pagination__item--disabled': current <= 1 || disabled,
'var-pagination__item--hover': simple,
'var-elevation--2': !simple,
}"
:class="
classes(
n('item'),
n('prev'),
[current <= 1 || disabled, n('item--disabled')],
[simple, n('item--hover')],
[!simple, 'var-elevation--2']
)
"
@click="clickItem('prev')"
>
<slot name="prev">
<var-icon name="chevron-left" />
</slot>
</li>
<li v-if="simple" class="var-pagination__simple" :class="{ 'var-pagination__item--disabled': disabled }">
<li v-if="simple" :class="classes(n('simple'), [disabled, n('item--disabled')])">
<var-input
v-model="simpleValue"
:disabled="disabled"
Expand All @@ -30,45 +33,48 @@
v-for="(item, index) in pageList"
:key="toNumber(item) + index"
:item-mode="getMode(item, index)"
class="var-pagination__item var-elevation--2"
:class="{
'var-pagination__item--active': item === current && !disabled,
'var-pagination__item--hide': isHideEllipsis(item, index),
'var-pagination__item--disabled': disabled,
'var-pagination__item--disabled--active': item === current && disabled,
}"
:class="
classes(
n('item'),
'var-elevation--2',
[item === current && !disabled, n('item--active')],
[isHideEllipsis(item, index), n('item--hide')],
[disabled, n('item--disabled')],
[item === current && disabled, n('item--disabled--active')]
)
"
@click="clickItem(item, index)"
>
{{ item }}
</li>
<li
v-ripple="{ disabled: current >= pageCount || disabled }"
class="var-pagination__item var-pagination__next"
:class="{
'var-pagination__item--disabled': current >= pageCount || disabled,
'var-pagination__item--hover': simple,
'var-elevation--2': !simple,
}"
:class="
classes(
n('item'),
n('next'),
[current >= pageCount || disabled, n('item--disabled')],
[simple, n('item--hover')],
[!simple, 'var-elevation--2']
)
"
@click="clickItem('next')"
>
<slot name="next">
<var-icon name="chevron-right" />
</slot>
</li>

<li v-if="showSizeChanger" class="var-pagination__size" :class="{ 'var-pagination__item--disabled': disabled }">
<li v-if="showSizeChanger" :class="classes(n('size'), [disabled, n('item--disabled')])">
<var-menu v-model:show="menuVisible" :offset-x="-4">
<div class="var-pagination__size--open" style="display: flex" @click="showMenu">
<div :class="n('size--open')" style="display: flex" @click="showMenu">
<span>{{ size }}{{ pack.paginationItem }} / {{ pack.paginationPage }}</span>
<var-icon class="var-pagination__size--open-icon" var-pagination-cover name="menu-down" />
<var-icon :class="n('size--open-icon')" var-pagination-cover name="menu-down" />
</div>

<template #menu>
<var-cell
class="var-pagination__list"
:class="{
'var-pagination__list--active': size === option,
}"
:class="classes(n('list'), [size === option, n('list--active')])"
v-ripple
v-for="(option, index) in sizeOption"
:key="index"
Expand All @@ -79,11 +85,7 @@
</template>
</var-menu>
</li>
<li
v-if="showQuickJumper && !simple"
class="var-pagination__quickly"
:class="{ 'var-pagination__item--disabled': disabled }"
>
<li v-if="showQuickJumper && !simple" :class="classes(n('quickly'), [disabled, 'item--disabled'])">
{{ pack.paginationJump }}
<var-input
v-model="inputValue"
Expand All @@ -94,7 +96,7 @@
/>
</li>

<li v-if="totalText" class="var-pagination__total">
<li v-if="totalText" :class="n('total')">
{{ totalText }}
</li>
</ul>
Expand All @@ -112,6 +114,9 @@ import { isNumber, toNumber } from '../utils/shared'
import { pack } from '../locale'
import type { ComputedRef, Ref } from 'vue'
import type { Range } from './porps'
import { createNamespace } from '../utils/components'

const { n, classes } = createNamespace('pagination')

export default defineComponent({
name: 'VarPagination',
Expand Down Expand Up @@ -283,6 +288,8 @@ export default defineComponent({
)

return {
n,
classes,
pack,
current,
menuVisible,
Expand Down
12 changes: 7 additions & 5 deletions packages/varlet-ui/src/popup/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { defineComponent, watch, Transition, Teleport } from 'vue'
import { props } from './props'
import { useLock } from '../context/lock'
import { useZIndex } from '../context/zIndex'
import { addRouteListener, useTeleport } from '../utils/components'
import { addRouteListener, useTeleport, createNamespace } from '../utils/components'

import '../styles/common.less'
import './popup.less'

const { n, classes } = createNamespace('popup')

export default defineComponent({
name: 'VarPopup',
inheritAttrs: false,
Expand Down Expand Up @@ -41,11 +43,11 @@ export default defineComponent({
addRouteListener(() => props.onRouteChange?.())

const renderOverlay = () => {
const { overlayClass, overlayStyle } = props
const { overlayClass = '', overlayStyle } = props

return (
<div
class={['var-popup__overlay', overlayClass]}
class={classes(n('overlay'), overlayClass)}
style={{
zIndex: zIndex.value - 1,
...overlayStyle,
Expand All @@ -58,7 +60,7 @@ export default defineComponent({
const renderContent = () => {
return (
<div
class={['var-popup__content', 'var-elevation--3', `var-popup--${props.position}`]}
class={classes(n('content'), 'var-elevation--3', n(`--${props.position}`))}
style={{ zIndex: zIndex.value }}
{...attrs}
>
Expand All @@ -72,7 +74,7 @@ export default defineComponent({

return (
<Transition name="var-fade" onAfterEnter={onOpened} onAfterLeave={onClosed}>
<div class="var--box var-popup" style={{ zIndex: zIndex.value - 2 }} v-show={show}>
<div class={classes('var--box', n())} style={{ zIndex: zIndex.value - 2 }} v-show={show}>
{overlay && renderOverlay()}
<Transition name={transition || `var-pop-${position}`}>{show && renderContent()}</Transition>
</div>
Expand Down
27 changes: 14 additions & 13 deletions packages/varlet-ui/src/pull-refresh/PullRefresh.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<template>
<div
ref="freshNode"
class="var-pull-refresh"
:class="classes(n())"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@touchcancel="touchEnd"
>
<div
class="var-pull-refresh__control var-elevation--2"
:class="[isSuccess ? 'var-pull-refresh__control-success' : null]"
:style="controlStyle"
>
<var-icon :name="iconName" :transition="200" :class="iconClass" var-pull-refresh-cover />
<div :class="classes(n('control'), 'var-elevation--2', [isSuccess, n('control-success')])" :style="controlStyle">
<var-icon
:name="iconName"
:transition="200"
:class="classes(n('icon'), [refreshStatus === 'loading', n('animation')])"
var-pull-refresh-cover
/>
</div>
<slot />
</div>
Expand All @@ -26,6 +27,9 @@ import { props } from './props'
import { toNumber } from '../utils/shared'
import type { Ref } from 'vue'
import type { RefreshStatus } from './props'
import { createNamespace } from '../utils/components'

const { n, classes } = createNamespace('pull-refresh')

const MAX_DISTANCE = 100
const CONTROL_POSITION = -50
Expand All @@ -50,11 +54,6 @@ export default defineComponent({
() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled
)

const iconClass = computed(() => ({
'var-pull-refresh__icon': true,
'var-pull-refresh__animation': refreshStatus.value === 'loading',
}))

const controlStyle = computed(() => ({
transform: `translate3d(0px, ${distance.value}px, 0px) translate(-50%, 0)`,
transition: isEnd.value ? `transform ${props.animationDuration}ms` : undefined,
Expand Down Expand Up @@ -133,12 +132,14 @@ export default defineComponent({
})

return {
n,
classes,
refreshStatus,
freshNode,
touchStart,
touchMove,
touchEnd,
iconName,
iconClass,
controlStyle,
isSuccess,
}
Expand Down