Skip to content
New issue

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

#

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

Already on GitHub? # to your account

feat(tag): sync api #1294

Merged
merged 5 commits into from
Apr 9, 2024
Merged

feat(tag): sync api #1294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
47ab6bc
feat(tag): sync api
liweijie0812 Apr 8, 2024
6492031
feat(tag): sync api
liweijie0812 Apr 8, 2024
2db0275
feat(tag): sync api
liweijie0812 Apr 8, 2024
2aeeb8e
feat(tag): sync api
liweijie0812 Apr 8, 2024
f657307
feat(tag): sync api
liweijie0812 Apr 8, 2024
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
13 changes: 10 additions & 3 deletions src/tag/check-tag-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ export default {
default: undefined,
},
/** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
defaultChecked: Boolean,
defaultChecked: {
type: Boolean,
default: undefined,
},
/** 标签是否可关闭 */
closable: Boolean,
/** 组件子元素；传入数组时：[选中内容，非选中内容] */
content: {
type: [String, Number, Array, Function] as PropType<TdCheckTagProps['content']>,
Expand All @@ -31,9 +36,9 @@ export default {
disabled: Boolean,
/** 标签中的图标，可自定义图标呈现 */
icon: {
type: [Function] as PropType<TdCheckTagProps['icon']>,
type: Function as PropType<TdCheckTagProps['icon']>,
},
/** 已废弃。标签类型，有三种：方形、圆角方形、标记型 */
/** 标签类型，有三种：方形、圆角方形、标记型 */
shape: {
type: String as PropType<TdCheckTagProps['shape']>,
default: 'square' as TdCheckTagProps['shape'],
Expand Down Expand Up @@ -64,4 +69,6 @@ export default {
onChange: Function as PropType<TdCheckTagProps['onChange']>,
/** 点击标签时触发 */
onClick: Function as PropType<TdCheckTagProps['onClick']>,
/** 如果关闭按钮存在，点击关闭按钮时触发 */
onClose: Function as PropType<TdCheckTagProps['onClose']>,
};
2 changes: 1 addition & 1 deletion src/tag/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
disabled: Boolean,
/** 标签中的图标，可自定义图标呈现 */
icon: {
type: [Function] as PropType<TdTagProps['icon']>,
type: Function as PropType<TdTagProps['icon']>,
default: undefined,
},
/** 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 */
Expand Down
30 changes: 17 additions & 13 deletions src/tag/tag.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:: BASE_DOC ::

## API

### Tag Props

name | type | default | description | required
Expand All @@ -11,10 +12,10 @@ default | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
disabled | Boolean | false | \- | N
icon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
maxWidth | String / Number | - | \- | N
shape | String | square | options：square/round/mark | N
size | String | medium | options：small/medium/large/extra-large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
theme | String | default | options：default/primary/warning/danger/success | N
variant | String | dark | options：dark/light/outline/light-outline | N
shape | String | square | options: square/round/mark | N
size | String | medium | options: small/medium/large/extra-large | N
theme | String | default | options: default/primary/warning/danger/success | N
variant | String | dark | options: dark/light/outline/light-outline | N
onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N

Expand All @@ -25,32 +26,35 @@ name | params | description
click | `(context: { e: MouseEvent })` | \-
close | `(context: { e: MouseEvent })` | \-


### CheckTag Props

name | type | default | description | required
-- | -- | -- | -- | --
checked | Boolean | - | `v-model` and `v-model:checked` is supported | N
defaultChecked | Boolean | - | uncontrolled property | N
closable | Boolean | false | `deprecated` | N
checked | Boolean | undefined | `v-model` and `v-model:checked` is supported | N
defaultChecked | Boolean | undefined | uncontrolled property | N
closable | Boolean | false | \- | N
content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
shape | String | square | `deprecated`。options：square/round/mark | N
size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
variant | String | dark | options：dark/light/outline/light-outline | N
icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
shape | String | square | options: square/round/mark | N
size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
variant | String | dark | options: dark/light/outline/light-outline | N
onChange | Function | | Typescript：`(checked: boolean) => void`<br/> | N
onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClose | Function | | Typescript：`() => void`<br/> | N

### CheckTag Events

name | params | description
-- | -- | --
change | `(checked: boolean)` | \-
click | `(context: { e: MouseEvent })` | \-
close | \- | \-

### CSS 变量

### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
Expand Down Expand Up @@ -88,4 +92,4 @@ Name | Default Value | Description
--td-tag-warning-light-color | @warning-color-1 | -
--td-tag-close-icon-color | @font-gray-3 | -
--td-tag-mark-border-radius | @tag-round-border-radius | -
--td-tag-round-border-radius | 999px | -
--td-tag-round-border-radius | 999px | -
22 changes: 13 additions & 9 deletions src/tag/tag.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
:: BASE_DOC ::

## API

### Tag Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
closable | Boolean | false | 标签是否可关闭 | N
content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
Expand All @@ -12,7 +13,7 @@ disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。
icon | Slot / Function | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N
shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large | N
theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N
variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
Expand All @@ -25,32 +26,35 @@ onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
click | `(context: { e: MouseEvent })` | 点击时触发
close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发


### CheckTag Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N
defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
closable | Boolean | false | 已废弃。标签是否可关闭 | N
checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N
defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
closable | Boolean | false | 标签是否可关闭 | N
content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
icon | Slot / Function | - | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
shape | String | square | 已废弃。标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
onChange | Function | | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
onClose | Function | | TS 类型：`() => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N

### CheckTag Events

名称 | 参数 | 描述
-- | -- | --
change | `(checked: boolean)` | 状态切换时触发
click | `(context: { e: MouseEvent })` | 点击标签时触发

close | \- | 如果关闭按钮存在，点击关闭按钮时触发

### CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
Expand Down Expand Up @@ -88,4 +92,4 @@ click | `(context: { e: MouseEvent })` | 点击标签时触发
--td-tag-warning-light-color | @warning-color-1 | -
--td-tag-close-icon-color | @font-gray-3 | -
--td-tag-mark-border-radius | @tag-round-border-radius | -
--td-tag-round-border-radius | 999px | -
--td-tag-round-border-radius | 999px | -
12 changes: 10 additions & 2 deletions src/tag/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export interface TdTagProps {
* 标签尺寸
* @default medium
*/
size?: SizeEnum;
size?: 'small' | 'medium' | 'large' | 'extra-large';
/**
* 组件风格，用于描述组件不同的应用场景
* @default default
Expand Down Expand Up @@ -76,6 +76,11 @@ export interface TdCheckTagProps {
* 标签选中的状态，默认风格（theme=default）才有选中态
*/
modelValue?: boolean;
/**
* 标签是否可关闭
* @default false
*/
closable?: boolean;
/**
* 组件子元素；传入数组时：[选中内容，非选中内容]
*/
Expand All @@ -96,7 +101,6 @@ export interface TdCheckTagProps {
/**
* 标签类型，有三种：方形、圆角方形、标记型
* @default square
* @deprecated
*/
shape?: 'square' | 'round' | 'mark';
/**
Expand All @@ -117,4 +121,8 @@ export interface TdCheckTagProps {
* 点击标签时触发
*/
onClick?: (context: { e: MouseEvent }) => void;
/**
* 如果关闭按钮存在，点击关闭按钮时触发
*/
onClose?: () => void;
}
Loading