mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
refactor(date-picker): use cssr, css grid
This commit is contained in:
07akioni
parent
36340d8e11
commit
9c3e9cc8bf
@ -3,6 +3,7 @@
|
||||
### Fixes
|
||||
- Fix the problem that `n-auto-complete`'s menu can't be closed when use `textarea` as input.
|
||||
- Fix the problem that nested `n-icon` is not flattened.
|
||||
- Fix the problem that `n-date-picker` has no year in panel when type is `date` and `datetime`.
|
||||
### Features
|
||||
- Make `n-drawer` content scrollable.
|
||||
### Localization
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
### Fixes
|
||||
- 修正了 `n-auto-complete` 使用 `textarea` 作为输入元素时菜单无法关闭的问题
|
||||
- 修正了嵌套 `n-icon` 没有被打平的问题
|
||||
- 修正了 `n-date-picker` 在类型为 `date` 和 `datetime` 时面板不显示年的问题
|
||||
### Features
|
||||
- `n-drawer` 内容可滚动
|
||||
### Localization
|
||||
|
||||
@ -1,284 +1,305 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
$calendar-width: 288px;
|
||||
$weekdays-padding: 10px 0;
|
||||
$input-padding: 8px 14px;
|
||||
$dates-padding: 2px 0 4px 0;
|
||||
$header-padding: 6px 14px 0 14px;
|
||||
$divider-margin: 0 14px;
|
||||
$action-height: 38px;
|
||||
@include once {
|
||||
@include b(date-picker) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@include b(date-picker) {
|
||||
@include m(invalid) {
|
||||
input {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: $--date-picker-text-decoration-color;
|
||||
}
|
||||
}
|
||||
@include m(start-invalid) {
|
||||
input:nth-of-type(1) {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: $--date-picker-text-decoration-color;
|
||||
}
|
||||
}
|
||||
@include m(end-invalid) {
|
||||
input:nth-of-type(2) {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: $--date-picker-text-decoration-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(date-panel) {
|
||||
@include once {
|
||||
outline: none;
|
||||
@include fade-in-scale-up-transition(date-panel);
|
||||
transform: $--n-transform-debounce-scale;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
width: 288px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: $--n-date-picker-border-radius;
|
||||
@include b(time-picker) {
|
||||
z-index: 1;
|
||||
}
|
||||
@include b(date-panel-calendar) {
|
||||
width: $calendar-width;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
background: $--date-picker-background-color;
|
||||
box-shadow: $--date-picker-box-shadow;
|
||||
color: $--date-picker-text-color;
|
||||
@include m(datetimerange, daterange) {
|
||||
@include once {
|
||||
width: $calendar-width * 2 + 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@include m(daterange) {
|
||||
@include e(vertical-divider) {
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(date-panel-input-wrapper) {
|
||||
@include once {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
@include e(arrow) {
|
||||
@include once {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
}
|
||||
@include b(base-icon) {
|
||||
@include once {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
fill: $--date-picker-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(vertical-divider) {
|
||||
@include once {
|
||||
width: 1px;
|
||||
height: calc(100% - 64px);
|
||||
margin-top: 64px;
|
||||
}
|
||||
background: $--date-picker-divider-color;
|
||||
}
|
||||
}
|
||||
@include b(date-panel-input-wrapper) {
|
||||
@include once {
|
||||
padding: $input-padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include b(input) {
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
@include b(time-picker) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@include b(date-panel-date-input) {
|
||||
@include m(invalid) {
|
||||
input {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: $--date-picker-text-decoration-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid $--date-picker-divider-color;
|
||||
}
|
||||
@include b(date-panel-month) {
|
||||
@include once {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
padding: $header-padding;
|
||||
@include e(prev, next, fast-prev, fast-next) {
|
||||
cursor: pointer;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
@include e(fast-prev, next) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@include e(prev, next, fast-prev, fast-next) {
|
||||
fill: $--date-picker-icon-color;
|
||||
}
|
||||
@include e(month-year) {
|
||||
@include once {
|
||||
font-size: 14px;
|
||||
font-weight: $--n-strong-weight;
|
||||
line-height: 17px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
color: $--date-picker-month-text-color;
|
||||
}
|
||||
}
|
||||
@include b(date-panel-weekdays) {
|
||||
@include once {
|
||||
padding: $weekdays-padding;
|
||||
display: grid;
|
||||
margin: auto;
|
||||
grid-template-columns: repeat(7, 38px);
|
||||
grid-template-rows: repeat(1, 15px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
@include e(day) {
|
||||
@include once {
|
||||
line-height: 15px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
color: $--date-picker-text-color;
|
||||
}
|
||||
}
|
||||
@include b(date-panel-dates) {
|
||||
@include once {
|
||||
padding: $dates-padding;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 38px);
|
||||
grid-template-rows: repeat(6, 32px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@include b(date-panel-date) {
|
||||
@include once {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .2s $--n-ease-in-out-cubic-bezier;
|
||||
@include m(transition-disabled) {
|
||||
transition: none!important;
|
||||
}
|
||||
}
|
||||
@include not-m(disabled) {
|
||||
@include not-m(selected) {
|
||||
&:hover {
|
||||
background-color: map-get($--date-picker-item-background-color, 'hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(current) {
|
||||
&::after {
|
||||
@include once {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 2px;
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
background-color: map-get($--date-picker-item-background-color, 'active');
|
||||
}
|
||||
}
|
||||
@include m(covered) {
|
||||
@include not-m(selected) {
|
||||
&::before {
|
||||
@include once {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
right: -7px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
background: map-get($--date-picker-item-background-color, 'hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(selected) {
|
||||
color: map-get($--date-picker-item-text-color, 'active');
|
||||
background-color: map-get($--date-picker-item-background-color, 'active');
|
||||
&::after {
|
||||
background-color: map-get($--date-picker-item-sup-color, 'active');
|
||||
}
|
||||
}
|
||||
@include m(excluded) {
|
||||
@include once {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
@include once {
|
||||
cursor: not-allowed;
|
||||
opacity: $--n-disabled-opacity !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(divider) {
|
||||
@include once {
|
||||
margin: $divider-margin;
|
||||
height: 1px;
|
||||
}
|
||||
background-color: $--date-picker-divider-color;
|
||||
}
|
||||
@include b(date-panel-actions) {
|
||||
@include once {
|
||||
flex: 1;
|
||||
height: $action-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
@include b(button) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
border-top: 1px solid $--date-picker-divider-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(date-picker) {
|
||||
// position: relative;
|
||||
// @include m(invalid) {
|
||||
// input {
|
||||
// text-decoration: line-through;
|
||||
// text-decoration-color: $--date-picker-text-decoration-color;
|
||||
// }
|
||||
// }
|
||||
// @include m(start-invalid) {
|
||||
// input:nth-of-type(1) {
|
||||
// text-decoration: line-through;
|
||||
// text-decoration-color: $--date-picker-text-decoration-color;
|
||||
// }
|
||||
// }
|
||||
// @include m(end-invalid) {
|
||||
// input:nth-of-type(2) {
|
||||
// text-decoration: line-through;
|
||||
// text-decoration-color: $--date-picker-text-decoration-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel) {
|
||||
// outline: none;
|
||||
// @include fade-in-scale-up-transition(date-panel);
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// margin-top: 4px;
|
||||
// margin-bottom: 4px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
// border-radius: $--n-date-picker-border-radius;
|
||||
// background: $--date-picker-background-color;
|
||||
// box-shadow: $--date-picker-box-shadow;
|
||||
// color: $--date-picker-text-color;
|
||||
// @include b(date-panel-calendar) {
|
||||
// padding: 4px 12px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
// }
|
||||
// @include m(date) {
|
||||
// grid-template-areas:
|
||||
// "calendar"
|
||||
// "action";
|
||||
// @include b(date-panel-calendar) {
|
||||
// padding-top: 6px;
|
||||
// grid-area: calendar;
|
||||
// }
|
||||
// @include b(date-panel-actions) {
|
||||
// grid-area: action;
|
||||
// }
|
||||
// }
|
||||
// @include m(daterange) {
|
||||
// grid-template-areas:
|
||||
// "start-calendar divider end-calendar"
|
||||
// "action action action";
|
||||
// @include b(date-panel-calendar) {
|
||||
// padding-top: 6px;
|
||||
// @include m(start) {
|
||||
// grid-area: start-calendar;
|
||||
// }
|
||||
// @include m(end) {
|
||||
// grid-area: end-calendar;
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel-actions) {
|
||||
// grid-area: action;
|
||||
// }
|
||||
// }
|
||||
// @include m(datetime) {
|
||||
// grid-template-areas:
|
||||
// "head"
|
||||
// "calendar"
|
||||
// "action";
|
||||
// @include b(date-panel-input-wrapper) {
|
||||
// grid-area: head;
|
||||
// }
|
||||
// @include b(date-panel-calendar) {
|
||||
// grid-area: calendar;
|
||||
// }
|
||||
// @include b(date-panel-actions) {
|
||||
// grid-area: action;
|
||||
// }
|
||||
// }
|
||||
// @include m(datetimerange) {
|
||||
// grid-template-areas:
|
||||
// "head head head"
|
||||
// "start-calendar divider end-calendar"
|
||||
// "action action action";
|
||||
// @include b(date-panel-input-wrapper) {
|
||||
// grid-area: head;
|
||||
// }
|
||||
// @include b(date-panel-calendar) {
|
||||
// @include m(start) {
|
||||
// grid-area: start-calendar;
|
||||
// }
|
||||
// @include m(end) {
|
||||
// grid-area: end-calendar;
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel-actions) {
|
||||
// grid-area: action;
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel-input-wrapper) {
|
||||
// @include once {
|
||||
|
||||
// @include e(arrow) {
|
||||
// @include once {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// margin: 0 8px;
|
||||
// position: relative;
|
||||
// }
|
||||
// @include b(base-icon) {
|
||||
// @include once {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// }
|
||||
// fill: $--date-picker-icon-color;
|
||||
// }
|
||||
// }
|
||||
// > {
|
||||
// @include b(input) {
|
||||
// margin-right: 10px;
|
||||
// flex: 1;
|
||||
// width: 0;
|
||||
// }
|
||||
// @include b(time-picker) {
|
||||
// z-index: 1;
|
||||
// flex: 1;
|
||||
// width: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel-date-input) {
|
||||
// @include m(invalid) {
|
||||
// input {
|
||||
// text-decoration: line-through;
|
||||
// text-decoration-color: $--date-picker-text-decoration-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// border-bottom: 1px solid $--date-picker-divider-color;
|
||||
// }
|
||||
// @include b(date-panel-month) {
|
||||
// @include once {
|
||||
// display: flex;
|
||||
// box-sizing: border-box;
|
||||
// align-items: center;
|
||||
// height: 28px;
|
||||
// padding: 0 8px;
|
||||
// @include e(prev, next, fast-prev, fast-next) {
|
||||
// cursor: pointer;
|
||||
// width: 14px;
|
||||
// height: 14px;
|
||||
// }
|
||||
// @include e(fast-prev, next) {
|
||||
// margin-right: 10px;
|
||||
// }
|
||||
// }
|
||||
// @include e(prev, next, fast-prev, fast-next) {
|
||||
// fill: $--date-picker-icon-color;
|
||||
// }
|
||||
// @include e(month-year) {
|
||||
// @include once {
|
||||
// font-size: 14px;
|
||||
// font-weight: $--n-strong-weight;
|
||||
// line-height: 17px;
|
||||
// flex-grow: 1;
|
||||
// text-align: center;
|
||||
// }
|
||||
// color: $--date-picker-month-text-color;
|
||||
// }
|
||||
// }
|
||||
// @include b(date-panel-weekdays) {
|
||||
// @include once {
|
||||
// display: grid;
|
||||
// margin: auto;
|
||||
// grid-template-columns: repeat(7, 38px);
|
||||
// grid-template-rows: repeat(1, 32px);
|
||||
// align-items: center;
|
||||
// justify-items: center;
|
||||
// margin-bottom: 4px;
|
||||
// }
|
||||
// @include e(day) {
|
||||
// @include once {
|
||||
// line-height: 15px;
|
||||
// width: 24px;
|
||||
// text-align: center;
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// color: $--date-picker-text-color;
|
||||
// }
|
||||
// border-bottom: 1px solid $--date-picker-divider-color;
|
||||
// }
|
||||
// @include b(date-panel-dates) {
|
||||
// @include once {
|
||||
// margin: auto;
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(7, 38px);
|
||||
// grid-template-rows: repeat(6, 32px);
|
||||
// align-items: center;
|
||||
// justify-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
// @include b(date-panel-date) {
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// line-height: 24px;
|
||||
// text-align: center;
|
||||
// font-size: 13px;
|
||||
// border-radius: 3px;
|
||||
// z-index: 0;
|
||||
// cursor: pointer;
|
||||
// transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .2s $--n-ease-in-out-cubic-bezier;
|
||||
// @include m(transition-disabled) {
|
||||
// transition: none!important;
|
||||
// }
|
||||
// }
|
||||
// @include not-m(disabled) {
|
||||
// @include not-m(selected) {
|
||||
// &:hover {
|
||||
// background-color: map-get($--date-picker-item-background-color, 'hover');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(current) {
|
||||
// &::after {
|
||||
// @include once {
|
||||
// position: absolute;
|
||||
// top: 3px;
|
||||
// right: 2px;
|
||||
// content: "";
|
||||
// height: 4px;
|
||||
// width: 4px;
|
||||
// border-radius: 2px;
|
||||
// transition: background-color .2s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// background-color: map-get($--date-picker-item-background-color, 'active');
|
||||
// }
|
||||
// }
|
||||
// @include m(covered) {
|
||||
// @include not-m(selected) {
|
||||
// &::before {
|
||||
// @include once {
|
||||
// content: "";
|
||||
// z-index: -1;
|
||||
// position: absolute;
|
||||
// left: -7px;
|
||||
// right: -7px;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// }
|
||||
// background: map-get($--date-picker-item-background-color, 'hover');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(selected) {
|
||||
// color: map-get($--date-picker-item-text-color, 'active');
|
||||
// background-color: map-get($--date-picker-item-background-color, 'active');
|
||||
// &::after {
|
||||
// background-color: map-get($--date-picker-item-sup-color, 'active');
|
||||
// }
|
||||
// }
|
||||
// @include m(excluded) {
|
||||
// @include once {
|
||||
// opacity: 0.45;
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// @include once {
|
||||
// cursor: not-allowed;
|
||||
// opacity: $--n-disabled-opacity !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(vertical-divider) {
|
||||
// grid-area: divider;
|
||||
// height: 100%;
|
||||
// width: 1px;
|
||||
// background: $--date-picker-divider-color;
|
||||
// }
|
||||
// @include b(date-panel-actions) {
|
||||
// @include once {
|
||||
// flex: 1;
|
||||
// padding: 8px 12px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: flex-end;
|
||||
// @include b(button) {
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
// border-top: 1px solid $--date-picker-divider-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
@import './BaseMenuMask.scss';
|
||||
@import './BaseSelectMenu.scss';
|
||||
@import './BaseTrackingRect.scss';
|
||||
@import './DatePicker.scss';
|
||||
@import './Descriptions.scss';
|
||||
@import './Form.scss';
|
||||
@import './Popover.scss';
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import DatePicker from './src/DatePicker.vue'
|
||||
|
||||
DatePicker.install = function (Vue) {
|
||||
Vue.component(DatePicker.name, DatePicker)
|
||||
DatePicker.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + DatePicker.name, DatePicker)
|
||||
}
|
||||
|
||||
export default DatePicker
|
||||
|
||||
@ -147,6 +147,7 @@ import zindexable from '../../_mixins/zindexable'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import clickoutside from '../../_directives/clickoutside'
|
||||
import locale from '../../_mixins/locale'
|
||||
import DatetimePanel from './panel/datetime'
|
||||
@ -164,6 +165,8 @@ import isValid from 'date-fns/isValid'
|
||||
import { strictParse, getDerivedTimeFromKeyboardEvent } from '../../_utils/component/datePicker'
|
||||
import isEqual from 'lodash-es/isEqual'
|
||||
|
||||
import styles from './styles'
|
||||
|
||||
const DATE_FORMAT = {
|
||||
date: 'yyyy-MM-dd',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
@ -172,7 +175,7 @@ const DATE_FORMAT = {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NDatePicker',
|
||||
name: 'DatePicker',
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
@ -192,7 +195,8 @@ export default {
|
||||
placeable,
|
||||
zindexable,
|
||||
locale('DatePicker'),
|
||||
asformitem()
|
||||
asformitem(),
|
||||
usecssr(styles)
|
||||
],
|
||||
model: {
|
||||
prop: 'value',
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
<template>
|
||||
<transition name="n-date-panel-transition">
|
||||
<transition name="n-fade-in-scale-up-transition">
|
||||
<div
|
||||
v-if="active"
|
||||
tabindex="0"
|
||||
class="n-date-panel"
|
||||
class="n-date-panel n-date-panel--date"
|
||||
:class="{
|
||||
[`n-${theme}-theme`]: theme
|
||||
}"
|
||||
@focus="handlePanelFocus"
|
||||
@keydown="handlePanelKeyDown"
|
||||
>
|
||||
<div style="width: 100%; height: 3px" />
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
class="n-date-panel-month__fast-prev"
|
||||
@click="prevYear"
|
||||
>
|
||||
<n-base-icon type="fast-backward" />
|
||||
<div class="n-date-panel-calendar">
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
class="n-date-panel-month__fast-prev"
|
||||
@click="prevYear"
|
||||
>
|
||||
<n-base-icon type="fast-backward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__prev"
|
||||
@click="prevMonth"
|
||||
>
|
||||
<n-base-icon type="backward" />
|
||||
</div>
|
||||
<div class="n-date-panel-month__month-year">
|
||||
{{ calendarMonth }} {{ calendarYear }}
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__next"
|
||||
@click="nextMonth"
|
||||
>
|
||||
<n-base-icon type="forward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__fast-next"
|
||||
@click="nextYear"
|
||||
>
|
||||
<n-base-icon type="fast-forward" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__prev"
|
||||
@click="prevMonth"
|
||||
>
|
||||
<n-base-icon type="backward" />
|
||||
<div class="n-date-panel-weekdays">
|
||||
<div
|
||||
v-for="weekday in weekdays"
|
||||
:key="weekday"
|
||||
class="n-date-panel-weekdays__day"
|
||||
>
|
||||
{{ weekday }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel-month__month-year">
|
||||
{{ calendarMonth }} {{ calendarYear }}
|
||||
<div class="n-date-panel-dates">
|
||||
<div
|
||||
v-for="(dateItem, i) in dateArray"
|
||||
:key="i"
|
||||
class="n-date-panel-date"
|
||||
:class="{
|
||||
'n-date-panel-date--current': dateItem.isCurrentDate,
|
||||
'n-date-panel-date--selected': dateItem.isSelectedDate,
|
||||
'n-date-panel-date--excluded': !dateItem.isDateOfDisplayMonth,
|
||||
'n-date-panel-date--transition-disabled': noTransition,
|
||||
'n-date-panel-date--disabled': isDateDisabled(dateItem.timestamp)
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.dateObject.date }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!(actions && actions.length)"
|
||||
style="height: 8px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__next"
|
||||
@click="nextMonth"
|
||||
>
|
||||
<n-base-icon type="forward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__fast-next"
|
||||
@click="nextYear"
|
||||
>
|
||||
<n-base-icon type="fast-forward" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel-weekdays">
|
||||
<div
|
||||
v-for="weekday in weekdays"
|
||||
:key="weekday"
|
||||
class="n-date-panel-weekdays__day"
|
||||
>
|
||||
{{ weekday }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel__divider" />
|
||||
<div class="n-date-panel-dates">
|
||||
<div
|
||||
v-for="(dateItem, i) in dateArray"
|
||||
:key="i"
|
||||
class="n-date-panel-date"
|
||||
:class="{
|
||||
'n-date-panel-date--current': dateItem.isCurrentDate,
|
||||
'n-date-panel-date--selected': dateItem.isSelectedDate,
|
||||
'n-date-panel-date--excluded': !dateItem.isDateOfDisplayMonth,
|
||||
'n-date-panel-date--transition-disabled': noTransition,
|
||||
'n-date-panel-date--disabled': isDateDisabled(dateItem.timestamp)
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.dateObject.date }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!(actions && actions.length)"
|
||||
style="height: 8px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="actions && actions.length"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<transition name="n-date-panel-transition">
|
||||
<transition name="n-fade-in-scale-up-transition">
|
||||
<div
|
||||
v-if="active"
|
||||
tabindex="0"
|
||||
@ -11,10 +11,9 @@
|
||||
@keydown="handlePanelKeyDown"
|
||||
@focus="handlePanelFocus"
|
||||
>
|
||||
<div style="width: 100%; height: 3px" />
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-panel-calendar"
|
||||
class="n-date-panel-calendar n-date-panel-calendar--start"
|
||||
>
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
@ -77,10 +76,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><div class="n-date-panel__vertical-divider" /></div>
|
||||
<div class="n-date-panel__vertical-divider" />
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-panel-calendar"
|
||||
class="n-date-panel-calendar n-date-panel-calendar--end"
|
||||
>
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<transition name="n-date-panel-transition">
|
||||
<transition name="n-fade-in-scale-up-transition">
|
||||
<div
|
||||
v-if="active"
|
||||
tabindex="0"
|
||||
class="n-date-panel"
|
||||
class="n-date-panel n-date-panel--datetime"
|
||||
:class="{
|
||||
[`n-${theme}-theme`]: theme
|
||||
}"
|
||||
@ -43,65 +43,66 @@
|
||||
@change="handleTimePickerChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
class="n-date-panel-month__fast-prev"
|
||||
@click="prevYear"
|
||||
>
|
||||
<n-base-icon type="fast-backward" />
|
||||
<div class="n-date-panel-calendar">
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
class="n-date-panel-month__fast-prev"
|
||||
@click="prevYear"
|
||||
>
|
||||
<n-base-icon type="fast-backward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__prev"
|
||||
@click="prevMonth"
|
||||
>
|
||||
<n-base-icon type="backward" />
|
||||
</div>
|
||||
<div class="n-date-panel-month__month-year">
|
||||
{{ calendarMonth }} {{ calendarYear }}
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__next"
|
||||
@click="nextMonth"
|
||||
>
|
||||
<n-base-icon type="forward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__fast-next"
|
||||
@click="nextYear"
|
||||
>
|
||||
<n-base-icon type="fast-forward" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__prev"
|
||||
@click="prevMonth"
|
||||
>
|
||||
<n-base-icon type="backward" />
|
||||
<div class="n-date-panel-weekdays">
|
||||
<div
|
||||
v-for="weekday in weekdays"
|
||||
:key="weekday"
|
||||
class="n-date-panel-weekdays__day"
|
||||
>
|
||||
{{ weekday }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel-month__month-year">
|
||||
{{ calendarMonth }} {{ calendarYear }}
|
||||
<div class="n-date-panel-dates">
|
||||
<div
|
||||
v-for="(dateItem, i) in dateArray"
|
||||
:key="i"
|
||||
class="n-date-panel-date"
|
||||
:class="{
|
||||
'n-date-panel-date--current': dateItem.isCurrentDate,
|
||||
'n-date-panel-date--selected': dateItem.isSelectedDate,
|
||||
'n-date-panel-date--excluded': !dateItem.isDateOfDisplayMonth,
|
||||
'n-date-panel-date--transition-disabled': noTransition,
|
||||
'n-date-panel-date--disabled': isDateDisabled(dateItem.timestamp)
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.dateObject.date }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!(actions && actions.length)"
|
||||
style="height: 8px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__next"
|
||||
@click="nextMonth"
|
||||
>
|
||||
<n-base-icon type="forward" />
|
||||
</div>
|
||||
<div
|
||||
class="n-date-panel-month__fast-next"
|
||||
@click="nextYear"
|
||||
>
|
||||
<n-base-icon type="fast-forward" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel-weekdays">
|
||||
<div
|
||||
v-for="weekday in weekdays"
|
||||
:key="weekday"
|
||||
class="n-date-panel-weekdays__day"
|
||||
>
|
||||
{{ weekday }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-panel__divider" />
|
||||
<div class="n-date-panel-dates">
|
||||
<div
|
||||
v-for="(dateItem, i) in dateArray"
|
||||
:key="i"
|
||||
class="n-date-panel-date"
|
||||
:class="{
|
||||
'n-date-panel-date--current': dateItem.isCurrentDate,
|
||||
'n-date-panel-date--selected': dateItem.isSelectedDate,
|
||||
'n-date-panel-date--excluded': !dateItem.isDateOfDisplayMonth,
|
||||
'n-date-panel-date--transition-disabled': noTransition,
|
||||
'n-date-panel-date--disabled': isDateDisabled(dateItem.timestamp)
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.dateObject.date }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!(actions && actions.length)"
|
||||
style="height: 8px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="actions && actions.length"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<transition name="n-date-panel-transition">
|
||||
<transition name="n-fade-in-scale-up-transition">
|
||||
<div
|
||||
v-if="active"
|
||||
tabindex="0"
|
||||
@ -80,7 +80,7 @@
|
||||
</div>
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-panel-calendar"
|
||||
class="n-date-panel-calendar n-date-panel-calendar--start"
|
||||
>
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
@ -151,10 +151,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><div class="n-date-panel__vertical-divider" /></div>
|
||||
<div class="n-date-panel__vertical-divider" />
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-panel-calendar"
|
||||
class="n-date-panel-calendar n-date-panel-calendar--end"
|
||||
>
|
||||
<div class="n-date-panel-month">
|
||||
<div
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
return this.localeNamespace[format(this.calendarDateTime, 'MMM')]
|
||||
},
|
||||
calendarYear () {
|
||||
return this.localeNamespace[format(this.calendarDateTime, 'yyyy')]
|
||||
return format(this.calendarDateTime, 'yyyy')
|
||||
},
|
||||
/**
|
||||
* If value is valid return null.
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
import { c, cTB, cB, cM } from '../../../_utils/cssr'
|
||||
import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
|
||||
import pxfy from '../../../_utils/css/pxfy'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const panelWidth = 288
|
||||
const {
|
||||
transformDebounceScale
|
||||
transformDebounceScale,
|
||||
easeInOutCubicBezier
|
||||
} = props.$base
|
||||
const {
|
||||
itemTextColor,
|
||||
itemTextColorDisabled,
|
||||
itemTextColorMatched,
|
||||
itemTextColorCurrent,
|
||||
itemSupColor,
|
||||
itemSupColorMatch,
|
||||
itemColorHover,
|
||||
itemColorActive,
|
||||
itemBorderRadius,
|
||||
panelColor,
|
||||
panelTextColor,
|
||||
panelIconColor,
|
||||
@ -24,48 +22,335 @@ export default c([
|
||||
panelDividerColor,
|
||||
panelBoxShadow,
|
||||
panelBorderRadius,
|
||||
panelHeaderFontWeight,
|
||||
pickerTextDecorationColor
|
||||
} = props.$local
|
||||
return cTB('date-picker', {
|
||||
position: 'relative'
|
||||
}, [
|
||||
cM('invalid', [
|
||||
c('input', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
return [
|
||||
cTB('date-picker', {
|
||||
position: 'relative'
|
||||
}, [
|
||||
cM('invalid', [
|
||||
c('input', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
]),
|
||||
cM('start-invalid', [
|
||||
c('input:nth-of-type(1)', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
]),
|
||||
cM('end-invalid', [
|
||||
c('input:nth-of-type(2)', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('start-invalid', [
|
||||
c('input:nth-of-type(1)', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
]),
|
||||
cM('end-invalid', [
|
||||
c('input:nth-of-type(2)', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
]),
|
||||
cB('data-panel', {
|
||||
cTB('date-panel', {
|
||||
outline: 'none',
|
||||
transform: transformDebounceScale,
|
||||
marginTop: '4px',
|
||||
marginBottom: '4px',
|
||||
width: pxfy(panelWidth),
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
borderRadius: panelBorderRadius,
|
||||
backgroundColor: panelColor,
|
||||
boxShadow: panelBoxShadow,
|
||||
color: panelTextColor
|
||||
}, [
|
||||
fadeInScaleUpTransition(),
|
||||
cB('time-picker', {
|
||||
zIndex: 1
|
||||
}),
|
||||
cB('date-panel-calendar', {
|
||||
width: '288px'
|
||||
})
|
||||
padding: '4px 12px',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr'
|
||||
}),
|
||||
cM('date', {
|
||||
gridTemplateAreas: `
|
||||
"calendar"
|
||||
"action"
|
||||
`
|
||||
}, [
|
||||
cB('date-panel-calendar', {
|
||||
paddingTop: '6px',
|
||||
gridArea: 'calendar'
|
||||
}),
|
||||
cB('date-panel-actions', {
|
||||
gridArea: 'action'
|
||||
})
|
||||
]),
|
||||
cM('daterange', {
|
||||
gridTemplateAreas: `
|
||||
"start-calendar divider end-calendar"
|
||||
"action action action"
|
||||
`
|
||||
}, [
|
||||
cB('date-panel-calendar', {
|
||||
paddingTop: '6px'
|
||||
}, [
|
||||
cM('start', {
|
||||
gridArea: 'start-calendar'
|
||||
}),
|
||||
cM('end', {
|
||||
gridArea: 'end-calendar'
|
||||
})
|
||||
]),
|
||||
cB('date-panel-actions', {
|
||||
gridArea: 'action'
|
||||
})
|
||||
]),
|
||||
cM('datetime', {
|
||||
gridTemplateAreas: `
|
||||
"head"
|
||||
"calendar"
|
||||
"action"
|
||||
`
|
||||
}, [
|
||||
cB('date-panel-input-wrapper', {
|
||||
gridArea: 'head'
|
||||
}),
|
||||
cB('date-panel-calendar', {
|
||||
gridArea: 'calendar'
|
||||
}),
|
||||
cB('date-panel-actions', {
|
||||
gridArea: 'action'
|
||||
})
|
||||
]),
|
||||
cM('datetimerange', {
|
||||
gridTemplateAreas: `
|
||||
"head head head"
|
||||
"start-calendar divider end-calendar"
|
||||
"action action action"
|
||||
`
|
||||
}, [
|
||||
cB('date-panel-input-wrapper', {
|
||||
gridArea: 'head'
|
||||
}),
|
||||
cB('date-panel-calendar', [
|
||||
cM('start', {
|
||||
gridArea: 'start-calendar'
|
||||
}),
|
||||
cM('end', {
|
||||
gridArea: 'end-calendar'
|
||||
})
|
||||
]),
|
||||
cB('date-panel-actions', {
|
||||
gridArea: 'action'
|
||||
})
|
||||
]),
|
||||
cB('date-panel-input-wrapper', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${panelDividerColor};
|
||||
`
|
||||
}, [
|
||||
cE('arrow', {
|
||||
raw: `
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
`
|
||||
}),
|
||||
cB('base-icon', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
fill: ${panelIconColor};
|
||||
`
|
||||
}),
|
||||
c('>', [
|
||||
cB('input', {
|
||||
marginRight: '10px',
|
||||
flex: 1,
|
||||
width: 0
|
||||
}),
|
||||
cB('time-picker', {
|
||||
zIndex: 1,
|
||||
flex: 1,
|
||||
width: 0
|
||||
})
|
||||
]),
|
||||
cB('data-panel-date-input', [
|
||||
cM('invalid', [
|
||||
c('input', {
|
||||
textDecoration: 'line-through',
|
||||
textDecorationColor: pickerTextDecorationColor
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('date-panel-month', {
|
||||
raw: `
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
`
|
||||
}, [
|
||||
cE('prev, next, fast-prev, fast-next', {
|
||||
raw: `
|
||||
cursor: pointer;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: ${panelIconColor};
|
||||
`
|
||||
}),
|
||||
cE('fast-prev, next', {
|
||||
marginRight: '10px'
|
||||
}),
|
||||
cE('month-year', {
|
||||
raw: `
|
||||
font-size: 14px;
|
||||
font-weight: ${panelHeaderFontWeight};
|
||||
line-height: 17px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
color: ${panelHeaderTextColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('date-panel-weekdays', {
|
||||
raw: `
|
||||
display: grid;
|
||||
margin: auto;
|
||||
grid-template-columns: repeat(7, 38px);
|
||||
grid-template-rows: repeat(1, 32px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px solid ${panelDividerColor}
|
||||
`
|
||||
}, [
|
||||
cE('day', {
|
||||
raw: `
|
||||
line-height: 15px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: ${itemTextColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('date-panel-dates', {
|
||||
raw: `
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 38px);
|
||||
grid-template-rows: repeat(6, 32px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
flex-wrap: wrap;
|
||||
`
|
||||
}, [
|
||||
cB('date-panel-date', {
|
||||
raw: `
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
border-radius: ${itemBorderRadius};
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color .2s ${easeInOutCubicBezier},
|
||||
color .2s ${easeInOutCubicBezier};
|
||||
`
|
||||
}, [
|
||||
cM('transition-disabled', {
|
||||
transition: 'none !important'
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
cNotM('selected', [
|
||||
c('&:hover', {
|
||||
backgroundColor: itemColorHover
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('current', [
|
||||
c('&::after', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 2px;
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: ${itemSupColor};
|
||||
transition:
|
||||
background-color .2s ${easeInOutCubicBezier};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('covered', [
|
||||
cNotM('selected', [
|
||||
c('&::before', {
|
||||
raw: `
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
right: -7px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: ${itemColorHover};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('selected', {
|
||||
color: itemTextColorMatched,
|
||||
backgroundColor: itemColorActive
|
||||
}, [
|
||||
c('&::after', {
|
||||
backgroundColor: itemSupColorMatch
|
||||
})
|
||||
]),
|
||||
cM('excluded', {
|
||||
opacity: 0.45
|
||||
}),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed',
|
||||
opacity: 0.45
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('vertical-divider', {
|
||||
raw: `
|
||||
grid-area: divider;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: ${panelDividerColor};
|
||||
`
|
||||
}),
|
||||
cB('date-panel-actions', {
|
||||
raw: `
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid ${panelDividerColor};
|
||||
`
|
||||
}, [
|
||||
cB('button', {
|
||||
marginLeft: '8px'
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
@ -7,13 +7,12 @@ export default create({
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {
|
||||
itemTextColor: derived.secondaryTextOverlayColor,
|
||||
itemTextColorDisabled: derived.disabledTextOverlayColor,
|
||||
itemTextColorMatched: derived.popoverBackgroundColor,
|
||||
itemTextColorCurrent: derived.primaryColor,
|
||||
itemSupColor: derived.primaryColor,
|
||||
itemSupColorMatch: derived.popoverBackgroundColor,
|
||||
itemColorHover: changeColor(derived.primaryColor, { alpha: 0.5 }),
|
||||
itemColorActive: derived.primaryColor,
|
||||
itemBorderRadius: base.smallBorderRadius,
|
||||
panelColor: derived.popoverBackgroundColor,
|
||||
panelTextColor: derived.secondaryTextOverlayColor,
|
||||
panelIconColor: derived.iconOverlayColor,
|
||||
@ -21,7 +20,8 @@ export default create({
|
||||
panelDividerColor: derived.dividerOverlayColor,
|
||||
panelBorderRadius: base.borderRadius,
|
||||
panelBoxShadow: derived.popoverBoxShadow,
|
||||
pickerTextDecorationColor: derived.secondaryTextOverlayColor
|
||||
pickerTextDecorationColor: derived.secondaryTextOverlayColor,
|
||||
panelHeaderFontWeight: base.strongFontWeight
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -14,6 +14,7 @@ export default create({
|
||||
itemSupColorMatch: derived.popoverBackgroundColor,
|
||||
itemColorHover: changeColor(derived.primaryColor, { alpha: 0.1 }),
|
||||
itemColorActive: derived.primaryColor,
|
||||
itemBorderRadius: base.smallBorderRadius,
|
||||
panelColor: derived.popoverBackgroundColor,
|
||||
panelTextColor: derived.secondaryTextColor,
|
||||
panelIconColor: derived.iconColor,
|
||||
@ -21,7 +22,8 @@ export default create({
|
||||
panelDividerColor: derived.dividerColor,
|
||||
panelBoxShadow: derived.popoverBoxShadow,
|
||||
panelBorderRadius: base.borderRadius,
|
||||
pickerTextDecorationColor: derived.secondaryTextColor
|
||||
pickerTextDecorationColor: derived.secondaryTextColor,
|
||||
panelHeaderFontWeight: base.strongFontWeight
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
1
think.md
1
think.md
@ -393,6 +393,7 @@ const naive = create({
|
||||
105. <del>markdown 渲染缺少空格，修正了 n-select single filterable 时 placeholder 的样式问题</del> caused by vue compiler `preserveWhitespace: false`, change it to `whitespace: 'condense'`
|
||||
106. drawer 加上滚动条，以及 overflow auto 的样式
|
||||
107. 所有弹出的东西改成 body-style
|
||||
108. size 切换的时候... transfer 动画问题
|
||||
|
||||
```
|
||||
Done
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user