diff --git a/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap b/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap index 8811330ef..0368a00bf 100644 --- a/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap +++ b/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap @@ -1,11 +1,17 @@ // Vitest Snapshot v1 exports[`CheckboxGroup > render work 1`] = ` -"
" +"
+
+
+
+
+
+
" `; 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..1015ea240 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,7 @@ 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 +59,7 @@ export default defineComponent({ } return (
- {children} + {children}
) } diff --git a/packages/components/checkbox/src/types.ts b/packages/components/checkbox/src/types.ts index ccf5f210b..4e0cd4805 100644 --- a/packages/components/checkbox/src/types.ts +++ b/packages/components/checkbox/src/types.ts @@ -8,31 +8,30 @@ /* 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 { FormSize } from '@idux/components/form' export const checkboxProps = { control: controlPropDef, - checked: IxPropTypes.oneOfType([String, Number, Boolean]), + checked: { type: [String, Number, Boolean], 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], default: true }, + falseValue: { type: [String, Number, Boolean], 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 as PropType<(checked: CheckValue) => void> }, + onChange: { type: Function as PropType<(newChecked: CheckValue, oldChecked: CheckValue) => void> }, + onBlur: { type: Function as PropType<(evt: FocusEvent) => void> }, + onFocus: { type: Function as PropType<(evt: FocusEvent) => void> }, } export type CheckboxProps = ExtractInnerPropTypes @@ -49,22 +48,23 @@ 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, default: undefined }, + disabled: { type: Boolean, default: false }, + gap: { type: [Number, String], 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, default: undefined }, + 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 as PropType<(value: any) => void> }, + onChange: { type: Function as PropType<(value: any, oldValue: any) => void> }, } export type CheckboxGroupProps = ExtractInnerPropTypes diff --git a/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap b/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap index 3e1320093..6de88202a 100644 --- a/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap +++ b/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap @@ -1,3 +1,12 @@ // Vitest Snapshot v1 -exports[`RadioGroup > render work 1`] = `"
"`; +exports[`RadioGroup > render work 1`] = ` +"
+
+
+
+
+
+
+
" +`; 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 @@ 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..8d5adaaa6 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} + {children}
) } diff --git a/packages/components/radio/src/types.ts b/packages/components/radio/src/types.ts index cbffc9b44..a9f62f337 100644 --- a/packages/components/radio/src/types.ts +++ b/packages/components/radio/src/types.ts @@ -7,30 +7,30 @@ /* 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, 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 as PropType<(checked: boolean) => void> }, + onChange: { type: Function as PropType<(checked: boolean, oldChecked: boolean) => void> }, + onBlur: { type: Function as PropType<(evt: FocusEvent) => void> }, + onFocus: { type: Function as PropType<(evt: FocusEvent) => void> }, } export type RadioProps = ExtractInnerPropTypes @@ -47,23 +47,24 @@ 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, default: undefined }, + disabled: { type: Boolean, default: false }, + gap: { type: [Number, String], 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, default: undefined }, + 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 as PropType<(value: any) => void> }, + onChange: { type: Function as PropType<(value: any, oldValue: any) => void> }, } export type RadioGroupProps = ExtractInnerPropTypes