mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
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:
parent
d6e1fcdda9
commit
12b8893841
@ -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
|
@ -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');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
@ -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';
|
@ -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'
|
||||
|
@ -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'
|
||||
|
@ -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
8
src/time-picker/index.js
Normal 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
|
@ -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',
|
11
src/time-picker/src/styles/index.js
Normal file
11
src/time-picker/src/styles/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import themedBaseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
154
src/time-picker/src/styles/themed-base.cssr.js
Normal file
154
src/time-picker/src/styles/themed-base.cssr.js
Normal 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};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
34
src/time-picker/styles/dark.js
Normal file
34
src/time-picker/styles/dark.js
Normal 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
|
||||
}
|
||||
}
|
||||
})
|
34
src/time-picker/styles/light.js
Normal file
34
src/time-picker/styles/light.js
Normal 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
|
||||
}
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue
Block a user