diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
index c1c10e926..d08796f44 100644
--- a/packages/components/checkbox/docs/Index.zh.md
+++ b/packages/components/checkbox/docs/Index.zh.md
@@ -1,65 +1,66 @@
----
-category: components
-type: 数据录入
-title: Checkbox
-subtitle: 复选框
-cover:
----
-
-## API
-
-### IxCheckbox
-
-#### CheckboxProps
-
-除以下表格之外还支持原生 `` 元素的所有属性。
-
-| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
-| --- | --- | --- | --- | --- | --- |
-| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `v-model:checked` | 指定当前勾选框是否选中 | `boolean \| string \| number` | - | - | 使用 `control` 时,此配置无效 |
-| `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
-| `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
-| `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时,此配置无效 |
-| `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时,按钮样式处于半选状态,且不受`checked`影响 |
-| `label` | 勾选框的文本 | `string \| #default` | - | - | - |
-| `trueValue` | 选中时返回的值 | `boolean \| string \| number` | `true`| - | - |
-| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
-| `value` | 设置勾选框的值,与 `IxCheckboxGroup` 配合使用 | `any`| - | - | 不传时使用 `key` 作为 `value` |
-| `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
-| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
-
-#### CheckboxMethods
-
-| 名称 | 说明 | 参数类型 | 备注 |
-| --- | --- | --- | --- |
-| `focus` | 获取焦点 | - | - |
-| `blur` | 移除焦点 | - | - |
-
-### IxCheckboxGroup
-
-#### GroupProps
-
-| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
-| --- | --- | --- | --- | --- | --- |
-| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `v-model:value` | 指定当前勾选框是否选中 | `any[]` | - | - | 使用 `control` 时,此配置无效 |
-| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
-| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
-| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时,此配置无效 |
-| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
-| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
-| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
-| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
-
-```ts
-// key 与 value 二者必传其一。
-export interface CheckboxData extends CheckboxProps {
- // 不传时使用 value 作为 key
- key?: VKey
-}
-```
-
+---
+category: components
+type: 数据录入
+title: Checkbox
+subtitle: 复选框
+cover:
+---
+
+## API
+
+### IxCheckbox
+
+#### CheckboxProps
+
+除以下表格之外还支持原生 `` 元素的所有属性。
+
+| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:checked` | 指定当前勾选框是否选中 | `boolean \| string \| number` | - | - | 使用 `control` 时,此配置无效 |
+| `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
+| `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
+| `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时,此配置无效 |
+| `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时,按钮样式处于半选状态,且不受`checked`影响 |
+| `label` | 勾选框的文本 | `string \| #default` | - | - | - |
+| `trueValue` | 选中时返回的值 | `boolean \| string \| number` | `true`| - | - |
+| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
+| `value` | 设置勾选框的值,与 `IxCheckboxGroup` 配合使用 | `any`| - | - | 不传时使用 `key` 作为 `value` |
+| `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
+| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
+
+#### CheckboxMethods
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `focus` | 获取焦点 | - | - |
+| `blur` | 移除焦点 | - | - |
+
+### IxCheckboxGroup
+
+#### GroupProps
+
+| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:value` | 指定当前勾选框是否选中 | `any[]` | - | - | 使用 `control` 时,此配置无效 |
+| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
+| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
+| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时,此配置无效 |
+| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
+| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
+| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向,可设`true`为垂直排列 |
+| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
+
+```ts
+// key 与 value 二者必传其一。
+export interface CheckboxData extends CheckboxProps {
+ // 不传时使用 value 作为 key
+ key?: VKey
+}
+```
+
## 主题变量
@@ -101,4 +102,4 @@ export interface CheckboxData extends CheckboxProps {
| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
| `@checkbox-label-padding` | `0 @spacing-sm` | `0 @spacing-xs` | - |
| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
-
+
diff --git a/packages/components/checkbox/src/CheckboxGroup.tsx b/packages/components/checkbox/src/CheckboxGroup.tsx
index 20c742ecc..2a5642b53 100644
--- a/packages/components/checkbox/src/CheckboxGroup.tsx
+++ b/packages/components/checkbox/src/CheckboxGroup.tsx
@@ -12,6 +12,7 @@ import { isNil } from 'lodash-es'
import { Logger, convertCssPixel } from '@idux/cdk/utils'
import { useGlobalConfig } from '@idux/components/config'
import { useFormAccessor } from '@idux/components/form'
+import { IxSpace } from '@idux/components/space'
import Checkbox from './Checkbox'
import { checkboxGroupToken } from './token'
@@ -41,7 +42,8 @@ export default defineComponent({
})
return () => {
- const { options, dataSource } = props
+ const { options, dataSource, vertical } = props
+
if (options) {
Logger.warn('components/checkbox', '`options` was deprecated, please use `dataSource` instead')
}
@@ -58,7 +60,7 @@ export default defineComponent({
}
return (
- {children}
+ {vertical ? {children} : children}
)
}
diff --git a/packages/components/checkbox/src/types.ts b/packages/components/checkbox/src/types.ts
index ccf5f210b..43e203fcf 100644
--- a/packages/components/checkbox/src/types.ts
+++ b/packages/components/checkbox/src/types.ts
@@ -8,32 +8,34 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
-import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes } from 'vue'
+import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes, PropType } from 'vue'
import { controlPropDef } from '@idux/cdk/forms'
-import { IxPropTypes } from '@idux/cdk/utils'
+import { MaybeArray } from '@idux/cdk/utils'
import { FormSize } from '@idux/components/form'
export const checkboxProps = {
control: controlPropDef,
- checked: IxPropTypes.oneOfType([String, Number, Boolean]),
+ checked: { type: [String, Number, Boolean] as PropType, default: undefined },
- autofocus: IxPropTypes.bool.def(false),
- buttoned: IxPropTypes.bool,
- disabled: IxPropTypes.bool,
- indeterminate: IxPropTypes.bool.def(false),
- label: IxPropTypes.string,
- trueValue: IxPropTypes.oneOfType([String, Number, Boolean]).def(true),
- falseValue: IxPropTypes.oneOfType([String, Number, Boolean]).def(false),
- value: IxPropTypes.any,
- size: IxPropTypes.oneOf(['sm', 'md', 'lg']),
+ autofocus: { type: Boolean, default: false },
+ buttoned: { type: Boolean, default: undefined },
+ disabled: { type: Boolean, default: undefined },
+ indeterminate: { type: Boolean, default: false },
+ label: { type: String, default: undefined },
+ trueValue: { type: [String, Number, Boolean] as PropType, default: true },
+ falseValue: { type: [String, Number, Boolean] as PropType, default: false },
+ value: { type: null, default: undefined },
+ size: { type: String as PropType, default: undefined },
// events
- 'onUpdate:checked': IxPropTypes.emit<(checked: CheckValue) => void>(),
- onChange: IxPropTypes.emit<(newChecked: CheckValue, oldChecked: CheckValue) => void>(),
- onBlur: IxPropTypes.emit<(evt: FocusEvent) => void>(),
- onFocus: IxPropTypes.emit<(evt: FocusEvent) => void>(),
-}
+ 'onUpdate:checked': { type: [Function, Array] as PropType void>> },
+ onChange: {
+ type: [Function, Array] as PropType void>>,
+ },
+ onBlur: { type: [Function, Array] as PropType void>> },
+ onFocus: { type: [Function, Array] as PropType void>> },
+} as const
export type CheckboxProps = ExtractInnerPropTypes
export type CheckboxPublicProps = ExtractPublicPropTypes
@@ -49,23 +51,24 @@ export type CheckboxInstance = InstanceType(),
- disabled: IxPropTypes.bool.def(false),
- gap: IxPropTypes.oneOfType([Number, String]),
- name: IxPropTypes.string,
+ buttoned: { type: Boolean, default: false },
+ dataSource: { type: Array as PropType },
+ disabled: { type: Boolean, default: false },
+ gap: { type: [Number, String] as PropType, default: undefined },
+ name: { type: String, default: undefined },
/**
* @deprecated please use `dataSource` instead'
*/
- options: IxPropTypes.array(),
- size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
+ options: { type: Array as PropType },
+ size: { type: String as PropType, default: 'md' },
+ vertical: { type: Boolean, default: false },
// events
- 'onUpdate:value': IxPropTypes.emit<(value: any[]) => void>(),
- onChange: IxPropTypes.emit<(newValue: any[], oldValue: any[]) => void>(),
-}
+ 'onUpdate:value': { type: [Function, Array] as PropType void>> },
+ onChange: { type: [Function, Array] as PropType void>> },
+} as const
export type CheckboxGroupProps = ExtractInnerPropTypes
export type CheckboxGroupPublicProps = Omit, 'options'>
diff --git a/packages/components/radio/demo/VerticalGroup.vue b/packages/components/radio/demo/VerticalGroup.vue
index 42a17da9b..d7161b8ee 100644
--- a/packages/components/radio/demo/VerticalGroup.vue
+++ b/packages/components/radio/demo/VerticalGroup.vue
@@ -1,14 +1,12 @@
-
-
- A
- B
- C
-
- More...
-
-
-
+
+ A
+ B
+ C
+
+ More...
+
+
diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md
index 6fec153c0..ad3531d8e 100644
--- a/packages/components/radio/docs/Index.zh.md
+++ b/packages/components/radio/docs/Index.zh.md
@@ -48,6 +48,7 @@ subtitle: 单选框
| `name` | 设置单选框组内的 `IxRadio` 的原生 `name` 属性 | `string` | - | - | - |
| `mode` | 设置单选框组内 `IxRadio` 的 `mode` | `'default' \| 'primary'`| - | - | - |
| `size` | 设置单选框组内 `IxRadio` 的 `size` | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向,可设`true`为垂直排列 |
| `onChange` | 选中值发生变化后的回调 | `(value: any, oldValue: any) => void`| - | - | - |
```ts
@@ -96,4 +97,4 @@ export interface RadioData extends RadioProps {
| `@radio-dot-size` | `@radio-box-size - 8px` | - | - |
| `@radio-label-padding` | `0 @spacing-sm` | - | - |
| `@radio-group-item-margin-right` | `@spacing-sm` | - | - |
-
\ No newline at end of file
+
diff --git a/packages/components/radio/src/RadioGroup.tsx b/packages/components/radio/src/RadioGroup.tsx
index 8c2ab2b8a..5893f2bf9 100644
--- a/packages/components/radio/src/RadioGroup.tsx
+++ b/packages/components/radio/src/RadioGroup.tsx
@@ -12,6 +12,7 @@ import { isNil } from 'lodash-es'
import { Logger, convertCssPixel } from '@idux/cdk/utils'
import { useGlobalConfig } from '@idux/components/config'
import { useFormAccessor } from '@idux/components/form'
+import { IxSpace } from '@idux/components/space'
import Radio from './Radio'
import { radioGroupToken } from './token'
@@ -43,7 +44,7 @@ export default defineComponent({
})
return () => {
- const { options, dataSource } = props
+ const { options, dataSource, vertical } = props
if (options) {
Logger.warn('components/radio', '`options` was deprecated, please use `dataSource` instead')
}
@@ -59,7 +60,7 @@ export default defineComponent({
}
return (
- {children}
+ {vertical ? {children} : children}
)
}
diff --git a/packages/components/radio/src/types.ts b/packages/components/radio/src/types.ts
index cbffc9b44..46c1cfa4f 100644
--- a/packages/components/radio/src/types.ts
+++ b/packages/components/radio/src/types.ts
@@ -7,31 +7,31 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes } from 'vue'
+import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes, PropType } from 'vue'
import { controlPropDef } from '@idux/cdk/forms'
-import { type ExtractInnerPropTypes, type ExtractPublicPropTypes, IxPropTypes, type VKey } from '@idux/cdk/utils'
+import { type ExtractInnerPropTypes, type ExtractPublicPropTypes, MaybeArray, type VKey } from '@idux/cdk/utils'
import { type FormSize } from '@idux/components/form'
export const radioProps = {
control: controlPropDef,
- checked: IxPropTypes.bool,
+ checked: { type: Boolean, default: undefined },
- autofocus: IxPropTypes.bool.def(false),
- buttoned: IxPropTypes.bool,
+ autofocus: { type: Boolean, default: false },
+ buttoned: { type: Boolean, default: undefined },
- disabled: IxPropTypes.bool,
- label: IxPropTypes.string,
- mode: IxPropTypes.oneOf(['default', 'primary']),
- size: IxPropTypes.oneOf(['sm', 'md', 'lg']),
- value: IxPropTypes.any,
+ disabled: { type: Boolean, default: undefined },
+ label: { type: String, default: undefined },
+ mode: { type: String as PropType, default: undefined },
+ size: { type: String as PropType, default: undefined },
+ value: { type: null, default: undefined },
// events
- 'onUpdate:checked': IxPropTypes.emit<(checked: boolean) => void>(),
- onChange: IxPropTypes.emit<(checked: boolean, oldChecked: boolean) => void>(),
- onBlur: IxPropTypes.emit<(evt: FocusEvent) => void>(),
- onFocus: IxPropTypes.emit<(evt: FocusEvent) => void>(),
-}
+ 'onUpdate:checked': { type: [Function, Array] as PropType void>> },
+ onChange: { type: [Function, Array] as PropType void>> },
+ onBlur: { type: [Function, Array] as PropType void>> },
+ onFocus: { type: [Function, Array] as PropType void>> },
+} as const
export type RadioProps = ExtractInnerPropTypes
export type RadioPublicProps = ExtractPublicPropTypes
@@ -47,24 +47,25 @@ export type RadioInstance = InstanceType(),
- disabled: IxPropTypes.bool.def(false),
- gap: IxPropTypes.oneOfType([Number, String]),
- name: IxPropTypes.string,
- mode: IxPropTypes.oneOf(['default', 'primary']),
+ buttoned: { type: Boolean, default: false },
+ dataSource: { type: Array as PropType },
+ disabled: { type: Boolean, default: false },
+ gap: { type: [Number, String] as PropType, default: undefined },
+ name: { type: String, default: undefined },
+ mode: { type: String as PropType, default: undefined },
/**
* @deprecated please use `dataSource` instead'
*/
- options: IxPropTypes.array(),
- size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
+ options: { type: Array as PropType },
+ size: { type: String as PropType, default: 'md' },
+ vertical: { type: Boolean, default: false },
// events
- 'onUpdate:value': IxPropTypes.emit<(value: any) => void>(),
- onChange: IxPropTypes.emit<(value: any, oldValue: any) => void>(),
-}
+ 'onUpdate:value': { type: [Function, Array] as PropType void>> },
+ onChange: { type: [Function, Array] as PropType void>> },
+} as const
export type RadioGroupProps = ExtractInnerPropTypes
export type RadioGroupPublicProps = Omit, 'options'>