mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
feat(checkbox): css in js (#263)
* feat(checkbox): css in js * chore: fix code review
This commit is contained in:
HaiboTang
07akioni
parent
7aac1f53b2
commit
d918b05dec
@ -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
|
||||
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCheckbox from '../../Checkbox'
|
||||
import NCheckbox from '../../checkbox'
|
||||
|
||||
export default {
|
||||
name: 'NTreeNodeCheckbox',
|
||||
|
||||
@ -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');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -63,7 +63,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCheckbox from '../../Checkbox'
|
||||
import NCheckbox from '../../checkbox'
|
||||
import NRadio from '../../Radio'
|
||||
import NBaseLoading from '../../_base/loading'
|
||||
|
||||
|
||||
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,8 +59,8 @@
|
||||
</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'
|
||||
|
||||
@ -10,7 +10,7 @@ import Button from './button'
|
||||
import ButtonGroup from './button-group'
|
||||
import Card from './card'
|
||||
import Cascader from './cascader'
|
||||
import CheckBox from './Checkbox'
|
||||
import CheckBox from './checkbox'
|
||||
import Code from './code'
|
||||
import Collapse from './collapse'
|
||||
import ConfigConsumer from './config-consumer'
|
||||
@ -158,6 +158,8 @@ 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'
|
||||
@ -345,6 +347,8 @@ export default create({
|
||||
scrollBarDarkStyle,
|
||||
cascaderLightStyle,
|
||||
cascaderDarkStyle,
|
||||
checkboxDarkStyle,
|
||||
checkboxLightStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
@ -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,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