mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(base-selection): warning status inside form item

Browse Source
This commit is contained in:
07akioni 2020-05-29 10:45:09 +08:00
parent 42d966de4d
commit 9df5582856
6 changed files with 201 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/_base/Selection/src/main.vue
View File

@ -183,6 +183,7 @@
<script>
import NBaseSuffix from '../../Suffix'
import NTag from '../../../Tag'
import { mountStyleAsFormItem } from './styles/Selection.cssr.js'
export default {
name: 'NBaseSelection',
@ -190,6 +191,11 @@ export default {
NBaseSuffix,
NTag
},
inject: {
NFormItem: {
default: 'default'
}
},
props: {
theme: {
type: String,
@ -287,6 +293,11 @@ export default {
}
}
},
created () {
if (this.NFormItem !== 'default') {
mountStyleAsFormItem()
}
},
methods: {
handleFocusin (e) {
if (!e.relatedTarget || !this.$el.contains(e.relatedTarget)) {

87
src/_base/Selection/src/styles/Selection.cssr.js Normal file
View File

@ -0,0 +1,87 @@
import { createStyleAsFormItem, createThemedStyle, c, cB, cTB, cNotM, cM } from '../../../../_utils/cssr'
import theme from './theme'
function styleAsFormItem () {
return createStyleAsFormItem(
createThemedStyle(cTB(
'base-selection',
[
({ context, props }) => {
const pallete = context.pallete
const status = props.status
return [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.default
}),
cNotM('disabled', [
cM('active', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.active
}),
cB('base-selection-label', {
backgroundColor: pallete[status].backgroundColor.active
}),
cB('base-selection-tags', {
backgroundColor: pallete[status].backgroundColor.active
})
]),
cNotM('active', [
cB('base-selection-label', [
c('&:hover ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.hover
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
})
])
]),
cB('base-selection-tags', [
c('&:hover ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.hover
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
})
])
]),
cM('focus', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
})
])
])
])
]
}
]
), theme)
)
}
let style = null
export function mountStyleAsFormItem () {
if (style === null) {
style = styleAsFormItem()
style.mount({
target: 'base-selection-error',
count: false,
props: {
status: 'error'
}
})
style.mount({
target: 'base-selection-warning',
count: false,
props: {
status: 'warning'
}
})
}
}

58
src/_base/Selection/src/styles/theme.js Normal file
View File

@ -0,0 +1,58 @@
import lightScheme from '../../../../_styles-in-js/lightStyleScheme.scss'
import darkScheme from '../../../../_styles-in-js/darkStyleScheme.scss'
import { changeColor } from '../../../../_utils/color'
const light = {
error: {
borderMaskBoxShadow: {
default: `inset 0 0 0 1px ${lightScheme.errorColor}`,
hover: `inset 0 0 0 1px ${lightScheme.errorHoverColor}`,
focus: `inset 0 0 0 1px ${lightScheme.errorHoverColor}`,
active: `inset 0 0 0 1px ${lightScheme.errorHoverColor}, 0 0 0 2px ${changeColor(lightScheme.errorHoverColor, { alpha: 0.3 })}`
},
backgroundColor: {
focus: lightScheme.baseBackgroundColor
}
},
warning: {
borderMaskBoxShadow: {
default: `inset 0 0 0 1px ${lightScheme.warningColor}`,
hover: `inset 0 0 0 1px ${lightScheme.warningHoverColor}`,
focus: `inset 0 0 0 1px ${lightScheme.warningHoverColor}`,
active: `inset 0 0 0 1px ${lightScheme.warningHoverColor}, 0 0 0 2px ${changeColor(lightScheme.warningHoverColor, { alpha: 0.3 })}`
},
backgroundColor: {
focus: lightScheme.baseBackgroundColor
}
}
}
const dark = {
error: {
borderMaskBoxShadow: {
default: `inset 0 0 0 1px ${darkScheme.errorColor}`,
hover: `inset 0 0 0 1px ${darkScheme.errorHoverColor}`,
focus: `inset 0 0 0 1px ${darkScheme.errorHoverColor}`,
active: `inset 0 0 0 1px ${darkScheme.errorHoverColor}, 0 0 8xp 0 ${changeColor(darkScheme.errorHoverColor, { alpha: 0.3 })}`
},
backgroundColor: {
active: changeColor(darkScheme.errorColor, { alpha: 0.1 })
}
},
warning: {
borderMaskBoxShadow: {
default: `inset 0 0 0 1px ${darkScheme.warningColor}`,
hover: `inset 0 0 0 1px ${darkScheme.warningHoverColor}`,
focus: `inset 0 0 0 1px ${darkScheme.warningHoverColor}`,
active: `inset 0 0 0 1px ${darkScheme.warningHoverColor}, 0 0 8px 0 ${changeColor(darkScheme.warningHoverColor, { alpha: 0.3 })}`
},
backgroundColor: {
active: changeColor(darkScheme.warningColor, { alpha: 0.1 })
}
}
}
export default {
fallback: light,
dark
}

120
src/_styles/BaseSelection.scss
View File

@ -44,11 +44,8 @@
right: 0;
top: 0;
bottom: 0;
border: 1px solid transparent;
pointer-events: none;
transition:
border-color .3s $--n-ease-in-out-cubic-bezier,
box-shadow .3s $--n-ease-in-out-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
z-index: 1;
}
@include e(mark) {
@ -65,7 +62,7 @@
}
}
@include b(base-selection-border-mask) {
border: 1px solid map-get($--base-selection-border-mask-border-color, 'default');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'default');
}
@include e(placeholder) {
@include once {
@ -155,9 +152,14 @@
}
}
@include not-m(disabled) {
@include m(focus) {
@include b(base-selection-border-mask) {
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
@include m(active) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'active');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'active');
}
@include b(base-selection-label) {
background-color: map-get($--base-selection-background-color, 'active');
@ -171,37 +173,31 @@
}
}
}
@include b(base-selection-label) {
&:hover ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'hover');
@include not-m(active) {
@include b(base-selection-label) {
&:focus ~ {
@include b(base-selection-border-mask) {
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
&:hover ~ {
@include b(base-selection-border-mask) {
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'hover');
}
}
}
&:focus ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
@include b(base-selection-tags) {
&:focus ~ {
@include b(base-selection-border-mask) {
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
}
@include b(base-selection-tags) {
&:hover ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'hover');
&:hover ~ {
@include b(base-selection-border-mask) {
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'hover');
}
}
}
&:focus ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
@include m(focus) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
@include m(disabled) {
@ -270,64 +266,4 @@
}
}
}
@include as-form-item {
@include with-status (error) {
@include b(base-selection) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-default');
}
@include b(base-selection-label) {
box-shadow: map-get($--base-selection-box-shadow, 'error-default');
}
@include b(base-selection-tags) {
box-shadow: map-get($--base-selection-box-shadow, 'error-default');
}
@include not-m(disabled) {
@include m(active) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-active');
}
@include b(base-selection-label) {
background-color: map-get($--base-selection-background-color, 'error-active');
}
@include b(base-selection-tags) {
background-color: map-get($--base-selection-background-color, 'error-active');
}
}
@include b(base-selection-label) {
&:hover ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-hover');
}
}
&:focus ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}
@include b(base-selection-tags) {
&:hover ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-hover');
}
}
&:focus ~ {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}
@include m(focus) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}
}
}
}
}

26
src/_styles/themes/dark/components/BaseSelection.scss
View File

@ -6,34 +6,24 @@
$--base-selection-background-color: (
'default': $--n-input-overlay-background-color,
'disabled': $--n-disabled-background-color,
'active': change-color($--n-primary-color, $alpha: 0.1),
'error-active': change-color($--n-error-color, $alpha: 0.1),
'active': change-color($--n-primary-color, $alpha: 0.1)
) !global;
$--base-selection-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity)
) !global;
$--base-selection-border-mask-border-color: (
'default': transparent,
'hover': $--n-primary-color,
'active': $--n-primary-color,
'focus': $--n-primary-color,
'disabled': transparent,
'error-hover': $--n-error-color,
'error-active': $--n-error-color,
'error-focus': $--n-error-color
) !global;
$--base-selection-border-mask-box-shadow: (
'focus': 0 0 8px 0px change-color($--n-primary-color, $alpha: .3),
'error-focus': 0 0 8px 0 change-color($--n-error-color, $alpha: .3)
'default': inset 0 0 0 1px transparent,
'hover': inset 0 0 0 1px $--n-primary-hover-color,
'active': (inset 0 0 0 1px $--n-primary-hover-color, 0 0 8px 0px change-color($--n-primary-color, $alpha: .3)),
'focus': inset 0 0 0 1px $--n-primary-hover-color,
'disabled': inset 0 0 0 1px transparent
) !global;
$--base-selection-box-shadow: (
'default': none,
'disabled': none,
'error-default': inset 0 0 0 1px $--n-error-color
'disabled': none
) !global;
$--base-selection-caret-color: (
'default': $--n-primary-color,
'error': $--n-error-color
'default': $--n-primary-color
) !global;
}

24
src/_styles/themes/light/components/BaseSelection.scss
View File

@ -6,34 +6,28 @@
$--base-selection-background-color: (
'default': $--n-base-background-color,
'disabled': $--n-disabled-background-color,
'active': $--n-base-background-color,
'error-active': $--n-base-background-color
'active': $--n-base-background-color
) !global;
$--base-selection-placeholder-color: (
'default': $--n-placeholder-text-color,
'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity)
) !global;
$--base-selection-border-mask-border-color: (
'default': transparent,
'hover': $--n-primary-hover-color,
'active': $--n-primary-hover-color,
'focus': $--n-primary-hover-color,
'disabled': transparent,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-hover-color,
'error-focus': $--n-error-hover-color
'disabled': transparent
) !global;
$--base-selection-border-mask-box-shadow: (
'focus': 0 0 0 2px change-color($--n-primary-hover-color, $alpha: .3),
'error-focus': 0 0 0 2px change-color($--n-error-hover-color, $alpha: .3)
'default': inset 0 0 0 1px transparent,
'hover': inset 0 0 0 1px $--n-primary-hover-color,
'active': (inset 0 0 0 1px $--n-primary-hover-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
'focus': inset 0 0 0 1px $--n-primary-hover-color,
'disabled': inset 0 0 0 1px transparent
) !global;
$--base-selection-box-shadow: (
'default': inset 0 0 0 1px $--n-border-color,
'disabled': inset 0 0 0 1px $--n-border-color,
'error-default': inset 0 0 0 1px $--n-error-hover-color,
'disabled': inset 0 0 0 1px $--n-border-color
) !global;
$--base-selection-caret-color: (
'default': $--n-primary-color,
'error': $--n-error-color
'default': $--n-primary-color
) !global;
}