Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(comp:checkbox,comp:radio): add group vertical props #975

Merged
merged 1 commit into from
Jun 23, 2022
Merged

feat(comp:checkbox,comp:radio): add group vertical props #975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 64 additions & 63 deletions packages/components/checkbox/docs/Index.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,66 @@
---
category: components
type: 数据录入
title: Checkbox
subtitle: 复选框
cover:
---

## API

### IxCheckbox

#### CheckboxProps

除以下表格之外还支持原生 `<input type="checkbox" />` 元素的所有属性。

| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
| --- | --- | --- | --- | --- | --- |
| `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

除以下表格之外还支持原生 `<input type="checkbox" />` 元素的所有属性。

| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
| --- | --- | --- | --- | --- | --- |
| `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
}
```

<!--- insert less variable begin --->
## 主题变量

Expand Down Expand Up @@ -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` | - | - |
<!--- insert less variable end --->
<!--- insert less variable end --->
6 changes: 4 additions & 2 deletions packages/components/checkbox/src/CheckboxGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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')
}
Expand All @@ -58,7 +60,7 @@ export default defineComponent({
}
return (
<div class={classes.value} style={style.value}>
{children}
{vertical ? <IxSpace vertical={true}>{children}</IxSpace> : children}
</div>
)
}
Expand Down
59 changes: 31 additions & 28 deletions packages/components/checkbox/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<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<FormSize>(['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<string | number | boolean>, default: true },
falseValue: { type: [String, Number, Boolean] as PropType<string | number | boolean>, default: false },
value: { type: null, default: undefined },
size: { type: String as PropType<FormSize>, 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<MaybeArray<(checked: CheckValue) => void>> },
onChange: {
type: [Function, Array] as PropType<MaybeArray<(newChecked: CheckValue, oldChecked: CheckValue) => void>>,
},
onBlur: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
onFocus: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
} as const

export type CheckboxProps = ExtractInnerPropTypes<typeof checkboxProps>
export type CheckboxPublicProps = ExtractPublicPropTypes<typeof checkboxProps>
Expand All @@ -49,23 +51,24 @@ export type CheckboxInstance = InstanceType<DefineComponent<CheckboxProps, Check

export const checkboxGroupProps = {
control: controlPropDef,
value: IxPropTypes.array(),
value: { type: Array, default: undefined },

buttoned: IxPropTypes.bool.def(false),
dataSource: IxPropTypes.array<CheckboxData>(),
disabled: IxPropTypes.bool.def(false),
gap: IxPropTypes.oneOfType([Number, String]),
name: IxPropTypes.string,
buttoned: { type: Boolean, default: false },
dataSource: { type: Array as PropType<CheckboxData[]> },
disabled: { type: Boolean, default: false },
gap: { type: [Number, String] as PropType<number | string>, default: undefined },
name: { type: String, default: undefined },
/**
* @deprecated please use `dataSource` instead'
*/
options: IxPropTypes.array<CheckboxData>(),
size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
options: { type: Array as PropType<CheckboxData[]> },
size: { type: String as PropType<FormSize>, 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<MaybeArray<(value: any) => void>> },
onChange: { type: [Function, Array] as PropType<MaybeArray<(value: any, oldValue: any) => void>> },
} as const

export type CheckboxGroupProps = ExtractInnerPropTypes<typeof checkboxGroupProps>
export type CheckboxGroupPublicProps = Omit<ExtractPublicPropTypes<typeof checkboxGroupProps>, 'options'>
Expand Down
18 changes: 8 additions & 10 deletions packages/components/radio/demo/VerticalGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<template>
<IxRadioGroup v-model:value="value">
<IxSpace vertical>
<IxRadio value="a">A</IxRadio>
<IxRadio value="b">B</IxRadio>
<IxRadio value="c">C</IxRadio>
<IxRadio value="d">
More...
<IxInput v-if="value === 'd'" v-model:value="moreValue" style="width: 100px; margin-left: 16px"></IxInput>
</IxRadio>
</IxSpace>
<IxRadioGroup v-model:value="value" vertical>
<IxRadio value="a">A</IxRadio>
<IxRadio value="b">B</IxRadio>
<IxRadio value="c">C</IxRadio>
<IxRadio value="d">
More...
<IxInput v-if="value === 'd'" v-model:value="moreValue" style="width: 100px; margin-left: 16px"></IxInput>
</IxRadio>
</IxRadioGroup>
</template>

Expand Down
3 changes: 2 additions & 1 deletion packages/components/radio/docs/Index.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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` | - | - |
<!--- insert less variable end --->
<!--- insert less variable end --->
5 changes: 3 additions & 2 deletions packages/components/radio/src/RadioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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')
}
Expand All @@ -59,7 +60,7 @@ export default defineComponent({
}
return (
<div class={classes.value} style={style.value}>
{children}
{vertical ? <IxSpace vertical={true}>{children}</IxSpace> : children}
</div>
)
}
Expand Down
55 changes: 28 additions & 27 deletions packages/components/radio/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<RadioMode>(['default', 'primary']),
size: IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg']),
value: IxPropTypes.any,
disabled: { type: Boolean, default: undefined },
label: { type: String, default: undefined },
mode: { type: String as PropType<RadioMode>, default: undefined },
size: { type: String as PropType<FormSize>, 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<MaybeArray<(checked: boolean) => void>> },
onChange: { type: [Function, Array] as PropType<MaybeArray<(checked: boolean, oldChecked: boolean) => void>> },
onBlur: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
onFocus: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
} as const

export type RadioProps = ExtractInnerPropTypes<typeof radioProps>
export type RadioPublicProps = ExtractPublicPropTypes<typeof radioProps>
Expand All @@ -47,24 +47,25 @@ export type RadioInstance = InstanceType<DefineComponent<RadioProps, RadioBindin

export const radioGroupProps = {
control: controlPropDef,
value: IxPropTypes.any,
value: { type: null, default: undefined },

buttoned: IxPropTypes.bool.def(false),
dataSource: IxPropTypes.array<RadioData>(),
disabled: IxPropTypes.bool.def(false),
gap: IxPropTypes.oneOfType([Number, String]),
name: IxPropTypes.string,
mode: IxPropTypes.oneOf<RadioMode>(['default', 'primary']),
buttoned: { type: Boolean, default: false },
dataSource: { type: Array as PropType<RadioData[]> },
disabled: { type: Boolean, default: false },
gap: { type: [Number, String] as PropType<number | string>, default: undefined },
name: { type: String, default: undefined },
mode: { type: String as PropType<RadioMode>, default: undefined },
/**
* @deprecated please use `dataSource` instead'
*/
options: IxPropTypes.array<RadioData>(),
size: IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg']).def('md'),
options: { type: Array as PropType<RadioData[]> },
size: { type: String as PropType<FormSize>, 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<MaybeArray<(value: any) => void>> },
onChange: { type: [Function, Array] as PropType<MaybeArray<(value: any, oldValue: any) => void>> },
} as const

export type RadioGroupProps = ExtractInnerPropTypes<typeof radioGroupProps>
export type RadioGroupPublicProps = Omit<ExtractPublicPropTypes<typeof radioGroupProps>, 'options'>
Expand Down