mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(transfer): new theme
This commit is contained in:
07akioni
parent
f1f4268d5b
commit
9ef9e3a037
@ -80,7 +80,7 @@ export { baseDark, baseLight } from './_styles/base'
|
||||
// export { timePickerDark, timePickerLight } from './time-picker/styles'
|
||||
// export { timelineDark, timelineLight } from './timeline/styles'
|
||||
export { tooltipDark, tooltipLight } from './tooltip/styles'
|
||||
export { transferDark, transferLight } from './transfer/styles'
|
||||
// export { transferDark, transferLight } from './transfer/styles'
|
||||
export { treeDark, treeLight } from './tree/styles'
|
||||
export { typographyDark, typographyLight } from './typography/styles'
|
||||
export { uploadDark, uploadLight } from './upload/styles'
|
||||
|
||||
@ -60,6 +60,7 @@ import { thingDark } from './thing/styles'
|
||||
import { timeDark } from './time/styles'
|
||||
import { timePickerDark } from './time-picker/styles'
|
||||
import { timelineDark } from './timeline/styles'
|
||||
import { transferDark } from './transfer/styles'
|
||||
|
||||
export const darkTheme = {
|
||||
common: commonDark,
|
||||
@ -123,5 +124,6 @@ export const darkTheme = {
|
||||
Thing: thingDark,
|
||||
Time: timeDark,
|
||||
TimePicker: timePickerDark,
|
||||
Timeline: timelineDark
|
||||
Timeline: timelineDark,
|
||||
Transfer: transferDark
|
||||
}
|
||||
|
||||
@ -2,17 +2,15 @@
|
||||
<div
|
||||
class="n-transfer"
|
||||
:class="{
|
||||
[`n-${mergedTheme}-theme`]: mergedTheme,
|
||||
[`n-transfer--filterable`]: filterable,
|
||||
[`n-transfer--${mergedSize}-size`]: true
|
||||
[`n-transfer--filterable`]: filterable
|
||||
}"
|
||||
:style="cssVars"
|
||||
>
|
||||
<div class="n-transfer-list">
|
||||
<div class="n-transfer-list-header">
|
||||
<div class="n-transfer-list-header__checkbox">
|
||||
<n-transfer-header-checkbox
|
||||
:source="true"
|
||||
:theme="mergedTheme"
|
||||
@change="handleSrcHeaderCheck"
|
||||
/>
|
||||
</div>
|
||||
@ -43,7 +41,7 @@
|
||||
<n-scrollbar
|
||||
v-if="virtualScroll"
|
||||
ref="srcScrollerRef"
|
||||
:theme="mergedTheme"
|
||||
:theme="'light'"
|
||||
:container="srcScrollContainer"
|
||||
:content="srcScrollContent"
|
||||
>
|
||||
@ -66,7 +64,7 @@
|
||||
</template>
|
||||
</virtual-list>
|
||||
</n-scrollbar>
|
||||
<n-scrollbar v-else :theme="mergedTheme">
|
||||
<n-scrollbar v-else :theme="'theme'">
|
||||
<div class="n-transfer-list-content">
|
||||
<transition-group
|
||||
name="item"
|
||||
@ -93,7 +91,7 @@
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-transfer-list__border-mask" />
|
||||
<div class="n-transfer-list__border" />
|
||||
</div>
|
||||
<div class="n-transfer-gap">
|
||||
<n-button :disabled="toButtonDisabled" @click="handleToTgtClick">
|
||||
@ -110,10 +108,7 @@
|
||||
<div class="n-transfer-list">
|
||||
<div class="n-transfer-list-header">
|
||||
<div class="n-transfer-list-header__checkbox">
|
||||
<n-transfer-header-checkbox
|
||||
:theme="mergedTheme"
|
||||
@change="handleTgtHeaderCheck"
|
||||
/>
|
||||
<n-transfer-header-checkbox @change="handleTgtHeaderCheck" />
|
||||
</div>
|
||||
<div class="n-transfer-list-header__header">
|
||||
{{ targetTitle || locale.targetTitle }}
|
||||
@ -142,7 +137,7 @@
|
||||
<n-scrollbar
|
||||
v-if="virtualScroll"
|
||||
ref="tgtScrollerRef"
|
||||
:theme="mergedTheme"
|
||||
:theme="'light'"
|
||||
:container="tgtScrollContainer"
|
||||
:content="tgtScrollContent"
|
||||
>
|
||||
@ -165,7 +160,7 @@
|
||||
</template>
|
||||
</virtual-list>
|
||||
</n-scrollbar>
|
||||
<n-scrollbar v-else :theme="mergedTheme">
|
||||
<n-scrollbar v-else :theme="'light'">
|
||||
<div class="n-transfer-list-content">
|
||||
<transition-group
|
||||
name="item"
|
||||
@ -192,42 +187,37 @@
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-transfer-list__border-mask" />
|
||||
<div class="n-transfer-list__border" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref, defineComponent } from 'vue'
|
||||
import { VirtualList } from 'vueuc'
|
||||
import { useIsMounted } from 'vooks'
|
||||
import { depx } from 'seemly'
|
||||
import { NScrollbar } from '../../scrollbar'
|
||||
import NTransferHeaderCheckbox from './TransferHeaderCheckbox.vue'
|
||||
import NTransferHeaderExtra from './TransferHeaderExtra.vue'
|
||||
import NTransferSourceListItem from './TransferSourceListItem.vue'
|
||||
import NTransferTargetListItem from './TransferTargetListItem.vue'
|
||||
import { NInput } from '../../input'
|
||||
import { NIcon } from '../../icon'
|
||||
import { NEmpty } from '../../empty'
|
||||
import {
|
||||
SearchIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon
|
||||
} from '../../_base/icons'
|
||||
import {
|
||||
configurable,
|
||||
useFormItem,
|
||||
themeable,
|
||||
withCssr,
|
||||
locale
|
||||
} from '../../_mixins'
|
||||
import styles from './styles'
|
||||
import { NScrollbar } from '../../scrollbar'
|
||||
import { NInput } from '../../input'
|
||||
import { NIcon } from '../../icon'
|
||||
import { NEmpty } from '../../empty'
|
||||
import { useLocale, useFormItem, useTheme } from '../../_mixins'
|
||||
import { createKey } from '../../_utils/cssr'
|
||||
import { warn, call } from '../../_utils'
|
||||
import NTransferHeaderCheckbox from './TransferHeaderCheckbox.vue'
|
||||
import NTransferHeaderExtra from './TransferHeaderExtra.vue'
|
||||
import NTransferSourceListItem from './TransferSourceListItem.vue'
|
||||
import NTransferTargetListItem from './TransferTargetListItem.vue'
|
||||
import { data } from './data-utils'
|
||||
import style from './styles/index.cssr.js'
|
||||
import { transferLight } from '../styles'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'Transfer',
|
||||
components: {
|
||||
NTransferHeaderCheckbox,
|
||||
@ -243,15 +233,6 @@ export default {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon
|
||||
},
|
||||
mixins: [
|
||||
configurable,
|
||||
themeable,
|
||||
withCssr(styles, {
|
||||
themeKey: 'mergedTheme',
|
||||
injectCssrProps: true
|
||||
}),
|
||||
locale('Transfer')
|
||||
],
|
||||
provide () {
|
||||
return {
|
||||
NTransfer: this
|
||||
@ -332,21 +313,84 @@ export default {
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme(
|
||||
'Transfer',
|
||||
'Transfer',
|
||||
style,
|
||||
transferLight,
|
||||
props
|
||||
)
|
||||
const formItem = useFormItem(props)
|
||||
const itemSizeRef = computed(() => {
|
||||
const {
|
||||
mergedSize: { value: size }
|
||||
} = formItem
|
||||
const {
|
||||
self: { [createKey('itemHeight', size)]: itemSize }
|
||||
} = themeRef.value
|
||||
return depx(itemSize)
|
||||
})
|
||||
return {
|
||||
...data(props),
|
||||
...formItem,
|
||||
...useLocale('Transfer'),
|
||||
itemSize: itemSizeRef,
|
||||
isMounted: useIsMounted(),
|
||||
srcScrollerRef: ref(null),
|
||||
tgtScrollerRef: ref(null),
|
||||
srcVlRef: ref(null),
|
||||
tgtVlRef: ref(null),
|
||||
...data(props),
|
||||
...useFormItem(props)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemSize () {
|
||||
return depx(
|
||||
this.cssrProps.$local[createKey('itemHeight', this.mergedSize)]
|
||||
)
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
mergedSize: { value: size }
|
||||
} = formItem
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut,
|
||||
cubicBezierEaseIn,
|
||||
cubicBezierEaseOut
|
||||
},
|
||||
self: {
|
||||
width,
|
||||
borderRadius,
|
||||
borderColor,
|
||||
listColor,
|
||||
headerColor,
|
||||
titleTextColor,
|
||||
titleTextColorDisabled,
|
||||
headerExtraTextColor,
|
||||
filterDividerColor,
|
||||
itemTextColor,
|
||||
itemColorPending,
|
||||
itemTextColorDisabled,
|
||||
extraFontSize,
|
||||
titleFontWeight,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('itemHeight', size)]: itemHeight
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--bezier': cubicBezierEaseInOut,
|
||||
'--bezier-ease-in': cubicBezierEaseIn,
|
||||
'--bezier-ease-out': cubicBezierEaseOut,
|
||||
'--border-color': borderColor,
|
||||
'--border-radius': borderRadius,
|
||||
'--extra-font-size': extraFontSize,
|
||||
'--filter-divider-color': filterDividerColor,
|
||||
'--font-size': fontSize,
|
||||
'--header-color': headerColor,
|
||||
'--header-extra-text-color': headerExtraTextColor,
|
||||
'--header-font-weight': titleFontWeight,
|
||||
'--header-text-color': titleTextColor,
|
||||
'--header-text-color-disabled': titleTextColorDisabled,
|
||||
'--item-color-pending': itemColorPending,
|
||||
'--item-height': itemHeight,
|
||||
'--item-text-color': itemTextColor,
|
||||
'--item-text-color-disabled': itemTextColorDisabled,
|
||||
'--list-color': listColor,
|
||||
'--width': width
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -436,5 +480,5 @@ export default {
|
||||
return this.tgtVlRef?.itemsRef
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<n-checkbox
|
||||
:theme="theme"
|
||||
:theme="'light'"
|
||||
:checked="checkboxProps.checked"
|
||||
:indeterminate="checkboxProps.indeterminate"
|
||||
:disabled="checkboxProps.disabled"
|
||||
@ -10,9 +10,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NCheckbox } from '../../checkbox'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'NTransferHeaderCheckbox',
|
||||
components: {
|
||||
NCheckbox
|
||||
@ -23,10 +24,6 @@ export default {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
source: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -46,5 +43,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NTransferHeaderExtra',
|
||||
inject: {
|
||||
NTransfer: {
|
||||
@ -22,5 +24,5 @@ export default {
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<div class="n-transfer-list-item__checkbox">
|
||||
<n-checkbox
|
||||
:theme="NTransfer.mergedTheme"
|
||||
:theme="'light'"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
:size="NTransfer.mergedSize"
|
||||
@ -21,11 +21,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import { NCheckbox } from '../../checkbox'
|
||||
import { inject, defineComponent } from 'vue'
|
||||
import { useMemo } from 'vooks'
|
||||
import { NCheckbox } from '../../checkbox'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'NTransferListItem',
|
||||
components: {
|
||||
NCheckbox
|
||||
@ -62,5 +62,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<div class="n-transfer-list-item__checkbox">
|
||||
<n-checkbox
|
||||
:theme="NTransfer.mergedTheme"
|
||||
:theme="'light'"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
:size="NTransfer.mergedSize"
|
||||
@ -21,11 +21,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import { NCheckbox } from '../../checkbox'
|
||||
import { inject, defineComponent } from 'vue'
|
||||
import { useMemo } from 'vooks'
|
||||
import { NCheckbox } from '../../checkbox'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'NTransferListItem',
|
||||
components: {
|
||||
NCheckbox
|
||||
@ -64,5 +64,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
275
src/transfer/src/styles/index.cssr.js
Normal file
275
src/transfer/src/styles/index.cssr.js
Normal file
@ -0,0 +1,275 @@
|
||||
import { c, cB, cE, cM } from '../../../_utils/cssr'
|
||||
import fadeInTransition from '../../../_styles/transitions/fade-in.js'
|
||||
|
||||
const animation = c([
|
||||
c('@keyframes transfer-slide-in-from-left', `
|
||||
0% {
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
`),
|
||||
c('@keyframes transfer-slide-out-to-right', `
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(150%);
|
||||
}
|
||||
`),
|
||||
c('@keyframes transfer-slide-in-from-right', `
|
||||
0% {
|
||||
transform: translateX(150%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
`),
|
||||
c('@keyframes transfer-slide-out-to-left', `
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
`),
|
||||
c('@keyframes transfer-height-collapse', `
|
||||
0% {
|
||||
max-height: var(--item-height);
|
||||
}
|
||||
100% {
|
||||
max-height: 0;
|
||||
}
|
||||
`),
|
||||
c('@keyframes transfer-height-expand', `
|
||||
0% {
|
||||
max-height: 0;
|
||||
}
|
||||
100% {
|
||||
max-height: var(--item-height);
|
||||
}
|
||||
`)
|
||||
])
|
||||
|
||||
export default c([
|
||||
cB('transfer', `
|
||||
display: flex;
|
||||
width: var(--width);
|
||||
font-size: var(--font-size);
|
||||
`, [
|
||||
cM('filterable', [
|
||||
cB('transfer-list', [
|
||||
cB('transfer-list-body', {
|
||||
height: 'calc(var(--item-height) * 5.6 + 45px)'
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('transfer-list', `
|
||||
background-clip: padding-box;
|
||||
width: calc(50% - 36px);
|
||||
position: relative;
|
||||
transition: background-color .3s var(--bezier);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--list-color);
|
||||
`, [
|
||||
cB('virtual-scroller', {
|
||||
height: '100%',
|
||||
scrollbarWidth: 'none',
|
||||
'-moz-scrollbar-width': 'none'
|
||||
}, [
|
||||
c('&::-webkit-scrollbar', {
|
||||
width: 0,
|
||||
height: 0
|
||||
})
|
||||
]),
|
||||
cE('border', `
|
||||
border: 1px solid var(--border-color);
|
||||
transition: border-color .3s var(--bezier);
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`),
|
||||
cB('transfer-list-header', `
|
||||
height: calc(var(--item-height) + 4px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-clip: padding-box;
|
||||
border-radius: inherit;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background-color: var(--header-color);
|
||||
transition:
|
||||
border-color .3s var(--bezier),
|
||||
background-color .3s var(--bezier);
|
||||
`, [
|
||||
cE('checkbox', `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 9px 0 14px;
|
||||
`),
|
||||
cE('header', `
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
font-weight: var(--header-font-weight);
|
||||
transition: color .3s var(--bezier);
|
||||
color: var(--header-text-color);
|
||||
`, [
|
||||
cM('disabled', {
|
||||
color: 'var(--header-text-color-disabled)'
|
||||
})
|
||||
]),
|
||||
cE('extra', `
|
||||
transition: color .3s var(--bezier);
|
||||
font-size: var(--extra-font-size);
|
||||
justify-self: flex-end;
|
||||
margin-right: 14px;
|
||||
white-space: nowrap;
|
||||
color: var(--header-extra-text-color);
|
||||
`)
|
||||
]),
|
||||
cB('transfer-list-body', `
|
||||
height: calc(var(--item-height) * 5.6);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
`, [
|
||||
cB('transfer-filter', `
|
||||
padding: 8px 8px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--filter-divider-color);
|
||||
`),
|
||||
cB('transfer-list-flex-container', `
|
||||
flex: 1;
|
||||
position: relative;
|
||||
`, [
|
||||
cB('scrollbar', `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: unset;
|
||||
`, [
|
||||
cB('scrollbar-content', {
|
||||
width: '100%'
|
||||
})
|
||||
]),
|
||||
cB('empty', `
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
`, [
|
||||
fadeInTransition()
|
||||
]),
|
||||
cB('transfer-list-content', `
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
`, [
|
||||
cM('transition-disabled', [
|
||||
cB('transfer-list-item', {
|
||||
animation: 'none !important'
|
||||
})
|
||||
]),
|
||||
cB('transfer-list-item', `
|
||||
height: var(--item-height);
|
||||
max-height: var(--item-height);
|
||||
transition:
|
||||
background-color .3s var(--bezier),
|
||||
color .3s var(--bezier);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--item-text-color);
|
||||
`, [
|
||||
c('&:hover', {
|
||||
backgroundColor: 'var(--item-color-pending)'
|
||||
}),
|
||||
cE('extra', `
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-right: 4px;
|
||||
`),
|
||||
cE('checkbox', `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 9px 0 14px;
|
||||
`),
|
||||
cM('disabled', `
|
||||
cursor: not-allowed
|
||||
background-color: transparent;
|
||||
color: var(--item-text-color-disabled);
|
||||
`),
|
||||
cM('source', {
|
||||
animationFillMode: 'forwards'
|
||||
}, [
|
||||
c('&.item-enter-active', `
|
||||
transform: translateX(150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: var(--bezier), var(--bezier-ease-out);
|
||||
animation-delay: 0s, .25s;
|
||||
animation-name: transfer-height-expand, transfer-slide-in-from-right;
|
||||
`),
|
||||
c('&.item-leave-active', `
|
||||
transform: translateX(-150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: var(--bezier), var(--bezier-ease-in);
|
||||
animation-delay: .25s, 0s;
|
||||
animation-name: ransfer-height-collapse, transfer-slide-out-to-right;
|
||||
`)
|
||||
]),
|
||||
cM('target', {
|
||||
animationFillMode: 'forwards'
|
||||
}, [
|
||||
c('&.item-enter-active', `
|
||||
transform: translateX(-150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: var(--bezier), var(--bezier-ease-out);
|
||||
animation-delay: 0s, .25s;
|
||||
animation-name: transfer-height-expand, transfer-slide-in-from-left;
|
||||
`),
|
||||
c('&.item-leave-active', `
|
||||
transform: translateX(150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: var(--bezier), var(--bezier-ease-in);
|
||||
animation-delay: .25s, 0s;
|
||||
animation-name: transfer-height-collapse, transfer-slide-out-to-left;
|
||||
`)
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('transfer-gap', {
|
||||
width: '72px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column'
|
||||
}),
|
||||
cB('button', [
|
||||
c('&:first-child', {
|
||||
marginBottom: '12px'
|
||||
})
|
||||
])
|
||||
]),
|
||||
animation
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import themedBaseStyle from './themed-base/index.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
||||
@ -1,44 +0,0 @@
|
||||
import { c } from '../../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
c('@keyframes transfer-slide-in-from-left', {
|
||||
raw: `
|
||||
0% {
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
`
|
||||
}),
|
||||
c('@keyframes transfer-slide-out-to-right', {
|
||||
raw: `
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(150%);
|
||||
}
|
||||
`
|
||||
}),
|
||||
c('@keyframes transfer-slide-in-from-right', {
|
||||
raw: `
|
||||
0% {
|
||||
transform: translateX(150%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
`
|
||||
}),
|
||||
c('@keyframes transfer-slide-out-to-left', {
|
||||
raw: `
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
`
|
||||
})
|
||||
])
|
||||
@ -1,322 +0,0 @@
|
||||
import { c, cTB, cB, cE, cM, createKey } from '../../../../_utils/cssr'
|
||||
import { depx, pxfy } from 'seemly'
|
||||
import animationStyle from './animation.cssr.js'
|
||||
import fadeInTransition from '../../../../_styles/transitions/fade-in.js'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
$local,
|
||||
$global: {
|
||||
cubicBezierEaseInOut,
|
||||
cubicBezierEaseIn,
|
||||
cubicBezierEaseOut,
|
||||
fontWeightStrong
|
||||
}
|
||||
} = props
|
||||
const {
|
||||
width,
|
||||
borderRadius,
|
||||
borderColor,
|
||||
listColor,
|
||||
headerColor,
|
||||
headerTextColor,
|
||||
headerTextColorDisabled,
|
||||
headerExtraTextColor,
|
||||
filterBorderColor,
|
||||
itemTextColor,
|
||||
itemColorPending,
|
||||
itemTextColorDisabled,
|
||||
extraFontSize
|
||||
} = $local
|
||||
return [
|
||||
animationStyle,
|
||||
cTB('transfer', {
|
||||
display: 'flex',
|
||||
width
|
||||
}, [
|
||||
['small', 'medium', 'large'].map(size => {
|
||||
const {
|
||||
[createKey('itemHeight', size)]: height,
|
||||
[createKey('fontSize', size)]: fontSize
|
||||
} = $local
|
||||
return [
|
||||
c(`@keyframes transfer-height-collapse--${size}`, {
|
||||
raw: `
|
||||
0% {
|
||||
max-height: ${height};
|
||||
}
|
||||
100% {
|
||||
max-height: 0;
|
||||
}
|
||||
`
|
||||
}),
|
||||
c(`@keyframes transfer-height-expand--${size}`, {
|
||||
raw: `
|
||||
0% {
|
||||
max-height: 0;
|
||||
}
|
||||
100% {
|
||||
max-height: ${height};
|
||||
}
|
||||
`
|
||||
}),
|
||||
cM(size + '-size', [
|
||||
cM('filterable', [
|
||||
cB('transfer-list', [
|
||||
cB('transfer-list-body', {
|
||||
height: pxfy(depx(height) * 5.6 + 45)
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('transfer-list', [
|
||||
cB('transfer-list-header', {
|
||||
fontSize,
|
||||
height: pxfy(depx(height) + 4)
|
||||
}),
|
||||
cB('empty', {
|
||||
fontSize
|
||||
}),
|
||||
cB('transfer-list-body', {
|
||||
height: pxfy(depx(height) * 5.6)
|
||||
}, [
|
||||
cB('transfer-list-item', {
|
||||
fontSize,
|
||||
height,
|
||||
maxHeight: height
|
||||
}, [
|
||||
cM('source', [
|
||||
c('&.item-enter-active', {
|
||||
animationName: `transfer-height-expand--${size}, transfer-slide-in-from-right`
|
||||
}),
|
||||
c('&.item-leave-active', {
|
||||
animationName: `transfer-height-collapse--${size}, transfer-slide-out-to-right`
|
||||
})
|
||||
]),
|
||||
cM('target', [
|
||||
c('&.item-enter-active', {
|
||||
animationName: `transfer-height-expand--${size}, transfer-slide-in-from-left`
|
||||
}),
|
||||
c('&.item-leave-active', {
|
||||
animationName: `transfer-height-collapse--${size}, transfer-slide-out-to-left`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]
|
||||
}),
|
||||
cB('transfer-list', {
|
||||
backgroundClip: 'padding-box',
|
||||
width: 'calc(50% - 36px)',
|
||||
position: 'relative',
|
||||
transition: `background-color .3s ${cubicBezierEaseInOut}`,
|
||||
borderRadius,
|
||||
backgroundColor: listColor
|
||||
}, [
|
||||
cB('virtual-scroller', {
|
||||
height: '100%',
|
||||
scrollbarWidth: 'none',
|
||||
'-moz-scrollbar-width': 'none'
|
||||
}, [
|
||||
c('&::-webkit-scrollbar', {
|
||||
width: 0,
|
||||
height: 0
|
||||
})
|
||||
]),
|
||||
cE('border-mask', {
|
||||
border: `1px solid ${borderColor}`,
|
||||
transition: `border-color .3s ${cubicBezierEaseInOut}`,
|
||||
pointerEvents: 'none',
|
||||
borderRadius,
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}),
|
||||
cB('transfer-list-header', {
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundClip: 'padding-box',
|
||||
borderTopLeftRadius: borderRadius,
|
||||
borderTopRightRadius: borderRadius,
|
||||
backgroundColor: headerColor,
|
||||
transition: `
|
||||
border-color .3s ${cubicBezierEaseInOut},
|
||||
background-color .3s ${cubicBezierEaseInOut}
|
||||
`
|
||||
}, [
|
||||
cE('checkbox', {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
padding: '0 9px 0 14px'
|
||||
}),
|
||||
cE('header', {
|
||||
flex: 1,
|
||||
lineHeight: 1,
|
||||
fontWeight: fontWeightStrong,
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`,
|
||||
color: headerTextColor
|
||||
}, [
|
||||
cM('disabled', {
|
||||
color: headerTextColorDisabled
|
||||
})
|
||||
]),
|
||||
cE('extra', {
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`,
|
||||
fontSize: extraFontSize,
|
||||
justifySelf: 'flex-end',
|
||||
marginRight: '14px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: headerExtraTextColor
|
||||
})
|
||||
]),
|
||||
cB('transfer-list-body', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 272px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
borderBottomRightRadius: borderRadius,
|
||||
borderBottomLeftRadius: borderRadius
|
||||
}, [
|
||||
cB('transfer-filter', {
|
||||
padding: '8px 8px',
|
||||
boxSizing: 'border-box',
|
||||
transition: `border-color .3s ${cubicBezierEaseInOut}`,
|
||||
borderBottom: `1px solid ${filterBorderColor}`
|
||||
}),
|
||||
cB('transfer-list-flex-container', {
|
||||
flex: 1,
|
||||
position: 'relative'
|
||||
}, [
|
||||
cB('scrollbar', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: unset;
|
||||
`
|
||||
}, [
|
||||
cB('scrollbar-content', {
|
||||
width: '100%'
|
||||
})
|
||||
]),
|
||||
cB('empty', {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%) translateX(-50%)'
|
||||
}, [
|
||||
fadeInTransition()
|
||||
]),
|
||||
cB('transfer-list-content', {
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
position: 'relative'
|
||||
}, [
|
||||
cM('transition-disabled', [
|
||||
cB('transfer-list-item', {
|
||||
animation: 'none !important'
|
||||
})
|
||||
]),
|
||||
cB('transfer-list-item', {
|
||||
transition: `
|
||||
background-color .3s ${cubicBezierEaseInOut},
|
||||
color .3s ${cubicBezierEaseInOut}`,
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: itemTextColor
|
||||
}, [
|
||||
c('&:hover', {
|
||||
backgroundColor: itemColorPending
|
||||
}),
|
||||
cE('extra', {
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '4px'
|
||||
}),
|
||||
cE('checkbox', {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
padding: '0 9px 0 14px'
|
||||
}),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed',
|
||||
backgroundColor: 'transparent',
|
||||
color: itemTextColorDisabled
|
||||
}),
|
||||
cM('source', {
|
||||
animationFillMode: 'forwards'
|
||||
}, [
|
||||
c('&.item-enter-active', {
|
||||
raw: `
|
||||
transform: translateX(150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: ${cubicBezierEaseInOut}, ${cubicBezierEaseOut};
|
||||
animation-delay: 0s, .25s;
|
||||
`
|
||||
}),
|
||||
c('&.item-leave-active', {
|
||||
raw: `
|
||||
transform: translateX(-150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: ${cubicBezierEaseInOut}, ${cubicBezierEaseIn};
|
||||
animation-delay: .25s, 0s;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('target', {
|
||||
animationFillMode: 'forwards'
|
||||
}, [
|
||||
c('&.item-enter-active', {
|
||||
raw: `
|
||||
transform: translateX(-150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: ${cubicBezierEaseInOut}, ${cubicBezierEaseOut};
|
||||
animation-delay: 0s, .25s;
|
||||
`
|
||||
}),
|
||||
c('&.item-leave-active', {
|
||||
raw: `
|
||||
transform: translateX(150%);
|
||||
animation-duration: .25s, .25s;
|
||||
animation-timing-function: ${cubicBezierEaseInOut}, ${cubicBezierEaseIn};
|
||||
animation-delay: .25s, 0s;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('transfer-gap', {
|
||||
width: '72px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column'
|
||||
}),
|
||||
cB('button', [
|
||||
c('&:first-child', {
|
||||
marginBottom: '12px'
|
||||
})
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
@ -1,34 +1,59 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { baseDark } from '../../_styles/base'
|
||||
import { checkboxDark } from '../../checkbox/styles'
|
||||
import { scrollbarDark } from '../../scrollbar/styles'
|
||||
import { inputDark } from '../../input/styles'
|
||||
import { commonDark } from '../../_styles/new-common'
|
||||
import { emptyDark } from '../../empty/styles'
|
||||
import { buttonDark } from '../../button/styles'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
export default {
|
||||
name: 'Transfer',
|
||||
peer: [baseDark, checkboxDark, scrollbarDark, inputDark],
|
||||
getLocalVars (vars) {
|
||||
common: commonDark,
|
||||
peers: {
|
||||
Checkbox: checkboxDark,
|
||||
Scrollbar: scrollbarDark,
|
||||
Input: inputDark,
|
||||
Empty: emptyDark,
|
||||
Button: buttonDark
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
fontSizeLarge,
|
||||
fontSizeMedium,
|
||||
fontSizeSmall,
|
||||
heightLarge,
|
||||
heightMedium,
|
||||
heightSmall,
|
||||
borderRadius,
|
||||
inputColorOverlay,
|
||||
tableHeaderColorOverlay,
|
||||
textColor1Overlay,
|
||||
textColorDisabledOverlay,
|
||||
textColor2Overlay,
|
||||
borderColorOverlay,
|
||||
hoverColorOverlay,
|
||||
fontWeightStrong
|
||||
} = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
itemHeightSmall: vars.heightSmall,
|
||||
itemHeightMedium: vars.heightMedium,
|
||||
itemHeightLarge: vars.heightLarge,
|
||||
fontSizeSmall: vars.fontSizeSmall,
|
||||
fontSizeMedium: vars.fontSizeMedium,
|
||||
fontSizeLarge: vars.fontSizeLarge,
|
||||
borderRadius: vars.borderRadius,
|
||||
itemHeightSmall: heightSmall,
|
||||
itemHeightMedium: heightMedium,
|
||||
itemHeightLarge: heightLarge,
|
||||
fontSizeSmall: fontSizeSmall,
|
||||
fontSizeMedium: fontSizeMedium,
|
||||
fontSizeLarge: fontSizeLarge,
|
||||
borderRadius: borderRadius,
|
||||
borderColor: 'transparent',
|
||||
listColor: vars.inputColorOverlay,
|
||||
headerColor: vars.tableHeaderColorOverlay,
|
||||
headerTextColor: vars.textColor1Overlay,
|
||||
headerTextColorDisabled: vars.textColorDisabledOverlay,
|
||||
headerExtraTextColor: vars.textColor2Overlay,
|
||||
filterBorderColor: vars.borderColorOverlay,
|
||||
itemTextColor: vars.textColor2Overlay,
|
||||
itemTextColorDisabled: vars.textColorDisabledOverlay,
|
||||
itemColorPending: vars.hoverColorOverlay
|
||||
listColor: inputColorOverlay,
|
||||
headerColor: tableHeaderColorOverlay,
|
||||
titleTextColor: textColor1Overlay,
|
||||
titleTextColorDisabled: textColorDisabledOverlay,
|
||||
headerExtraTextColor: textColor2Overlay,
|
||||
filterDividerColor: borderColorOverlay,
|
||||
itemTextColor: textColor2Overlay,
|
||||
itemTextColorDisabled: textColorDisabledOverlay,
|
||||
itemColorPending: hoverColorOverlay,
|
||||
titleFontWeight: fontWeightStrong
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,35 +1,61 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { composite } from 'seemly'
|
||||
import { baseLight } from '../../_styles/base'
|
||||
import { checkboxLight } from '../../checkbox/styles'
|
||||
import { scrollbarLight } from '../../scrollbar/styles'
|
||||
import { inputLight } from '../../input/styles'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
import { emptyLight } from '../../empty/styles'
|
||||
import { buttonLight } from '../../button/styles'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
export default {
|
||||
name: 'Transfer',
|
||||
peer: [baseLight, checkboxLight, scrollbarLight, inputLight],
|
||||
getLocalVars (vars) {
|
||||
common: commonLight,
|
||||
peers: {
|
||||
Checkbox: checkboxLight,
|
||||
Scrollbar: scrollbarLight,
|
||||
Input: inputLight,
|
||||
Empty: emptyLight,
|
||||
Button: buttonLight
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
fontSizeLarge,
|
||||
fontSizeMedium,
|
||||
fontSizeSmall,
|
||||
heightLarge,
|
||||
heightMedium,
|
||||
heightSmall,
|
||||
borderRadius,
|
||||
cardColor,
|
||||
tableHeaderColorOverlay,
|
||||
textColor1,
|
||||
textColorDisabled,
|
||||
textColor2,
|
||||
borderColorOverlay,
|
||||
hoverColorOverlay,
|
||||
borderColor,
|
||||
fontWeightStrong
|
||||
} = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
itemHeightSmall: vars.heightSmall,
|
||||
itemHeightMedium: vars.heightMedium,
|
||||
itemHeightLarge: vars.heightLarge,
|
||||
fontSizeSmall: vars.fontSizeSmall,
|
||||
fontSizeMedium: vars.fontSizeMedium,
|
||||
fontSizeLarge: vars.fontSizeLarge,
|
||||
borderRadius: vars.borderRadius,
|
||||
borderColor: vars.borderColor,
|
||||
listColor: vars.cardColor,
|
||||
headerColor: composite(vars.cardColor, vars.tableHeaderColorOverlay),
|
||||
headerTextColor: vars.textColor1,
|
||||
headerTextColorDisabled: vars.textColorDisabled,
|
||||
headerExtraTextColor: vars.textColor2,
|
||||
filterBorderColor: vars.borderColorOverlay,
|
||||
itemTextColor: vars.textColor2,
|
||||
itemTextColorDisabled: vars.textColorDisabled,
|
||||
itemColorPending: vars.hoverColorOverlay
|
||||
itemHeightSmall: heightSmall,
|
||||
itemHeightMedium: heightMedium,
|
||||
itemHeightLarge: heightLarge,
|
||||
fontSizeSmall: fontSizeSmall,
|
||||
fontSizeMedium: fontSizeMedium,
|
||||
fontSizeLarge: fontSizeLarge,
|
||||
borderRadius: borderRadius,
|
||||
borderColor: borderColor,
|
||||
listColor: cardColor,
|
||||
headerColor: composite(vars.cardColor, tableHeaderColorOverlay),
|
||||
titleTextColor: textColor1,
|
||||
titleTextColorDisabled: textColorDisabled,
|
||||
headerExtraTextColor: textColor2,
|
||||
filterDividerColor: borderColorOverlay,
|
||||
itemTextColor: textColor2,
|
||||
itemTextColorDisabled: textColorDisabled,
|
||||
itemColorPending: hoverColorOverlay,
|
||||
titleFontWeight: fontWeightStrong
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user