mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
07akioni
GitHub Enterprise
commit
00e4940ecf
@ -3,8 +3,11 @@
|
||||
### 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
|
||||
- Add zhCN for `n-log`
|
||||
|
||||
## 1.5.5 (2020-08-15)
|
||||
### Breaking Changes
|
||||
|
||||
@ -3,8 +3,11 @@
|
||||
### Fixes
|
||||
- 修正了 `n-auto-complete` 使用 `textarea` 作为输入元素时菜单无法关闭的问题
|
||||
- 修正了嵌套 `n-icon` 没有被打平的问题
|
||||
- 修正了 `n-date-picker` 在类型为 `date` 和 `datetime` 时面板不显示年的问题
|
||||
### Features
|
||||
- `n-drawer` 内容可滚动
|
||||
### Localization
|
||||
- `n-log` 添加 zhCN 本地化
|
||||
|
||||
## 1.5.5 (2020-08-15)
|
||||
### Breaking Changes
|
||||
|
||||
@ -1,274 +1,305 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
$calendar-width: 288px;
|
||||
@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;
|
||||
border-radius: $--n-date-picker-border-radius;
|
||||
@include b(time-picker) {
|
||||
z-index: 1;
|
||||
}
|
||||
@include b(date-panel-calendar) {
|
||||
width: $calendar-width;
|
||||
}
|
||||
}
|
||||
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: 8px 14px;
|
||||
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-top: 8px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
@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: 9px 18px 10px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@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: 2px 11px 3px 11px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
margin: 4px 7px;
|
||||
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) {
|
||||
@include once {
|
||||
border-radius: 3px;
|
||||
width: 24px;
|
||||
margin: 4px 7px;
|
||||
}
|
||||
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: 0 14px;
|
||||
height: 1px;
|
||||
}
|
||||
background-color: $--date-picker-divider-color;
|
||||
}
|
||||
@include b(date-panel-actions) {
|
||||
@include once {
|
||||
flex: 1;
|
||||
height: 38px;
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,185 +1,185 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@mixin steps-size-mixin ($size) {
|
||||
@include m($size + '-size') {
|
||||
$title-font-size: map-get($--n-steps-header-font-size, $size);
|
||||
$indicator-size: map-get($--n-steps-indicator-size, $size);
|
||||
$indicator-icon-size: map-get($--n-steps-indicator-icon-size, $size);
|
||||
$indicator-index-font-size: map-get($--n-steps-indicator-index-font-size, $size);
|
||||
$indicator-title-margin-top: ($indicator-size - $title-font-size) / 2;
|
||||
@include b(step-splitor) {
|
||||
margin-top: $indicator-size / 2 - $indicator-title-margin-top;
|
||||
}
|
||||
@include m(vertical) {
|
||||
@include b(step-splitor) {
|
||||
left: $indicator-size / 2;
|
||||
height: calc(100% - #{$indicator-size});
|
||||
}
|
||||
}
|
||||
@include b(step-content) {
|
||||
@include b(step-content-header) {
|
||||
margin-top: $indicator-title-margin-top;
|
||||
line-height: $title-font-size;
|
||||
font-size: $title-font-size;
|
||||
}
|
||||
}
|
||||
@include b(step-indicator) {
|
||||
height: $indicator-size;
|
||||
width: $indicator-size;
|
||||
border-radius: $indicator-size / 2;
|
||||
@include b(step-indicator-slot) {
|
||||
width: $indicator-icon-size;
|
||||
height: $indicator-icon-size;
|
||||
font-size: $indicator-icon-size;
|
||||
line-height: $indicator-icon-size;
|
||||
@include e(index) {
|
||||
font-size: $indicator-index-font-size;
|
||||
width: $indicator-icon-size;
|
||||
height: $indicator-icon-size;
|
||||
line-height: $indicator-icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin steps-size-mixin ($size) {
|
||||
// @include m($size + '-size') {
|
||||
// $title-font-size: map-get($--n-steps-header-font-size, $size);
|
||||
// $indicator-size: map-get($--n-steps-indicator-size, $size);
|
||||
// $indicator-icon-size: map-get($--n-steps-indicator-icon-size, $size);
|
||||
// $indicator-index-font-size: map-get($--n-steps-indicator-index-font-size, $size);
|
||||
// $indicator-title-margin-top: ($indicator-size - $title-font-size) / 2;
|
||||
// @include b(step-splitor) {
|
||||
// margin-top: $indicator-size / 2 - $indicator-title-margin-top;
|
||||
// }
|
||||
// @include m(vertical) {
|
||||
// @include b(step-splitor) {
|
||||
// left: $indicator-size / 2;
|
||||
// height: calc(100% - #{$indicator-size});
|
||||
// }
|
||||
// }
|
||||
// @include b(step-content) {
|
||||
// @include b(step-content-header) {
|
||||
// margin-top: $indicator-title-margin-top;
|
||||
// line-height: $title-font-size;
|
||||
// font-size: $title-font-size;
|
||||
// }
|
||||
// }
|
||||
// @include b(step-indicator) {
|
||||
// height: $indicator-size;
|
||||
// width: $indicator-size;
|
||||
// border-radius: $indicator-size / 2;
|
||||
// @include b(step-indicator-slot) {
|
||||
// width: $indicator-icon-size;
|
||||
// height: $indicator-icon-size;
|
||||
// font-size: $indicator-icon-size;
|
||||
// line-height: $indicator-icon-size;
|
||||
// @include e(index) {
|
||||
// font-size: $indicator-index-font-size;
|
||||
// width: $indicator-icon-size;
|
||||
// height: $indicator-icon-size;
|
||||
// line-height: $indicator-icon-size;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin steps-status-mixin ($status) {
|
||||
@include m($status) {
|
||||
@include b(step-splitor) {
|
||||
background-color: map-get($--steps-step-splitor-background-color, $status);
|
||||
}
|
||||
@include b(step-content) {
|
||||
@include b(step-content-header) {
|
||||
color: map-get($--steps-step-title-text-color, $status);
|
||||
}
|
||||
@include e(description) {
|
||||
color: map-get($--steps-step-content-text-color, $status);
|
||||
}
|
||||
}
|
||||
@include b(step-indicator) {
|
||||
background-color: map-get($--steps-step-background-color, $status);
|
||||
box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
|
||||
@include b(step-indicator-slot) {
|
||||
@include e(index) {
|
||||
color: map-get($--steps-step-indicator-text-color, $status);
|
||||
}
|
||||
@include b(icon) {
|
||||
fill: map-get($--steps-step-indicator-text-color, $status);
|
||||
stroke: map-get($--steps-step-indicator-text-color, $status);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin steps-status-mixin ($status) {
|
||||
// @include m($status) {
|
||||
// @include b(step-splitor) {
|
||||
// background-color: map-get($--steps-step-splitor-background-color, $status);
|
||||
// }
|
||||
// @include b(step-content) {
|
||||
// @include b(step-content-header) {
|
||||
// color: map-get($--steps-step-title-text-color, $status);
|
||||
// }
|
||||
// @include e(description) {
|
||||
// color: map-get($--steps-step-content-text-color, $status);
|
||||
// }
|
||||
// }
|
||||
// @include b(step-indicator) {
|
||||
// background-color: map-get($--steps-step-background-color, $status);
|
||||
// box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
|
||||
// @include b(step-indicator-slot) {
|
||||
// @include e(index) {
|
||||
// color: map-get($--steps-step-indicator-text-color, $status);
|
||||
// }
|
||||
// @include b(icon) {
|
||||
// fill: map-get($--steps-step-indicator-text-color, $status);
|
||||
// stroke: map-get($--steps-step-indicator-text-color, $status);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(steps) {
|
||||
@include once {
|
||||
@include steps-size-mixin('small');
|
||||
@include steps-size-mixin('medium');
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@include b(step-splitor) {
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
align-self: flex-start;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@include b(step-content) {
|
||||
flex: 1;
|
||||
@include b(step-content-header) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-weight: $--n-strong-weight;
|
||||
margin-left: 9px;
|
||||
@include e(title) {
|
||||
white-space: nowrap;
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
@include e(description) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
margin-top: 12px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
@include b(step-indicator) {
|
||||
transition:
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include b(step-indicator-slot) {
|
||||
position: relative;
|
||||
@include e(index) {
|
||||
@include icon-switch-transition();
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: $--n-transform-debounce-scale;
|
||||
}
|
||||
@include b(icon) {
|
||||
@include icon-switch-transition();
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(transition-disabled) {
|
||||
@include b(step-indicator) {
|
||||
@include b(step-indicator-slot) {
|
||||
@include e(index) {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(vertical) {
|
||||
flex-direction: column;
|
||||
$step-margin-bottom: 16px;
|
||||
@include b(step) {
|
||||
margin-bottom: $step-margin-bottom;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@include b(step-indicator) {
|
||||
@include b(step-splitor) {
|
||||
position: absolute;
|
||||
bottom: -$step-margin-bottom / 2;
|
||||
width: 1px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
@include b(step-content) {
|
||||
@include e(description) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(step) {
|
||||
@include steps-status-mixin('finish');
|
||||
@include steps-status-mixin('error');
|
||||
@include steps-status-mixin('wait');
|
||||
@include steps-status-mixin('process');
|
||||
@include once {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
@include b(step-splitor) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(steps) {
|
||||
// @include once {
|
||||
// @include steps-size-mixin('small');
|
||||
// @include steps-size-mixin('medium');
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// @include b(step-splitor) {
|
||||
// transition:
|
||||
// color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// height: 1px;
|
||||
// flex: 1;
|
||||
// align-self: flex-start;
|
||||
// margin-left: 12px;
|
||||
// margin-right: 12px;
|
||||
// }
|
||||
// @include b(step-content) {
|
||||
// flex: 1;
|
||||
// @include b(step-content-header) {
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// font-weight: $--n-strong-weight;
|
||||
// margin-left: 9px;
|
||||
// @include e(title) {
|
||||
// white-space: nowrap;
|
||||
// flex: 0;
|
||||
// }
|
||||
// }
|
||||
// @include e(description) {
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// margin-top: 12px;
|
||||
// margin-left: 9px;
|
||||
// }
|
||||
// }
|
||||
// @include b(step-indicator) {
|
||||
// transition:
|
||||
// background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// @include b(step-indicator-slot) {
|
||||
// position: relative;
|
||||
// @include e(index) {
|
||||
// @include icon-switch-transition();
|
||||
// display: inline-block;
|
||||
// text-align: center;
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// }
|
||||
// @include b(icon) {
|
||||
// @include icon-switch-transition();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(transition-disabled) {
|
||||
// @include b(step-indicator) {
|
||||
// @include b(step-indicator-slot) {
|
||||
// @include e(index) {
|
||||
// transition: none !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(vertical) {
|
||||
// flex-direction: column;
|
||||
// $step-margin-bottom: 16px;
|
||||
// @include b(step) {
|
||||
// margin-bottom: $step-margin-bottom;
|
||||
// &:last-child {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// @include b(step-indicator) {
|
||||
// @include b(step-splitor) {
|
||||
// position: absolute;
|
||||
// bottom: -$step-margin-bottom / 2;
|
||||
// width: 1px;
|
||||
// margin: 0 !important;
|
||||
// }
|
||||
// }
|
||||
// @include b(step-content) {
|
||||
// @include e(description) {
|
||||
// margin-top: 8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(step) {
|
||||
// @include steps-status-mixin('finish');
|
||||
// @include steps-status-mixin('error');
|
||||
// @include steps-status-mixin('wait');
|
||||
// @include steps-status-mixin('process');
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex: 1;
|
||||
// &:last-child {
|
||||
// @include b(step-splitor) {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -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';
|
||||
@ -17,5 +16,4 @@
|
||||
@import './TimePicker.scss';
|
||||
@import './Timeline.scss';
|
||||
@import './Tooltip.scss';
|
||||
@import './Upload.scss';
|
||||
@import './Steps.scss';
|
||||
@import './Upload.scss';
|
||||
@ -36,7 +36,11 @@ $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
||||
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
|
||||
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);
|
||||
|
||||
$--n-popmenu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
|
||||
$--n-popmenu-box-shadow: (
|
||||
0 3px 6px -4px rgba(0, 0, 0, .16),
|
||||
0 6px 12px 0 rgba(0, 0, 0, .08),
|
||||
0 9px 18px 8px rgba(0, 0, 0, .04)
|
||||
) !global;
|
||||
|
||||
/** alert */
|
||||
$--n-alert-border-radius: $--n-border-radius;
|
||||
|
||||
@ -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,6 +1,356 @@
|
||||
import { c } from '../../../_utils/cssr'
|
||||
import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
transformDebounceScale,
|
||||
easeInOutCubicBezier
|
||||
} = props.$base
|
||||
const {
|
||||
itemTextColor,
|
||||
itemTextColorMatched,
|
||||
itemSupColor,
|
||||
itemSupColorMatch,
|
||||
itemColorHover,
|
||||
itemColorActive,
|
||||
itemBorderRadius,
|
||||
panelColor,
|
||||
panelTextColor,
|
||||
panelIconColor,
|
||||
panelHeaderTextColor,
|
||||
panelDividerColor,
|
||||
panelBoxShadow,
|
||||
panelBorderRadius,
|
||||
panelHeaderFontWeight,
|
||||
pickerTextDecorationColor
|
||||
} = props.$local
|
||||
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
|
||||
})
|
||||
])
|
||||
]),
|
||||
cTB('date-panel', {
|
||||
outline: 'none',
|
||||
transform: transformDebounceScale,
|
||||
marginTop: '4px',
|
||||
marginBottom: '4px',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
borderRadius: panelBorderRadius,
|
||||
backgroundColor: panelColor,
|
||||
boxShadow: panelBoxShadow,
|
||||
color: panelTextColor
|
||||
}, [
|
||||
fadeInScaleUpTransition(),
|
||||
cB('date-panel-calendar', {
|
||||
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'
|
||||
})
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color/index'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'DatePicker',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
return {
|
||||
itemTextColor: derived.secondaryTextOverlayColor,
|
||||
itemTextColorMatched: derived.popoverBackgroundColor,
|
||||
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,
|
||||
panelHeaderTextColor: derived.primaryTextOverlayColor,
|
||||
panelDividerColor: derived.dividerOverlayColor,
|
||||
panelBorderRadius: base.borderRadius,
|
||||
panelBoxShadow: derived.popoverBoxShadow,
|
||||
pickerTextDecorationColor: derived.secondaryTextOverlayColor,
|
||||
panelHeaderFontWeight: base.strongFontWeight
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,9 +1,29 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color/index'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'DatePicker',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
return {
|
||||
itemTextColor: derived.secondaryTextColor,
|
||||
itemTextColorDisabled: derived.disabledTextColor,
|
||||
itemTextColorMatched: derived.popoverBackgroundColor,
|
||||
itemTextColorCurrent: derived.primaryColor,
|
||||
itemSupColor: derived.primaryColor,
|
||||
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,
|
||||
panelHeaderTextColor: derived.primaryTextColor,
|
||||
panelDividerColor: derived.dividerColor,
|
||||
panelBoxShadow: derived.popoverBoxShadow,
|
||||
panelBorderRadius: base.borderRadius,
|
||||
pickerTextDecorationColor: derived.secondaryTextColor,
|
||||
panelHeaderFontWeight: base.strongFontWeight
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
import Steps from './src/Steps.vue'
|
||||
import Step from './src/Step'
|
||||
|
||||
Steps.install = function (Vue) {
|
||||
Vue.component(Steps.name, Steps)
|
||||
Vue.component(Step.name, Step)
|
||||
Steps.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Steps.name, Steps)
|
||||
Vue.component(naive.componentPrefix + Step.name, Step)
|
||||
}
|
||||
|
||||
export default Steps
|
||||
|
||||
@ -61,7 +61,7 @@ import themeable from '../../_mixins/themeable'
|
||||
|
||||
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
|
||||
export default {
|
||||
name: 'NStep',
|
||||
name: 'Step',
|
||||
inject: {
|
||||
NSteps: {
|
||||
default: null
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import hollowoutable from '../../_mixins/hollowoutable'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
|
||||
import styles from './styles/steps'
|
||||
|
||||
function stepWithIndex (step, i) {
|
||||
if (step.componentOptions) {
|
||||
@ -18,13 +20,18 @@ function stepsWithIndex (props, steps) {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NSteps',
|
||||
name: 'Steps',
|
||||
provide () {
|
||||
return {
|
||||
NSteps: this
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable, hollowoutable],
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
hollowoutable,
|
||||
usecssr(styles)
|
||||
],
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import themedBaseStyle from './themed-base.cssr.js'
|
||||
import themedBaseStyle from './steps/themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
|
||||
11
src/steps/src/styles/steps/index.js
Normal file
11
src/steps/src/styles/steps/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import themedBaseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
||||
220
src/steps/src/styles/steps/themed-base.cssr.js
Normal file
220
src/steps/src/styles/steps/themed-base.cssr.js
Normal file
@ -0,0 +1,220 @@
|
||||
import { c, cTB, cB, cE, cM, createKey } from '../../../../_utils/cssr'
|
||||
import depx from '../../../../_utils/css/depx'
|
||||
import pxfy from '../../../../_utils/css/pxfy'
|
||||
import iconSwitchTransition from '../../../../styles/_transitions/icon-switch'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
easeInOutCubicBezier,
|
||||
transformDebounceScale
|
||||
} = props.$base
|
||||
const {
|
||||
stepHeaderFontWeight
|
||||
} = props.$local
|
||||
return cTB('steps', {
|
||||
width: '100%',
|
||||
display: 'flex'
|
||||
}, [
|
||||
sizeStyle(props.$local, 'small'),
|
||||
sizeStyle(props.$local, 'medium'),
|
||||
cB('step-splitor', {
|
||||
raw: `
|
||||
transition:
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier};
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
align-self: flex-start;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
`
|
||||
}),
|
||||
cB('step-content', {
|
||||
flex: 1
|
||||
}, [
|
||||
cB('step-content-header', {
|
||||
raw: `
|
||||
transition:
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier};
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-weight: ${stepHeaderFontWeight};
|
||||
margin-left: 9px;
|
||||
`
|
||||
}, [
|
||||
cE('title', {
|
||||
whiteSpace: 'nowrap',
|
||||
flex: 0
|
||||
})
|
||||
]),
|
||||
cE('description', {
|
||||
raw: `
|
||||
transition:
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier};
|
||||
margin-top: 12px;
|
||||
margin-left: 9px;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('step-indicator', {
|
||||
raw: `
|
||||
transition:
|
||||
background-color .3s ${easeInOutCubicBezier},
|
||||
box-shadow .3s ${easeInOutCubicBezier};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
}, [
|
||||
cB('step-indicator-slot', {
|
||||
position: 'relative'
|
||||
}, [
|
||||
cE('index', {
|
||||
raw: `
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: color .3s ${easeInOutCubicBezier};
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: ${transformDebounceScale};
|
||||
`
|
||||
}, [
|
||||
iconSwitchTransition()
|
||||
]),
|
||||
cB('icon', [
|
||||
iconSwitchTransition()
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('transition-disabled', [
|
||||
cB('step-indicator', [
|
||||
cB('step-indicator-slot', [
|
||||
cE('index', {
|
||||
transition: 'none !important'
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('vertical', {
|
||||
flexDirection: 'column'
|
||||
}, [
|
||||
cB('step', {
|
||||
marginBottom: '16px'
|
||||
}, [
|
||||
c('&:last-child', {
|
||||
marginBottom: 0
|
||||
})
|
||||
]),
|
||||
cB('step-indicator', [
|
||||
cB('step-splitor', {
|
||||
position: 'absolute',
|
||||
bottom: '-8px',
|
||||
width: '1px',
|
||||
margin: '0 !important'
|
||||
})
|
||||
]),
|
||||
cB('step-content', [
|
||||
cE('description', {
|
||||
marginTop: '8px'
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('step', {
|
||||
raw: `
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
`
|
||||
}, [
|
||||
statusStyle(props.$local, 'finish'),
|
||||
statusStyle(props.$local, 'error'),
|
||||
statusStyle(props.$local, 'wait'),
|
||||
statusStyle(props.$local, 'process'),
|
||||
c('&:last-child', [
|
||||
cB('step-splitor', {
|
||||
display: 'none'
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
|
||||
function sizeStyle (props, size) {
|
||||
const stepHeaderFontSize = props[createKey('stepHeaderFontSize', size)]
|
||||
const indicatorSize = props[createKey('indicatorSize', size)]
|
||||
const indicatorIconSize = props[createKey('indicatorIconSize', size)]
|
||||
const indicatorIndexFontSize = props[createKey('indicatorIndexFontSize', size)]
|
||||
const headerMarginTop = pxfy((depx(indicatorSize) - depx(stepHeaderFontSize)) / 2)
|
||||
return cM(size + '-size', [
|
||||
cB('step-splitor', {
|
||||
marginTop: pxfy(depx(indicatorSize) / 2 - depx(headerMarginTop))
|
||||
}),
|
||||
cM('vertical', [
|
||||
cB('step-splitor', {
|
||||
left: pxfy(depx(indicatorSize) / 2),
|
||||
height: `calc(100% - ${indicatorSize})`
|
||||
})
|
||||
]),
|
||||
cB('step-content', [
|
||||
cB('step-content-header', {
|
||||
marginTop: headerMarginTop,
|
||||
lineHeight: stepHeaderFontSize,
|
||||
fontSize: stepHeaderFontSize
|
||||
})
|
||||
]),
|
||||
cB('step-indicator', {
|
||||
height: indicatorSize,
|
||||
width: indicatorSize,
|
||||
borderRadius: '50%'
|
||||
}, [
|
||||
cB('step-indicator-slot', {
|
||||
width: indicatorIconSize,
|
||||
height: indicatorIconSize,
|
||||
fontSize: indicatorIconSize,
|
||||
lineHeight: indicatorIconSize
|
||||
}, [
|
||||
cE('index', {
|
||||
fontSize: indicatorIndexFontSize,
|
||||
width: indicatorIconSize,
|
||||
height: indicatorIconSize,
|
||||
lineHeight: indicatorIconSize
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
function statusStyle (props, status) {
|
||||
return cM(status, [
|
||||
cB('step-splitor', {
|
||||
backgroundColor: props[createKey('splitorColor', status)]
|
||||
}),
|
||||
cB('step-content', [
|
||||
cB('step-content-header', {
|
||||
color: props[createKey('headerTextColor', status)]
|
||||
}),
|
||||
cE('description', {
|
||||
color: props[createKey('descriptionTextColor', status)]
|
||||
})
|
||||
]),
|
||||
cB('step-indicator', {
|
||||
backgroundColor: props[createKey('indicatorColor', status)],
|
||||
boxShadow: `0 0 0 1px ${props[createKey('indicatorBorderColor', status)]}`
|
||||
}, [
|
||||
cB('step-indicator-slot', [
|
||||
cE('index', {
|
||||
color: props[createKey('indicatorTextColor', status)]
|
||||
}),
|
||||
cB('icon', {
|
||||
fill: props[createKey('indicatorTextColor', status)],
|
||||
stroke: props[createKey('indicatorTextColor', status)]
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
import { c } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
}
|
||||
])
|
||||
10
src/steps/styles/_common.js
Normal file
10
src/steps/styles/_common.js
Normal file
@ -0,0 +1,10 @@
|
||||
export default {
|
||||
stepHeaderFontSizeSmall: '14px',
|
||||
stepHeaderFontSizeMedium: '16px',
|
||||
indicatorIndexFontSizeSmall: '14px',
|
||||
indicatorIndexFontSizeMedium: '16px',
|
||||
indicatorSizeSmall: '22px',
|
||||
indicatorSizeMedium: '28px',
|
||||
indicatorIconSizeSmall: '16px',
|
||||
indicatorIconSizeMedium: '22px'
|
||||
}
|
||||
@ -1,9 +1,37 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'Steps',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
return {
|
||||
...commonVariables,
|
||||
stepHeaderFontWeight: base.strongFontWeight,
|
||||
indicatorTextColorProcess: 'black',
|
||||
indicatorTextColorWait: derived.disabledTextOverlayColor,
|
||||
indicatorTextColorFinish: derived.primaryColor,
|
||||
indicatorTextColorError: derived.errorColor,
|
||||
indicatorBorderColorProcess: derived.primaryColor,
|
||||
indicatorBorderColorWait: derived.disabledTextOverlayColor,
|
||||
indicatorBorderColorFinish: derived.primaryColor,
|
||||
indicatorBorderColorError: derived.errorColor,
|
||||
indicatorColorProcess: derived.primaryColor,
|
||||
indicatorColorWait: 'transparent',
|
||||
indicatorColorFinish: 'transparent',
|
||||
indicatorColorError: 'transparent',
|
||||
splitorColorProcess: derived.disabledTextOverlayColor,
|
||||
splitorColorWait: derived.disabledTextOverlayColor,
|
||||
splitorColorFinish: derived.primaryColor,
|
||||
splitorColorError: derived.disabledTextOverlayColor,
|
||||
headerTextColorProcess: derived.primaryTextOverlayColor,
|
||||
headerTextColorWait: derived.disabledTextOverlayColor,
|
||||
headerTextColorFinish: derived.disabledTextOverlayColor,
|
||||
headerTextColorError: derived.errorColor,
|
||||
descriptionTextColorProcess: derived.secondaryTextOverlayColor,
|
||||
descriptionTextColorWait: derived.disabledTextOverlayColor,
|
||||
descriptionTextColorFinish: derived.disabledTextOverlayColor,
|
||||
descriptionTextColorError: derived.errorColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,9 +1,37 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'Steps',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
return {
|
||||
...commonVariables,
|
||||
stepHeaderFontWeight: base.strongFontWeight,
|
||||
indicatorTextColorProcess: 'black',
|
||||
indicatorTextColorWait: derived.disabledTextColor,
|
||||
indicatorTextColorFinish: derived.primaryColor,
|
||||
indicatorTextColorError: derived.errorColor,
|
||||
indicatorBorderColorProcess: derived.primaryColor,
|
||||
indicatorBorderColorWait: derived.disabledTextColor,
|
||||
indicatorBorderColorFinish: derived.primaryColor,
|
||||
indicatorBorderColorError: derived.errorColor,
|
||||
indicatorColorProcess: derived.primaryColor,
|
||||
indicatorColorWait: 'transparent',
|
||||
indicatorColorFinish: 'transparent',
|
||||
indicatorColorError: 'transparent',
|
||||
splitorColorProcess: derived.disabledTextColor,
|
||||
splitorColorWait: derived.disabledTextColor,
|
||||
splitorColorFinish: derived.primaryColor,
|
||||
splitorColorError: derived.disabledTextColor,
|
||||
headerTextColorProcess: derived.primaryTextColor,
|
||||
headerTextColorWait: derived.disabledTextColor,
|
||||
headerTextColorFinish: derived.disabledTextColor,
|
||||
headerTextColorError: derived.errorColor,
|
||||
descriptionTextColorProcess: derived.secondaryTextColor,
|
||||
descriptionTextColorWait: derived.disabledTextColor,
|
||||
descriptionTextColorFinish: derived.disabledTextColor,
|
||||
descriptionTextColorError: derived.errorColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -70,7 +70,9 @@ export default create({
|
||||
successHover: '#7fe7c4',
|
||||
successDefault: '#63e2b7',
|
||||
successActive: '#5acea7',
|
||||
successHs: 'rgb(42, 148, 125)'
|
||||
successHs: 'rgb(42, 148, 125)',
|
||||
|
||||
boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
|
||||
}, commonVariables)
|
||||
},
|
||||
getDerivedVariables (base) {
|
||||
@ -197,7 +199,9 @@ export default create({
|
||||
disabledOpacity: base.alphaDisabled,
|
||||
disabledInputBackgroundColor: neutral(base.alphaDisabledInput),
|
||||
disabledInputBackgroundOverlayColor: overlay(base.alphaDisabledInput),
|
||||
messageColoredBoxShadow: null
|
||||
messageColoredBoxShadow: null,
|
||||
|
||||
popoverBoxShadow: base.boxShadow2
|
||||
}
|
||||
return derived
|
||||
}
|
||||
|
||||
@ -70,7 +70,9 @@ export default create({
|
||||
successHover: '#36ad6a',
|
||||
successDefault: '#18a058',
|
||||
successActive: '#0c7a43',
|
||||
successHs: '#36ad6a'
|
||||
successHs: '#36ad6a',
|
||||
|
||||
boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
|
||||
}, commonVariables)
|
||||
},
|
||||
getDerivedVariables (base) {
|
||||
@ -197,7 +199,9 @@ export default create({
|
||||
disabledOpacity: base.alphaDisabled,
|
||||
disabledInputBackgroundColor: neutral(base.alphaDisabledInput),
|
||||
disabledInputBackgroundOverlayColor: overlay(base.alphaDisabledInput),
|
||||
messageColoredBoxShadow: '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
|
||||
messageColoredBoxShadow: '0px 2px 18px 0px rgba(0, 0, 0, 0.27)',
|
||||
|
||||
popoverBoxShadow: base.boxShadow2
|
||||
}
|
||||
return derived
|
||||
}
|
||||
|
||||
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…
Reference in New Issue
Block a user