From afad4ca90a106b4025a47c5d0116b89c9b2d20f2 Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 10 Feb 2021 22:44:59 +0800 Subject: [PATCH] types(Checkbox): use tsx (#8127) --- src/checkbox-group/{index.js => index.tsx} | 43 +++++++++++++++++----- src/checkbox/Checker.tsx | 20 +++++----- src/checkbox/README.zh-CN.md | 2 +- src/checkbox/{index.js => index.tsx} | 14 +++---- src/vue-shim.d.ts | 1 + 5 files changed, 52 insertions(+), 28 deletions(-) rename src/checkbox-group/{index.js => index.tsx} (55%) rename src/checkbox/{index.js => index.tsx} (84%) diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.tsx similarity index 55% rename from src/checkbox-group/index.js rename to src/checkbox-group/index.tsx index bef74ce8e..730d64b74 100644 --- a/src/checkbox-group/index.js +++ b/src/checkbox-group/index.tsx @@ -1,21 +1,37 @@ -import { watch } from 'vue'; +import { PropType, watch } from 'vue'; import { createNamespace } from '../utils'; -import { CHECKBOX_KEY } from '../checkbox'; import { useChildren } from '@vant/use'; import { useExpose } from '../composables/use-expose'; import { useLinkField } from '../composables/use-link-field'; const [createComponent, bem] = createNamespace('checkbox-group'); +export const CHECKBOX_GROUP_KEY = 'vanCheckboxGroup'; + +export type CheckboxGroupDirection = 'horizontal' | 'vertical'; + +export type CheckboxGroupToggleAllOptions = { + checked?: boolean; + skipDisabled?: boolean; +}; + +export type CheckboxGroupProvide = { + props: { + max: number | string; + modelValue: any[]; + }; + updateModelValue: (value: unknown[]) => void; +}; + export default createComponent({ props: { max: [Number, String], disabled: Boolean, - direction: String, + direction: String as PropType, iconSize: [Number, String], checkedColor: String, modelValue: { - type: Array, + type: Array as PropType, default: () => [], }, }, @@ -23,16 +39,20 @@ export default createComponent({ emits: ['change', 'update:modelValue'], setup(props, { emit, slots }) { - const { children, linkChildren } = useChildren(CHECKBOX_KEY); + const { children, linkChildren } = useChildren(CHECKBOX_GROUP_KEY); - const toggleAll = (options = {}) => { + const updateModelValue = (value: unknown[]) => { + emit('update:modelValue', value); + }; + + const toggleAll = (options: CheckboxGroupToggleAllOptions = {}) => { if (typeof options === 'boolean') { options = { checked: options }; } const { checked, skipDisabled } = options; - const checkedChildren = children.filter((item) => { + const checkedChildren = children.filter((item: any) => { if (!item.props.bindGroup) { return false; } @@ -42,8 +62,8 @@ export default createComponent({ return checked ?? !item.checked.value; }); - const names = checkedChildren.map((item) => item.name); - emit('update:modelValue', names); + const names = checkedChildren.map((item: any) => item.name); + updateModelValue(names); }; watch( @@ -55,7 +75,10 @@ export default createComponent({ useExpose({ toggleAll }); useLinkField(() => props.modelValue); - linkChildren({ emit, props }); + linkChildren({ + props, + updateModelValue, + }); return () =>
{slots.default?.()}
; }, diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx index 35506fe81..59c77b5e3 100644 --- a/src/checkbox/Checker.tsx +++ b/src/checkbox/Checker.tsx @@ -1,17 +1,20 @@ -import { ref, computed, defineComponent } from 'vue'; +import { ref, computed, defineComponent, PropType } from 'vue'; import { addUnit } from '../utils'; import Icon from '../icon'; +export type CheckerShape = 'square' | 'round'; +export type CheckerLabelPosition = 'left' | 'right'; + export const checkerProps = { - name: null, + name: null as any, disabled: Boolean, iconSize: [Number, String], - modelValue: null, + modelValue: null as any, checkedColor: String, - labelPosition: String, + labelPosition: String as PropType, labelDisabled: Boolean, shape: { - type: String, + type: String as PropType, default: 'round', }, }; @@ -20,7 +23,7 @@ export default defineComponent({ props: { ...checkerProps, role: String, - parent: Object, + parent: Object as PropType | null>, checked: Boolean, bindGroup: { type: Boolean, @@ -41,14 +44,13 @@ export default defineComponent({ if (props.parent && props.bindGroup) { return props.parent.props[name]; } - return null; }; - const disabled = computed( + const disabled = computed( () => getParentProp('disabled') || props.disabled ); - const direction = computed(() => getParentProp('direction') || null); + const direction = computed(() => getParentProp('direction')); const iconStyle = computed(() => { const checkedColor = props.checkedColor || getParentProp('checkedColor'); diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index dc89e36bd..2f107f7f9 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -279,7 +279,7 @@ export default { | --- | --- | --- | --- | | v-model | 所有选中项的标识符 | _any[]_ | - | | disabled | 是否禁用所有复选框 | _boolean_ | `false` | -| max | 最大可选数，`0`为无限制 | _number \| string_ | `0` | +| max | 最大可选数，`0` 为无限制 | _number \| string_ | `0` | | direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` | | icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` | | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` | diff --git a/src/checkbox/index.js b/src/checkbox/index.tsx similarity index 84% rename from src/checkbox/index.js rename to src/checkbox/index.tsx index 8a5cc0198..49bfc4846 100644 --- a/src/checkbox/index.js +++ b/src/checkbox/index.tsx @@ -4,11 +4,10 @@ import { useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; import { useLinkField } from '../composables/use-link-field'; import Checker, { checkerProps } from './Checker'; +import { CHECKBOX_GROUP_KEY, CheckboxGroupProvide } from '../checkbox-group'; const [createComponent, bem] = createNamespace('checkbox'); -export const CHECKBOX_KEY = 'vanCheckbox'; - export default createComponent({ props: { ...checkerProps, @@ -21,11 +20,11 @@ export default createComponent({ emits: ['change', 'update:modelValue'], setup(props, { emit, slots }) { - const { parent } = useParent(CHECKBOX_KEY); + const { parent } = useParent(CHECKBOX_GROUP_KEY); - const setParentValue = (checked) => { + const setParentValue = (checked: boolean) => { const { name } = props; - const { max, modelValue } = parent.props; + const { max, modelValue } = parent!.props; const value = modelValue.slice(); if (checked) { @@ -35,7 +34,7 @@ export default createComponent({ value.push(name); if (props.bindGroup) { - parent.emit('update:modelValue', value); + parent!.updateModelValue(value); } } } else { @@ -45,7 +44,7 @@ export default createComponent({ value.splice(index, 1); if (props.bindGroup) { - parent.emit('update:modelValue', value); + parent!.updateModelValue(value); } } } @@ -83,7 +82,6 @@ export default createComponent({ role="checkbox" parent={parent} checked={checked.value} - bindGroup={props.bindGroup} onToggle={toggle} {...props} /> diff --git a/src/vue-shim.d.ts b/src/vue-shim.d.ts index 0a7a2f639..4302cbb7a 100644 --- a/src/vue-shim.d.ts +++ b/src/vue-shim.d.ts @@ -13,5 +13,6 @@ declare module 'vue' { onClick?: EventHandler; onClosed?: EventHandler; onChange?: EventHandler; + onToggle?: EventHandler; } }