mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
refactor(checkbox): remove simple-checkbox
never maintain duplicate codes
This commit is contained in:
parent
8b5a497661
commit
9794671964
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-checkbox"
|
||||
:class="{
|
||||
'n-checkbox--checked': checked,
|
||||
'n-checkbox--disabled': disabled,
|
||||
'n-checkbox--indeterminate': indeterminate,
|
||||
[`n-checkbox--${size}-size`]: size,
|
||||
[`n-${theme}-theme`]: theme
|
||||
}"
|
||||
:tabindex="disabled ? false : 0"
|
||||
@keyup.enter="handleKeyUpEnter"
|
||||
@keyup.space="handleKeyUpSpace"
|
||||
@keydown.space="handleKeyDownSpace"
|
||||
>
|
||||
<div
|
||||
class="n-checkbox-box"
|
||||
@click="handleClick"
|
||||
>
|
||||
<n-icon-switch-transition>
|
||||
<div
|
||||
v-if="indeterminate"
|
||||
key="indeterminate"
|
||||
class="n-checkbox-icon"
|
||||
>
|
||||
<line-mark
|
||||
class="n-checkbox-icon__line"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
key="check"
|
||||
class="n-checkbox-icon"
|
||||
>
|
||||
<check-mark
|
||||
class="n-checkbox-icon__check"
|
||||
/>
|
||||
</div>
|
||||
</n-icon-switch-transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckMark from './CheckMark.vue'
|
||||
import LineMark from './LineMark.vue'
|
||||
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/simple-checkbox'
|
||||
|
||||
export default {
|
||||
name: 'NSimpleCheckbox',
|
||||
cssrName: 'Checkbox',
|
||||
components: {
|
||||
CheckMark,
|
||||
LineMark,
|
||||
NIconSwitchTransition
|
||||
},
|
||||
mixins: [
|
||||
usecssr(styles)
|
||||
],
|
||||
props: {
|
||||
value: {
|
||||
validator: createValidator(['number', 'boolean', 'string']),
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
validator: createValidator(['string']),
|
||||
required: true
|
||||
},
|
||||
checked: {
|
||||
validator: createValidator(['boolean']),
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
validator: createValidator(['boolean']),
|
||||
default: false
|
||||
},
|
||||
indeterminate: {
|
||||
validator: createValidator(['boolean']),
|
||||
default: false
|
||||
},
|
||||
theme: {
|
||||
validator: createValidator(['string']),
|
||||
default: undefined
|
||||
},
|
||||
onClick: {
|
||||
validator: createValidator(['function']),
|
||||
default: undefined
|
||||
},
|
||||
onChange: {
|
||||
validator: createValidator(['function']),
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
const {
|
||||
onClick
|
||||
} = this
|
||||
if (onClick) onClick(e)
|
||||
if (!this.disabled) {
|
||||
this.toggle()
|
||||
}
|
||||
},
|
||||
handleKeyUpEnter (e) {
|
||||
if (!this.disabled) {
|
||||
this.toggle()
|
||||
}
|
||||
},
|
||||
toggle () {
|
||||
const {
|
||||
onChange
|
||||
} = this
|
||||
if (onChange) onChange(!this.checked)
|
||||
},
|
||||
handleKeyDownSpace (e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
handleKeyUpSpace (e) {
|
||||
this.handleKeyUpEnter()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,20 +0,0 @@
|
||||
import sizeStyle from './themed-size.cssr.js'
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'size',
|
||||
watch: [
|
||||
'size',
|
||||
'theme'
|
||||
],
|
||||
CNode: sizeStyle
|
||||
},
|
||||
{
|
||||
key: 'theme',
|
||||
watch: [
|
||||
'theme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-simple-checkbox
|
||||
<n-checkbox
|
||||
:theme="theme"
|
||||
:checked="checkboxProps.checked"
|
||||
:indeterminate="checkboxProps.indeterminate"
|
||||
@ -10,13 +10,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox.vue'
|
||||
import NCheckbox from '../../checkbox/src/Checkbox.vue'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
|
||||
export default {
|
||||
name: 'NTransferHeaderCheckbox',
|
||||
components: {
|
||||
NSimpleCheckbox
|
||||
NCheckbox
|
||||
},
|
||||
props: {
|
||||
theme: {
|
||||
|
@ -7,7 +7,7 @@
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="n-transfer-list-item__checkbox">
|
||||
<n-simple-checkbox
|
||||
<n-checkbox
|
||||
:theme="NTransfer.mergedTheme"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
@ -24,14 +24,14 @@
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox.vue'
|
||||
import NCheckbox from '../../checkbox/src/Checkbox.vue'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
import { useMemo } from 'vooks'
|
||||
|
||||
export default {
|
||||
name: 'NTransferListItem',
|
||||
components: {
|
||||
NSimpleCheckbox
|
||||
NCheckbox
|
||||
},
|
||||
props: {
|
||||
label: {
|
||||
|
@ -7,7 +7,7 @@
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="n-transfer-list-item__checkbox">
|
||||
<n-simple-checkbox
|
||||
<n-checkbox
|
||||
:theme="NTransfer.mergedTheme"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
@ -24,14 +24,14 @@
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox.vue'
|
||||
import NCheckbox from '../../checkbox/src/Checkbox.vue'
|
||||
import createValidator from '../../_utils/vue/validateProp'
|
||||
import { useMemo } from 'vooks'
|
||||
|
||||
export default {
|
||||
name: 'NTransferListItem',
|
||||
components: {
|
||||
NSimpleCheckbox
|
||||
NCheckbox
|
||||
},
|
||||
props: {
|
||||
label: {
|
||||
|
Loading…
Reference in New Issue
Block a user