mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(checkbox): optimize code logic

Browse Source
This commit is contained in:
zouhang 2020-08-31 09:51:33 +08:00 committed by jeremywu
parent 869cec59ba
commit a8d825bce8
5 changed files with 122 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/checkbox/src/checkbox-button.vue
View File

@ -56,17 +56,17 @@ import {
PropType,
watch,
} from 'vue'
import { useCheckbox } from './useCheckbox'
import { useCheckboxGroup } from './useCheckbox'
export default defineComponent({
name: 'ElCheckboxButton',
props: {
modelValue: {
type: [Object, Boolean, String, Number] as PropType<Record<string, unknown> | boolean | number>,
type: [Boolean, Number, String] as PropType<boolean | number | string>,
default: () => undefined,
},
label: {
type: [Object, Boolean, String] as PropType<Record<string, unknown> | boolean | string>,
type: [Boolean, Number, String] as PropType<boolean | number | string>,
},
indeterminate: Boolean,
disabled: Boolean,
@ -86,11 +86,11 @@ export default defineComponent({
},
emits: ['update:modelValue', 'change'],
setup(props, { emit }) {
const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
const selfModel = ref(false)
let selfModel = false
const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
const focus = ref(false)
const isLimitExceeded = ref(false)
const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
const model = computed({
get() {
return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
@ -100,17 +100,17 @@ export default defineComponent({
if (isGroup.value) {
isLimitExceeded.value = false
if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
isLimitExceeded.value = true
}
if (_checkboxGroup.max !== undefined && val.length > _checkboxGroup.max) {
if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
isLimitExceeded.value = true
}
isLimitExceeded.value === false && _checkboxGroup.changeEvent?.(val)
isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
} else {
emit('update:modelValue', val)
selfModel.value = val
selfModel = val
}
},
})
@ -124,27 +124,27 @@ export default defineComponent({
}
})
const isLimitDisabled = computed(() => {
const max = _checkboxGroup.max
const min = _checkboxGroup.min
const max = checkboxGroup.max
const min = checkboxGroup.min
return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
(model.value.length <= min && isChecked.value)
})
const isDisabled = computed(() => {
return isGroup.value
? _checkboxGroup.disabled || props.disabled || (elForm as any || {} as any).disabled || isLimitDisabled.value
? checkboxGroup.disabled || props.disabled || (elForm as any || {} as any).disabled || isLimitDisabled.value
: props.disabled || (elForm as any || {} as any).disabled
})
const activeStyle = computed(() => {
return {
backgroundColor: _checkboxGroup.fill || '',
borderColor: _checkboxGroup.fill || '',
color: _checkboxGroup.textColor || '',
'box-shadow': '-1px 0 0 0 ' + _checkboxGroup.fill,
backgroundColor: checkboxGroup.fill || '',
borderColor: checkboxGroup.fill || '',
color: checkboxGroup.textColor || '',
'box-shadow': '-1px 0 0 0 ' + checkboxGroup.fill,
}
})
const size = computed(() => _checkboxGroup.checkboxGroupSize || _elFormItemSize || (ELEMENT || {}).size)
const size = computed(() => checkboxGroup.checkboxGroupSize || elFormItemSize || (ELEMENT || {}).size)
function addToStore() {
if (
@ -167,14 +167,6 @@ export default defineComponent({
}
emit('change', value.value, e)
/**
* to discuss it's useful
*/
// nextTick(() => {
// if (isGroup.value) {
// _checkboxGroup.changeEvent?.(_checkboxGroup.modelValue.value)
// }
// })
}
watch(() => props.modelValue, val => {

8
packages/checkbox/src/checkbox-group.vue
View File

@ -6,7 +6,7 @@
<script lang="ts">
import { defineComponent, computed, watch, provide, nextTick } from 'vue'
import { useCheckbox } from './useCheckbox'
import { useCheckboxGroup } from './useCheckbox'
export default defineComponent({
name: 'ElCheckboxGroup',
@ -42,8 +42,8 @@ export default defineComponent({
emits: ['update:modelValue', 'change'],
setup(props, ctx) {
const { elFormItem, _elFormItemSize, ELEMENT } = useCheckbox()
const checkboxGroupSize = computed(() => props.size || _elFormItemSize.value || (ELEMENT || {}).size)
const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup()
const checkboxGroupSize = computed(() => props.size || elFormItemSize.value || (ELEMENT || {}).size)
const changeEvent = value => {
ctx.emit('update:modelValue', value)
@ -71,7 +71,7 @@ export default defineComponent({
fill: props.fill,
textColor: props.textColor,
checkboxGroupSize: checkboxGroupSize.value,
changeEvent: changeEvent,
changeEvent,
})
watch(() => props.modelValue, val => {

32
packages/checkbox/src/checkbox.d.ts vendored Normal file
View File

@ -0,0 +1,32 @@
import { ComputedRef, PropType } from 'vue'
export interface ICheckboxGroupInstance {
name?: string
modelValue?: ComputedRef
disabled?: boolean
min?: string | number
max?: string | number
size?: string
fill?: string
textColor?: string
checkboxGroupSize?: ComputedRef<string>
changeEvent?: (val: any) => void
}
export interface ICheckboxProps {
modelValue: ICheckboxModelValue
label?:ICheckboxLabel
indeterminate?: boolean
disabled?: boolean
checked?: boolean
name?: string
trueLabel?: string| number
falseLabel?: string| number
id?: string
controls?: string
border?: boolean
size?: string
}
export type ICheckboxLabel = PropType<string | boolean | number>
export type ICheckboxModelValue = PropType<string | boolean | number>

53
packages/checkbox/src/checkbox.vue
View File

@ -67,17 +67,17 @@ import {
onMounted,
PropType,
} from 'vue'
import { useCheckbox } from './useCheckbox'
import { useCheckboxGroup } from './useCheckbox'
export default defineComponent({
name: 'ElCheckbox',
props: {
modelValue: {
type: [Object, Boolean, String, Number] as PropType<Record<string, unknown> | boolean | number>,
type: [Boolean, Number, String] as PropType<boolean | number | string>,
default: () => undefined,
},
label: {
type: [Object, Boolean, String] as PropType<Record<string, unknown> | boolean | string>,
type: [Boolean, Number, String] as PropType<boolean | number | string>,
},
indeterminate: Boolean,
disabled: Boolean,
@ -110,31 +110,32 @@ export default defineComponent({
},
emits: ['update:modelValue', 'change'],
setup(props, { emit }) {
const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
let selfModel = false
const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
const instance = getCurrentInstance()
const selfModel = ref<unknown>(false)
const focus = ref(false)
const isLimitExceeded = ref(false)
const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
const model = computed<unknown>({
const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
const model = computed({
get() {
return isGroup.value
? store.value : props.modelValue !== undefined ? props.modelValue : selfModel.value
? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
},
set(val: unknown) {
if (isGroup.value && Array.isArray(val)) {
isLimitExceeded.value = false
if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
isLimitExceeded.value = true
}
if (_checkboxGroup.max !== undefined && val.length > _checkboxGroup.max) {
if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
isLimitExceeded.value = true
}
isLimitExceeded.value === false && _checkboxGroup.changeEvent?.(val)
isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
} else {
emit('update:modelValue', val)
selfModel.value = val
selfModel = val as boolean
}
},
})
@ -149,20 +150,20 @@ export default defineComponent({
}
})
const isLimitDisabled = computed(() => {
const max = _checkboxGroup.max
const min = _checkboxGroup.min
const max = checkboxGroup.max
const min = checkboxGroup.min
return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
(model.value.length <= min && isChecked.value)
})
const isDisabled = computed(() => {
return isGroup.value
? _checkboxGroup.disabled || props.disabled || (elForm as any || {} as any).disabled || isLimitDisabled.value
? checkboxGroup.disabled || props.disabled || (elForm as any || {} as any).disabled || isLimitDisabled.value
: props.disabled || (elForm as any || {} as any).disabled
})
const checkboxSize = computed(() => {
const temCheckboxSize = props.size || _elFormItemSize.value || (ELEMENT || {} as any).size
const temCheckboxSize = props.size || elFormItemSize.value || (ELEMENT || {} as any).size
return isGroup.value
? _checkboxGroup.checkboxGroupSize || temCheckboxSize
? checkboxGroup.checkboxGroupSize || temCheckboxSize
: temCheckboxSize
})
@ -179,20 +180,14 @@ export default defineComponent({
function handleChange(e: InputEvent) {
if (isLimitExceeded.value) return
const target = e.target as HTMLInputElement
const value = target.checked
? props.trueLabel ?? true
: props.falseLabel ?? false
let value
if ((e.target as HTMLInputElement).checked) {
value = props.trueLabel === undefined ? true : props.trueLabel
} else {
value = props.falseLabel === undefined ? false : props.falseLabel
}
emit('change', value, e)
/**
* to discuss does it is useful
*/
// nextTick(() => {
// if (isGroup.value) {
// _checkboxGroup.changeEvent?.(_checkboxGroup.modelValue.value)
// }
// })
}
watch(() => props.modelValue, val => {

51
packages/checkbox/src/useCheckbox.ts
View File

@ -1,23 +1,60 @@
import { ref, computed, inject } from 'vue'
import { ref, computed, inject, getCurrentInstance, SetupContext } from 'vue'
import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox'
export const useCheckbox = () => {
export const useCheckboxGroup = () => {
//todo: ELEMENT
const ELEMENT = null
const elForm = inject('elForm', {})
const elFormItem = inject('elFormItem', {}) as any
const _checkboxGroup = inject('CheckboxGroup', {}) as any
const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})
const focus = ref(false)
const isGroup = computed(() => _checkboxGroup && _checkboxGroup.name === 'ElCheckboxGroup')
const _elFormItemSize = computed(() => {
const isGroup = computed(() => checkboxGroup && checkboxGroup.name === 'ElCheckboxGroup')
const elFormItemSize = computed(() => {
return (elFormItem || {} as any).elFormItemSize
})
return {
isGroup,
focus,
_checkboxGroup,
checkboxGroup,
elForm,
ELEMENT,
_elFormItemSize,
elFormItemSize,
elFormItem,
}
}
export const useCheckbox = (props: ICheckboxProps, { emit }: SetupContext) => {
let selfModel = false
const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
const instance = getCurrentInstance()
const focus = ref(false)
const isLimitExceeded = ref(false)
const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
const model = computed({
get() {
return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
},
set(val: any) {
if (isGroup.value) {
isLimitExceeded.value = false
if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
isLimitExceeded.value = true
}
if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
isLimitExceeded.value = true
}
isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
} else {
emit('update:modelValue', val)
selfModel = val
}
},
})
return {
instance,
}
}