mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-11 13:10:26 +08:00
Merge branch 'develop' of ***REMOVED*** into develop
This commit is contained in:
07akioni
commit
74b50e0d1e
@ -1,8 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import Cascader from './src/Cascader.vue'
|
||||
|
||||
Cascader.install = function (Vue) {
|
||||
Vue.component(Cascader.name, Cascader)
|
||||
}
|
||||
|
||||
export default Cascader
|
||||
@ -1,10 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import NCheckbox from './src/Checkbox.vue'
|
||||
import NCheckboxGroup from './src/CheckboxGroup.vue'
|
||||
|
||||
NCheckbox.install = function (Vue) {
|
||||
Vue.component(NCheckbox.name, NCheckbox)
|
||||
Vue.component(NCheckboxGroup.name, NCheckboxGroup)
|
||||
}
|
||||
|
||||
export default NCheckbox
|
||||
@ -26,7 +26,7 @@
|
||||
import layoutModeMixin from './layoutModeMixin'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
|
||||
export default {
|
||||
name: 'NLayout',
|
||||
|
||||
@ -51,7 +51,7 @@ import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import ToggleButton from './ToggleButton'
|
||||
import ToggleBar from './ToggleBar'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
|
||||
export default {
|
||||
name: 'NLayoutSider',
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSelect from '../../Select'
|
||||
import NSelect from '../../select'
|
||||
import NInput from '../../input'
|
||||
import NBaseIcon from '../../_base/icon'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import ScrollBar from './src/main.vue'
|
||||
|
||||
ScrollBar.install = function (Vue) {
|
||||
Vue.component(ScrollBar.name, ScrollBar)
|
||||
}
|
||||
|
||||
export default ScrollBar
|
||||
@ -1,8 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import Select from './src/Select.vue'
|
||||
|
||||
Select.install = function (Vue) {
|
||||
Vue.component(Select.name, Select)
|
||||
}
|
||||
|
||||
export default Select
|
||||
@ -171,7 +171,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
import NInput from '../../input'
|
||||
import NIcon from '../../icon'
|
||||
import detachable from '../../_mixins/detachable'
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCheckbox from '../../Checkbox'
|
||||
import NCheckbox from '../../checkbox'
|
||||
|
||||
export default {
|
||||
name: 'NTreeNodeCheckbox',
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NScrollbar from '../../../Scrollbar'
|
||||
import NScrollbar from '../../../scrollbar'
|
||||
import NSelectOption from './SelectOption.vue'
|
||||
import NSelectGroupHeader from './SelectGroupHeader.vue'
|
||||
import NBaseTrackingRect from '../../tracking-rect'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
<script>
|
||||
import Scrollbar from '../../../Scrollbar'
|
||||
import Scrollbar from '../../../scrollbar'
|
||||
import withapp from '../../../_mixins/withapp'
|
||||
import themeable from '../../../_mixins/themeable'
|
||||
import getDefaultSlot from '../../../_utils/vue/getDefaultSlot'
|
||||
|
||||
@ -1,185 +1,185 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@mixin cascader-size-mixin ($size) {
|
||||
@include b(cascader-menu) {
|
||||
@include m($size + '-size') {
|
||||
@include b(cascader-submenu) {
|
||||
height: map-get($--n-height, $size) * 6.6;
|
||||
@include b(cascader-option) {
|
||||
height: map-get($--n-height, $size);
|
||||
line-height: map-get($--n-height, $size);
|
||||
font-size: map-get($--n-font-size, $size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin cascader-size-mixin ($size) {
|
||||
// @include b(cascader-menu) {
|
||||
// @include m($size + '-size') {
|
||||
// @include b(cascader-submenu) {
|
||||
// height: map-get($--n-height, $size) * 6.6;
|
||||
// @include b(cascader-option) {
|
||||
// height: map-get($--n-height, $size);
|
||||
// line-height: map-get($--n-height, $size);
|
||||
// font-size: map-get($--n-font-size, $size);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include cascader-size-mixin('small');
|
||||
@include cascader-size-mixin('medium');
|
||||
@include cascader-size-mixin('large');
|
||||
@include b(cascader) {
|
||||
width: 100%;
|
||||
}
|
||||
// @include cascader-size-mixin('small');
|
||||
// @include cascader-size-mixin('medium');
|
||||
// @include cascader-size-mixin('large');
|
||||
// @include b(cascader) {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(cascader-menu) {
|
||||
@include once {
|
||||
@include fade-in-scale-up-transition(cascader-menu, inherit, .2s);
|
||||
transform: $--n-transform-debounce-scale;
|
||||
position: relative;
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: $--n-cascader-border-radius;
|
||||
overflow: hidden;
|
||||
/**
|
||||
* if width not set, cascader select menu's inner scroll area's width is
|
||||
* not correct, which won't change after select menu width is set
|
||||
*/
|
||||
@include b(scrollbar) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
box-shadow: $--cascader-menu-box-shadow;
|
||||
@include b(cascader-submenu) {
|
||||
@include once {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 182px;
|
||||
@include b(scrollbar-content) {
|
||||
position: relative;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-left-radius: $--n-cascader-border-radius;
|
||||
border-bottom-left-radius: $--n-cascader-border-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $--n-cascader-border-radius;
|
||||
border-bottom-right-radius: $--n-cascader-border-radius;
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid $--cascader-menu-border-color;
|
||||
}
|
||||
background-color: $--cascader-menu-background-color;
|
||||
}
|
||||
@include b(cascader-option) {
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
min-width: 182px;
|
||||
background-color: transparent;
|
||||
transition:
|
||||
background-color .2s $--n-ease-in-out-cubic-bezier,
|
||||
color 0.2s $--n-ease-in-out-cubic-bezier;
|
||||
display: flex;
|
||||
padding: 0px 24px 0 33px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
color: map-get($--cascader-option-text-color, 'default');
|
||||
@include not-m(not-leaf) {
|
||||
&::after {
|
||||
@include once {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
transform: rotate(45deg) scale(.5);
|
||||
top: calc(50% - 4px);
|
||||
opacity: 0;
|
||||
transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
border-right: 1px solid $--cascader-item-check-mark-color;
|
||||
border-bottom: 1px solid $--cascader-item-check-mark-color;
|
||||
}
|
||||
}
|
||||
@include once {
|
||||
@include m(single-type) {
|
||||
padding: 0px 24px 0 18px;
|
||||
}
|
||||
@include e(checkbox) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
display: block;
|
||||
}
|
||||
@include e(radio) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
display: block;
|
||||
}
|
||||
@include e(loading) {
|
||||
@include fade-in-scale-up-transition(
|
||||
cascader-option-loading,
|
||||
$original-transform: translateY(-50%)
|
||||
);
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@include m(selected) {
|
||||
color: map-get($--cascader-option-text-color, 'active');
|
||||
@include once {
|
||||
&::after {
|
||||
transform: rotate(45deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(active) {
|
||||
color: map-get($--cascader-option-text-color, 'active');
|
||||
}
|
||||
@include m(disabled) {
|
||||
color: map-get($--cascader-option-text-color, 'disabled');
|
||||
@include once {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@include m(tracked) {
|
||||
background-color: $--cascader-menu-tracking-rect-background-color;
|
||||
}
|
||||
@include m(not-leaf) {
|
||||
&::after {
|
||||
@include once {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
opacity: 1;
|
||||
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
border-top: 2px solid $--cascader-option-arrow-background-color;
|
||||
border-right: 2px solid $--cascader-option-arrow-background-color;
|
||||
}
|
||||
}
|
||||
@include once {
|
||||
@include m(loading) {
|
||||
@include m(not-leaf) {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(base-tracking-rect) {
|
||||
@include e(body) {
|
||||
background-color: $--cascader-menu-tracking-rect-background-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(cascader-menu) {
|
||||
// @include once {
|
||||
// @include fade-in-scale-up-transition(cascader-menu, inherit, .2s);
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// position: relative;
|
||||
// margin: 4px 0;
|
||||
// display: flex;
|
||||
// flex-wrap: nowrap;
|
||||
// border-radius: $--n-cascader-border-radius;
|
||||
// overflow: hidden;
|
||||
// /**
|
||||
// * if width not set, cascader select menu's inner scroll area's width is
|
||||
// * not correct, which won't change after select menu width is set
|
||||
// */
|
||||
// @include b(scrollbar) {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// box-shadow: $--cascader-menu-box-shadow;
|
||||
// @include b(cascader-submenu) {
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// min-width: 182px;
|
||||
// @include b(scrollbar-content) {
|
||||
// position: relative;
|
||||
// }
|
||||
// &:first-child {
|
||||
// border-top-left-radius: $--n-cascader-border-radius;
|
||||
// border-bottom-left-radius: $--n-cascader-border-radius;
|
||||
// }
|
||||
// &:last-child {
|
||||
// border-top-right-radius: $--n-cascader-border-radius;
|
||||
// border-bottom-right-radius: $--n-cascader-border-radius;
|
||||
// }
|
||||
// }
|
||||
// &:not(:first-child) {
|
||||
// border-left: 1px solid $--cascader-menu-border-color;
|
||||
// }
|
||||
// background-color: $--cascader-menu-background-color;
|
||||
// }
|
||||
// @include b(cascader-option) {
|
||||
// @include once {
|
||||
// box-sizing: border-box;
|
||||
// min-width: 182px;
|
||||
// background-color: transparent;
|
||||
// transition:
|
||||
// background-color .2s $--n-ease-in-out-cubic-bezier,
|
||||
// color 0.2s $--n-ease-in-out-cubic-bezier;
|
||||
// display: flex;
|
||||
// padding: 0px 24px 0 33px;
|
||||
// white-space: nowrap;
|
||||
// position: relative;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// color: map-get($--cascader-option-text-color, 'default');
|
||||
// @include not-m(not-leaf) {
|
||||
// &::after {
|
||||
// @include once {
|
||||
// content: '';
|
||||
// height: 6px;
|
||||
// width: 3px;
|
||||
// position: absolute;
|
||||
// right: 14px;
|
||||
// transform: rotate(45deg) scale(.5);
|
||||
// top: calc(50% - 4px);
|
||||
// opacity: 0;
|
||||
// transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// border-right: 1px solid $--cascader-item-check-mark-color;
|
||||
// border-bottom: 1px solid $--cascader-item-check-mark-color;
|
||||
// }
|
||||
// }
|
||||
// @include once {
|
||||
// @include m(single-type) {
|
||||
// padding: 0px 24px 0 18px;
|
||||
// }
|
||||
// @include e(checkbox) {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// left: 10px;
|
||||
// display: block;
|
||||
// }
|
||||
// @include e(radio) {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// left: 10px;
|
||||
// display: block;
|
||||
// }
|
||||
// @include e(loading) {
|
||||
// @include fade-in-scale-up-transition(
|
||||
// cascader-option-loading,
|
||||
// $original-transform: translateY(-50%)
|
||||
// );
|
||||
// position: absolute;
|
||||
// width: 14px;
|
||||
// height: 14px;
|
||||
// right: 10px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// @include m(selected) {
|
||||
// color: map-get($--cascader-option-text-color, 'active');
|
||||
// @include once {
|
||||
// &::after {
|
||||
// transform: rotate(45deg) scale(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(active) {
|
||||
// color: map-get($--cascader-option-text-color, 'active');
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// color: map-get($--cascader-option-text-color, 'disabled');
|
||||
// @include once {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// @include m(tracked) {
|
||||
// background-color: $--cascader-menu-tracking-rect-background-color;
|
||||
// }
|
||||
// @include m(not-leaf) {
|
||||
// &::after {
|
||||
// @include once {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 5px;
|
||||
// height: 5px;
|
||||
// transform: rotate(45deg) translateY(-50%);
|
||||
// right: 18px;
|
||||
// top: 50%;
|
||||
// opacity: 1;
|
||||
// transition: opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// border-top: 2px solid $--cascader-option-arrow-background-color;
|
||||
// border-right: 2px solid $--cascader-option-arrow-background-color;
|
||||
// }
|
||||
// }
|
||||
// @include once {
|
||||
// @include m(loading) {
|
||||
// @include m(not-leaf) {
|
||||
// &::after {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(base-tracking-rect) {
|
||||
// @include e(body) {
|
||||
// background-color: $--cascader-menu-tracking-rect-background-color !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,171 +1,171 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
// @import "./mixins/mixins.scss";
|
||||
|
||||
@mixin checkbox-size-mixin ($size) {
|
||||
@include m($size + '-size') {
|
||||
font-size: map-get($--n-font-size, $size);
|
||||
@include b(checkbox-box) {
|
||||
height: map-get($--n-checkbox-size, $size);
|
||||
width: map-get($--n-checkbox-size, $size);
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin checkbox-size-mixin ($size) {
|
||||
// @include m($size + '-size') {
|
||||
// font-size: map-get($--n-font-size, $size);
|
||||
// @include b(checkbox-box) {
|
||||
// height: map-get($--n-checkbox-size, $size);
|
||||
// width: map-get($--n-checkbox-size, $size);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
@include once {
|
||||
@include b(checkbox-group) {
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
@include b(checkbox) {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
@include b(checkbox) {
|
||||
@include checkbox-size-mixin('small');
|
||||
@include checkbox-size-mixin('medium');
|
||||
@include checkbox-size-mixin('large');
|
||||
line-height: 1.25;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
@include b(checkbox-box) {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition:
|
||||
box-shadow 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
@include b(checkbox-icon) {
|
||||
@include icon-switch-transition();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: $--n-transform-debounce-scale;
|
||||
@include e(line, check) {
|
||||
width: calc(100% - 2px);
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
transition:
|
||||
fill 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
transform 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
opacity 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
border-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(label) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
user-select: none;
|
||||
padding-left: 8px;
|
||||
}
|
||||
@include m(checked) {
|
||||
@include b(checkbox-box) {
|
||||
@include b(checkbox-icon) {
|
||||
@include e(check) {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(indeterminate) {
|
||||
@include b(checkbox-box) {
|
||||
@include b(checkbox-icon) {
|
||||
@include e(check) {
|
||||
opacity: 0;
|
||||
transform: scale(.5);
|
||||
}
|
||||
@include e(line) {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include as-modal-content {
|
||||
@include b(checkbox) {
|
||||
@include m(table-header) {
|
||||
@include not-m(checked) {
|
||||
@include not-m(indeterminate) {
|
||||
@include not-m(disabled) {
|
||||
@include b(checkbox-box) {
|
||||
background-color: map-get($--checkbox-background-color, 'modal-table');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(checkbox) {
|
||||
&:hover {
|
||||
@include b(checkbox-box) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
|
||||
}
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include b(checkbox-box) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
|
||||
}
|
||||
}
|
||||
@include b(checkbox-box) {
|
||||
background-color: map-get($--checkbox-background-color, 'default');
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'default');
|
||||
@include b(checkbox-icon) {
|
||||
@include e(check, line) {
|
||||
fill: map-get($--checkbox-icon-color, 'default');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(label) {
|
||||
color: map-get($--checkbox-label-text-color, 'default');
|
||||
}
|
||||
@include m(table-header) {
|
||||
@include b(checkbox-box) {
|
||||
background-color: map-get($--checkbox-background-color, 'table');
|
||||
}
|
||||
}
|
||||
@include m(checked, indeterminate) {
|
||||
&:focus:not(:active) {
|
||||
@include b(checkbox-box) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
|
||||
}
|
||||
}
|
||||
@include b(checkbox-box) {
|
||||
background-color: map-get($--checkbox-border-color, 'active');
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
|
||||
@include once {
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
@include b(checkbox-box) {
|
||||
background-color: map-get($--checkbox-background-color, 'disabled');
|
||||
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'disabled');
|
||||
@include b(checkbox-icon) {
|
||||
@include e(check, line) {
|
||||
fill: map-get($--checkbox-icon-color, 'disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(label) {
|
||||
color: map-get($--checkbox-label-text-color, 'disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include once {
|
||||
// @include b(checkbox-group) {
|
||||
// font-size: 14px;
|
||||
// line-height: 1.25;
|
||||
// @include b(checkbox) {
|
||||
// margin-right: 18px;
|
||||
// }
|
||||
// }
|
||||
// @include b(checkbox) {
|
||||
// @include checkbox-size-mixin('small');
|
||||
// @include checkbox-size-mixin('medium');
|
||||
// @include checkbox-size-mixin('large');
|
||||
// line-height: 1.25;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// white-space: nowrap;
|
||||
// @include b(checkbox-box) {
|
||||
// display: inline-block;
|
||||
// box-sizing: border-box;
|
||||
// border-radius: 4px;
|
||||
// position: relative;
|
||||
// transition:
|
||||
// box-shadow 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
// background-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
// @include b(checkbox-icon) {
|
||||
// @include icon-switch-transition();
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// @include e(line, check) {
|
||||
// width: calc(100% - 2px);
|
||||
// opacity: 0;
|
||||
// transform: scale(0.5);
|
||||
// transform-origin: center;
|
||||
// transition:
|
||||
// fill 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
// transform 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
// opacity 0.3s $--n-ease-in-out-cubic-bezier,
|
||||
// border-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(label) {
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// user-select: none;
|
||||
// padding-left: 8px;
|
||||
// }
|
||||
// @include m(checked) {
|
||||
// @include b(checkbox-box) {
|
||||
// @include b(checkbox-icon) {
|
||||
// @include e(check) {
|
||||
// opacity: 1;
|
||||
// transform: scale(1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(indeterminate) {
|
||||
// @include b(checkbox-box) {
|
||||
// @include b(checkbox-icon) {
|
||||
// @include e(check) {
|
||||
// opacity: 0;
|
||||
// transform: scale(.5);
|
||||
// }
|
||||
// @include e(line) {
|
||||
// opacity: 1;
|
||||
// transform: scale(1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include as-modal-content {
|
||||
// @include b(checkbox) {
|
||||
// @include m(table-header) {
|
||||
// @include not-m(checked) {
|
||||
// @include not-m(indeterminate) {
|
||||
// @include not-m(disabled) {
|
||||
// @include b(checkbox-box) {
|
||||
// background-color: map-get($--checkbox-background-color, 'modal-table');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(checkbox) {
|
||||
// &:hover {
|
||||
// @include b(checkbox-box) {
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
|
||||
// }
|
||||
// }
|
||||
// &:focus:not(:active) {
|
||||
// @include b(checkbox-box) {
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
|
||||
// }
|
||||
// }
|
||||
// @include b(checkbox-box) {
|
||||
// background-color: map-get($--checkbox-background-color, 'default');
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'default');
|
||||
// @include b(checkbox-icon) {
|
||||
// @include e(check, line) {
|
||||
// fill: map-get($--checkbox-icon-color, 'default');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(label) {
|
||||
// color: map-get($--checkbox-label-text-color, 'default');
|
||||
// }
|
||||
// @include m(table-header) {
|
||||
// @include b(checkbox-box) {
|
||||
// background-color: map-get($--checkbox-background-color, 'table');
|
||||
// }
|
||||
// }
|
||||
// @include m(checked, indeterminate) {
|
||||
// &:focus:not(:active) {
|
||||
// @include b(checkbox-box) {
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
|
||||
// }
|
||||
// }
|
||||
// @include b(checkbox-box) {
|
||||
// background-color: map-get($--checkbox-border-color, 'active');
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
|
||||
// @include once {
|
||||
// border-left: 0;
|
||||
// border-top: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// @include b(checkbox-box) {
|
||||
// background-color: map-get($--checkbox-background-color, 'disabled');
|
||||
// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'disabled');
|
||||
// @include b(checkbox-icon) {
|
||||
// @include e(check, line) {
|
||||
// fill: map-get($--checkbox-icon-color, 'disabled');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(label) {
|
||||
// color: map-get($--checkbox-label-text-color, 'disabled');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,82 +1,82 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(scrollbar) {
|
||||
@include once {
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
height: 100%;
|
||||
}
|
||||
& > {
|
||||
@include once {
|
||||
@include b(scrollbar-container) {
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
max-height: inherit;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
& > {
|
||||
@include b(scrollbar-content) {
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(scrollbar-rail) {
|
||||
@include once {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
@include m(horizontal) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 2.5px;
|
||||
& > {
|
||||
@include e(scrollbar) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(vertical) {
|
||||
right: 2.5px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
& > {
|
||||
@include e(scrollbar) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
& > {
|
||||
@include e(scrollbar) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > {
|
||||
@include e(scrollbar) {
|
||||
@include once {
|
||||
@include fade-in-transition(scrollbar);
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
background-color: map-get($--scrollbar-background-color, 'default');
|
||||
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
|
||||
&:hover {
|
||||
background-color: map-get($--scrollbar-background-color, 'hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(scrollbar) {
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// z-index: auto;
|
||||
// height: 100%;
|
||||
// }
|
||||
// & > {
|
||||
// @include once {
|
||||
// @include b(scrollbar-container) {
|
||||
// width: 100%;
|
||||
// overflow: scroll;
|
||||
// height: 100%;
|
||||
// max-height: inherit;
|
||||
// scrollbar-width: none;
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// }
|
||||
// & > {
|
||||
// @include b(scrollbar-content) {
|
||||
// width: fit-content;
|
||||
// overflow: hidden;
|
||||
// min-width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(scrollbar-rail) {
|
||||
// @include once {
|
||||
// position: absolute;
|
||||
// pointer-events: none;
|
||||
// user-select: none;
|
||||
// @include m(horizontal) {
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 2.5px;
|
||||
// & > {
|
||||
// @include e(scrollbar) {
|
||||
// right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(vertical) {
|
||||
// right: 2.5px;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// & > {
|
||||
// @include e(scrollbar) {
|
||||
// bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// & > {
|
||||
// @include e(scrollbar) {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// & > {
|
||||
// @include e(scrollbar) {
|
||||
// @include once {
|
||||
// @include fade-in-transition(scrollbar);
|
||||
// position: absolute;
|
||||
// cursor: pointer;
|
||||
// pointer-events: all;
|
||||
// }
|
||||
// background-color: map-get($--scrollbar-background-color, 'default');
|
||||
// transition: background-color .2s $--n-ease-in-out-cubic-bezier;
|
||||
// &:hover {
|
||||
// background-color: map-get($--scrollbar-background-color, 'hover');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,52 +1,52 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
@include once {
|
||||
@include b(select) {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
z-index: auto;
|
||||
text-align: start;
|
||||
vertical-align: baseline;
|
||||
// transform: translateZ(0); // to avoid blink of activator when animation occurs nearby
|
||||
@include not-m(multiple) {
|
||||
@include m(small-size) {
|
||||
height: 28px;
|
||||
}
|
||||
@include m(medium-size) {
|
||||
height: 34px;
|
||||
}
|
||||
@include m(large-size) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@include m(small-size) {
|
||||
line-height: 28px;
|
||||
}
|
||||
@include m(medium-size) {
|
||||
line-height: 34px;
|
||||
}
|
||||
@include m(large-size) {
|
||||
line-height: 40px;
|
||||
}
|
||||
@include m(small-size) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@include m(medium-size) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@include m(large-size) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@include b(select-menu) {
|
||||
transform: $--n-transform-debounce-scale;
|
||||
@include fade-in-scale-up-transition(
|
||||
select-menu,
|
||||
$original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include once {
|
||||
// @include b(select) {
|
||||
// display: inline-block;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// width: 100%;
|
||||
// z-index: auto;
|
||||
// text-align: start;
|
||||
// vertical-align: baseline;
|
||||
// // transform: translateZ(0); // to avoid blink of activator when animation occurs nearby
|
||||
// @include not-m(multiple) {
|
||||
// @include m(small-size) {
|
||||
// height: 28px;
|
||||
// }
|
||||
// @include m(medium-size) {
|
||||
// height: 34px;
|
||||
// }
|
||||
// @include m(large-size) {
|
||||
// height: 40px;
|
||||
// }
|
||||
// }
|
||||
// @include m(small-size) {
|
||||
// line-height: 28px;
|
||||
// }
|
||||
// @include m(medium-size) {
|
||||
// line-height: 34px;
|
||||
// }
|
||||
// @include m(large-size) {
|
||||
// line-height: 40px;
|
||||
// }
|
||||
// @include m(small-size) {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// @include m(medium-size) {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// @include m(large-size) {
|
||||
// font-size: 15px;
|
||||
// }
|
||||
// }
|
||||
// @include b(select-menu) {
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// @include fade-in-scale-up-transition(
|
||||
// select-menu,
|
||||
// $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier)
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
8
src/cascader/index.js
Normal file
8
src/cascader/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Cascader from './src/Cascader.vue'
|
||||
|
||||
Cascader.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Cascader.name, Cascader)
|
||||
}
|
||||
|
||||
export default Cascader
|
||||
@ -96,6 +96,8 @@ import { getType, traverseWithCallback } from './utils'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
import CascaderSelectMenu from './CascaderSelectMenu'
|
||||
import locale from '../../_mixins/locale'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles'
|
||||
|
||||
import {
|
||||
rootedOptions,
|
||||
@ -105,7 +107,7 @@ import {
|
||||
} from '../../_utils/component/cascader'
|
||||
|
||||
export default {
|
||||
name: 'NCascader',
|
||||
name: 'Cascader',
|
||||
components: {
|
||||
CascaderMenu,
|
||||
CascaderSelectMenu,
|
||||
@ -120,7 +122,13 @@ export default {
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
mixins: [withapp, themeable, asformitem(), locale('Cascader')],
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
asformitem(),
|
||||
locale('Cascader'),
|
||||
usecssr(styles)
|
||||
],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
@ -146,7 +154,7 @@ export default {
|
||||
validator (value) {
|
||||
return ['small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
default: null
|
||||
default: 'medium'
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
@ -63,7 +63,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCheckbox from '../../Checkbox'
|
||||
import NCheckbox from '../../checkbox'
|
||||
import NRadio from '../../Radio'
|
||||
import NBaseLoading from '../../_base/loading'
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
<script>
|
||||
import NCascaderOption from './CascaderOption.vue'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
import NBaseTrackingRect from '../../_base/tracking-rect'
|
||||
import debounce from 'lodash-es/debounce'
|
||||
import { itemSize } from '../../_styles-in-js/common'
|
||||
20
src/cascader/src/styles/index.js
Normal file
20
src/cascader/src/styles/index.js
Normal file
@ -0,0 +1,20 @@
|
||||
import sizeStyle from './themed-size.cssr.js'
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'size',
|
||||
watch: [
|
||||
'size',
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: sizeStyle
|
||||
},
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
213
src/cascader/src/styles/themed-base.cssr.js
Normal file
213
src/cascader/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,213 @@
|
||||
import { c, cTB, cB, cE, cM } from '../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
|
||||
|
||||
export default
|
||||
c([
|
||||
({ props }) => {
|
||||
const base = props.$base
|
||||
const easeInOutCubicBezier = base.easeInOutCubicBezier
|
||||
const {
|
||||
menuColor,
|
||||
optionTextColor,
|
||||
menuBoxShadow,
|
||||
menuBorderColor,
|
||||
menuTrackingRectColor,
|
||||
optionArrowColor,
|
||||
itemCheckMarkColor,
|
||||
transformDebounceScale,
|
||||
borderRadius
|
||||
} = props.$local
|
||||
return cTB(
|
||||
'cascader-menu',
|
||||
{
|
||||
raw: `
|
||||
transform: ${transformDebounceScale};
|
||||
position: relative;
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: ${borderRadius};
|
||||
overflow: hidden;
|
||||
box-shadow: ${menuBoxShadow};
|
||||
`
|
||||
},
|
||||
[
|
||||
fadeInScaleUpTransition({ transformOrigin: 'inherit', duration: '0.2s' }),
|
||||
cB('scrollbar', {
|
||||
raw: `
|
||||
width: 100%;
|
||||
`
|
||||
}),
|
||||
cB('cascader-submenu', {
|
||||
raw: `
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 182px;
|
||||
background-color: ${menuColor};
|
||||
`
|
||||
}, [
|
||||
cB('scrollbar-content', {
|
||||
raw: `
|
||||
position: relative;
|
||||
`
|
||||
}),
|
||||
c('&:first-child', {
|
||||
raw: `
|
||||
border-top-left-radius: ${borderRadius};
|
||||
border-bottom-left-radius: ${borderRadius};
|
||||
`
|
||||
}),
|
||||
c('&:last-child', {
|
||||
raw: `
|
||||
border-top-right-radius: ${borderRadius};
|
||||
border-bottom-right-radius: ${borderRadius};
|
||||
`
|
||||
}),
|
||||
c('&:not(:first-child)', {
|
||||
raw: `
|
||||
border-left: 1px solid ${menuBorderColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('cascader-option', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
min-width: 182px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
padding: 0px 24px 0 33px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: ${optionTextColor.default}
|
||||
transition:
|
||||
background-color .2s ${easeInOutCubicBezier},
|
||||
color 0.2s ${easeInOutCubicBezier};
|
||||
`
|
||||
}, [
|
||||
c('not-leaf', [
|
||||
c('&::after', {
|
||||
raw: `
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
transform: rotate(45deg) scale(.5);
|
||||
top: calc(50% - 4px);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform .3s ${easeInOutCubicBezier},
|
||||
opacity .3s ${easeInOutCubicBezier};
|
||||
border-right: 1px solid ${itemCheckMarkColor};
|
||||
border-bottom: 1px solid ${itemCheckMarkColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('single-type', {
|
||||
raw: `
|
||||
padding: 0px 24px 0 18px;
|
||||
`
|
||||
}),
|
||||
cE('checkbox', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
display: block;
|
||||
`
|
||||
}),
|
||||
cE('radio', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
display: block;
|
||||
`
|
||||
}),
|
||||
cE('loading', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
`
|
||||
}, [
|
||||
fadeInScaleUpTransition({ originalTransform: 'translateY(-50%)' })
|
||||
]),
|
||||
cM('selected', {
|
||||
raw: `
|
||||
color: ${optionTextColor.avtive}
|
||||
`
|
||||
}, [
|
||||
c('&::after', {
|
||||
raw: `
|
||||
transform: rotate(45deg) scale(1);
|
||||
opacity: 1;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('active', {
|
||||
raw: `
|
||||
color: ${optionTextColor.active}
|
||||
`
|
||||
}),
|
||||
cM('disabled', {
|
||||
raw: `
|
||||
color: ${optionTextColor.disabled};
|
||||
cursor: not-allowed;
|
||||
`
|
||||
}),
|
||||
cM('tracked', {
|
||||
raw: `
|
||||
background-color: ${menuTrackingRectColor};
|
||||
`
|
||||
}),
|
||||
cM('not-leaf', [
|
||||
c('&::after', {
|
||||
raw: `
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
opacity: 1;
|
||||
transition: opacity .3s ${easeInOutCubicBezier};
|
||||
border-top: 2px solid ${optionArrowColor};
|
||||
border-right: 2px solid ${optionArrowColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('loading', [
|
||||
cM('not-leaf', [
|
||||
c('&::after', {
|
||||
raw: `
|
||||
opacity: 0;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('base-tracking-rect', [
|
||||
cE('body', {
|
||||
raw: `
|
||||
background-color: ${menuTrackingRectColor} !important;
|
||||
`
|
||||
})
|
||||
])
|
||||
]
|
||||
)
|
||||
},
|
||||
cB('cascader', {
|
||||
raw: `
|
||||
width: 100%;
|
||||
`
|
||||
})
|
||||
])
|
||||
34
src/cascader/src/styles/themed-size.cssr.js
Normal file
34
src/cascader/src/styles/themed-size.cssr.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { c, cB, cM } from '../../../_utils/cssr'
|
||||
import depx from '../../../_utils/css/depx'
|
||||
import pxfy from '../../../_utils/css/pxfy'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
fontSize,
|
||||
height
|
||||
} = props.$local
|
||||
const { size } = props.$instance
|
||||
const theHeight = height[size]
|
||||
const subMenuHeight = pxfy(depx(theHeight) * 6.6)
|
||||
return cB(
|
||||
'cascader-menu',
|
||||
[
|
||||
cM(`${size}-size`, {
|
||||
}, [
|
||||
cB('cascader-submenu', {
|
||||
height: subMenuHeight
|
||||
}, [
|
||||
cB('cascader-option', {
|
||||
raw: `
|
||||
height: ${theHeight};
|
||||
line-height: ${theHeight};
|
||||
font-size: ${fontSize[size]};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]
|
||||
)
|
||||
}
|
||||
])
|
||||
16
src/cascader/styles/_common.js
Normal file
16
src/cascader/styles/_common.js
Normal file
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
height: {
|
||||
tiny: '22px',
|
||||
small: '28px',
|
||||
medium: '34px',
|
||||
large: '40px',
|
||||
huge: '48px'
|
||||
},
|
||||
fontSize: {
|
||||
tiny: '13px',
|
||||
small: '14px',
|
||||
medium: '14px',
|
||||
large: '15px',
|
||||
huge: '16px'
|
||||
}
|
||||
}
|
||||
42
src/cascader/styles/dark.js
Normal file
42
src/cascader/styles/dark.js
Normal file
@ -0,0 +1,42 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor, composite } from '../../_utils/color'
|
||||
import sizeVariables from './_common'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'Cascader',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
borderRadius,
|
||||
transformDebounceScale,
|
||||
popmenuBoxShadow
|
||||
} = base
|
||||
const {
|
||||
popoverBackgroundColor,
|
||||
secondaryTextOverlayColor,
|
||||
primaryColor,
|
||||
disabledTextOverlayColor,
|
||||
disabledOpacity,
|
||||
dividerOverlayColor,
|
||||
pendingBackgroundOverlayColor,
|
||||
iconOverlayColor
|
||||
} = derived
|
||||
return {
|
||||
...sizeVariables,
|
||||
borderRadius,
|
||||
transformDebounceScale,
|
||||
menuColor: popoverBackgroundColor,
|
||||
optionTextColor: {
|
||||
default: secondaryTextOverlayColor,
|
||||
active: primaryColor,
|
||||
disabled: disabledTextOverlayColor,
|
||||
disabledActive: changeColor(primaryColor, { alpha: disabledOpacity })
|
||||
},
|
||||
menuBoxShadow: popmenuBoxShadow,
|
||||
menuBorderColor: dividerOverlayColor,
|
||||
menuTrackingRectColor: composite(popoverBackgroundColor, pendingBackgroundOverlayColor),
|
||||
optionArrowColor: iconOverlayColor,
|
||||
itemCheckMarkColor: primaryColor
|
||||
}
|
||||
}
|
||||
})
|
||||
42
src/cascader/styles/light.js
Normal file
42
src/cascader/styles/light.js
Normal file
@ -0,0 +1,42 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor, composite } from '../../_utils/color'
|
||||
import sizeVariables from './_common'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'Cascader',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
borderRadius,
|
||||
transformDebounceScale,
|
||||
popmenuBoxShadow
|
||||
} = base
|
||||
const {
|
||||
popoverBackgroundColor,
|
||||
secondaryTextColor,
|
||||
primaryColor,
|
||||
disabledTextColor,
|
||||
disabledOpacity,
|
||||
dividerOverlayColor,
|
||||
baseBackgroundColor,
|
||||
pendingBackgroundOverlayColor
|
||||
} = derived
|
||||
return {
|
||||
...sizeVariables,
|
||||
borderRadius,
|
||||
transformDebounceScale,
|
||||
menuColor: popoverBackgroundColor,
|
||||
optionTextColor: {
|
||||
default: secondaryTextColor,
|
||||
active: primaryColor,
|
||||
disabled: disabledTextColor,
|
||||
disabledActive: changeColor(primaryColor, { alpha: disabledOpacity })
|
||||
},
|
||||
menuBoxShadow: popmenuBoxShadow,
|
||||
menuBorderColor: dividerOverlayColor,
|
||||
menuTrackingRectColor: composite(baseBackgroundColor, pendingBackgroundOverlayColor),
|
||||
optionArrowColor: disabledTextColor,
|
||||
itemCheckMarkColor: primaryColor
|
||||
}
|
||||
}
|
||||
})
|
||||
10
src/checkbox/index.js
Normal file
10
src/checkbox/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
/* istanbul ignore file */
|
||||
import NCheckbox from './src/Checkbox.vue'
|
||||
import NCheckboxGroup from './src/CheckboxGroup.vue'
|
||||
|
||||
NCheckbox.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + NCheckbox.name, NCheckbox)
|
||||
Vue.component(naive.componentPrefix + NCheckboxGroup.name, NCheckboxGroup)
|
||||
}
|
||||
|
||||
export default NCheckbox
|
||||
@ -60,9 +60,11 @@ import render from '../../_utils/vue/render'
|
||||
import CheckMark from './CheckMark'
|
||||
import LineMark from './LineMark'
|
||||
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles'
|
||||
|
||||
export default {
|
||||
name: 'NCheckbox',
|
||||
name: 'Checkbox',
|
||||
inject: {
|
||||
NCheckboxGroup: {
|
||||
default: null
|
||||
@ -77,6 +79,7 @@ export default {
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
usecssr(styles),
|
||||
asformitem(
|
||||
{
|
||||
change: 'change',
|
||||
@ -124,7 +127,7 @@ export default {
|
||||
validator (value) {
|
||||
return ['small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
default: null
|
||||
default: 'medium'
|
||||
},
|
||||
value: {
|
||||
type: [Number, Boolean, String],
|
||||
@ -5,7 +5,7 @@ import asformitem from '../../_mixins/asformitem'
|
||||
import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
|
||||
|
||||
export default {
|
||||
name: 'NCheckboxGroup',
|
||||
name: 'CheckboxGroup',
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
20
src/checkbox/src/styles/index.js
Normal file
20
src/checkbox/src/styles/index.js
Normal file
@ -0,0 +1,20 @@
|
||||
import sizeStyle from './themed-size.cssr.js'
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'size',
|
||||
watch: [
|
||||
'size',
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: sizeStyle
|
||||
},
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
224
src/checkbox/src/styles/themed-base.cssr.js
Normal file
224
src/checkbox/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,224 @@
|
||||
import { c, cTB, cB, cE, cM, insideModal, cNotM } from '../../../_utils/cssr'
|
||||
import iconSwitchTransition from '../../../styles/_transitions/icon-switch'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const base = props.$base
|
||||
const easeInOutCubicBezier = base.easeInOutCubicBezier
|
||||
const {
|
||||
transformDebounceScale
|
||||
} = props.$local
|
||||
return cTB(
|
||||
'checkbox',
|
||||
{
|
||||
raw: `
|
||||
line-height: 1.25;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
`
|
||||
},
|
||||
[
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition:
|
||||
box-shadow 0.3s ${easeInOutCubicBezier},
|
||||
background-color 0.3s ${easeInOutCubicBezier};
|
||||
`
|
||||
}, [
|
||||
cB('checkbox-icon', {
|
||||
raw: `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: ${transformDebounceScale};
|
||||
`
|
||||
}, [
|
||||
cE('line, check', {
|
||||
raw: `
|
||||
width: calc(100% - 2px);
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
transition:
|
||||
fill 0.3s ${easeInOutCubicBezier},
|
||||
transform 0.3s ${easeInOutCubicBezier},
|
||||
opacity 0.3s ${easeInOutCubicBezier},
|
||||
border-color 0.3s ${easeInOutCubicBezier};
|
||||
`
|
||||
}),
|
||||
iconSwitchTransition()
|
||||
])
|
||||
]),
|
||||
cE('label', {
|
||||
raw: `
|
||||
transition: color .3s ${easeInOutCubicBezier};
|
||||
user-select: none;
|
||||
padding-left: 8px;
|
||||
`
|
||||
}),
|
||||
cM('checked', [
|
||||
cB('checkbox-box', [
|
||||
cB('checkbox-icon', [
|
||||
cE('check', {
|
||||
raw: `
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('indeterminate', [
|
||||
cB('checkbox-box', [
|
||||
cB('checkbox-icon', [
|
||||
cE('check', {
|
||||
raw: `
|
||||
opacity: 1;
|
||||
transform: scale(.5);
|
||||
`
|
||||
}),
|
||||
cE('line', {
|
||||
raw: `
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('disabled', {
|
||||
raw: `
|
||||
cursor: not-allowed;
|
||||
`
|
||||
})
|
||||
]
|
||||
)
|
||||
},
|
||||
cTB('checkbox-group', {
|
||||
raw: `
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
`
|
||||
}, [
|
||||
cB('checkbox', {
|
||||
raw: `
|
||||
margin-right: 18px;
|
||||
`
|
||||
})
|
||||
]),
|
||||
insideModal(({ props }) => {
|
||||
const {
|
||||
color
|
||||
} = props.$local
|
||||
return cB('checkbox', [
|
||||
cM('table-header', [
|
||||
cNotM('checked', [
|
||||
cNotM('indeterminate', [
|
||||
cNotM('disabled', [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
background-color: ${color.modalTable}
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
}),
|
||||
({ props }) => {
|
||||
const {
|
||||
borderColor,
|
||||
color,
|
||||
iconColor,
|
||||
labelTextColor
|
||||
} = props.$local
|
||||
return cB('checkbox', [
|
||||
c('&:hover', [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
box-shadow: inset 0 0 0 1px ${borderColor.active};
|
||||
`
|
||||
})
|
||||
]),
|
||||
c('&:focus:not(:active)', [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
box-shadow:
|
||||
inset 0 0 0 1px ${borderColor.active},
|
||||
0 0 0 2px ${borderColor.boxShadow};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
background-color: ${color.default};
|
||||
box-shadow: inset 0 0 0 1px ${borderColor.default};
|
||||
`
|
||||
}, [
|
||||
cB('checkbox-icon', [
|
||||
cE('check, line', {
|
||||
raw: `
|
||||
fill: ${iconColor.default};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('label', {
|
||||
raw: `
|
||||
color: ${labelTextColor.default};
|
||||
`
|
||||
}),
|
||||
cM('checked, indeterminate', [
|
||||
c('&:focus:not(:active)', [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
box-shadow: inset 0 0 0 1px ${borderColor.active}, 0 0 0 2px ${borderColor.boxShadow};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
background-color: ${borderColor.active};
|
||||
box-shadow: inset 0 0 0 1px ${borderColor.active};
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('disabled', [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
background-color: ${color.disabled};
|
||||
box-shadow: inset 0 0 0 1px ${borderColor.disabled};
|
||||
`
|
||||
}, [
|
||||
cB('checkbox-icon', [
|
||||
cE('check, line', {
|
||||
raw: `
|
||||
fill: ${iconColor.disabled};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('label', {
|
||||
raw: `
|
||||
color: ${labelTextColor.disabled};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
26
src/checkbox/src/styles/themed-size.cssr.js
Normal file
26
src/checkbox/src/styles/themed-size.cssr.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { c, cB, cTB, cM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
fontSize,
|
||||
checkboxSize
|
||||
} = props.$local
|
||||
const { size } = props.$instance
|
||||
return cTB('checkbox',
|
||||
[
|
||||
cM(`${size}-size`, {
|
||||
raw: `
|
||||
font-size: ${fontSize[size]};
|
||||
`
|
||||
}, [
|
||||
cB('checkbox-box', {
|
||||
raw: `
|
||||
height: ${checkboxSize[size]};
|
||||
width: ${checkboxSize[size]};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
}]
|
||||
)
|
||||
14
src/checkbox/styles/_common.js
Normal file
14
src/checkbox/styles/_common.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
checkboxSize: {
|
||||
small: '14px',
|
||||
medium: '14px',
|
||||
large: '16px'
|
||||
},
|
||||
fontSize: {
|
||||
tiny: '13px',
|
||||
small: '14px',
|
||||
medium: '14px',
|
||||
large: '15px',
|
||||
huge: '16px'
|
||||
}
|
||||
}
|
||||
46
src/checkbox/styles/dark.js
Normal file
46
src/checkbox/styles/dark.js
Normal file
@ -0,0 +1,46 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'Checkbox',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
transformDebounceScale
|
||||
} = base
|
||||
const {
|
||||
disbaledBackgroundColor,
|
||||
cardBackgroundColor,
|
||||
modalBackgroundColor,
|
||||
borderOverlayColor,
|
||||
primaryColor,
|
||||
secondaryTextOverlayColor,
|
||||
disabledTextOverlayColor
|
||||
} = derived
|
||||
return {
|
||||
...commonVariables,
|
||||
transformDebounceScale,
|
||||
color: {
|
||||
default: 'transparent',
|
||||
disabled: disbaledBackgroundColor,
|
||||
table: cardBackgroundColor,
|
||||
modalTable: modalBackgroundColor
|
||||
},
|
||||
iconColor: {
|
||||
default: cardBackgroundColor,
|
||||
disabled: disabledTextOverlayColor
|
||||
},
|
||||
borderColor: {
|
||||
default: borderOverlayColor,
|
||||
disabled: borderOverlayColor,
|
||||
active: primaryColor,
|
||||
boxShadow: changeColor(primaryColor, { alpha: 0.3 })
|
||||
},
|
||||
labelTextColor: {
|
||||
default: secondaryTextOverlayColor,
|
||||
disabled: disabledTextOverlayColor
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
47
src/checkbox/styles/light.js
Normal file
47
src/checkbox/styles/light.js
Normal file
@ -0,0 +1,47 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'Checkbox',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
transformDebounceScale
|
||||
} = base
|
||||
const {
|
||||
baseBackgroundColor,
|
||||
disabledBackgroundColor,
|
||||
cardBackgroundColor,
|
||||
modalBackgroundColor,
|
||||
disabledTextColor,
|
||||
borderColor,
|
||||
primaryColor,
|
||||
secondaryTextColor
|
||||
} = derived
|
||||
return {
|
||||
...commonVariables,
|
||||
transformDebounceScale,
|
||||
color: {
|
||||
default: baseBackgroundColor,
|
||||
disabled: disabledBackgroundColor,
|
||||
table: cardBackgroundColor,
|
||||
modalTable: modalBackgroundColor
|
||||
},
|
||||
iconColor: {
|
||||
default: baseBackgroundColor,
|
||||
disabled: disabledTextColor
|
||||
},
|
||||
borderColor: {
|
||||
default: borderColor,
|
||||
disabled: borderColor,
|
||||
active: primaryColor,
|
||||
boxShadow: changeColor(primaryColor, { alpha: 0.3 })
|
||||
},
|
||||
labelTextColor: {
|
||||
default: secondaryTextColor,
|
||||
disabled: disabledTextColor
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -59,13 +59,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCheckboxGroup from '../../../Checkbox/src/CheckboxGroup'
|
||||
import NCheckbox from '../../../Checkbox/src/Checkbox'
|
||||
import NCheckboxGroup from '../../../checkbox/src/CheckboxGroup'
|
||||
import NCheckbox from '../../../checkbox/src/Checkbox'
|
||||
import NRadioGroup from '../../../Radio/src/RadioGroup'
|
||||
import NRadio from '../../../Radio/src/Radio'
|
||||
import NDivider from '../../../divider'
|
||||
import NButton from '../../../button'
|
||||
import NScrollbar from '../../../Scrollbar'
|
||||
import NScrollbar from '../../../scrollbar'
|
||||
import { shouldUseArrayInSingleMode } from '../utils'
|
||||
|
||||
function isEqual (value, oldValue) {
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
<script>
|
||||
import cell from './Cell.vue'
|
||||
import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject, createRowKey } from '../utils'
|
||||
import NScrollbar from '../../../Scrollbar'
|
||||
import NScrollbar from '../../../scrollbar'
|
||||
import formatLength from '../../../_utils/css/formatLength'
|
||||
|
||||
export default {
|
||||
|
||||
24
src/index.js
24
src/index.js
@ -9,8 +9,8 @@ import Breadcrumb from './breadcrumb'
|
||||
import Button from './button'
|
||||
import ButtonGroup from './button-group'
|
||||
import Card from './card'
|
||||
import Cascader from './Cascader'
|
||||
import CheckBox from './Checkbox'
|
||||
import Cascader from './cascader'
|
||||
import CheckBox from './checkbox'
|
||||
import Code from './code'
|
||||
import Collapse from './collapse'
|
||||
import ConfigConsumer from './config-consumer'
|
||||
@ -49,8 +49,8 @@ import Popup from './Popover'
|
||||
import Progress from './progress'
|
||||
import Radio from './Radio'
|
||||
import Result from './result'
|
||||
import Scrollbar from './Scrollbar'
|
||||
import Select from './Select'
|
||||
import Select from './select'
|
||||
import Scrollbar from './scrollbar'
|
||||
import Slider from './Slider'
|
||||
import Spin from './Spin'
|
||||
import Statistic from './Statistic'
|
||||
@ -152,6 +152,14 @@ import resultDarkStyle from './result/styles/dark'
|
||||
import resultLightStyle from './result/styles/light'
|
||||
import stepsDarkStyle from './steps/styles/dark'
|
||||
import stepsLightStyle from './steps/styles/light'
|
||||
import selectDarkStyle from './select/styles/dark'
|
||||
import selectLightStyle from './select/styles/light'
|
||||
import scrollBarLightStyle from './scrollbar/styles/light'
|
||||
import scrollBarDarkStyle from './scrollbar/styles/dark'
|
||||
import cascaderLightStyle from './cascader/styles/light'
|
||||
import cascaderDarkStyle from './cascader/styles/dark'
|
||||
import checkboxLightStyle from './checkbox/styles/light'
|
||||
import checkboxDarkStyle from './checkbox/styles/dark'
|
||||
|
||||
// Can be remove after refactoring
|
||||
import baseSelectionLightStyle from './_base/selection/styles/light'
|
||||
@ -333,6 +341,14 @@ export default create({
|
||||
datePickerLightStyle,
|
||||
stepsDarkStyle,
|
||||
stepsLightStyle,
|
||||
selectDarkStyle,
|
||||
selectLightStyle,
|
||||
scrollBarLightStyle,
|
||||
scrollBarDarkStyle,
|
||||
cascaderLightStyle,
|
||||
cascaderDarkStyle,
|
||||
checkboxDarkStyle,
|
||||
checkboxLightStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
<script>
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
import NLogLoader from './LogLoader'
|
||||
import NLogLine from './LogLine'
|
||||
import NFadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
import NConfirm from '../../confirm/src/Confirm'
|
||||
import NCard from '../../card'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
|
||||
8
src/scrollbar/index.js
Normal file
8
src/scrollbar/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import ScrollBar from './src/ScrollBar.vue'
|
||||
|
||||
ScrollBar.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + ScrollBar.name, ScrollBar)
|
||||
}
|
||||
|
||||
export default ScrollBar
|
||||
@ -38,7 +38,7 @@
|
||||
}"
|
||||
:style="{...horizontalRailStyle, width: scrollbarSize }"
|
||||
>
|
||||
<transition name="n-scrollbar-transition">
|
||||
<transition name="n-fade-in-transition">
|
||||
<div
|
||||
v-if="needVerticalScrollbar && showVeriticalScrollbar"
|
||||
class="n-scrollbar-rail__scrollbar"
|
||||
@ -86,10 +86,16 @@
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themable from '../../_mixins/themeable'
|
||||
import resizeObserverDelagate from '../../_utils/delegate/resizeObserverDelegate'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/index.js'
|
||||
|
||||
export default {
|
||||
name: 'NScrollbar',
|
||||
mixins: [withapp, themable],
|
||||
name: 'Scrollbar',
|
||||
mixins: [
|
||||
withapp,
|
||||
themable,
|
||||
usecssr(styles)
|
||||
],
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
9
src/scrollbar/src/styles/index.js
Normal file
9
src/scrollbar/src/styles/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: ['syntheticTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
114
src/scrollbar/src/styles/themed-base.cssr.js
Normal file
114
src/scrollbar/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,114 @@
|
||||
import { cTB, c, cB, cM, cE } from '../../../_utils/cssr'
|
||||
import fadeInTransition from '../../../styles/_transitions/fade-in'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
color,
|
||||
colorHover
|
||||
} = props.$local
|
||||
const {
|
||||
easeInOutCubicBezier
|
||||
} = props.$base
|
||||
return cTB('scrollbar', {
|
||||
raw: `
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
height: 100%;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cB('scrollbar-container', {
|
||||
raw: `
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
max-height: inherit;
|
||||
scrollbar-width: none;
|
||||
`
|
||||
}, [
|
||||
c('&::-webkit-scrollbar', {
|
||||
raw: `
|
||||
width: 0;
|
||||
height: 0;
|
||||
`
|
||||
}),
|
||||
c('>', [
|
||||
cB('scrollbar-content', {
|
||||
raw: `
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
min-width: 100%;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('scrollbar-rail', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
`
|
||||
}, [
|
||||
cM('horizontal', {
|
||||
raw: `
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 2.5px;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cE('scrollbar', {
|
||||
raw: `
|
||||
right: 0;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('vertical', {
|
||||
raw: `
|
||||
right: 2.5px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cE('scrollbar', {
|
||||
raw: `
|
||||
bottom: 0;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('disabled', [
|
||||
c('>', [
|
||||
cE('scrollbar', {
|
||||
raw: `
|
||||
pointer-events: none;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
c('>', [
|
||||
cE('scrollbar', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
background-color: ${color};
|
||||
transition: background-color .2s ${easeInOutCubicBezier};
|
||||
`
|
||||
}, [
|
||||
fadeInTransition(),
|
||||
c('&:hover', {
|
||||
raw: `
|
||||
background-color: ${colorHover}
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
16
src/scrollbar/styles/dark.js
Normal file
16
src/scrollbar/styles/dark.js
Normal file
@ -0,0 +1,16 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
name: 'Scrollbar',
|
||||
theme: 'dark',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
scrollbarBackgroundOverlayColor,
|
||||
scrollbarHoverBackgroundOverlayColor
|
||||
} = derived
|
||||
return {
|
||||
color: scrollbarBackgroundOverlayColor,
|
||||
colorHover: scrollbarHoverBackgroundOverlayColor
|
||||
}
|
||||
}
|
||||
})
|
||||
16
src/scrollbar/styles/light.js
Normal file
16
src/scrollbar/styles/light.js
Normal file
@ -0,0 +1,16 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
name: 'Scrollbar',
|
||||
theme: 'light',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
scrollbarBackgroundOverlayColor,
|
||||
scrollbarHoverBackgroundOverlayColor
|
||||
} = derived
|
||||
return {
|
||||
color: scrollbarBackgroundOverlayColor,
|
||||
colorHover: scrollbarHoverBackgroundOverlayColor
|
||||
}
|
||||
}
|
||||
})
|
||||
8
src/select/index.js
Normal file
8
src/select/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Select from './src/Select.vue'
|
||||
|
||||
Select.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Select.name, Select)
|
||||
}
|
||||
|
||||
export default Select
|
||||
@ -53,7 +53,7 @@
|
||||
class="n-positioning-content"
|
||||
>
|
||||
<transition
|
||||
name="n-select-menu-transition"
|
||||
name="n-fade-in-scale-up-transition"
|
||||
@after-leave="handleMenuAfterLeave"
|
||||
>
|
||||
<n-base-select-menu
|
||||
@ -104,6 +104,8 @@ import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
import locale from '../../_mixins/locale'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/index.js'
|
||||
|
||||
function patternMatched (pattern, value) {
|
||||
try {
|
||||
@ -114,7 +116,7 @@ function patternMatched (pattern, value) {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NSelect',
|
||||
name: 'Select',
|
||||
components: {
|
||||
NBaseSelectMenu,
|
||||
NBaseSelection
|
||||
@ -129,7 +131,8 @@ export default {
|
||||
placeable,
|
||||
zindexable,
|
||||
locale('Select'),
|
||||
asformitem()
|
||||
asformitem(),
|
||||
usecssr(styles)
|
||||
],
|
||||
model: {
|
||||
prop: 'value',
|
||||
9
src/select/src/styles/index.js
Normal file
9
src/select/src/styles/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: ['syntheticTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
65
src/select/src/styles/themed-base.cssr.js
Normal file
65
src/select/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,65 @@
|
||||
import { cTB, c, cB, cM, cNotM } from '../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const { easeInOutCubicBezier } = props.$base
|
||||
const { transformDebounceScale } = props.$local
|
||||
return [
|
||||
cTB('select', {
|
||||
raw: `
|
||||
display: inline-block;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
z-index: auto;
|
||||
text-align: start;
|
||||
vertical-align: baseline;
|
||||
`
|
||||
}, [
|
||||
cNotM('multiple', [
|
||||
cM('small-size', {
|
||||
raw: `
|
||||
height: 28px;
|
||||
`
|
||||
}),
|
||||
cM('medium-size', {
|
||||
raw: `
|
||||
height: 34px;
|
||||
`
|
||||
}),
|
||||
cM('large-size', {
|
||||
raw: `
|
||||
height: 40px;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('small-size', {
|
||||
raw: `
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
`
|
||||
}),
|
||||
cM('medium-size', {
|
||||
raw: `
|
||||
line-height: 34px;
|
||||
font-size: 14px;
|
||||
`
|
||||
}),
|
||||
cM('large-size', {
|
||||
raw: `
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('select-menu', {
|
||||
raw: `
|
||||
transform: ${transformDebounceScale};
|
||||
`
|
||||
}, [
|
||||
fadeInScaleUpTransition({ originalTransition: `background-color .3s ${easeInOutCubicBezier}` })
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
14
src/select/styles/dark.js
Normal file
14
src/select/styles/dark.js
Normal file
@ -0,0 +1,14 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
name: 'Select',
|
||||
theme: 'dark',
|
||||
getDerivedVariables ({ derived, base }) {
|
||||
const {
|
||||
transformDebounceScale
|
||||
} = base
|
||||
return {
|
||||
transformDebounceScale
|
||||
}
|
||||
}
|
||||
})
|
||||
14
src/select/styles/light.js
Normal file
14
src/select/styles/light.js
Normal file
@ -0,0 +1,14 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
name: 'Select',
|
||||
theme: 'light',
|
||||
getDerivedVariables ({ derived, base }) {
|
||||
const {
|
||||
transformDebounceScale
|
||||
} = base
|
||||
return {
|
||||
transformDebounceScale
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -182,7 +182,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NScrollbar from '../../scrollbar'
|
||||
import NTransferHeaderCheckbox from './TransferHeaderCheckbox'
|
||||
import NTransferHeaderExtra from './TransferHeaderExtra'
|
||||
import NTransferSourceListItem from './TransferSourceListItem'
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSimpleCheckbox from '../../Checkbox/src/SimpleCheckbox'
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
|
||||
export default {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSimpleCheckbox from '../../Checkbox/src/SimpleCheckbox'
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
|
||||
export default {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSimpleCheckbox from '../../Checkbox/src/SimpleCheckbox'
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
|
||||
export default {
|
||||
|
||||
@ -1 +1 @@
|
||||
export default '1.5.4'
|
||||
export default '1.5.5'
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import NCheckbox from 'src/Checkbox'
|
||||
import NCheckbox from 'src/checkbox'
|
||||
import { mount, createLocalVue } from '@vue/test-utils'
|
||||
import { expect } from 'chai'
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user