From aabb98a540f9b736ab5f7c19aeeb8cd2b70c40f5 Mon Sep 17 00:00:00 2001 From: tuchg Date: Thu, 23 Jun 2022 18:55:54 +0800 Subject: [PATCH] feat(comp:checkbox,comp:radio): add group vertical props --- packages/components/checkbox/docs/Index.zh.md | 127 +++++++++--------- .../components/checkbox/src/CheckboxGroup.tsx | 6 +- packages/components/checkbox/src/types.ts | 59 ++++---- .../components/radio/demo/VerticalGroup.vue | 18 ++- packages/components/radio/docs/Index.zh.md | 3 +- packages/components/radio/src/RadioGroup.tsx | 5 +- packages/components/radio/src/types.ts | 55 ++++---- 7 files changed, 140 insertions(+), 133 deletions(-) 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 @@ 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'>