feat(time-picker): css in js (#293)

* feat(timePicker): css in js

* chore: fix code review

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>
This commit is contained in:
HaiboTang 2020-09-03 16:41:40 +08:00 committed by 07akioni
parent d6e1fcdda9
commit 12b8893841
12 changed files with 372 additions and 134 deletions

View File

@ -1,8 +0,0 @@
/* istanbul ignore file */
import Scaffold from './src/main.vue'
Scaffold.install = function (Vue) {
Vue.component(Scaffold.name, Scaffold)
}
export default Scaffold

View File

@ -1,120 +1,120 @@
@import "./mixins/mixins.scss";
// @import "./mixins/mixins.scss";
@include themes-mixin {
@include once {
@include b(time-picker) {
position: relative;
display: inline-block;
}
}
@include b(time-picker) {
@include m(invalid) {
& > {
@include b(input) {
@include e(input) {
@include once {
text-decoration: line-through;
}
text-decoration-color: map-get($--time-picker-text-decoration-color, 'default');
}
}
}
}
@include m(transition-disabled) {
& > {
@include b(input) {
input {
transition: none;
}
}
}
}
}
@include b(time-picker-selector) {
@include once {
outline: none;
font-size: 12px;
border-radius: $--n-time-picker-border-radius;
margin: 4px 0;
min-width: 104px;
overflow: hidden;
transform: $--n-transform-debounce-scale;
@include fade-in-scale-up-transition(time-picker);
@include b(time-picker-selector-actions) {
height: 38px;
align-items: center;
display: flex;
justify-content: space-evenly;
@include e(confirm) {
@include m(disabled) {
cursor: not-allowed;
opacity: 0.5;
}
}
}
}
background-color: $--time-picker-background-color;
box-shadow: $--time-picker-box-shadow;
@include b(time-picker-selector-time) {
@include once {
height: 224px;
display: flex;
position: relative;
}
border-bottom: 1px solid $--time-picker-divider-color;
}
@include b(time-picker-selector-time-row) {
@include once {
flex-grow: 1;
min-width: 52px;
height: 224px;
flex-direction: column;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
@include m(transition-disabled) {
@include e(item) {
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
}
}
}
@include e(item) {
@include once {
cursor: pointer;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
background: transparent;
}
text-decoration-color: transparent;
color: map-get($--time-picker-text-color, 'default');
@include not-m(disabled) {
&:hover {
background-color: map-get($--time-picker-item-background-color, 'hover');
}
}
@include m(active) {
background-color: map-get($--time-picker-item-background-color, 'hover');
color: map-get($--time-picker-text-color, 'active');
}
@include m(disabled) {
opacity: $--time-picker-item-disabled-opacity;
@include once {
cursor: not-allowed;
}
}
}
@include m(invalid) {
@include e(item) {
@include m(active) {
@include once {
text-decoration: line-through;
}
background-color: map-get($--time-picker-item-background-color, 'invalid');
text-decoration-color: map-get($--time-picker-text-decoration-color, 'active');
}
}
}
}
}
}
// @include themes-mixin {
// @include once {
// @include b(time-picker) {
// position: relative;
// display: inline-block;
// }
// }
// @include b(time-picker) {
// @include m(invalid) {
// & > {
// @include b(input) {
// @include e(input) {
// @include once {
// text-decoration: line-through;
// }
// text-decoration-color: map-get($--time-picker-text-decoration-color, 'default');
// }
// }
// }
// }
// @include m(transition-disabled) {
// & > {
// @include b(input) {
// input {
// transition: none;
// }
// }
// }
// }
// }
// @include b(time-picker-selector) {
// @include once {
// outline: none;
// font-size: 12px;
// border-radius: $--n-time-picker-border-radius;
// margin: 4px 0;
// min-width: 104px;
// overflow: hidden;
// transform: $--n-transform-debounce-scale;
// @include fade-in-scale-up-transition(time-picker);
// @include b(time-picker-selector-actions) {
// height: 38px;
// align-items: center;
// display: flex;
// justify-content: space-evenly;
// @include e(confirm) {
// @include m(disabled) {
// cursor: not-allowed;
// opacity: 0.5;
// }
// }
// }
// }
// background-color: $--time-picker-background-color;
// box-shadow: $--time-picker-box-shadow;
// @include b(time-picker-selector-time) {
// @include once {
// height: 224px;
// display: flex;
// position: relative;
// }
// border-bottom: 1px solid $--time-picker-divider-color;
// }
// @include b(time-picker-selector-time-row) {
// @include once {
// flex-grow: 1;
// min-width: 52px;
// height: 224px;
// flex-direction: column;
// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
// @include m(transition-disabled) {
// @include e(item) {
// transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
// }
// }
// }
// @include e(item) {
// @include once {
// cursor: pointer;
// height: 32px;
// display: flex;
// align-items: center;
// justify-content: center;
// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
// background: transparent;
// }
// text-decoration-color: transparent;
// color: map-get($--time-picker-text-color, 'default');
// @include not-m(disabled) {
// &:hover {
// background-color: map-get($--time-picker-item-background-color, 'hover');
// }
// }
// @include m(active) {
// background-color: map-get($--time-picker-item-background-color, 'hover');
// color: map-get($--time-picker-text-color, 'active');
// }
// @include m(disabled) {
// opacity: $--time-picker-item-disabled-opacity;
// @include once {
// cursor: not-allowed;
// }
// }
// }
// @include m(invalid) {
// @include e(item) {
// @include m(active) {
// @include once {
// text-decoration: line-through;
// }
// background-color: map-get($--time-picker-item-background-color, 'invalid');
// text-decoration-color: map-get($--time-picker-text-decoration-color, 'active');
// }
// }
// }
// }
// }
// }

View File

@ -12,7 +12,5 @@
@import './Popselect.scss';
@import './Table.scss';
@import './Tabs.scss';
@import './TimePicker.scss';
// @import './Timeline.scss';
@import './Tooltip.scss';
@import './Upload.scss';

View File

@ -146,7 +146,7 @@ import uniCalendarMixin from './uniCalendarMixin'
import startOfSecond from 'date-fns/startOfSecond'
import NButton from '../../../button'
import NTimePicker from '../../../TimePicker'
import NTimePicker from '../../../time-picker'
import NInput from '../../../input'
const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'

View File

@ -263,7 +263,7 @@
<script>
import NButton from '../../../button'
import NTimePicker from '../../../TimePicker'
import NTimePicker from '../../../time-picker'
import NInput from '../../../input'
import dualCalendarMixin from './dualCalendarMixin'
import NBaseIcon from '../../../_base/icon'

View File

@ -61,7 +61,7 @@ import Tabs from './Tabs'
import Tag from './tag'
import Thing from './thing'
import Time from './Time'
import TimePicker from './TimePicker'
import TimePicker from './time-picker'
import Timeline from './timeline'
import Tooltip from './Tooltip'
import Transfer from './transfer'
@ -182,6 +182,8 @@ import paginationLightStyle from './pagination/styles/light'
import paginationDarkStyle from './pagination/styles/dark'
import sliderLightStyle from './slider/styles/light'
import sliderDarkStyle from './slider/styles/dark'
import timePickerLightStyle from './time-picker/styles/light'
import timePickerDarkStyle from './time-picker/styles/dark'
import timelineLightStyle from './timeline/styles/light'
import timelineDarkStyle from './timeline/styles/dark'
@ -395,6 +397,8 @@ export default create({
paginationDarkStyle,
sliderLightStyle,
sliderDarkStyle,
timePickerLightStyle,
timePickerDarkStyle,
timelineLightStyle,
timelineDarkStyle,
// Can be remove after refactoring

8
src/time-picker/index.js Normal file
View File

@ -0,0 +1,8 @@
/* istanbul ignore file */
import Scaffold from './src/TimePicker.vue'
Scaffold.install = function (Vue, naive) {
Vue.component(naive.componentPrefix + Scaffold.name, Scaffold)
}
export default Scaffold

View File

@ -200,6 +200,8 @@ import keyboardDelegate from '../../_utils/delegate/keyboardDelegate'
import { KEY_CODE } from '../../_utils/event/keyCode'
import NBaseFocusDetector from '../../_base/focus-detector'
import timeOutline from '../../_icons/time-outline'
import usecssr from '../../_mixins/usecssr'
import styles from './styles'
const DEFAULT_FORMAT = 'HH:mm:ss'
@ -212,7 +214,7 @@ const TIME_CONST = {
}
export default {
name: 'NTimePicker',
name: 'TimePicker',
components: {
NInput,
NIcon,
@ -230,7 +232,8 @@ export default {
placeable,
zindexable,
locale('TimePicker'),
asformitem()
asformitem(),
usecssr(styles)
],
model: {
prop: 'value',

View File

@ -0,0 +1,11 @@
import themedBaseStyle from './themed-base.cssr.js'
export default [
{
key: 'syntheticTheme',
watch: [
'syntheticTheme'
],
CNode: themedBaseStyle
}
]

View File

@ -0,0 +1,154 @@
import { c, cE, cM, cTB, cB, cNotM } from '../../../_utils/cssr'
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
export default c([
({ props }) => {
const {
color,
textColor,
textColorActive,
textDecorationColor,
textDecorationColorActive,
itemColorHover,
dividerColor,
boxShadow,
itemDisabledOpacity,
borderRadius,
transformDebounceScale
} = props.$local
const {
easeInOutCubicBezier
} = props.$base
return [cTB('time-picker', {
raw: `
position: relative;
display: inline-block;
`
}, [
cM('invalid', [
cB('input', [
cE('input', {
raw: `
text-decoration: line-through;
text-decoration-color: ${textDecorationColor};
`
})
])
]),
cM('transition-disabled', [
cB('input', [
c('input', {
raw: `
transition: none;
`
})
])
])
]),
cB('time-picker-selector', {
raw: `
outline: none;
font-size: 12px;
border-radius: ${borderRadius};
margin: 4px 0;
min-width: 104px;
overflow: hidden;
transform: ${transformDebounceScale};
background-color: ${color};
box-shadow: ${boxShadow};
`
}, [
fadeInScaleUpTransition(),
cB('time-picker-selector-actions', {
raw: `
height: 38px;
align-items: center;
display: flex;
justify-content: space-evenly;
`
}, [
cE('confirm', [
cM('disabled', {
raw: `
cursor: not-allowed;
opacity: 0.5;
`
})
])
]),
cB('time-picker-selector-time', {
raw: `
height: 224px;
display: flex;
position: relative;
border-bottom: 1px solid ${dividerColor};
`
}),
cB('time-picker-selector-time-row', {
raw: `
flex-grow: 1;
min-width: 52px;
height: 224px;
flex-direction: column;
transition: box-shadow .3s ${easeInOutCubicBezier};
`
}, [
cM('transition-disabled', [
cE('item', {
raw: `
transition: background-color .3s ${easeInOutCubicBezier}, opacity .3s ${easeInOutCubicBezier};
`
})
]),
cE('item', {
raw: `
cursor: pointer;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
opacity .3s ${easeInOutCubicBezier},
text-decoration-color .3s ${easeInOutCubicBezier};
background: transparent;
text-decoration-color: transparent;
color: ${textColor};
`
}, [
cNotM('disabled', [
c('&:hover', {
raw: `
background-color: ${itemColorHover};
`
})
]),
cM('active', {
raw: `
background-color: ${itemColorHover};
color: ${textColorActive};
`
}),
cM('disabled', {
raw: `
opacity: ${itemDisabledOpacity};
cursor: not-allowed;
`
})
]),
cM('invalid', [
cE('item', [
cM('active', {
raw: `
text-decoration: line-through;
text-decoration-color: ${textDecorationColorActive};
`
})
])
])
])
])
]
}
])

View File

@ -0,0 +1,34 @@
import create from '../../styles/_utils/create-component-base'
export default create({
theme: 'dark',
name: 'TimePicker',
getDerivedVariables ({ base, derived }) {
const {
popoverBackgroundColor,
secondaryTextOverlayColor,
primaryColor,
pendingBackgroundOverlayColor,
dividerOverlayColor,
disabledOpacity
} = derived
const {
popmenuBoxShadow,
borderRadius,
transformDebounceScale
} = base
return {
color: popoverBackgroundColor,
textColor: secondaryTextOverlayColor,
textColorActive: primaryColor,
textDecorationColor: secondaryTextOverlayColor,
textDecorationColorActive: primaryColor,
itemColorHover: pendingBackgroundOverlayColor,
dividerColor: dividerOverlayColor,
boxShadow: popmenuBoxShadow,
itemDisabledOpacity: disabledOpacity,
borderRadius,
transformDebounceScale
}
}
})

View File

@ -0,0 +1,34 @@
import create from '../../styles/_utils/create-component-base'
export default create({
theme: 'light',
name: 'TimePicker',
getDerivedVariables ({ base, derived }) {
const {
modalBackgroundColor,
secondaryTextOverlayColor,
primaryColor,
pendingBackgroundOverlayColor,
dividerOverlayColor,
disabledOpacity
} = derived
const {
popmenuBoxShadow,
borderRadius,
transformDebounceScale
} = base
return {
color: modalBackgroundColor,
textColor: secondaryTextOverlayColor,
textColorActive: primaryColor,
textDecorationColor: secondaryTextOverlayColor,
textDecorationColorActive: primaryColor,
itemColorHover: pendingBackgroundOverlayColor,
dividerColor: dividerOverlayColor,
boxShadow: popmenuBoxShadow,
itemDisabledOpacity: disabledOpacity,
borderRadius,
transformDebounceScale
}
}
})