mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove base-suffix

Browse Source
This commit is contained in:
07akioni 2020-12-23 23:13:09 +08:00
parent d9bef29b2f
commit 48b8ab6f2c
17 changed files with 171 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/_base/clear-button/src/ClearButton.vue
View File

@ -19,14 +19,9 @@
>
<dismiss-circle-icon />
</n-icon>
<n-icon
v-else
key="icon"
:theme="theme"
class="n-base-clear-button__placeholder"
>
<div v-else key="icon" class="n-base-clear-button__placeholder">
<slot />
</n-icon>
</div>
</n-icon-switch-transition>
</div>
</template>

7
src/_base/clear-button/src/styles/themed-base.cssr.js
View File

@ -1,4 +1,4 @@
import { cTB, c, cB, cE } from '../../../../_utils/cssr'
import { cTB, c, cE } from '../../../../_utils/cssr'
import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
export default c([
@ -34,7 +34,10 @@ export default c([
color: colorPressed
})
]),
cB('icon', {
cE('placeholder', {
display: 'flex'
}),
cE('clear, placeholder', {
position: 'absolute',
left: '50%',
top: '50%',

1
src/_base/index.js
View File

@ -3,7 +3,6 @@ export { default as NFadeInExpandTransition } from './fade-in-expand-transition'
export { default as NBaseFocusDetector } from './focus-detector'
export { default as NBaseLoading } from './loading'
export { default as NBaseSelectMenu } from './select-menu'
export { default as NBaseSuffix } from './suffix'
export { default as NBaseWave } from './wave'
export { default as NBaseMenuMask } from './menu-mask'
export { default as NBaseSelection } from './selection'

5
src/_base/select-menu/src/styles/themed-base.cssr.js
View File

@ -156,11 +156,12 @@ export default c([
transform: 'rotate(45deg) scale(1)'
})
]),
// TODO: use SVG icon
c('&::after', {
raw: `
content: '';
height: 6px;
width: 3px;
height: 8px;
width: 4px;
position: absolute;
right: 14px;
transform: rotate(45deg) scale(.5);

80
src/_base/selection/src/Selection.vue
View File

@ -37,16 +37,17 @@
>
{{ option.label }}
</n-tag>
<n-base-suffix
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
:loading="loading"
:theme="theme"
:arrow="showArrow"
:disabled="disabled"
:active="active"
:clearable="mergedClearable && selected"
:show="mergedClearable && selected"
@clear="handleClear"
/>
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
</div>
<div class="n-base-selection__placeholder">
{{ placeholder }}
@ -90,16 +91,17 @@
class="n-base-selection-input-tag__mirror"
>{{ pattern ? pattern : '&nbsp;' }}</span>
</div>
<n-base-suffix
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
:arrow="showArrow"
:theme="theme"
:disabled="disabled"
:active="active"
:clearable="mergedClearable && selected"
:loading="loading"
:show="mergedClearable && selected"
@clear="handleClear"
/>
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
</div>
<div class="n-base-selection__placeholder">
{{ placeholder }}
@ -136,16 +138,17 @@
>
{{ filterablePlaceholder }}
</div>
<n-base-suffix
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
:loading="loading"
:theme="theme"
:arrow="showArrow"
:disabled="disabled"
:active="active"
:clearable="mergedClearable && selected"
:show="mergedClearable && selected"
@clear="handleClear"
/>
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
</div>
</template>
<template v-else-if="!multiple && !filterable">
@ -165,16 +168,17 @@
>
{{ placeholder }}
</div>
<n-base-suffix
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
:theme="theme"
:arrow="showArrow"
:disabled="disabled"
:active="active"
:clearable="mergedClearable && selected"
:loading="loading"
:show="mergedClearable && selected"
@clear="handleClear"
/>
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
</div>
</template>
<div class="n-base-selection__border" />
@ -184,7 +188,8 @@
</template>
<script>
import NBaseSuffix from '../../suffix/index.js'
import NBaseClearButton from '../../clear-button'
import { ChevronDownIcon } from '../../icons'
import { NTag } from '../../../tag/index.js'
import { withCssr } from '../../../_mixins'
import styles from './styles/index.js'
@ -192,7 +197,8 @@ import styles from './styles/index.js'
export default {
name: 'BaseSelection',
components: {
NBaseSuffix,
ChevronDownIcon,
NBaseClearButton,
NTag
},
mixins: [withCssr(styles)],
@ -203,7 +209,7 @@ export default {
},
theme: {
type: String,
default: null
default: undefined
},
active: {
type: Boolean,
@ -215,7 +221,7 @@ export default {
},
placeholder: {
type: String,
default: null
default: undefined
},
selectedOption: {
validator () {
@ -261,6 +267,10 @@ export default {
type: Boolean,
default: false
},
showArrow: {
type: Boolean,
default: true
},
onBlur: {
type: Function,
default: undefined
@ -298,11 +308,7 @@ export default {
},
computed: {
mergedClearable () {
return this.clearable && !this.disabled
},
showArrow () {
if (!this.mergedClearable) return true
else return !(this.hover && this.selected)
return this.clearable && !this.disabled && (this.hover || this.active)
},
filterablePlaceholder () {
return this.selectedOption ? this.selectedOption.label : this.placeholder

219
src/_base/selection/src/styles/themed-base.cssr.js
View File

@ -40,14 +40,14 @@ export default c([
'base-selection',
{
raw: `
position: relative;
z-index: auto;
box-shadow: none;
width: 100%;
max-width: 100%;
display: inline-block;
vertical-align: bottom;
`,
position: relative;
z-index: auto;
box-shadow: none;
width: 100%;
max-width: 100%;
display: inline-block;
vertical-align: bottom;
`,
borderRadius
},
[
@ -94,13 +94,13 @@ export default c([
]),
cE('border, state-border', {
raw: `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
`,
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
`,
border,
borderColor: 'transparent',
borderRadius,
@ -111,25 +111,25 @@ export default c([
}),
cE('box-shadow', {
raw: `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
`,
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
`,
borderRadius,
transition: `box-shadow .3s ${cubicBezierEaseInOut}`
}),
cE('mark', {
raw: `
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
`
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
`
}),
cM('selected', [
cE('placeholder', {
@ -138,12 +138,12 @@ export default c([
]),
cE('placeholder', {
raw: `
pointer-events: none;
position: absolute;
left: 14px;
top: 0;
opacity: 1;
`,
pointer-events: none;
position: absolute;
left: 14px;
top: 0;
opacity: 1;
`,
transition: `color .3s ${cubicBezierEaseInOut}`,
color: placeholderColor
}),
@ -151,42 +151,43 @@ export default c([
'base-selection-tags',
{
raw: `
cursor: pointer;
outline: none;
box-sizing: border-box;
position: relative;
z-index: auto;
display: flex;
padding: 3px 26px 0 14px;
flex-wrap: wrap;
align-items: center;
width: 100%;
vertical-align: bottom;
`,
cursor: pointer;
outline: none;
box-sizing: border-box;
position: relative;
z-index: auto;
display: flex;
padding: 3px 26px 0 14px;
flex-wrap: wrap;
align-items: center;
width: 100%;
vertical-align: bottom;
`,
backgroundColor: color,
borderRadius,
transition: `
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut}
`
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut}
`
},
[
cB(
'tag',
{
raw: `
margin-right: 7px;
margin-bottom: 3px;
font-size: 14px;
max-width: 100%;
`
margin-right: 7px;
margin-bottom: 3px;
font-size: 14px;
max-width: 100%;
`
},
[
cE('content', {
raw: `
text-overflow: ellipsis;
overflow: hidden;`
text-overflow: ellipsis;
overflow: hidden;
`
})
]
)
@ -196,38 +197,38 @@ export default c([
'base-selection-label',
{
raw: `
display: inline-block;
width: 100%;
vertical-align: bottom;
cursor: pointer;
outline: none;
z-index: auto;
box-sizing: border-box;
position: relative;
`,
display: inline-block;
width: 100%;
vertical-align: bottom;
cursor: pointer;
outline: none;
z-index: auto;
box-sizing: border-box;
position: relative;
`,
transition: `
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut}
`,
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut}
`,
borderRadius: borderRadius,
backgroundColor: color
},
[
cE('input', {
raw: `
line-height: inherit;
outline: none;
cursor: pointer;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
border:none;
width: 100%;
white-space: nowrap;
padding: ${paddingSingle};
background-color: transparent;
`,
line-height: inherit;
outline: none;
cursor: pointer;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
border:none;
width: 100%;
white-space: nowrap;
padding: ${paddingSingle};
background-color: transparent;
`,
color: textColor,
transition: `color .3s ${cubicBezierEaseInOut}`
}),
@ -356,41 +357,41 @@ export default c([
'base-selection-input-tag',
{
raw: `
outline: none;
display: none;
position: relative;
margin-bottom: 3px;
max-width: 100%;
vertical-align: bottom;
`
outline: none;
display: none;
position: relative;
margin-bottom: 3px;
max-width: 100%;
vertical-align: bottom;
`
},
[
cE('input', {
raw: `
padding: 0;
background-color: transparent;
outline: none;
border: none;
max-width: 100%;
overflow: hidden;
width: 1em;
line-height: inherit;
cursor: pointer;
`,
padding: 0;
background-color: transparent;
outline: none;
border: none;
max-width: 100%;
overflow: hidden;
width: 1em;
line-height: inherit;
cursor: pointer;
`,
color: textColor,
caretColor
}),
cE('mirror', {
raw: `
position: absolute;
padding-right: 1em;
left: 0;
top: 0;
white-space: pre;
visibility: hidden;
user-select: none;
opacity: 0;
`
position: absolute;
padding-right: 1em;
left: 0;
top: 0;
white-space: pre;
visibility: hidden;
user-select: none;
opacity: 0;
`
})
]
)

4
src/_base/selection/styles/dark.js
View File

@ -1,12 +1,12 @@
import create from '../../../_styles/utils/create-component-base'
import commonVariables from './_common'
import { changeColor } from 'seemly'
import suffixStyle from '../../suffix/styles/light'
import { baseClearButtonDark } from '../../clear-button/styles'
export default create({
name: 'BaseSelection',
theme: 'dark',
peer: [suffixStyle],
peer: [baseClearButtonDark],
getLocalVars (vars) {
return {
...commonVariables,

4
src/_base/selection/styles/light.js
View File

@ -1,12 +1,12 @@
import create from '../../../_styles/utils/create-component-base'
import commonVariables from './_common'
import { changeColor } from 'seemly'
import suffixStyle from '../../suffix/styles/dark'
import { baseClearButtonLight } from '../../clear-button/styles'
export default create({
name: 'BaseSelection',
theme: 'light',
peer: [suffixStyle],
peer: [baseClearButtonLight],
getLocalVars (vars) {
return {
...commonVariables,

2
src/_base/suffix/index.js
View File

@ -1,2 +0,0 @@
/* istanbul ignore file */
export { default } from './src/Suffix.vue'

138
src/_base/suffix/src/Suffix.vue
View File

@ -1,138 +0,0 @@
<template>
<transition name="n-fade-in-scale-up-transition">
<div
v-if="loading || (show && (clearable || arrow))"
class="n-base-suffix"
:class="{
[`n-${theme}-theme`]: theme
}"
@mousedown="handleMouseDown"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<n-icon-switch-transition>
<n-base-loading
v-if="loading"
key="loading"
:theme="theme"
class="n-base-suffix-spin"
/>
<div
v-else-if="!arrow || (mouseHovered && clearable)"
key="cross"
class="n-base-suffix-cross"
@click="handleClick"
>
<dismiss-circle-icon />
</div>
<div
v-else-if="(arrow && !clearable) || (arrow && !mouseHovered)"
key="arrow"
class="n-base-suffix-arrow"
:class="{
'n-base-suffix-arrow--active': active,
'n-base-suffix-arrow--disabled': disabled
}"
>
<chevron-down-icon />
</div>
</n-icon-switch-transition>
</div>
</transition>
</template>
<script>
import { ChevronDownIcon, DismissCircleIcon } from '../../icons'
import { NIconSwitchTransition } from '../../../_base'
import NBaseLoading from '../../loading'
import { withCssr } from '../../../_mixins'
import styles from './styles'
export default {
name: 'BaseSuffix',
components: {
DismissCircleIcon,
ChevronDownIcon,
NBaseLoading,
NIconSwitchTransition
},
mixins: [withCssr(styles)],
inject: {
NFormItem: {
default: null
}
},
props: {
theme: {
type: String,
default: null
},
show: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: false
},
arrow: {
type: Boolean,
default: false
},
active: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
onClear: {
type: Function,
default: undefined
},
onMouseDown: {
type: Function,
default: undefined
}
},
data () {
return {
mouseHovered: false
}
},
watch: {
clearable (value) {
if (!value) {
this.mouseHovered = false
}
},
show (value) {
if (!value) {
this.mouseHovered = false
}
}
},
methods: {
handleClick (e) {
const { onClear } = this
if (onClear) onClear(e)
},
handleMouseEnter () {
this.mouseHovered = true
},
handleMouseLeave () {
this.mouseHovered = false
},
handleMouseDown (e) {
e.preventDefault()
const { onMouseDown } = this
if (onMouseDown) onMouseDown(e)
}
}
}
</script>

9
src/_base/suffix/src/styles/index.js
View File

@ -1,9 +0,0 @@
import baseStyle from './themed-base.cssr'
export default [
{
key: 'theme',
watch: ['theme'],
CNode: baseStyle
}
]

135
src/_base/suffix/src/styles/themed-base.cssr.js
View File

@ -1,135 +0,0 @@
import { cTB, c, cB, cM, insideFormItem, createKey } from '../../../../_utils/cssr'
import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up'
import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
function styleInsideFormItem (status, $local) {
return insideFormItem(status, cTB('base-suffix', [
cB('base-suffix-cross', [
c('&:hover', [
c('svg', {
color: $local[createKey('crossColorHover', status)]
})
]),
c('&:active', [
c('svg', {
color: $local[createKey('crossColorPressed', status)]
})
])
]),
cB('base-suffix-arrow', [
cM('active', {
color: $local[createKey('arrowColorActive', status)]
})
])
]))
}
export default c([
({ props }) => {
const {
$global: {
transformDebounceScale,
cubicBezierEaseInOut
},
$local: {
iconSize,
crossColor,
crossColorHover,
crossColorPressed,
arrowColor,
arrowColorActive,
arrowColorDisabled
}
} = props
const iconSwitchTransition = createIconSwitchTransition()
return [
cTB('base-suffix', {
raw: `
user-select: none;
display: inline-block;
position: relative;
height: ${iconSize};
width: ${iconSize};
vertical-align: bottom;
`
}, [
fadeInScaleUpTransition(),
cB('base-suffix-spin', {
transform: transformDebounceScale,
raw: `
position: absolute;
height: ${iconSize};
width: ${iconSize};
`
}, [
iconSwitchTransition
]),
cB('base-suffix-cross', {
transform: transformDebounceScale,
raw: `
position: absolute;
height: ${iconSize};
width: ${iconSize};
line-height: ${iconSize};
border-radius: 8px;
overflow: hidden;
cursor: pointer;
`
}, [
iconSwitchTransition,
c('svg', {
transition: `color .3s ${cubicBezierEaseInOut}`,
color: crossColor
}),
c('&:hover', [
c('svg', {
color: crossColorHover
})
]),
c('&:active', [
c('svg', {
color: crossColorPressed
})
])
]),
cB('base-suffix-arrow', {
transform: transformDebounceScale,
raw: `
position: absolute;
transform: rotate(0);
width: ${iconSize};
height: ${iconSize};
border-radius: 8px;
overflow: hidden;
color: ${arrowColor};
cursor: pointer;
font-size: ${iconSize};
line-height: 0;
transform-origin: 0 0;
transition: color .3s ${cubicBezierEaseInOut};
`
}, [
iconSwitchTransition,
c('svg', {
transition: `transform .3s ${cubicBezierEaseInOut}`,
width: '1em',
height: '1em'
}),
cM('active', {
color: arrowColorActive
}, [
c('svg', {
transform: 'rotate(180deg)'
})
]),
cM('disabled', {
cursor: 'not-allowed',
color: arrowColorDisabled
})
])
]),
styleInsideFormItem('warning', props.$local),
styleInsideFormItem('error', props.$local)
]
}
])

3
src/_base/suffix/styles/_common.js
View File

@ -1,3 +0,0 @@
export default {
iconSize: '14px'
}

33
src/_base/suffix/styles/dark.js
View File

@ -1,33 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
import commonVariables from './_common'
export default create({
name: 'BaseSuffix',
theme: 'dark',
getLocalVars (vars) {
return {
...commonVariables,
crossColor: vars.textColor4Overlay,
crossColorHover: vars.primaryColorHover,
crossColorPressed: vars.primaryColorPressed,
arrowColor: vars.textColor4Overlay,
arrowColorHover: vars.primaryColorHover,
arrowColorActive: vars.primaryColorHover,
arrowColorDisabled: vars.textColor5Overlay,
crossColorWarning: vars.warningColor,
crossColorHoverWarning: vars.warningColorHover,
crossColorPressedWarning: vars.warningColorPressed,
arrowColorWarning: vars.warningColor,
arrowColorHoverWarning: vars.warningColorHover,
arrowColorActiveWarning: vars.warningColorHover,
arrowColorDisabledWarning: vars.textColor5Overlay,
crossColorError: vars.errorColor,
crossColorHoverError: vars.errorColorHover,
crossColorPressedError: vars.errorColorPressed,
arrowColorError: vars.errorColor,
arrowColorHoverError: vars.errorColorHover,
arrowColorActiveError: vars.errorColorHover,
arrowColorDisabledError: vars.textColor5Overlay
}
}
})

2
src/_base/suffix/styles/index.js
View File

@ -1,2 +0,0 @@
export { default as baseSuffixLight } from './light'
export { default as baseSuffixDark } from './dark'

33
src/_base/suffix/styles/light.js
View File

@ -1,33 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
import commonVariables from './_common'
export default create({
name: 'BaseSuffix',
theme: 'light',
getLocalVars (vars) {
return {
...commonVariables,
crossColor: vars.textColor4Overlay,
crossColorHover: vars.primaryColorHover,
crossColorPressed: vars.primaryColorPressed,
arrowColor: vars.textColor4Overlay,
arrowColorHover: vars.primaryColorHover,
arrowColorActive: vars.primaryColorHover,
arrowColorDisabled: vars.textColor5,
crossColorWarning: vars.warningColor,
crossColorHoverWarning: vars.warningColorHover,
crossColorPressedWarning: vars.warningColorPressed,
arrowColorWarning: vars.warningColor,
arrowColorHoverWarning: vars.warningColorHover,
arrowColorActiveWarning: vars.warningColorHover,
ArrowColorDisabledWarning: vars.textColor5,
crossColorError: vars.errorColor,
crossColorHoverError: vars.errorColorHover,
crossColorPressedError: vars.errorColorPressed,
arrowColorError: vars.errorColor,
arrowColorHoverError: vars.errorColorHover,
arrowColorActiveError: vars.errorColorHover,
arrowColorDisabledError: vars.textColor5
}
}
})

5
src/styles.js
View File

@ -1,4 +1,8 @@
// unified entry for styles
export {
baseClearButtonDark,
baseClearButtonLight
} from './_base/clear-button/styles'
export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
export { baseMenuMaskDark, baseMenuMaskLight } from './_base/menu-mask/styles'
export { baseSelectionDark, baseSelectionLight } from './_base/selection/styles'
@ -10,7 +14,6 @@ export {
baseSlotMachineDark,
baseSlotMachineLight
} from './_base/slot-machine/styles'
export { baseSuffixDark, baseSuffixLight } from './_base/suffix/styles'
export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
// exposed style
export { baseDark, baseLight } from './_styles/base'