types(Checkbox): export more types (#9665)

* types(Checkbox): export more types

* fix: label position
This commit is contained in:
neverland 2021-10-12 17:49:22 +08:00 committed by GitHub
parent 4bc2557c5a
commit 8970636575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 57 additions and 16 deletions

View File

@ -6,5 +6,6 @@ export default CheckboxGroup;
export type { CheckboxGroupProps }; export type { CheckboxGroupProps };
export type { export type {
CheckboxGroupInstance, CheckboxGroupInstance,
CheckboxGroupDirection,
CheckboxGroupToggleAllOptions, CheckboxGroupToggleAllOptions,
} from './types'; } from './types';

View File

@ -1,6 +1,8 @@
import type { ComponentPublicInstance } from 'vue'; import type { ComponentPublicInstance } from 'vue';
import type { CheckboxGroupProps } from './CheckboxGroup'; import type { CheckboxGroupProps } from './CheckboxGroup';
import type { CheckerParent } from '../checkbox/Checker'; import type { CheckerParent, CheckerDirection } from '../checkbox/Checker';
export type CheckboxGroupDirection = CheckerDirection;
export type CheckboxGroupToggleAllOptions = export type CheckboxGroupToggleAllOptions =
| boolean | boolean

View File

@ -116,13 +116,10 @@ export default defineComponent({
}; };
return () => { return () => {
const nodes: (JSX.Element | undefined)[] = [renderIcon()]; const nodes: (JSX.Element | undefined)[] =
props.labelPosition === 'left'
if (props.labelPosition === 'left') { ? [renderLabel(), renderIcon()]
nodes.unshift(renderLabel()); : [renderIcon(), renderLabel()];
} else {
nodes.push(renderLabel());
}
return ( return (
<div <div

View File

@ -334,9 +334,12 @@ The component exports the following type definitions:
```ts ```ts
import type { import type {
CheckboxProps, CheckboxProps,
CheckboxShape,
CheckboxInstance, CheckboxInstance,
CheckboxLabelPosition,
CheckboxGroupProps, CheckboxGroupProps,
CheckboxGroupInstance, CheckboxGroupInstance,
CheckboxGroupDirection,
CheckboxGroupToggleAllOptions, CheckboxGroupToggleAllOptions,
} from 'vant'; } from 'vant';
``` ```

View File

@ -352,9 +352,12 @@ checkboxGroup.toggleAll({
```ts ```ts
import type { import type {
CheckboxProps, CheckboxProps,
CheckboxShape,
CheckboxInstance, CheckboxInstance,
CheckboxLabelPosition,
CheckboxGroupProps, CheckboxGroupProps,
CheckboxGroupInstance, CheckboxGroupInstance,
CheckboxGroupDirection,
CheckboxGroupToggleAllOptions, CheckboxGroupToggleAllOptions,
} from 'vant'; } from 'vant';
``` ```

View File

@ -4,4 +4,8 @@ import _Checkbox, { CheckboxProps } from './Checkbox';
export const Checkbox = withInstall(_Checkbox); export const Checkbox = withInstall(_Checkbox);
export default Checkbox; export default Checkbox;
export type { CheckboxProps }; export type { CheckboxProps };
export type { CheckboxInstance } from './types'; export type {
CheckboxShape,
CheckboxInstance,
CheckboxLabelPosition,
} from './types';

View File

@ -1,5 +1,9 @@
import type { ComponentPublicInstance, ComputedRef } from 'vue'; import type { ComponentPublicInstance, ComputedRef } from 'vue';
import type { CheckboxProps } from './Checkbox'; import type { CheckboxProps } from './Checkbox';
import type { CheckerShape, CheckerLabelPosition } from './Checker';
export type CheckboxShape = CheckerShape;
export type CheckboxLabelPosition = CheckerLabelPosition;
export type CheckboxExpose = { export type CheckboxExpose = {
toggle: (newValue?: boolean) => void; toggle: (newValue?: boolean) => void;

View File

@ -11,10 +11,12 @@ import type { CheckerDirection } from '../checkbox/Checker';
const [name, bem] = createNamespace('radio-group'); const [name, bem] = createNamespace('radio-group');
export type RadioGroupDirection = CheckerDirection;
const props = { const props = {
disabled: Boolean, disabled: Boolean,
iconSize: numericProp, iconSize: numericProp,
direction: String as PropType<CheckerDirection>, direction: String as PropType<RadioGroupDirection>,
modelValue: unknownProp, modelValue: unknownProp,
checkedColor: String, checkedColor: String,
}; };

View File

@ -1,5 +1,6 @@
import { withInstall } from '../utils'; import { withInstall } from '../utils';
import _RadioGroup from './RadioGroup'; import _RadioGroup, { RadioGroupDirection } from './RadioGroup';
export const RadioGroup = withInstall(_RadioGroup); export const RadioGroup = withInstall(_RadioGroup);
export default RadioGroup; export default RadioGroup;
export type { RadioGroupDirection };

View File

@ -156,6 +156,14 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
### Types
The component exports the following type definitions:
```ts
import type { RadioShape, RadioLabelPosition, RadioGroupDirection } from 'vant';
```
## API ## API
### Radio Props ### Radio Props

View File

@ -181,7 +181,7 @@ export default {
| disabled | 是否为禁用状态 | _boolean_ | `false` | | disabled | 是否为禁用状态 | _boolean_ | `false` |
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` | | label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` | | label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为`px` | _number \| string_ | `20px` | | icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` | | checked-color | 选中状态颜色 | _string_ | `#1989fa` |
### RadioGroup Props ### RadioGroup Props
@ -190,8 +190,8 @@ export default {
| --- | --- | --- | --- | | --- | --- | --- | --- |
| v-model | 当前选中项的标识符 | _any_ | - | | v-model | 当前选中项的标识符 | _any_ | - |
| disabled | 是否禁用所有单选框 | _boolean_ | `false` | | disabled | 是否禁用所有单选框 | _boolean_ | `false` |
| direction | 排列方向,可选值为`horizontal` | _string_ | `vertical` | | direction | 排列方向,可选值为 `horizontal` | _string_ | `vertical` |
| icon-size | 所有单选框的图标大小,默认单位为`px` | _number \| string_ | `20px` | | icon-size | 所有单选框的图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 所有单选框的选中状态颜色 | _string_ | `#1989fa` | | checked-color | 所有单选框的选中状态颜色 | _string_ | `#1989fa` |
### Radio Events ### Radio Events
@ -213,6 +213,14 @@ export default {
| default | 自定义文本 | - | | default | 自定义文本 | - |
| icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ | | icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ |
### 类型定义
组件导出以下类型定义:
```ts
import type { RadioShape, RadioLabelPosition, RadioGroupDirection } from 'vant';
```
## 主题定制 ## 主题定制
### 样式变量 ### 样式变量

View File

@ -8,7 +8,14 @@ import { RADIO_KEY } from '../radio-group/RadioGroup';
import { useParent } from '@vant/use'; import { useParent } from '@vant/use';
// Components // Components
import Checker, { checkerProps } from '../checkbox/Checker'; import Checker, {
checkerProps,
CheckerShape,
CheckerLabelPosition,
} from '../checkbox/Checker';
export type RadioShape = CheckerShape;
export type RadioLabelPosition = CheckerLabelPosition;
const [name, bem] = createNamespace('radio'); const [name, bem] = createNamespace('radio');

View File

@ -1,5 +1,6 @@
import { withInstall } from '../utils'; import { withInstall } from '../utils';
import _Radio from './Radio'; import _Radio, { RadioShape, RadioLabelPosition } from './Radio';
export const Radio = withInstall(_Radio); export const Radio = withInstall(_Radio);
export default Radio; export default Radio;
export type { RadioShape, RadioLabelPosition };