@next-bricks/presentational-bricks 1.339.1 → 1.339.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/deploy/contract.yaml +126 -126
  2. package/dist/bricks.json +32 -32
  3. package/dist/{index.8e5be25b.js → index.09224616.js} +2 -2
  4. package/dist/{index.8e5be25b.js.map → index.09224616.js.map} +1 -1
  5. package/docs/brick-result.md +197 -0
  6. package/docs/brick-result.react.md +177 -0
  7. package/docs/brick-user.md +135 -0
  8. package/docs/brick-user.react.md +139 -0
  9. package/docs/brick-value-mapping.md +240 -0
  10. package/docs/brick-value-mapping.react.md +181 -0
  11. package/docs/cost-time.md +58 -0
  12. package/docs/cost-time.react.md +60 -0
  13. package/docs/datetime-selector.md +146 -0
  14. package/docs/datetime-selector.react.md +150 -0
  15. package/docs/general-label.md +115 -0
  16. package/docs/general-label.react.md +131 -0
  17. package/package.json +5 -4
package/docs/datetime-selector.md ADDED
@@ -0,0 +1,146 @@
1
+ ---
2
+ tagName: presentational-bricks.datetime-selector
3
+ displayName: WrappedPresentationalBricksDatetimeSelector
4
+ description: 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.datetime-selector
10
+
11
+ > 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | --------------------- | ------------------ | ---- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | from | `string` | 是 | - | 默认起始时间，支持任意时间范围,相关规则请按下列规则书写（"now-1h", "now-1d", "now/d", "now-7d", "now-30d") [正则表达式](https://github.com/easyops-cn/next-libs/blob/207fe7ee3ac010ab860c23cd062216c8ca612f0c/libs/datetime-components/src/processor/parseDatetimeRange.ts#L18) 注意当通过 \${query.from=now/d} 赋默认值给 form 属性时，由于 [placeholder 占位符语法](https://admin.easyops.local/next-docs/docs/brick-next/evaluate-placeholders) 不支持 `/` 的特殊字符解析，所以该值需要用字符串的形式来书写（如 demo 所示）。 |
18
+ | to | `string` | - | - | 默认结束时间, 相关规则请参照 from 属性 |
19
+ | shouldUpdateUrlParams | `any` | - | `true` | 是否更新 url 参数并刷新页面 |
20
+ | type | `any` | - | `"default" as RangeType` | 时间选择器支持两种类型，一种是默认的，固定显示常用的几种时间范围，一种是自定义的，可根据需求定制特定时间范围 |
21
+ | customTimeRange | `RangeText[]` | - | - | 当 type 为 custom 时，配置定制的时间范围，目前暂支持如下时间点，当 type 为 default 时，该配置项无效 |
22
+ | placement | `TooltipPlacement` | - | - | 弹出位置 |
23
+ | resolution | `ResolutionProps` | - | `"ms"` | 指定时间戳的单位，目前支持秒和毫秒，默认为毫秒，切换为秒时，url 和事件传出的时间戳都会调整成以秒为单位 |
24
+ | size | `ButtonSize` | - | - | 打开选择器的按钮的大小 |
25
+ | selectNearDays | `number` | - | - | 限制选择近 n 天 |
26
+ | format | `string` | - | - | 自定义日期显示格式，例如 "YYYY-MM-DD HH:mm:ss" |
27
+ | rangeDays | `number` | - | - | 限制选择范围天数 |
28
+
29
+ ## Events
30
+
31
+ | 事件 | detail | 说明 |
32
+ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
33
+ | datetime.selected | `\| { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number } }` — { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number }} | [已废弃]选择时间 |
34
+ | datetime.selected.v2 | `{ from: number; to: number }` — { from: number; to: number } | 选择当前时间戳，与 `datetime.selected` 不同的是会把时间统一转换成时间戳的形式输出 |
35
+ | datetime.selected.v3 | `{ from: number; to: number } \| { from: string }` — { from: number; to: number } \| { from: string } | 选择当前时间，与 `datetime.selected` 不同的是虽然还是区分时间戳和时间段两种类型，但是调整了输出字段格式, 这样更利于某些监控场景的使用和编排 |
36
+
37
+ ## Examples
38
+
39
+ ### Basic - 默认时间范围选项
40
+
41
+ 使用默认的时间范围选项，from 设置初始起始时间，选择后通过 datetime.selected.v2 事件输出时间戳。
42
+
43
+ ```yaml preview
44
+ - brick: presentational-bricks.datetime-selector
45
+ properties:
46
+ from: "<% QUERY.from || 'now/d' %>"
47
+ to: "<% QUERY.to %>"
48
+ events:
49
+ datetime.selected.v2:
50
+ action: console.log
51
+ datetime.selected.v3:
52
+ action: console.log
53
+ ```
54
+
55
+ ### Basic - 自定义时间范围选项
56
+
57
+ 设置 type 为 custom 并通过 customTimeRange 配置自定义时间范围列表，同时关闭 URL 参数更新。
58
+
59
+ ```yaml preview
60
+ - brick: presentational-bricks.datetime-selector
61
+ properties:
62
+ shouldUpdateUrlParams: false
63
+ from: "<% QUERY.from || 'now/d' %>"
64
+ to: "<% QUERY.to %>"
65
+ type: custom
66
+ customTimeRange:
67
+ - range: "now-1h"
68
+ text: "近1小时"
69
+ - range: "now-1d"
70
+ text: "近24小时"
71
+ - range: "now/d"
72
+ text: "今天"
73
+ - range: "now-7d"
74
+ text: "近7天"
75
+ - range: "now-30d"
76
+ text: "近30天"
77
+ - range: "now-1y"
78
+ text: "近一年"
79
+ ```
80
+
81
+ ### Styling - 设置按钮大小
82
+
83
+ 通过 size 属性控制时间选择器触发按钮的大小。
84
+
85
+ ```yaml preview
86
+ - brick: presentational-bricks.datetime-selector
87
+ properties:
88
+ from: "now-7d"
89
+ size: small
90
+ shouldUpdateUrlParams: false
91
+ ```
92
+
93
+ ### Styling - 设置弹出位置
94
+
95
+ 通过 placement 属性控制时间选择器弹出面板的位置。
96
+
97
+ ```yaml preview
98
+ - brick: presentational-bricks.datetime-selector
99
+ properties:
100
+ from: "now-7d"
101
+ placement: topLeft
102
+ shouldUpdateUrlParams: false
103
+ ```
104
+
105
+ ### Advanced - 指定时间戳单位为秒
106
+
107
+ 设置 resolution 为 "s"，事件输出的时间戳和 URL 参数中的时间戳都将以秒为单位。
108
+
109
+ ```yaml preview
110
+ - brick: presentational-bricks.datetime-selector
111
+ properties:
112
+ from: "now-1d"
113
+ resolution: "s"
114
+ shouldUpdateUrlParams: false
115
+ events:
116
+ datetime.selected.v2:
117
+ action: console.log
118
+ ```
119
+
120
+ ### Advanced - 自定义日期显示格式
121
+
122
+ 通过 format 属性自定义日期的显示格式。
123
+
124
+ ```yaml preview
125
+ - brick: presentational-bricks.datetime-selector
126
+ properties:
127
+ from: "now-7d"
128
+ format: "YYYY-MM-DD HH:mm:ss"
129
+ shouldUpdateUrlParams: false
130
+ ```
131
+
132
+ ### Advanced - 限制选择范围
133
+
134
+ 通过 selectNearDays 限制只能选择近 N 天，通过 rangeDays 限制选择的时间跨度天数。
135
+
136
+ ```yaml preview
137
+ - brick: presentational-bricks.datetime-selector
138
+ properties:
139
+ from: "now-7d"
140
+ selectNearDays: 30
141
+ rangeDays: 7
142
+ shouldUpdateUrlParams: false
143
+ events:
144
+ datetime.selected.v3:
145
+ action: console.log
146
+ ```
package/docs/datetime-selector.react.md ADDED
@@ -0,0 +1,150 @@
1
+ ---
2
+ tagName: presentational-bricks.datetime-selector
3
+ displayName: WrappedPresentationalBricksDatetimeSelector
4
+ description: 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksDatetimeSelector
10
+
11
+ > 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksDatetimeSelector } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | --------------------- | ------------------ | ---- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23
+ | from | `string` | 是 | - | 默认起始时间，支持任意时间范围,相关规则请按下列规则书写（"now-1h", "now-1d", "now/d", "now-7d", "now-30d") [正则表达式](https://github.com/easyops-cn/next-libs/blob/207fe7ee3ac010ab860c23cd062216c8ca612f0c/libs/datetime-components/src/processor/parseDatetimeRange.ts#L18) 注意当通过 \${query.from=now/d} 赋默认值给 form 属性时，由于 [placeholder 占位符语法](https://admin.easyops.local/next-docs/docs/brick-next/evaluate-placeholders) 不支持 `/` 的特殊字符解析，所以该值需要用字符串的形式来书写（如 demo 所示）。 |
24
+ | to | `string` | - | - | 默认结束时间, 相关规则请参照 from 属性 |
25
+ | shouldUpdateUrlParams | `any` | - | `true` | 是否更新 url 参数并刷新页面 |
26
+ | type | `any` | - | `"default" as RangeType` | 时间选择器支持两种类型，一种是默认的，固定显示常用的几种时间范围，一种是自定义的，可根据需求定制特定时间范围 |
27
+ | customTimeRange | `RangeText[]` | - | - | 当 type 为 custom 时，配置定制的时间范围，目前暂支持如下时间点，当 type 为 default 时，该配置项无效 |
28
+ | placement | `TooltipPlacement` | - | - | 弹出位置 |
29
+ | resolution | `ResolutionProps` | - | `"ms"` | 指定时间戳的单位，目前支持秒和毫秒，默认为毫秒，切换为秒时，url 和事件传出的时间戳都会调整成以秒为单位 |
30
+ | size | `ButtonSize` | - | - | 打开选择器的按钮的大小 |
31
+ | selectNearDays | `number` | - | - | 限制选择近 n 天 |
32
+ | format | `string` | - | - | 自定义日期显示格式，例如 "YYYY-MM-DD HH:mm:ss" |
33
+ | rangeDays | `number` | - | - | 限制选择范围天数 |
34
+
35
+ ## Events
36
+
37
+ | 事件 | detail | 说明 |
38
+ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
39
+ | onDatetimeSelected | `\| { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number } }` — { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number }} | [已废弃]选择时间 |
40
+ | onDatetimeSelectedV2 | `{ from: number; to: number }` — { from: number; to: number } | 选择当前时间戳，与 `onDatetimeSelected` 不同的是会把时间统一转换成时间戳的形式输出 |
41
+ | onDatetimeSelectedV3 | `{ from: number; to: number } \| { from: string }` — { from: number; to: number } \| { from: string } | 选择当前时间，与 `onDatetimeSelected` 不同的是虽然还是区分时间戳和时间段两种类型，但是调整了输出字段格式, 这样更利于某些监控场景的使用和编排 |
42
+
43
+ ## Examples
44
+
45
+ ### Basic - 默认时间范围选项
46
+
47
+ 使用默认的时间范围选项，from 设置初始起始时间，选择后通过事件输出时间戳。
48
+
49
+ ```tsx
50
+ <WrappedPresentationalBricksDatetimeSelector
51
+ from="now/d"
52
+ onDatetimeSelectedV2={(e: CustomEvent<{ from: number; to: number }>) => {
53
+ console.log(e.detail);
54
+ }}
55
+ onDatetimeSelectedV3={(
56
+ e: CustomEvent<{ from: number; to: number } | { from: string }>
57
+ ) => {
58
+ console.log(e.detail);
59
+ }}
60
+ />
61
+ ```
62
+
63
+ ### Basic - 自定义时间范围选项
64
+
65
+ 设置 type 为 custom 并通过 customTimeRange 配置自定义时间范围列表，同时关闭 URL 参数更新。
66
+
67
+ ```tsx
68
+ <WrappedPresentationalBricksDatetimeSelector
69
+ shouldUpdateUrlParams={false}
70
+ from="now/d"
71
+ type="custom"
72
+ customTimeRange={[
73
+ { range: "now-1h", text: "近1小时" },
74
+ { range: "now-1d", text: "近24小时" },
75
+ { range: "now/d", text: "今天" },
76
+ { range: "now-7d", text: "近7天" },
77
+ { range: "now-30d", text: "近30天" },
78
+ { range: "now-1y", text: "近一年" },
79
+ ]}
80
+ />
81
+ ```
82
+
83
+ ### Styling - 设置按钮大小
84
+
85
+ 通过 size 属性控制时间选择器触发按钮的大小。
86
+
87
+ ```tsx
88
+ <WrappedPresentationalBricksDatetimeSelector
89
+ from="now-7d"
90
+ size="small"
91
+ shouldUpdateUrlParams={false}
92
+ />
93
+ ```
94
+
95
+ ### Styling - 设置弹出位置
96
+
97
+ 通过 placement 属性控制时间选择器弹出面板的位置。
98
+
99
+ ```tsx
100
+ <WrappedPresentationalBricksDatetimeSelector
101
+ from="now-7d"
102
+ placement="topLeft"
103
+ shouldUpdateUrlParams={false}
104
+ />
105
+ ```
106
+
107
+ ### Advanced - 指定时间戳单位为秒
108
+
109
+ 设置 resolution 为 "s"，事件输出的时间戳和 URL 参数中的时间戳都将以秒为单位。
110
+
111
+ ```tsx
112
+ <WrappedPresentationalBricksDatetimeSelector
113
+ from="now-1d"
114
+ resolution="s"
115
+ shouldUpdateUrlParams={false}
116
+ onDatetimeSelectedV2={(e: CustomEvent<{ from: number; to: number }>) => {
117
+ console.log(e.detail);
118
+ }}
119
+ />
120
+ ```
121
+
122
+ ### Advanced - 自定义日期显示格式
123
+
124
+ 通过 format 属性自定义日期的显示格式。
125
+
126
+ ```tsx
127
+ <WrappedPresentationalBricksDatetimeSelector
128
+ from="now-7d"
129
+ format="YYYY-MM-DD HH:mm:ss"
130
+ shouldUpdateUrlParams={false}
131
+ />
132
+ ```
133
+
134
+ ### Advanced - 限制选择范围
135
+
136
+ 通过 selectNearDays 限制只能选择近 N 天，通过 rangeDays 限制选择的时间跨度天数。
137
+
138
+ ```tsx
139
+ <WrappedPresentationalBricksDatetimeSelector
140
+ from="now-7d"
141
+ selectNearDays={30}
142
+ rangeDays={7}
143
+ shouldUpdateUrlParams={false}
144
+ onDatetimeSelectedV3={(
145
+ e: CustomEvent<{ from: number; to: number } | { from: string }>
146
+ ) => {
147
+ console.log(e.detail);
148
+ }}
149
+ />
150
+ ```
package/docs/general-label.md ADDED
@@ -0,0 +1,115 @@
1
+ ---
2
+ tagName: presentational-bricks.general-label
3
+ displayName: WrappedPresentationalBricksGeneralLabel
4
+ description: 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.general-label
10
+
11
+ > 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ---------- | ---------- | ---- | ------ | --------------------------------------------------- |
17
+ | text | `string` | - | - | 文字内容 |
18
+ | prefixIcon | `MenuIcon` | - | - | 前缀图标 |
19
+ | suffixIcon | `MenuIcon` | - | - | 后缀图标 |
20
+ | url | `string` | - | - | 链接的 URL |
21
+ | href | `string` | - | - | 外链地址，使用原生 `<a>` 标签跳转，通常用于外部链接 |
22
+ | dataSource | `any` | - | - | `label.click`事件的传出的数据 |
23
+ | data | `any` | - | - | `label.click`事件的详情 |
24
+
25
+ ## Events
26
+
27
+ | 事件 | detail | 说明 |
28
+ | ----------- | ------------------------------------------------------------------------------------ | ----------------- |
29
+ | label.click | 编排者通过 `dataSource` 属性传入的自定义数据（若未设置则回退到已废弃的 `data` 属性） | 点击 label 时触发 |
30
+
31
+ ## Examples
32
+
33
+ ### Basic
34
+
35
+ #### 展示带后缀图标的文本标签
36
+
37
+ ```yaml preview
38
+ - brick: presentational-bricks.general-label
39
+ properties:
40
+ text: "2020-03-14"
41
+ suffixIcon:
42
+ lib: antd
43
+ icon: calendar
44
+ theme: outlined
45
+ color: "#0071eb"
46
+ ```
47
+
48
+ #### 展示带前缀图标的文本标签
49
+
50
+ ```yaml preview
51
+ - brick: presentational-bricks.general-label
52
+ properties:
53
+ text: "1.0.0"
54
+ prefixIcon:
55
+ lib: antd
56
+ icon: tag
57
+ theme: outlined
58
+ ```
59
+
60
+ #### 仅展示纯文本标签
61
+
62
+ ```yaml preview
63
+ - brick: presentational-bricks.general-label
64
+ properties:
65
+ text: "示例文本"
66
+ ```
67
+
68
+ ### Link
69
+
70
+ #### 使用 url 属性配置内部链接跳转
71
+
72
+ ```yaml preview
73
+ - brick: presentational-bricks.general-label
74
+ properties:
75
+ text: "1.0.0"
76
+ prefixIcon:
77
+ lib: antd
78
+ icon: tag
79
+ theme: outlined
80
+ url: "/resource-monitor"
81
+ ```
82
+
83
+ #### 使用 href 属性配置外部链接跳转
84
+
85
+ ```yaml preview
86
+ - brick: presentational-bricks.general-label
87
+ properties:
88
+ text: "访问外部链接"
89
+ suffixIcon:
90
+ lib: antd
91
+ icon: link
92
+ theme: outlined
93
+ href: "https://www.example.com"
94
+ ```
95
+
96
+ ### Advanced
97
+
98
+ #### 点击标签触发事件并传出自定义数据
99
+
100
+ ```yaml preview
101
+ - brick: presentational-bricks.general-label
102
+ properties:
103
+ text: "点击触发事件"
104
+ suffixIcon:
105
+ lib: antd
106
+ icon: calendar
107
+ theme: outlined
108
+ color: "#0071eb"
109
+ dataSource:
110
+ id: 1
111
+ name: "示例数据"
112
+ events:
113
+ label.click:
114
+ action: console.log
115
+ ```
package/docs/general-label.react.md ADDED
@@ -0,0 +1,131 @@
1
+ ---
2
+ tagName: presentational-bricks.general-label
3
+ displayName: WrappedPresentationalBricksGeneralLabel
4
+ description: 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksGeneralLabel
10
+
11
+ > 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksGeneralLabel } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | ---------- | ---------- | ---- | ------ | --------------------------------------------------- |
23
+ | text | `string` | - | - | 文字内容 |
24
+ | prefixIcon | `MenuIcon` | - | - | 前缀图标 |
25
+ | suffixIcon | `MenuIcon` | - | - | 后缀图标 |
26
+ | url | `string` | - | - | 链接的 URL |
27
+ | href | `string` | - | - | 外链地址，使用原生 `<a>` 标签跳转，通常用于外部链接 |
28
+ | dataSource | `any` | - | - | `onLabelClick`事件的传出的数据 |
29
+ | data | `any` | - | - | `onLabelClick`事件的详情 |
30
+
31
+ ## Events
32
+
33
+ | 事件 | detail | 说明 |
34
+ | ------------ | ------------------------------------------------------------------------------------ | ----------------- |
35
+ | onLabelClick | 编排者通过 `dataSource` 属性传入的自定义数据（若未设置则回退到已废弃的 `data` 属性） | 点击 label 时触发 |
36
+
37
+ ## Examples
38
+
39
+ ### Basic
40
+
41
+ #### 展示带后缀图标的文本标签
42
+
43
+ ```tsx
44
+ <WrappedPresentationalBricksGeneralLabel
45
+ text="2020-03-14"
46
+ suffixIcon={{
47
+ lib: "antd",
48
+ icon: "calendar",
49
+ theme: "outlined",
50
+ color: "#0071eb",
51
+ }}
52
+ />
53
+ ```
54
+
55
+ #### 展示带前缀图标的文本标签
56
+
57
+ ```tsx
58
+ <WrappedPresentationalBricksGeneralLabel
59
+ text="1.0.0"
60
+ prefixIcon={{
61
+ lib: "antd",
62
+ icon: "tag",
63
+ theme: "outlined",
64
+ }}
65
+ />
66
+ ```
67
+
68
+ #### 仅展示纯文本标签
69
+
70
+ ```tsx
71
+ <WrappedPresentationalBricksGeneralLabel text="示例文本" />
72
+ ```
73
+
74
+ ### Link
75
+
76
+ #### 使用 url 属性配置内部链接跳转
77
+
78
+ ```tsx
79
+ <WrappedPresentationalBricksGeneralLabel
80
+ text="1.0.0"
81
+ prefixIcon={{
82
+ lib: "antd",
83
+ icon: "tag",
84
+ theme: "outlined",
85
+ }}
86
+ url="/resource-monitor"
87
+ />
88
+ ```
89
+
90
+ #### 使用 href 属性配置外部链接跳转
91
+
92
+ ```tsx
93
+ <WrappedPresentationalBricksGeneralLabel
94
+ text="访问外部链接"
95
+ suffixIcon={{
96
+ lib: "antd",
97
+ icon: "link",
98
+ theme: "outlined",
99
+ }}
100
+ href="https://www.example.com"
101
+ />
102
+ ```
103
+
104
+ ### Advanced
105
+
106
+ #### 点击标签触发事件并传出自定义数据
107
+
108
+ ```tsx
109
+ function MyComponent() {
110
+ const handleLabelClick = (event: CustomEvent) => {
111
+ console.log(event.detail);
112
+ };
113
+
114
+ return (
115
+ <WrappedPresentationalBricksGeneralLabel
116
+ text="点击触发事件"
117
+ suffixIcon={{
118
+ lib: "antd",
119
+ icon: "calendar",
120
+ theme: "outlined",
121
+ color: "#0071eb",
122
+ }}
123
+ dataSource={{
124
+ id: 1,
125
+ name: "示例数据",
126
+ }}
127
+ onLabelClick={handleLabelClick}
128
+ />
129
+ );
130
+ }
131
+ ```
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@next-bricks/presentational-bricks",
3
- "version": "1.339.1",
3
+ "version": "1.339.2",
4
4
  "description": "> TODO: description",
5
5
  "homepage": "https://github.com/easyops-cn/next-basics/tree/master/bricks/presentational-bricks",
6
6
  "license": "GPL-3.0",
7
7
  "files": [
8
8
  "dist",
9
- "deploy",
10
- "dist-types"
9
+ "dist-types",
10
+ "docs",
11
+ "deploy"
11
12
  ],
12
13
  "exports": {
13
14
  "./package.json": "./package.json",
@@ -85,5 +86,5 @@
85
86
  "@next-dll/ace": "*",
86
87
  "@next-dll/react-dnd": "*"
87
88
  },
88
- "gitHead": "a744077ea6d50ceba6828da22d08a9e0f99764d6"
89
+ "gitHead": "ab912139c3d19cafac2392750adae5970b067b70"
89
90
  }