@aloudata/aloudata-design 3.0.16 → 3.0.18-beta.0
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.
- package/README.md +63 -59
- package/dist/Alert/index.js +1 -1
- package/dist/Alert/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/index.js +2 -2
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/type.js +3 -3
- package/dist/Avatar/component/Avatar/type.js.map +1 -1
- package/dist/Badge/index.js +5 -5
- package/dist/Badge/index.js.map +1 -1
- package/dist/Breadcrumb/index.js +4 -4
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Button/index.js +8 -8
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/index.js +1 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Checkbox/index.js +3 -3
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Collapse/index.js +1 -1
- package/dist/Collapse/index.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/index.js +2 -2
- package/dist/ColorPicker/ComplexColorPicker/index.js.map +1 -1
- package/dist/ColorPicker/index.js +11 -11
- package/dist/ColorPicker/index.js.map +1 -1
- package/dist/ColorPicker/util.d.ts +1 -1
- package/dist/ColorPicker/util.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Cell.js +2 -2
- package/dist/DataPreviewTable/components/Body/Cell.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/index.js +1 -1
- package/dist/DataPreviewTable/components/Body/index.js.map +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Header/index.js +3 -3
- package/dist/DataPreviewTable/components/Header/index.js.map +1 -1
- package/dist/DataPreviewTable/index.js +1 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/Divider/index.js +1 -1
- package/dist/Divider/index.js.map +1 -1
- package/dist/Drawer/index.js +3 -3
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Dropdown/index.js +2 -0
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Empty/image/Data.js +16 -16
- package/dist/Empty/image/Data.js.map +1 -1
- package/dist/Empty/image/User.js +16 -16
- package/dist/Empty/image/User.js.map +1 -1
- package/dist/Empty/image/WorkBook.js +17 -17
- package/dist/Empty/image/WorkBook.js.map +1 -1
- package/dist/Form/index.js +3 -3
- package/dist/Form/index.js.map +1 -1
- package/dist/Icon/components/SortAscendingOrderColor.js +1 -1
- package/dist/Icon/components/SortAscendingOrderColor.js.map +1 -1
- package/dist/Icon/components/SortDescendingOrderColor.js +1 -1
- package/dist/Icon/components/SortDescendingOrderColor.js.map +1 -1
- package/dist/Icon/components/User.js +2 -2
- package/dist/Icon/components/User.js.map +1 -1
- package/dist/Icon/components/UserGroup.js +2 -2
- package/dist/Icon/components/UserGroup.js.map +1 -1
- package/dist/Input/components/Input/index.js +3 -3
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/TextArea/index.js +3 -3
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/InputNumber/index.js +4 -4
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/LogicTree/components/LogicItem/index.js +2 -2
- package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
- package/dist/MemberPicker/components/SelectedMemberTags.js +1 -1
- package/dist/MemberPicker/components/SelectedMemberTags.js.map +1 -1
- package/dist/Modal/index.js +8 -8
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +1 -1
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Popover/index.js +2 -2
- package/dist/Popover/index.js.map +1 -1
- package/dist/Progress/index.js +1 -1
- package/dist/Progress/index.js.map +1 -1
- package/dist/RenameInput/index.js +4 -4
- package/dist/RenameInput/index.js.map +1 -1
- package/dist/Result/index.js +4 -4
- package/dist/Result/index.js.map +1 -1
- package/dist/Select/components/Suffix.js +3 -3
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Slider/index.js +4 -4
- package/dist/Slider/index.js.map +1 -1
- package/dist/Spin/CustomIcon/index.js +2 -2
- package/dist/Spin/CustomIcon/index.js.map +1 -1
- package/dist/StatusLight/index.js +15 -15
- package/dist/StatusLight/index.js.map +1 -1
- package/dist/Steps/components/CustomDot/index.js +9 -2
- package/dist/Steps/components/CustomDot/index.js.map +1 -0
- package/dist/Steps/components/ProcessIcon/index.d.ts +2 -1
- package/dist/Steps/components/ProcessIcon/index.js +33 -12
- package/dist/Steps/components/ProcessIcon/index.js.map +1 -1
- package/dist/Steps/index.js +67 -49
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.js +3 -3
- package/dist/Switch/index.js.map +1 -1
- package/dist/Table/components/Header.js +3 -3
- package/dist/Table/components/Header.js.map +1 -1
- package/dist/Tabs/index.js +9 -9
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tag/index.js +11 -11
- package/dist/Tag/index.js.map +1 -1
- package/dist/TextLink/index.js +2 -2
- package/dist/TextLink/index.js.map +1 -1
- package/dist/Tooltip/index.js +3 -3
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/Tour/index.js +1 -1
- package/dist/Tour/index.js.map +1 -1
- package/dist/Tree/Tree2.js +2 -2
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Typography/index.js +1 -1
- package/dist/Typography/index.js.map +1 -1
- package/dist/User/index.js +1 -1
- package/dist/User/index.js.map +1 -1
- package/dist/Watermark/index.js +2 -1
- package/dist/Watermark/index.js.map +1 -1
- package/dist/_utils/weakRefFallback.d.ts +1 -0
- package/dist/_utils/weakRefFallback.js +21 -0
- package/dist/_utils/weakRefFallback.js.map +1 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +11 -5
- package/dist/message/index.js +1 -1
- package/dist/message/index.js.map +1 -1
- package/dist/notification/index.js +5 -5
- package/dist/notification/index.js.map +1 -1
- package/dist/theme/contract/shadowGeneratorSpecification.d.ts +37 -0
- package/dist/theme/contract/tokenCssBridge.d.ts +60 -0
- package/dist/theme/contract/tokenCssBridge.js +2 -0
- package/dist/theme/contract/tokenOutputContract.d.ts +35 -0
- package/dist/theme/contract/tokenOutputContract.js +198 -0
- package/dist/theme/contract/tokenOutputContract.js.map +1 -0
- package/dist/theme/generator/acceptedColorValues.d.ts +97 -0
- package/dist/theme/generator/acceptedColorValues.js +2 -0
- package/dist/theme/generator/cssArtifactEmitter.d.ts +62 -0
- package/dist/theme/generator/cssArtifactEmitter.js +2 -0
- package/dist/theme/generator/generator.d.ts +41 -0
- package/dist/theme/generator/generator.js +2 -0
- package/dist/theme/generator/generatorDiff.d.ts +53 -0
- package/dist/theme/generator/generatorDiff.js +2 -0
- package/dist/theme/generator/generatorEmitter.d.ts +73 -0
- package/dist/theme/generator/generatorEmitter.js +2 -0
- package/dist/theme/generator/generatorMappingStrategy.d.ts +43 -0
- package/dist/theme/generator/generatorMappingStrategy.js +2 -0
- package/dist/theme/generator/generatorOutputSchema.d.ts +80 -0
- package/dist/theme/generator/generatorOutputSchema.js +2 -0
- package/dist/theme/generator/minimalAcceptedColorValues.d.ts +27 -0
- package/dist/theme/generator/minimalAcceptedColorValues.js +2 -0
- package/dist/theme/generator/valueResolver.d.ts +64 -0
- package/dist/theme/generator/valueResolver.js +2 -0
- package/dist/theme/governance/migrationMappingRegistry.d.ts +22 -0
- package/dist/theme/governance/migrationMappingRegistry.js +459 -0
- package/dist/theme/governance/migrationMappingRegistry.js.map +1 -0
- package/dist/theme/governance/reviewGate.d.ts +33 -0
- package/dist/theme/governance/reviewGate.js +116 -0
- package/dist/theme/governance/reviewGate.js.map +1 -0
- package/dist/theme/governance/validateMigrationMapping.d.ts +50 -0
- package/dist/theme/governance/validateMigrationMapping.js +157 -0
- package/dist/theme/governance/validateMigrationMapping.js.map +1 -0
- package/dist/theme/index.d.ts +16 -5
- package/dist/theme/index.js +10 -4
- package/dist/theme/runtime/colorValueMode/index.d.ts +5 -0
- package/dist/theme/runtime/colorValueMode/index.js +49 -0
- package/dist/theme/runtime/colorValueMode/index.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/registry.d.ts +29 -0
- package/dist/theme/runtime/colorValueMode/registry.js +39 -0
- package/dist/theme/runtime/colorValueMode/registry.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/v3.d.ts +98 -0
- package/dist/theme/runtime/colorValueMode/v3.js +230 -0
- package/dist/theme/runtime/colorValueMode/v3.js.map +1 -0
- package/dist/theme/runtime/colorValueMode.d.ts +2 -0
- package/dist/theme/{createTheme.js → runtime/createTheme.js} +1 -1
- package/dist/theme/runtime/createTheme.js.map +1 -0
- package/dist/theme/{defaultTheme.js → runtime/defaultTheme.js} +1 -1
- package/dist/theme/runtime/defaultTheme.js.map +1 -0
- package/dist/theme/{initAldTheme.js → runtime/initAldTheme.js} +1 -1
- package/dist/theme/runtime/initAldTheme.js.map +1 -0
- package/dist/theme/runtime/integrationController.d.ts +26 -0
- package/dist/theme/runtime/integrationController.js +2 -0
- package/dist/theme/runtime/runtimeAdapter.d.ts +31 -0
- package/dist/theme/runtime/runtimeAdapter.js +2 -0
- package/dist/theme/{themeToCssVars.js → runtime/themeToCssVars.js} +1 -1
- package/dist/theme/runtime/themeToCssVars.js.map +1 -0
- package/dist/theme/{tokenMap.js → runtime/tokenMap.js} +1 -1
- package/dist/theme/runtime/tokenMap.js.map +1 -0
- package/dist/theme/runtime/types.js +2 -0
- package/package.json +1 -1
- package/dist/theme/createTheme.js.map +0 -1
- package/dist/theme/defaultTheme.js.map +0 -1
- package/dist/theme/initAldTheme.js.map +0 -1
- package/dist/theme/themeToCssVars.js.map +0 -1
- package/dist/theme/tokenMap.js.map +0 -1
- /package/dist/theme/{types.js → contract/shadowGeneratorSpecification.js} +0 -0
- /package/dist/theme/{createTheme.d.ts → runtime/createTheme.d.ts} +0 -0
- /package/dist/theme/{defaultTheme.d.ts → runtime/defaultTheme.d.ts} +0 -0
- /package/dist/theme/{initAldTheme.d.ts → runtime/initAldTheme.d.ts} +0 -0
- /package/dist/theme/{themeToCssVars.d.ts → runtime/themeToCssVars.d.ts} +0 -0
- /package/dist/theme/{tokenMap.d.ts → runtime/tokenMap.d.ts} +0 -0
- /package/dist/theme/{types.d.ts → runtime/types.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
本文档用于介绍组件库开发相关的规范以及组件库开发过程中的注意事项。
|
|
6
6
|
|
|
7
|
+
## Color Governance Documentation
|
|
8
|
+
|
|
9
|
+
Color System Governance 的唯一入口:`docs/color-system/00-project-context.md`
|
|
10
|
+
|
|
7
11
|
## 环境配置
|
|
8
12
|
|
|
9
13
|
组件库开发过程中,需要满足以下条件:
|
|
@@ -36,7 +40,7 @@ Node version >= 16.0.0
|
|
|
36
40
|
```
|
|
37
41
|
|
|
38
42
|
#### 组件测试
|
|
39
|
-
|
|
43
|
+
|
|
40
44
|
```bash
|
|
41
45
|
yarn run test //单元测试
|
|
42
46
|
```
|
|
@@ -47,7 +51,7 @@ Node version >= 16.0.0
|
|
|
47
51
|
yarn run build //打包
|
|
48
52
|
```
|
|
49
53
|
|
|
50
|
-
#### 组件本地link
|
|
54
|
+
#### 组件本地 link
|
|
51
55
|
|
|
52
56
|
```bash
|
|
53
57
|
npm link //将组件库link到本地npm
|
|
@@ -67,7 +71,7 @@ Node version >= 16.0.0
|
|
|
67
71
|
├── dist --> 组件打包生成的组件目录
|
|
68
72
|
├── src --> 组件目录
|
|
69
73
|
├── tsconfig.json --> tsconfig ts配置文件
|
|
70
|
-
├── .editorconfig
|
|
74
|
+
├── .editorconfig
|
|
71
75
|
├── .eslintrc.js --> eslint ts等校验规则配置
|
|
72
76
|
├── .fatherrc.ts ---> father组件打包配置
|
|
73
77
|
├── .prettierrc.js ---> prettier 代码格式化配置
|
|
@@ -83,33 +87,33 @@ Node version >= 16.0.0
|
|
|
83
87
|
|
|
84
88
|
### 3 代码风格
|
|
85
89
|
|
|
86
|
-
我们使用eslint+stylelint+prettier 来统一代码风格,同时**需要对vscode做一定的配置**,具体[配置参考](https://docs.dingtalk.com/i/nodes/mM3zoYAw1Rr8D5Nong2XWnZ07y9NpXxD?dontjump=true&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_space_file_tree&navQuery=spaceId%3Da0gX104nML97WzeJ&nav=spaces)
|
|
90
|
+
我们使用 eslint+stylelint+prettier 来统一代码风格,同时**需要对 vscode 做一定的配置**,具体[配置参考](https://docs.dingtalk.com/i/nodes/mM3zoYAw1Rr8D5Nong2XWnZ07y9NpXxD?dontjump=true&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_space_file_tree&navQuery=spaceId%3Da0gX104nML97WzeJ&nav=spaces)
|
|
87
91
|
|
|
88
|
-
ts文件使用
|
|
89
|
-
less文件使用
|
|
90
|
-
使用
|
|
92
|
+
ts 文件使用 _eslint_ 校验, 配置文件 .eslintrc.js [查看规则](https://cn.eslint.org/docs/rules/)
|
|
93
|
+
less 文件使用 _stylelint_ 校验, 配置文件 .stylelintrc.json [查看规则](https://stylelint.bootcss.com/user-guide/rules/list)
|
|
94
|
+
使用 _prettier_ 格式化代码,配置文件 .prettierrc.js
|
|
91
95
|
|
|
92
96
|
## 组件开发指南(必读)
|
|
93
97
|
|
|
94
98
|
### 了解组件分类
|
|
95
99
|
|
|
96
100
|
1. 毛坯组件
|
|
97
|
-
原始的未做任何修改的antd组件
|
|
101
|
+
原始的未做任何修改的 antd 组件
|
|
98
102
|
2. 简装组件
|
|
99
103
|
是指在毛坯组件的基础上,只简单了修改了一些颜色、样式等的组件
|
|
100
104
|
3. 精装组件
|
|
101
|
-
所谓精装组件,是指设计师精心设计过组件应用场景和UI的组件,可能基于antd,也可以完全自定义
|
|
105
|
+
所谓精装组件,是指设计师精心设计过组件应用场景和 UI 的组件,可能基于 antd,也可以完全自定义
|
|
102
106
|
|
|
103
107
|
### 单元测试
|
|
104
108
|
|
|
105
|
-
组件开发过程中需要写单测的,建议先写单测,然后进行开发。[了解TDD](https://baike.baidu.com/item/TDD/9064369)
|
|
109
|
+
组件开发过程中需要写单测的,建议先写单测,然后进行开发。[了解 TDD](https://baike.baidu.com/item/TDD/9064369)
|
|
106
110
|
|
|
107
111
|
哪些情况需要写单元测试:
|
|
108
112
|
|
|
109
|
-
1. 如果是基于antd的组件,但凡组件有api接口变动,必须要写单元测试
|
|
110
|
-
2. 非基于antd的组件,必须要写单元测试
|
|
111
|
-
3. 单元测试需要覆盖组件每一个api接口的各个状态
|
|
112
|
-
4. 单元测试文件以
|
|
113
|
+
1. 如果是基于 antd 的组件,但凡组件有 api 接口变动,必须要写单元测试
|
|
114
|
+
2. 非基于 antd 的组件,必须要写单元测试
|
|
115
|
+
3. 单元测试需要覆盖组件每一个 api 接口的各个状态
|
|
116
|
+
4. 单元测试文件以 _.test.tsx_ 结尾
|
|
113
117
|
|
|
114
118
|
单元测试参考资料:
|
|
115
119
|
|
|
@@ -118,28 +122,28 @@ less文件使用 *stylelint* 校验, 配置文件 .stylelintrc.json [查看规
|
|
|
118
122
|
|
|
119
123
|
### 组件开发注意事项
|
|
120
124
|
|
|
121
|
-
组件开发支持两种模式,基于antd开发和其它自定义开发。
|
|
125
|
+
组件开发支持两种模式,基于 antd 开发和其它自定义开发。
|
|
122
126
|
|
|
123
|
-
**基于antd开发:** 在业务满足的情况下,建议基于antd开发或者rc组件开发。方式是把antd组件引用过来,然后做升级修改之后,再作为ald组件暴露出去
|
|
127
|
+
**基于 antd 开发:** 在业务满足的情况下,建议基于 antd 开发或者 rc 组件开发。方式是把 antd 组件引用过来,然后做升级修改之后,再作为 ald 组件暴露出去
|
|
124
128
|
|
|
125
|
-
**自定义开发:** 当antd组件不满足业务的时候,可以自定义开发,允许引用其它基础组件进行二次开发或者完全自定义组件进行开发。通常是精装组件。
|
|
129
|
+
**自定义开发:** 当 antd 组件不满足业务的时候,可以自定义开发,允许引用其它基础组件进行二次开发或者完全自定义组件进行开发。通常是精装组件。
|
|
126
130
|
|
|
127
131
|
组件开发有以下几个**必须要注意**的点
|
|
128
132
|
|
|
129
|
-
1. 组件样式要和组件类进行分离,即在组件开发的过程中,不允许引用css、less等样式组件。样式单独写在style文件夹下。
|
|
130
|
-
2. 组件文档内的api接口展示,是获取组件属性props的接口interface定义来实现的(自定义md表格除外)。组件库脚手架对于组件接口interface有处理,即凡是接口来自于外部库引入的部分,不会被文档api识别,即无法展示。interface接口的每一个想要暴露的属性,都必须要写注释,主要包括类型、描述、默认值等。
|
|
131
|
-
3. 组件简装及以上,必须要写demo样例,用于展示已经支持的样式及功能
|
|
132
|
-
4. 精装组件必须要写单元测试。每一个组件的属性,都要在测例中进行测试,保证在组件的的维护修改过程中,不会出现bug。
|
|
133
|
-
5. 组件由ts编写,必须对外暴露所有可能在业务使用过程中需要的ts类型。
|
|
134
|
-
6. 组件库不使用css-module,请考虑权重问题,禁止出现 **!important** 这样的样式
|
|
133
|
+
1. 组件样式要和组件类进行分离,即在组件开发的过程中,不允许引用 css、less 等样式组件。样式单独写在 style 文件夹下。
|
|
134
|
+
2. 组件文档内的 api 接口展示,是获取组件属性 props 的接口 interface 定义来实现的(自定义 md 表格除外)。组件库脚手架对于组件接口 interface 有处理,即凡是接口来自于外部库引入的部分,不会被文档 api 识别,即无法展示。interface 接口的每一个想要暴露的属性,都必须要写注释,主要包括类型、描述、默认值等。
|
|
135
|
+
3. 组件简装及以上,必须要写 demo 样例,用于展示已经支持的样式及功能
|
|
136
|
+
4. 精装组件必须要写单元测试。每一个组件的属性,都要在测例中进行测试,保证在组件的的维护修改过程中,不会出现 bug。
|
|
137
|
+
5. 组件由 ts 编写,必须对外暴露所有可能在业务使用过程中需要的 ts 类型。
|
|
138
|
+
6. 组件库不使用 css-module,请考虑权重问题,禁止出现 **!important** 这样的样式
|
|
135
139
|
|
|
136
140
|
### 组件库文档编写注意事项
|
|
137
141
|
|
|
138
|
-
#### 文档前文frontMatter编写
|
|
142
|
+
#### 文档前文 frontMatter 编写
|
|
139
143
|
|
|
140
144
|
在组件库官网展示的时候,会根据文档头部的信息,对文档进行分类,我们当前的计划是分成三类:设计、文档、组件;
|
|
141
145
|
|
|
142
|
-
在文档头部,使用YAML预发进行编写,用于描述组件的文档的信息,如:
|
|
146
|
+
在文档头部,使用 YAML 预发进行编写,用于描述组件的文档的信息,如:
|
|
143
147
|
|
|
144
148
|
```yaml
|
|
145
149
|
---
|
|
@@ -154,39 +158,39 @@ group:
|
|
|
154
158
|
|
|
155
159
|
具体参考:[FrontMatter](https://d.umijs.org/zh-CN/config/frontmatter)
|
|
156
160
|
|
|
157
|
-
#### 组件场景用例demo展示
|
|
161
|
+
#### 组件场景用例 demo 展示
|
|
158
162
|
|
|
159
|
-
每个简装以上组件都需要展示场景用例,写在src
|
|
160
|
-
demo项目中,像在业务中使用aloudata-design一样,脚手架会自动关联项目到node-modules下。(建议先build一下,然后再进行demo展示)
|
|
161
|
-
在组件的md文档中使用code引入用例,在文档中展示用例,如:
|
|
162
|
-
|
|
163
|
-
```jsx
|
|
164
|
-
<code src="./demos/single/index.tsx" title="单项选择"/>
|
|
165
|
-
```
|
|
163
|
+
每个简装以上组件都需要展示场景用例,写在 src/\*\*/demos/文件夹下
|
|
164
|
+
demo 项目中,像在业务中使用 aloudata-design 一样,脚手架会自动关联项目到 node-modules 下。(建议先 build 一下,然后再进行 demo 展示)
|
|
165
|
+
在组件的 md 文档中使用 code 引入用例,在文档中展示用例,如:
|
|
166
166
|
|
|
167
|
-
|
|
167
|
+
```jsx
|
|
168
|
+
<code src="./demos/single/index.tsx" title="单项选择" />
|
|
169
|
+
```
|
|
168
170
|
|
|
169
|
-
|
|
171
|
+
关于 demo 的配置,即 code 的用法,请参考[demo 配置](https://d.umijs.org/zh-CN/config/frontmatter#demo-%E9%85%8D%E7%BD%AE%E9%A1%B9)
|
|
170
172
|
|
|
171
|
-
api
|
|
173
|
+
#### 组件 api 展示
|
|
174
|
+
|
|
175
|
+
api 展示为表格形势,可以使用**API**标签,如:
|
|
172
176
|
|
|
173
177
|
```jsx
|
|
174
|
-
|
|
178
|
+
<API src="/path/to/your/component.tsx" hideTitle></API>
|
|
175
179
|
```
|
|
176
180
|
|
|
177
181
|
参考文档:[API](https://d.umijs.org/zh-CN/guide/advanced#%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E5%B1%95%E7%A4%BA-api)
|
|
178
182
|
|
|
179
|
-
也可以自己使用md语法写表格
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
183
|
+
也可以自己使用 md 语法写表格
|
|
184
|
+
|
|
185
|
+
```md
|
|
186
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
187
|
+
| ----- | ------ | ------ | ------------ |
|
|
188
|
+
| value | 某个值 | string | 当前选中的值 |
|
|
189
|
+
```
|
|
186
190
|
|
|
187
191
|
### 关于组件模板创建
|
|
188
192
|
|
|
189
|
-
使用
|
|
193
|
+
使用 _npm run cmt_ 创建的组件模板只是做一个参考,需要自己根据实际需求进行修改
|
|
190
194
|
|
|
191
195
|
## 关于组件库打包
|
|
192
196
|
|
|
@@ -196,8 +200,8 @@ api展示为表格形势,可以使用**API**标签,如:
|
|
|
196
200
|
npm run build
|
|
197
201
|
```
|
|
198
202
|
|
|
199
|
-
组件打包的入口在src/index.tsx,必须在文件总暴露出来,组件才会被打包。
|
|
200
|
-
组件打包使用umi框架的 [falter](https://github.com/umijs/father) 打包工具, 具体配置在 .fatherrc.ts中。打包后会生成lib目录,es目录。
|
|
203
|
+
组件打包的入口在 src/index.tsx,必须在文件总暴露出来,组件才会被打包。
|
|
204
|
+
组件打包使用 umi 框架的 [falter](https://github.com/umijs/father) 打包工具, 具体配置在 .fatherrc.ts 中。打包后会生成 lib 目录,es 目录。
|
|
201
205
|
|
|
202
206
|
### 二、官方网站打包
|
|
203
207
|
|
|
@@ -205,24 +209,24 @@ api展示为表格形势,可以使用**API**标签,如:
|
|
|
205
209
|
npm run docs:build
|
|
206
210
|
```
|
|
207
211
|
|
|
208
|
-
官网打包我们默认使用dumi站点模式,会分为设计、文档、组件三个版块,其中设计和文档版块的内容在docs目录下,组件版块的内容在src
|
|
212
|
+
官网打包我们默认使用 dumi 站点模式,会分为设计、文档、组件三个版块,其中设计和文档版块的内容在 docs 目录下,组件版块的内容在 src/\*_/_.test.md 文件中。
|
|
209
213
|
|
|
210
214
|
1. 设计部分用于描述组件的设计理念,内容由设计师提供,可以是链接,也可以是资料等。
|
|
211
215
|
2. 文档用于描述组件库开发的一些信息等。
|
|
212
|
-
3. 组件用于展示组件的使用场景用例,组件的一些信息,组件的api接口等
|
|
216
|
+
3. 组件用于展示组件的使用场景用例,组件的一些信息,组件的 api 接口等
|
|
213
217
|
|
|
214
218
|
## 按需引用
|
|
215
219
|
|
|
216
220
|
```js
|
|
217
221
|
[
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
},
|
|
225
|
-
camel2DashComponentName: false,
|
|
222
|
+
'import',
|
|
223
|
+
{
|
|
224
|
+
libraryName: '@aloudata/aloudata-design',
|
|
225
|
+
libraryDirectory: 'dist',
|
|
226
|
+
style: (name) => {
|
|
227
|
+
return `${name}/style/index.less`;
|
|
226
228
|
},
|
|
227
|
-
|
|
228
|
-
|
|
229
|
+
camel2DashComponentName: false,
|
|
230
|
+
},
|
|
231
|
+
];
|
|
232
|
+
```
|
package/dist/Alert/index.js
CHANGED
|
@@ -85,7 +85,7 @@ function Alert(props) {
|
|
|
85
85
|
}),
|
|
86
86
|
closable && /* @__PURE__ */ jsx("button", {
|
|
87
87
|
type: "button",
|
|
88
|
-
className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-
|
|
88
|
+
className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-p-0 tw-pt-0.5",
|
|
89
89
|
onClick: (e) => {
|
|
90
90
|
setClosed(true);
|
|
91
91
|
onClose?.(e);
|
package/dist/Alert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n AttentionTriangleFill,\n CheckCircleFill,\n CloseCircleFill,\n CloseLightLine,\n InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n type?: 'success' | 'info' | 'warning' | 'error' | 'none';\n message?: React.ReactNode;\n description?: React.ReactNode;\n closable?: boolean;\n onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n afterClose?: () => void;\n showIcon?: boolean;\n icon?: React.ReactNode;\n banner?: boolean;\n action?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n string,\n { bg: string; border: string; icon: React.ReactNode; titleColor: string }\n> = {\n success: {\n bg: 'tw-bg-[var(--background-positive-subtle)]',\n border: 'tw-border-[var(--border-positive-subtle)]',\n titleColor: 'tw-text-[var(--content-positive-primary)]',\n icon: (\n <CheckCircleFill size={16} color=\"var(--content-positive-secondary)\" />\n ),\n },\n info: {\n bg: 'tw-bg-[var(--background-informative-subtle)]',\n border: 'tw-border-[var(--border-informative-subtle)]',\n titleColor: 'tw-text-[var(--content-informative-primary)]',\n icon: (\n <InformationCircleFill\n size={16}\n color=\"var(--content-informative-secondary)\"\n />\n ),\n },\n warning: {\n bg: 'tw-bg-[var(--background-warning-subtle)]',\n border: 'tw-border-[var(--border-warning-subtle)]',\n titleColor: 'tw-text-[var(--content-warning-primary)]',\n icon: (\n <AttentionTriangleFill\n size={16}\n color=\"var(--content-warning-secondary)\"\n />\n ),\n },\n error: {\n bg: 'tw-bg-[var(--background-negative-subtle)]',\n border: 'tw-border-[var(--border-negative-subtle)]',\n titleColor: 'tw-text-[var(--content-negative-primary)]',\n icon: (\n <CloseCircleFill size={16} color=\"var(--content-negative-secondary)\" />\n ),\n },\n none: {\n bg: 'tw-bg-[var(--background-neutral-subtle)]',\n border: 'tw-border-[var(--border-neutral-subtle)]',\n titleColor: 'tw-text-[var(--content-primary)]',\n icon: <InformationCircleFill size={16} color=\"var(--content-secondary)\" />,\n },\n};\n\nfunction Alert(props: AlertProps) {\n const {\n type = 'info',\n message,\n description,\n closable,\n onClose,\n afterClose,\n showIcon = true,\n icon,\n banner,\n action,\n className,\n style,\n } = props;\n\n const [closed, setClosed] = useState(false);\n\n if (closed) return null;\n\n const config = typeConfig[type] || typeConfig.info;\n\n return (\n <div\n className={cn(\n 'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3',\n banner && 'ald-alert-banner !tw-rounded-none',\n config.bg,\n config.border,\n className,\n )}\n style={style}\n role=\"alert\"\n >\n {showIcon && (\n <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n {icon || config.icon}\n </span>\n )}\n <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n {message && (\n <div\n className={cn(\n 'ald-alert-message tw-text-sm tw-font-medium tw-leading-5',\n config.titleColor,\n )}\n >\n {message}\n </div>\n )}\n {description && (\n <div\n className=\"ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]\"\n style={{ fontFeatureSettings: \"'liga' off, 'clig' off\" }}\n >\n {description}\n </div>\n )}\n </div>\n {action && <div className=\"ald-alert-action\">{action}</div>}\n {closable && (\n <button\n type=\"button\"\n className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n AttentionTriangleFill,\n CheckCircleFill,\n CloseCircleFill,\n CloseLightLine,\n InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n type?: 'success' | 'info' | 'warning' | 'error' | 'none';\n message?: React.ReactNode;\n description?: React.ReactNode;\n closable?: boolean;\n onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n afterClose?: () => void;\n showIcon?: boolean;\n icon?: React.ReactNode;\n banner?: boolean;\n action?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n string,\n { bg: string; border: string; icon: React.ReactNode; titleColor: string }\n> = {\n success: {\n bg: 'tw-bg-[var(--background-positive-subtle)]',\n border: 'tw-border-[var(--border-positive-subtle)]',\n titleColor: 'tw-text-[var(--content-positive-primary)]',\n icon: (\n <CheckCircleFill size={16} color=\"var(--content-positive-secondary)\" />\n ),\n },\n info: {\n bg: 'tw-bg-[var(--background-informative-subtle)]',\n border: 'tw-border-[var(--border-informative-subtle)]',\n titleColor: 'tw-text-[var(--content-informative-primary)]',\n icon: (\n <InformationCircleFill\n size={16}\n color=\"var(--content-informative-secondary)\"\n />\n ),\n },\n warning: {\n bg: 'tw-bg-[var(--background-warning-subtle)]',\n border: 'tw-border-[var(--border-warning-subtle)]',\n titleColor: 'tw-text-[var(--content-warning-primary)]',\n icon: (\n <AttentionTriangleFill\n size={16}\n color=\"var(--content-warning-secondary)\"\n />\n ),\n },\n error: {\n bg: 'tw-bg-[var(--background-negative-subtle)]',\n border: 'tw-border-[var(--border-negative-subtle)]',\n titleColor: 'tw-text-[var(--content-negative-primary)]',\n icon: (\n <CloseCircleFill size={16} color=\"var(--content-negative-secondary)\" />\n ),\n },\n none: {\n bg: 'tw-bg-[var(--background-neutral-subtle)]',\n border: 'tw-border-[var(--border-neutral-subtle)]',\n titleColor: 'tw-text-[var(--content-primary)]',\n icon: <InformationCircleFill size={16} color=\"var(--content-secondary)\" />,\n },\n};\n\nfunction Alert(props: AlertProps) {\n const {\n type = 'info',\n message,\n description,\n closable,\n onClose,\n afterClose,\n showIcon = true,\n icon,\n banner,\n action,\n className,\n style,\n } = props;\n\n const [closed, setClosed] = useState(false);\n\n if (closed) return null;\n\n const config = typeConfig[type] || typeConfig.info;\n\n return (\n <div\n className={cn(\n 'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3',\n banner && 'ald-alert-banner !tw-rounded-none',\n config.bg,\n config.border,\n className,\n )}\n style={style}\n role=\"alert\"\n >\n {showIcon && (\n <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n {icon || config.icon}\n </span>\n )}\n <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n {message && (\n <div\n className={cn(\n 'ald-alert-message tw-text-sm tw-font-medium tw-leading-5',\n config.titleColor,\n )}\n >\n {message}\n </div>\n )}\n {description && (\n <div\n className=\"ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]\"\n style={{ fontFeatureSettings: \"'liga' off, 'clig' off\" }}\n >\n {description}\n </div>\n )}\n </div>\n {action && <div className=\"ald-alert-action\">{action}</div>}\n {closable && (\n <button\n type=\"button\"\n className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-p-0 tw-pt-0.5\"\n onClick={(e) => {\n setClosed(true);\n onClose?.(e);\n afterClose?.();\n }}\n >\n <CloseLightLine size={16} color=\"var(--content-secondary)\" />\n </button>\n )}\n </div>\n );\n}\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAGF;CACF,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,MAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MAAM,oBAAC,QAAD;GAAuB,MAAM;GAAI,OAAM;GAA6B,CAAA;EAC3E;CACF;AAED,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,OAAO,QACP,SACA,aACA,UACA,SACA,YACA,WAAW,MACX,MACA,QACA,QACA,WACA,UACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,OAAQ,QAAO;CAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,8FACA,UAAU,qCACV,OAAO,IACP,OAAO,QACP,UACD;EACM;EACP,MAAK;YATP;GAWG,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,OAAO;IACX,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,WACC,oBAAC,OAAD;KACE,WAAW,GACT,4DACA,OAAO,WACR;eAEA;KACG,CAAA,EAEP,eACC,oBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,qBAAqB,0BAA0B;eAEvD;KACG,CAAA,CAEJ;;GACL,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAoB;IAAa,CAAA;GAC1D,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,MAAM;AACd,eAAU,KAAK;AACf,eAAU,EAAE;AACZ,mBAAc;;cAGhB,oBAAC,QAAD;KAAgB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACtD,CAAA;GAEP"}
|
|
@@ -60,13 +60,13 @@ var Avatar = (props) => {
|
|
|
60
60
|
shape
|
|
61
61
|
]);
|
|
62
62
|
return /* @__PURE__ */ jsx("span", {
|
|
63
|
-
className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0", type === "team" ? "tw-text-[var(--
|
|
63
|
+
className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0", type === "team" ? "tw-text-[var(--content-positive-primary)]" : "tw-text-[var(--content-informative-primary)]", shape === "circle" ? "tw-rounded-full" : "tw-rounded-r-50", !icon && _.isEmpty(children) && "ald-avatar-default", className),
|
|
64
64
|
style: {
|
|
65
65
|
width: sizeVal,
|
|
66
66
|
height: sizeVal,
|
|
67
67
|
fontSize: sizeVal * .4,
|
|
68
68
|
lineHeight: `${sizeVal}px`,
|
|
69
|
-
backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "
|
|
69
|
+
backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "var(--background-default)" : AVATAR_TYPE_TO_BG_COLOR[type] || "var(--background-informative-muted)",
|
|
70
70
|
...style
|
|
71
71
|
},
|
|
72
72
|
onClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n shape?: 'circle' | 'square';\n gap?: number;\n src?: React.ReactNode;\n srcSet?: string;\n draggable?: boolean;\n icon?: React.ReactNode;\n alt?: string;\n crossOrigin?: '' | 'anonymous' | 'use-credentials';\n onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n onError?: () => boolean;\n size?: TAvatarSize;\n type?: 'user' | 'team' | 'count';\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n const {\n size = 'middle',\n children,\n src,\n srcSet,\n draggable,\n icon,\n shape = 'circle',\n alt,\n crossOrigin,\n type = 'user',\n onClick,\n onError,\n className,\n style,\n } = props;\n\n const [imgError, setImgError] = useState(false);\n\n const getSize = useCallback(() => {\n if (typeof size === 'number') return size;\n return AVATAR_SIZE_MAP[size] || 32;\n }, [size]);\n\n const getChildren = useCallback(() => {\n if (_.isEmpty(children)) return null;\n if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n return children;\n }, [children]);\n\n const sizeVal = getSize();\n\n const innerContent = useMemo(() => {\n if (src && !imgError) {\n if (typeof src === 'string') {\n return (\n <img\n src={src}\n srcSet={srcSet}\n draggable={draggable}\n crossOrigin={crossOrigin}\n alt={alt}\n className=\"tw-size-full tw-object-cover\"\n style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n onError={() => {\n const result = onError?.();\n if (result !== false) setImgError(true);\n }}\n />\n );\n }\n return src;\n }\n\n if (icon) return icon;\n\n if (!_.isEmpty(children)) {\n return (\n <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n </div>\n );\n }\n\n return <User size={sizeVal} />;\n }, [\n src,\n icon,\n children,\n sizeVal,\n getChildren,\n imgError,\n alt,\n srcSet,\n draggable,\n crossOrigin,\n onError,\n shape,\n ]);\n\n return (\n <span\n className={cn(\n 'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0',\n type === 'team'\n ? 'tw-text-[var(--
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n shape?: 'circle' | 'square';\n gap?: number;\n src?: React.ReactNode;\n srcSet?: string;\n draggable?: boolean;\n icon?: React.ReactNode;\n alt?: string;\n crossOrigin?: '' | 'anonymous' | 'use-credentials';\n onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n onError?: () => boolean;\n size?: TAvatarSize;\n type?: 'user' | 'team' | 'count';\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n const {\n size = 'middle',\n children,\n src,\n srcSet,\n draggable,\n icon,\n shape = 'circle',\n alt,\n crossOrigin,\n type = 'user',\n onClick,\n onError,\n className,\n style,\n } = props;\n\n const [imgError, setImgError] = useState(false);\n\n const getSize = useCallback(() => {\n if (typeof size === 'number') return size;\n return AVATAR_SIZE_MAP[size] || 32;\n }, [size]);\n\n const getChildren = useCallback(() => {\n if (_.isEmpty(children)) return null;\n if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n return children;\n }, [children]);\n\n const sizeVal = getSize();\n\n const innerContent = useMemo(() => {\n if (src && !imgError) {\n if (typeof src === 'string') {\n return (\n <img\n src={src}\n srcSet={srcSet}\n draggable={draggable}\n crossOrigin={crossOrigin}\n alt={alt}\n className=\"tw-size-full tw-object-cover\"\n style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n onError={() => {\n const result = onError?.();\n if (result !== false) setImgError(true);\n }}\n />\n );\n }\n return src;\n }\n\n if (icon) return icon;\n\n if (!_.isEmpty(children)) {\n return (\n <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n </div>\n );\n }\n\n return <User size={sizeVal} />;\n }, [\n src,\n icon,\n children,\n sizeVal,\n getChildren,\n imgError,\n alt,\n srcSet,\n draggable,\n crossOrigin,\n onError,\n shape,\n ]);\n\n return (\n <span\n className={cn(\n 'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0',\n type === 'team'\n ? 'tw-text-[var(--content-positive-primary)]'\n : 'tw-text-[var(--content-informative-primary)]',\n shape === 'circle' ? 'tw-rounded-full' : 'tw-rounded-r-50',\n !icon && _.isEmpty(children) && 'ald-avatar-default',\n className,\n )}\n style={{\n width: sizeVal,\n height: sizeVal,\n fontSize: sizeVal * 0.4,\n lineHeight: `${sizeVal}px`,\n backgroundColor:\n !icon && _.isEmpty(children) && (!src || imgError)\n ? 'var(--background-default)'\n : AVATAR_TYPE_TO_BG_COLOR[type] ||\n 'var(--background-informative-muted)',\n ...style,\n }}\n onClick={onClick}\n >\n {innerContent}\n </span>\n );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AA0BA,IAAM,OAAO;AAEb,IAAM,UAAU,UAAwB;CACtC,MAAM,EACJ,OAAO,UACP,UACA,KACA,QACA,WACA,MACA,QAAQ,UACR,KACA,aACA,OAAO,QACP,SACA,SACA,WACA,UACE;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,kBAAkB;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,SAAO,gBAAgB,SAAS;IAC/B,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,kBAAkB;AACpC,MAAI,EAAE,QAAQ,SAAS,CAAE,QAAO;AAChC,MAAI,OAAO,aAAa,SAAU,QAAO,SAAS,MAAM,mBAAmB;AAC3E,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,SAAS;CAEzB,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,CAAC,UAAU;AACpB,OAAI,OAAO,QAAQ,SACjB,QACE,oBAAC,OAAD;IACO;IACG;IACG;IACE;IACR;IACL,WAAU;IACV,OAAO,UAAU,WAAW,EAAE,cAAc,OAAO,GAAG;IACtD,eAAe;AAEb,SADe,WAAW,KACX,MAAO,aAAY,KAAK;;IAEzC,CAAA;AAGN,UAAO;;AAGT,MAAI,KAAM,QAAO;AAEjB,MAAI,CAAC,EAAE,QAAQ,SAAS,CACtB,QACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAM,OAAO,YAAY,QAAQ;cAAG,aAAa;IAAQ,CAAA;GACrD,CAAA;AAIV,SAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IAC7B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,QAAD;EACE,WAAW,GACT,8FACA,SAAS,SACL,8CACA,gDACJ,UAAU,WAAW,oBAAoB,mBACzC,CAAC,QAAQ,EAAE,QAAQ,SAAS,IAAI,sBAChC,UACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,UAAU;GACpB,YAAY,GAAG,QAAQ;GACvB,iBACE,CAAC,QAAQ,EAAE,QAAQ,SAAS,KAAK,CAAC,OAAO,YACrC,8BACA,wBAAwB,SACxB;GACN,GAAG;GACJ;EACQ;YAER;EACI,CAAA"}
|
|
@@ -15,9 +15,9 @@ var AVATAR_SIZE_TO_FONT_SIZE = {
|
|
|
15
15
|
[64]: 24
|
|
16
16
|
};
|
|
17
17
|
var AVATAR_TYPE_TO_BG_COLOR = {
|
|
18
|
-
user: "var(--
|
|
19
|
-
team: "var(--
|
|
20
|
-
count: "var(--
|
|
18
|
+
user: "var(--background-informative-muted)",
|
|
19
|
+
team: "var(--background-positive-muted)",
|
|
20
|
+
count: "var(--background-neutral-muted)"
|
|
21
21
|
};
|
|
22
22
|
//#endregion
|
|
23
23
|
export { AVATAR_SIZE_MAP, AVATAR_SIZE_TO_FONT_SIZE, AVATAR_TYPE_TO_BG_COLOR };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n maxCount?: number;\n maxStyle?: React.CSSProperties;\n maxPopoverPlacement?: 'top' | 'bottom';\n size?: TAvatarSize;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n large: 40,\n middle: 32,\n small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n [16]: 8,\n [20]: 10,\n [24]: 10,\n [28]: 12,\n [32]: 12,\n [40]: 14,\n [48]: 16,\n [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n user: 'var(--
|
|
1
|
+
{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n maxCount?: number;\n maxStyle?: React.CSSProperties;\n maxPopoverPlacement?: 'top' | 'bottom';\n size?: TAvatarSize;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n large: 40,\n middle: 32,\n small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n [16]: 8,\n [20]: 10,\n [24]: 10,\n [28]: 12,\n [32]: 12,\n [40]: 14,\n [48]: 16,\n [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n user: 'var(--background-informative-muted)',\n team: 'var(--background-positive-muted)',\n count: 'var(--background-neutral-muted)',\n};\n"],"mappings":";AAWA,IAAa,kBAAkB;CAC7B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,2BAA2B;EACrC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;AAED,IAAa,0BAA0B;CACrC,MAAM;CACN,MAAM;CACN,OAAO;CACR"}
|
package/dist/Badge/index.js
CHANGED
|
@@ -17,11 +17,11 @@ var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-cen
|
|
|
17
17
|
large: "ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5"
|
|
18
18
|
},
|
|
19
19
|
status: {
|
|
20
|
-
default: "ald-badge-default tw-bg-[var(--
|
|
21
|
-
success: "ald-badge-success tw-bg-[var(--
|
|
22
|
-
error: "ald-badge-error tw-bg-[var(--
|
|
23
|
-
info: "ald-badge-info tw-bg-[var(--
|
|
24
|
-
warning: "ald-badge-warning tw-bg-[var(--
|
|
20
|
+
default: "ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-primary)]",
|
|
21
|
+
success: "ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]",
|
|
22
|
+
error: "ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]",
|
|
23
|
+
info: "ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]",
|
|
24
|
+
warning: "ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]"
|
|
25
25
|
},
|
|
26
26
|
clickable: {
|
|
27
27
|
true: "ald-badge-clickable tw-cursor-pointer",
|
package/dist/Badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n /**\n * 展示的文本内容\n */\n count: string | number;\n /**\n * 状态\n */\n status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n /**\n * 大小\n */\n size?: 'default' | 'large';\n className?: string;\n style?: React.CSSProperties;\n onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n default: 'tw-bg-[var(--content-secondary)]',\n success: 'tw-bg-[var(--content-positive-secondary)]',\n error: 'tw-bg-[var(--content-negative-secondary)]',\n info: 'tw-bg-[var(--content-informative-secondary)]',\n warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n 'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n {\n variants: {\n size: {\n default:\n 'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n large:\n 'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n },\n status: {\n default:\n 'ald-badge-default tw-bg-[var(--
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n /**\n * 展示的文本内容\n */\n count: string | number;\n /**\n * 状态\n */\n status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n /**\n * 大小\n */\n size?: 'default' | 'large';\n className?: string;\n style?: React.CSSProperties;\n onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n default: 'tw-bg-[var(--content-secondary)]',\n success: 'tw-bg-[var(--content-positive-secondary)]',\n error: 'tw-bg-[var(--content-negative-secondary)]',\n info: 'tw-bg-[var(--content-informative-secondary)]',\n warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n 'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n {\n variants: {\n size: {\n default:\n 'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n large:\n 'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n },\n status: {\n default:\n 'ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-primary)]',\n success:\n 'ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]',\n error:\n 'ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]',\n info: 'ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]',\n warning:\n 'ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]',\n },\n clickable: {\n true: 'ald-badge-clickable tw-cursor-pointer',\n false: '',\n },\n },\n defaultVariants: {\n size: 'default',\n status: 'default',\n clickable: false,\n },\n },\n);\n\nexport default function Badge(props: BadgeProps) {\n const {\n count,\n status = 'default',\n size,\n className,\n style,\n onClick,\n ...rest\n } = props;\n\n const isDot = count === '' || count === undefined;\n\n if (isDot) {\n return (\n <div\n {...rest}\n className={cn(\n 'ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full',\n STATUS_DOT_COLORS[status],\n typeof onClick === 'function' && 'tw-cursor-pointer',\n className,\n )}\n style={{ width: 8, height: 8, gap: 8, ...style }}\n onClick={onClick}\n />\n );\n }\n\n const isNumeric =\n typeof count === 'number' ||\n (typeof count === 'string' && /^[+-]?\\d+$/.test(count.trim()));\n\n return (\n <div\n {...rest}\n className={cn(\n badgeVariants({\n size: size || 'default',\n status,\n clickable: typeof onClick === 'function',\n }),\n className,\n )}\n style={isNumeric ? { fontFamily: 'monospace', ...style } : style}\n onClick={onClick}\n >\n {count}\n </div>\n );\n}\n"],"mappings":";;;;;AAsBA,IAAM,oBAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,OACA,SACA,GAAG,SACD;AAIJ,KAFc,UAAU,MAAM,UAAU,OAGtC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,mFACA,kBAAkB,SAClB,OAAO,YAAY,cAAc,qBACjC,UACD;EACD,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,KAAK;GAAG,GAAG;GAAO;EACvC;EACT,CAAA;CAIN,MAAM,YACJ,OAAO,UAAU,YAChB,OAAO,UAAU,YAAY,aAAa,KAAK,MAAM,MAAM,CAAC;AAE/D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACD,OAAO,YAAY;GAAE,YAAY;GAAa,GAAG;GAAO,GAAG;EAClD;YAER;EACG,CAAA"}
|
package/dist/Breadcrumb/index.js
CHANGED
|
@@ -25,9 +25,9 @@ var Breadcrumb = (props) => {
|
|
|
25
25
|
if (items) return items.map((item, index) => {
|
|
26
26
|
const isLast = index === items.length - 1;
|
|
27
27
|
return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
28
|
-
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--
|
|
28
|
+
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", item.className),
|
|
29
29
|
children: item.href ? /* @__PURE__ */ jsx("a", {
|
|
30
|
-
className: "ald-breadcrumb-link tw-text-[var(--
|
|
30
|
+
className: "ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]",
|
|
31
31
|
href: item.href,
|
|
32
32
|
onClick: item.onClick,
|
|
33
33
|
children: item.title
|
|
@@ -58,10 +58,10 @@ var Breadcrumb = (props) => {
|
|
|
58
58
|
var BreadcrumbItem = (props) => {
|
|
59
59
|
const { className, children, href, onClick, ...rest } = props;
|
|
60
60
|
return /* @__PURE__ */ jsx("span", {
|
|
61
|
-
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--
|
|
61
|
+
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", className),
|
|
62
62
|
onClick,
|
|
63
63
|
children: href ? /* @__PURE__ */ jsx("a", {
|
|
64
|
-
className: "ald-breadcrumb-link tw-text-[var(--
|
|
64
|
+
className: "ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]",
|
|
65
65
|
href,
|
|
66
66
|
children
|
|
67
67
|
}) : children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 3.5L10.5 8L6 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n);\n\nexport interface BreadcrumbProps {\n className?: string;\n style?: React.CSSProperties;\n separator?: React.ReactNode;\n items?: Array<{\n title: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n className?: string;\n }>;\n children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n className?: string;\n children?: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n const {\n className,\n style,\n separator = <DefaultSeparator />,\n items,\n children,\n } = props;\n\n const renderItems = () => {\n if (items) {\n return items.map((item, index) => {\n const isLast = index === items.length - 1;\n return (\n <React.Fragment key={index}>\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 3.5L10.5 8L6 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n);\n\nexport interface BreadcrumbProps {\n className?: string;\n style?: React.CSSProperties;\n separator?: React.ReactNode;\n items?: Array<{\n title: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n className?: string;\n }>;\n children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n className?: string;\n children?: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n const {\n className,\n style,\n separator = <DefaultSeparator />,\n items,\n children,\n } = props;\n\n const renderItems = () => {\n if (items) {\n return items.map((item, index) => {\n const isLast = index === items.length - 1;\n return (\n <React.Fragment key={index}>\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n item.className,\n )}\n >\n {item.href ? (\n <a\n className=\"ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]\"\n href={item.href}\n onClick={item.onClick}\n >\n {item.title}\n </a>\n ) : (\n <span onClick={item.onClick}>{item.title}</span>\n )}\n </span>\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n {separator}\n </span>\n )}\n </React.Fragment>\n );\n });\n }\n\n const childArray = React.Children.toArray(children);\n return childArray.map((child, index) => {\n const isLast = index === childArray.length - 1;\n return (\n <React.Fragment key={index}>\n {React.isValidElement(child)\n ? React.cloneElement(child as React.ReactElement, {\n 'data-last': isLast ? 'true' : undefined,\n })\n : child}\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n {separator}\n </span>\n )}\n </React.Fragment>\n );\n });\n };\n\n return (\n <nav\n className={cn(\n 'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n className,\n )}\n style={style}\n >\n {renderItems()}\n </nav>\n );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n const { className, children, href, onClick, ...rest } = props;\n const isLast = rest['data-last'] === 'true';\n return (\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n className,\n )}\n onClick={onClick}\n >\n {href ? (\n <a\n className=\"ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]\"\n href={href}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </span>\n );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,yBACJ,oBAAC,QAAD;CAAM,WAAU;WACd,oBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,CAAA;EACE,CAAA;CACD,CAAA;AA2BT,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,sJACA,SACI,qCACA,4EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EA3BI,MA2BJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EAXI,MAWJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,sJAJS,KAAK,iBAAiB,SAM3B,qCACA,4EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GACE,WAAU;GACJ;GAEL;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}
|
package/dist/Button/index.js
CHANGED
|
@@ -36,37 +36,37 @@ var buttonVariants = cva([
|
|
|
36
36
|
type: {
|
|
37
37
|
primary: [
|
|
38
38
|
`${btnPrefix}-primary`,
|
|
39
|
-
"tw-border-
|
|
39
|
+
"tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]",
|
|
40
40
|
"hover:tw-bg-[var(--action-primary-hover)]",
|
|
41
41
|
"active:tw-bg-[var(--action-primary-active)]"
|
|
42
42
|
],
|
|
43
43
|
secondary: [
|
|
44
44
|
`${btnPrefix}-secondary`,
|
|
45
|
-
"tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[
|
|
45
|
+
"tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]",
|
|
46
46
|
"hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]",
|
|
47
47
|
"active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]"
|
|
48
48
|
],
|
|
49
49
|
dangerous: [
|
|
50
50
|
`${btnPrefix}-dangerous`,
|
|
51
|
-
"tw-border-
|
|
51
|
+
"tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]",
|
|
52
52
|
"hover:tw-bg-[var(--action-destructive-hover)]",
|
|
53
53
|
"active:tw-bg-[var(--action-destructive-active)]"
|
|
54
54
|
],
|
|
55
55
|
text: [
|
|
56
56
|
`${btnPrefix}-text`,
|
|
57
|
-
"tw-border-
|
|
57
|
+
"tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]",
|
|
58
58
|
"hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]",
|
|
59
59
|
"active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]"
|
|
60
60
|
],
|
|
61
61
|
inverse: [
|
|
62
62
|
`${btnPrefix}-inverse`,
|
|
63
|
-
"tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--
|
|
63
|
+
"tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--content-inverted-primary)]",
|
|
64
64
|
"hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]",
|
|
65
|
-
"active:tw-bg-[var(--
|
|
65
|
+
"active:tw-bg-[var(--action-ghost-inverted-active)]"
|
|
66
66
|
],
|
|
67
67
|
link: [
|
|
68
68
|
`${btnPrefix}-link`,
|
|
69
|
-
"tw-border-
|
|
69
|
+
"tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-primary-normal)]",
|
|
70
70
|
"hover:tw-text-[var(--action-primary-hover)]",
|
|
71
71
|
"active:tw-text-[var(--action-primary-active)]"
|
|
72
72
|
]
|
|
@@ -143,7 +143,7 @@ function Button(props, ref) {
|
|
|
143
143
|
disabled: !!isDisabled,
|
|
144
144
|
block: !!block,
|
|
145
145
|
shape
|
|
146
|
-
}), ghost && "!tw-border-
|
|
146
|
+
}), ghost && "!tw-border-[var(--action-ghost-normal)] !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-[var(--action-ghost-normal)]", ghost && type === "primary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "primary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-px-0", isIconOnly && size === "small" && "!tw-min-w-7", isIconOnly && size === "middle" && "!tw-min-w-8", isIconOnly && size === "large" && "!tw-min-w-10", compactClasses, className);
|
|
147
147
|
const contentClasses = cn("tw-inline-flex tw-min-w-0 tw-items-center tw-gap-1 tw-truncate", ghost && type === "inverse" && size === "middle" && "tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]");
|
|
148
148
|
const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
149
149
|
iconNode,
|
package/dist/Button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ChevronDownLine, LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n | 'primary'\n | 'secondary'\n | 'dangerous'\n | 'text'\n | 'inverse'\n | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n type?: ButtonType;\n size?: Size;\n disabled?: boolean;\n icon?: React.ReactNode;\n shape?: 'circle' | 'default';\n href?: string;\n target?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n loading?: boolean | { delay?: number };\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n block?: boolean;\n htmlType?: 'submit' | 'button' | 'reset';\n id?: string;\n tabIndex?: number;\n title?: string;\n 'aria-label'?: string;\n /** 透传到 button 元素的 data-testid,用于自动化测试定位(经 rest props 透传) */\n 'data-testid'?: string;\n ghost?: boolean;\n danger?: boolean;\n color?: string;\n showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-primary-hover)]',\n 'active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n 'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n 'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n 'link',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n showArrow = false,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"(HTML button type),与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children && !showArrow;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost &&\n '!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n ghost &&\n type === 'primary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'dangerous' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'secondary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-text-[var(--action-destructive-normal)]',\n ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n // icon-only 方形按钮:宽度由 aspect-ratio 从 height 反推,但该反推值\n // 不构成 flex shrink 的下限——父行 max-content 被低估时(同行存在\n // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px),\n // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n // (v2/antd 的 icon-only 即固定 width);带 ! 以盖过 shape=circle\n // 的 tw-min-w-0\n isIconOnly && 'tw-aspect-square !tw-px-0',\n isIconOnly && size === 'small' && '!tw-min-w-7',\n isIconOnly && size === 'middle' && '!tw-min-w-8',\n isIconOnly && size === 'large' && '!tw-min-w-10',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-min-w-0 tw-items-center tw-gap-1 tw-truncate',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAmDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,kEACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ChevronDownLine, LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n | 'primary'\n | 'secondary'\n | 'dangerous'\n | 'text'\n | 'inverse'\n | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n type?: ButtonType;\n size?: Size;\n disabled?: boolean;\n icon?: React.ReactNode;\n shape?: 'circle' | 'default';\n href?: string;\n target?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n loading?: boolean | { delay?: number };\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n block?: boolean;\n htmlType?: 'submit' | 'button' | 'reset';\n id?: string;\n tabIndex?: number;\n title?: string;\n 'aria-label'?: string;\n /** 透传到 button 元素的 data-testid,用于自动化测试定位(经 rest props 透传) */\n 'data-testid'?: string;\n ghost?: boolean;\n danger?: boolean;\n color?: string;\n showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\n 'hover:tw-bg-[var(--action-primary-hover)]',\n 'active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\n 'hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--content-inverted-primary)]',\n 'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n 'active:tw-bg-[var(--action-ghost-inverted-active)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n 'link',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n showArrow = false,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"(HTML button type),与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children && !showArrow;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost &&\n '!tw-border-[var(--action-ghost-normal)] !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-[var(--action-ghost-normal)]',\n ghost &&\n type === 'primary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'dangerous' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'secondary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-text-[var(--action-destructive-normal)]',\n ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n // icon-only 方形按钮:宽度由 aspect-ratio 从 height 反推,但该反推值\n // 不构成 flex shrink 的下限——父行 max-content 被低估时(同行存在\n // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px),\n // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n // (v2/antd 的 icon-only 即固定 width);带 ! 以盖过 shape=circle\n // 的 tw-min-w-0\n isIconOnly && 'tw-aspect-square !tw-px-0',\n isIconOnly && size === 'small' && '!tw-min-w-7',\n isIconOnly && size === 'middle' && '!tw-min-w-8',\n isIconOnly && size === 'large' && '!tw-min-w-10',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-min-w-0 tw-items-center tw-gap-1 tw-truncate',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAmDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,6IACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,kEACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
|