@akinon/ui-tag 0.5.0 → 1.0.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/dist/cjs/index.d.ts +14 -10
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +53 -28
- package/dist/cjs/types.d.ts +109 -0
- package/dist/esm/index.d.ts +14 -10
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +38 -27
- package/dist/esm/types.d.ts +109 -0
- package/package.json +9 -7
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { type TagProps } from './types.d';
|
|
3
|
+
export * from './types.d';
|
|
4
|
+
/**
|
|
5
|
+
* Tag component for Akinon UI.
|
|
6
|
+
*
|
|
7
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
8
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
9
|
+
* allowing for enhanced flexibility and design consistency.
|
|
10
|
+
*
|
|
11
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
12
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
13
|
+
* filtering, or highlighting content within an application.
|
|
14
|
+
*/
|
|
15
|
+
export declare const Tag: ({ children, status, className, color, ...restTagProps }: TagProps) => React.JSX.Element;
|
|
12
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
2
16
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
17
|
var t = {};
|
|
4
18
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -11,22 +25,28 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
25
|
return t;
|
|
12
26
|
};
|
|
13
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.Tag =
|
|
28
|
+
exports.Tag = void 0;
|
|
15
29
|
const ui_theme_1 = require("@akinon/ui-theme");
|
|
16
30
|
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
17
31
|
const antd_1 = require("antd");
|
|
18
32
|
const clsx_1 = require("clsx");
|
|
33
|
+
const color_1 = require("color");
|
|
19
34
|
const React = require("react");
|
|
20
|
-
|
|
21
|
-
(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
const types_d_1 = require("./types.d");
|
|
36
|
+
__exportStar(require("./types.d"), exports);
|
|
37
|
+
/**
|
|
38
|
+
* Tag component for Akinon UI.
|
|
39
|
+
*
|
|
40
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
41
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
42
|
+
* allowing for enhanced flexibility and design consistency.
|
|
43
|
+
*
|
|
44
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
45
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
46
|
+
* filtering, or highlighting content within an application.
|
|
47
|
+
*/
|
|
28
48
|
const Tag = (_a) => {
|
|
29
|
-
var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
|
|
49
|
+
var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
|
|
30
50
|
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
31
51
|
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
32
52
|
const tagToken = token.Tag;
|
|
@@ -38,64 +58,69 @@ const Tag = (_a) => {
|
|
|
38
58
|
}, () => {
|
|
39
59
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
|
|
40
60
|
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
41
|
-
return {
|
|
42
|
-
[prefixCls]: {
|
|
61
|
+
return Object.assign({ [prefixCls]: {
|
|
43
62
|
borderRadius: tagToken.borderRadius,
|
|
44
63
|
fontSize: tagToken.fontSize,
|
|
45
64
|
fontWeight: tagToken.fontWeight,
|
|
46
65
|
paddingLeft: tagToken.paddingLeft,
|
|
47
66
|
paddingRight: tagToken.paddingRight
|
|
48
|
-
},
|
|
49
|
-
[prefixClsWithoutHash]: {
|
|
67
|
+
}, [prefixClsWithoutHash]: {
|
|
50
68
|
svg: {
|
|
51
69
|
fontSize: tagToken.fontSizeClose
|
|
52
70
|
}
|
|
53
|
-
},
|
|
54
|
-
[`${prefixClsWithoutHash}-borderless`]: {
|
|
71
|
+
}, [`${prefixClsWithoutHash}-borderless`]: {
|
|
55
72
|
border: 'none'
|
|
56
|
-
},
|
|
57
|
-
[`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
|
|
73
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Success}`]: {
|
|
58
74
|
color: tagToken.defaultColorSuccess,
|
|
59
75
|
borderColor: tagToken.defaultBorderColorSuccess,
|
|
60
76
|
backgroundColor: tagToken.defaultBgSuccess,
|
|
61
77
|
svg: {
|
|
62
78
|
color: tagToken.defaultColorSuccess
|
|
63
79
|
}
|
|
64
|
-
},
|
|
65
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
|
|
80
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info1}`]: {
|
|
66
81
|
color: tagToken.defaultColorWaiting1,
|
|
67
82
|
borderColor: tagToken.defaultBorderColorWaiting1,
|
|
68
83
|
backgroundColor: tagToken.defaultBgWaiting1,
|
|
69
84
|
svg: {
|
|
70
85
|
color: tagToken.defaultColorWaiting1
|
|
71
86
|
}
|
|
72
|
-
},
|
|
73
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
|
|
87
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info2}`]: {
|
|
74
88
|
color: tagToken.defaultColorWaiting2,
|
|
75
89
|
borderColor: tagToken.defaultBorderColorWaiting2,
|
|
76
90
|
backgroundColor: tagToken.defaultBgWaiting2,
|
|
77
91
|
svg: {
|
|
78
92
|
color: tagToken.defaultColorWaiting2
|
|
79
93
|
}
|
|
80
|
-
},
|
|
81
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
|
|
94
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info3}`]: {
|
|
82
95
|
color: tagToken.defaultColorWaiting3,
|
|
83
96
|
borderColor: tagToken.defaultBorderColorWaiting3,
|
|
84
97
|
backgroundColor: tagToken.defaultBgWaiting3,
|
|
85
98
|
svg: {
|
|
86
99
|
color: tagToken.defaultColorWaiting3
|
|
87
100
|
}
|
|
88
|
-
},
|
|
89
|
-
[`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
|
|
101
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Error}`]: {
|
|
90
102
|
color: tagToken.defaultColorFailed,
|
|
91
103
|
borderColor: tagToken.defaultBorderColorFailed,
|
|
92
104
|
backgroundColor: tagToken.defaultBgFailed,
|
|
93
105
|
svg: {
|
|
94
106
|
color: tagToken.defaultColorFailed
|
|
95
107
|
}
|
|
108
|
+
}, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Empty}`]: {
|
|
109
|
+
color: tagToken.defaultColorEmpty,
|
|
110
|
+
borderColor: tagToken.defaultBorderColorEmpty,
|
|
111
|
+
backgroundColor: tagToken.defaultBgEmpty
|
|
112
|
+
} }, (color && {
|
|
113
|
+
[`${prefixClsWithoutHash}-${status}`]: {
|
|
114
|
+
color,
|
|
115
|
+
backgroundColor: (0, color_1.default)(color)
|
|
116
|
+
.lighten(0.4)
|
|
117
|
+
.whiten(0.4)
|
|
118
|
+
.hsl()
|
|
119
|
+
.toString(),
|
|
120
|
+
borderColor: (0, color_1.default)(color).lighten(0.2).whiten(0.2).hsl().toString()
|
|
96
121
|
}
|
|
97
|
-
};
|
|
122
|
+
}));
|
|
98
123
|
});
|
|
99
|
-
return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status &&
|
|
124
|
+
return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
|
|
100
125
|
};
|
|
101
126
|
exports.Tag = Tag;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum representing the predefined statuses for the Tag component.
|
|
3
|
+
*/
|
|
4
|
+
export enum TagStatus {
|
|
5
|
+
/**
|
|
6
|
+
* Represents a successful status.
|
|
7
|
+
*/
|
|
8
|
+
Success = 'success',
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Represents the first informational status.
|
|
12
|
+
*/
|
|
13
|
+
Info1 = 'info-1',
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Represents the second informational status.
|
|
17
|
+
*/
|
|
18
|
+
Info2 = 'info-2',
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Represents the third informational status.
|
|
22
|
+
*/
|
|
23
|
+
Info3 = 'info-3',
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Represents an error status.
|
|
27
|
+
*/
|
|
28
|
+
Error = 'error',
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Represents an empty status.
|
|
32
|
+
*/
|
|
33
|
+
Empty = 'empty'
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Props for the Tag component, extending AntTagProps and adding status support.
|
|
38
|
+
*/
|
|
39
|
+
export type TagProps = Omit<
|
|
40
|
+
AntTagProps,
|
|
41
|
+
'prefixCls' | 'style' | 'styles' | 'visible'
|
|
42
|
+
> & {
|
|
43
|
+
/**
|
|
44
|
+
* The status of the tag.
|
|
45
|
+
*/
|
|
46
|
+
status?: TagStatus;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Props for the AntTag component.
|
|
51
|
+
*/
|
|
52
|
+
export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
/**
|
|
54
|
+
* Prefix class for the tag component.
|
|
55
|
+
*/
|
|
56
|
+
prefixCls?: string;
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* The additional css class
|
|
60
|
+
*/
|
|
61
|
+
className?: string;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* ClassName on the root element
|
|
65
|
+
*/
|
|
66
|
+
rootClassName?: string;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Color of the Tag
|
|
70
|
+
*/
|
|
71
|
+
color?: string;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Closable Tag supports onClose event
|
|
75
|
+
*/
|
|
76
|
+
closable?:
|
|
77
|
+
| boolean
|
|
78
|
+
| ({
|
|
79
|
+
/**
|
|
80
|
+
* Custom close icon for the tag.
|
|
81
|
+
*/
|
|
82
|
+
closeIcon?: React.ReactNode;
|
|
83
|
+
} & React.AriaAttributes);
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Custom close icon
|
|
87
|
+
*/
|
|
88
|
+
closeIcon?: React.ReactNode;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Callback executed when tag is closed
|
|
92
|
+
*/
|
|
93
|
+
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Inline styles for the tag component.
|
|
97
|
+
*/
|
|
98
|
+
style?: React.CSSProperties;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Set the icon of tag
|
|
102
|
+
*/
|
|
103
|
+
icon?: React.ReactNode;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Whether has border style
|
|
107
|
+
*/
|
|
108
|
+
bordered?: boolean;
|
|
109
|
+
}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { type TagProps } from './types.d';
|
|
3
|
+
export * from './types.d';
|
|
4
|
+
/**
|
|
5
|
+
* Tag component for Akinon UI.
|
|
6
|
+
*
|
|
7
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
8
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
9
|
+
* allowing for enhanced flexibility and design consistency.
|
|
10
|
+
*
|
|
11
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
12
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
13
|
+
* filtering, or highlighting content within an application.
|
|
14
|
+
*/
|
|
15
|
+
export declare const Tag: ({ children, status, className, color, ...restTagProps }: TagProps) => React.JSX.Element;
|
|
12
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -13,17 +13,23 @@ import { useToken } from '@akinon/ui-theme';
|
|
|
13
13
|
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
14
14
|
import { ConfigProvider, Tag as AntTag } from 'antd';
|
|
15
15
|
import clsx from 'clsx';
|
|
16
|
+
import Color from 'color';
|
|
16
17
|
import * as React from 'react';
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
import { TagStatus } from './types.d';
|
|
19
|
+
export * from './types.d';
|
|
20
|
+
/**
|
|
21
|
+
* Tag component for Akinon UI.
|
|
22
|
+
*
|
|
23
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
24
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
25
|
+
* allowing for enhanced flexibility and design consistency.
|
|
26
|
+
*
|
|
27
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
28
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
29
|
+
* filtering, or highlighting content within an application.
|
|
30
|
+
*/
|
|
25
31
|
export const Tag = (_a) => {
|
|
26
|
-
var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
|
|
32
|
+
var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
|
|
27
33
|
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
28
34
|
const { token, hashId } = useToken();
|
|
29
35
|
const tagToken = token.Tag;
|
|
@@ -35,63 +41,68 @@ export const Tag = (_a) => {
|
|
|
35
41
|
}, () => {
|
|
36
42
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
|
|
37
43
|
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
38
|
-
return {
|
|
39
|
-
[prefixCls]: {
|
|
44
|
+
return Object.assign({ [prefixCls]: {
|
|
40
45
|
borderRadius: tagToken.borderRadius,
|
|
41
46
|
fontSize: tagToken.fontSize,
|
|
42
47
|
fontWeight: tagToken.fontWeight,
|
|
43
48
|
paddingLeft: tagToken.paddingLeft,
|
|
44
49
|
paddingRight: tagToken.paddingRight
|
|
45
|
-
},
|
|
46
|
-
[prefixClsWithoutHash]: {
|
|
50
|
+
}, [prefixClsWithoutHash]: {
|
|
47
51
|
svg: {
|
|
48
52
|
fontSize: tagToken.fontSizeClose
|
|
49
53
|
}
|
|
50
|
-
},
|
|
51
|
-
[`${prefixClsWithoutHash}-borderless`]: {
|
|
54
|
+
}, [`${prefixClsWithoutHash}-borderless`]: {
|
|
52
55
|
border: 'none'
|
|
53
|
-
},
|
|
54
|
-
[`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
|
|
56
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
|
|
55
57
|
color: tagToken.defaultColorSuccess,
|
|
56
58
|
borderColor: tagToken.defaultBorderColorSuccess,
|
|
57
59
|
backgroundColor: tagToken.defaultBgSuccess,
|
|
58
60
|
svg: {
|
|
59
61
|
color: tagToken.defaultColorSuccess
|
|
60
62
|
}
|
|
61
|
-
},
|
|
62
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
|
|
63
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
|
|
63
64
|
color: tagToken.defaultColorWaiting1,
|
|
64
65
|
borderColor: tagToken.defaultBorderColorWaiting1,
|
|
65
66
|
backgroundColor: tagToken.defaultBgWaiting1,
|
|
66
67
|
svg: {
|
|
67
68
|
color: tagToken.defaultColorWaiting1
|
|
68
69
|
}
|
|
69
|
-
},
|
|
70
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
|
|
70
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
|
|
71
71
|
color: tagToken.defaultColorWaiting2,
|
|
72
72
|
borderColor: tagToken.defaultBorderColorWaiting2,
|
|
73
73
|
backgroundColor: tagToken.defaultBgWaiting2,
|
|
74
74
|
svg: {
|
|
75
75
|
color: tagToken.defaultColorWaiting2
|
|
76
76
|
}
|
|
77
|
-
},
|
|
78
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
|
|
77
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
|
|
79
78
|
color: tagToken.defaultColorWaiting3,
|
|
80
79
|
borderColor: tagToken.defaultBorderColorWaiting3,
|
|
81
80
|
backgroundColor: tagToken.defaultBgWaiting3,
|
|
82
81
|
svg: {
|
|
83
82
|
color: tagToken.defaultColorWaiting3
|
|
84
83
|
}
|
|
85
|
-
},
|
|
86
|
-
[`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
|
|
84
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
|
|
87
85
|
color: tagToken.defaultColorFailed,
|
|
88
86
|
borderColor: tagToken.defaultBorderColorFailed,
|
|
89
87
|
backgroundColor: tagToken.defaultBgFailed,
|
|
90
88
|
svg: {
|
|
91
89
|
color: tagToken.defaultColorFailed
|
|
92
90
|
}
|
|
91
|
+
}, [`${prefixClsWithoutHash}-${TagStatus.Empty}`]: {
|
|
92
|
+
color: tagToken.defaultColorEmpty,
|
|
93
|
+
borderColor: tagToken.defaultBorderColorEmpty,
|
|
94
|
+
backgroundColor: tagToken.defaultBgEmpty
|
|
95
|
+
} }, (color && {
|
|
96
|
+
[`${prefixClsWithoutHash}-${status}`]: {
|
|
97
|
+
color,
|
|
98
|
+
backgroundColor: Color(color)
|
|
99
|
+
.lighten(0.4)
|
|
100
|
+
.whiten(0.4)
|
|
101
|
+
.hsl()
|
|
102
|
+
.toString(),
|
|
103
|
+
borderColor: Color(color).lighten(0.2).whiten(0.2).hsl().toString()
|
|
93
104
|
}
|
|
94
|
-
};
|
|
105
|
+
}));
|
|
95
106
|
});
|
|
96
|
-
return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status &&
|
|
107
|
+
return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
|
|
97
108
|
};
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum representing the predefined statuses for the Tag component.
|
|
3
|
+
*/
|
|
4
|
+
export enum TagStatus {
|
|
5
|
+
/**
|
|
6
|
+
* Represents a successful status.
|
|
7
|
+
*/
|
|
8
|
+
Success = 'success',
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Represents the first informational status.
|
|
12
|
+
*/
|
|
13
|
+
Info1 = 'info-1',
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Represents the second informational status.
|
|
17
|
+
*/
|
|
18
|
+
Info2 = 'info-2',
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Represents the third informational status.
|
|
22
|
+
*/
|
|
23
|
+
Info3 = 'info-3',
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Represents an error status.
|
|
27
|
+
*/
|
|
28
|
+
Error = 'error',
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Represents an empty status.
|
|
32
|
+
*/
|
|
33
|
+
Empty = 'empty'
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Props for the Tag component, extending AntTagProps and adding status support.
|
|
38
|
+
*/
|
|
39
|
+
export type TagProps = Omit<
|
|
40
|
+
AntTagProps,
|
|
41
|
+
'prefixCls' | 'style' | 'styles' | 'visible'
|
|
42
|
+
> & {
|
|
43
|
+
/**
|
|
44
|
+
* The status of the tag.
|
|
45
|
+
*/
|
|
46
|
+
status?: TagStatus;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Props for the AntTag component.
|
|
51
|
+
*/
|
|
52
|
+
export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
/**
|
|
54
|
+
* Prefix class for the tag component.
|
|
55
|
+
*/
|
|
56
|
+
prefixCls?: string;
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* The additional css class
|
|
60
|
+
*/
|
|
61
|
+
className?: string;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* ClassName on the root element
|
|
65
|
+
*/
|
|
66
|
+
rootClassName?: string;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Color of the Tag
|
|
70
|
+
*/
|
|
71
|
+
color?: string;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Closable Tag supports onClose event
|
|
75
|
+
*/
|
|
76
|
+
closable?:
|
|
77
|
+
| boolean
|
|
78
|
+
| ({
|
|
79
|
+
/**
|
|
80
|
+
* Custom close icon for the tag.
|
|
81
|
+
*/
|
|
82
|
+
closeIcon?: React.ReactNode;
|
|
83
|
+
} & React.AriaAttributes);
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Custom close icon
|
|
87
|
+
*/
|
|
88
|
+
closeIcon?: React.ReactNode;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Callback executed when tag is closed
|
|
92
|
+
*/
|
|
93
|
+
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Inline styles for the tag component.
|
|
97
|
+
*/
|
|
98
|
+
style?: React.CSSProperties;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Set the icon of tag
|
|
102
|
+
*/
|
|
103
|
+
icon?: React.ReactNode;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Whether has border style
|
|
107
|
+
*/
|
|
108
|
+
bordered?: boolean;
|
|
109
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-tag",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -9,16 +9,18 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"antd": "5.
|
|
13
|
-
"clsx": "^2.0.0"
|
|
12
|
+
"antd": "5.22.6",
|
|
13
|
+
"clsx": "^2.0.0",
|
|
14
|
+
"color": "4.2.3"
|
|
14
15
|
},
|
|
15
16
|
"devDependencies": {
|
|
17
|
+
"@types/color": "4.2.0",
|
|
16
18
|
"clean-package": "2.2.0",
|
|
17
19
|
"copyfiles": "^2.4.1",
|
|
18
20
|
"rimraf": "^5.0.5",
|
|
19
|
-
"typescript": "
|
|
20
|
-
"@akinon/typescript-config": "0.
|
|
21
|
-
"@akinon/ui-theme": "0.
|
|
21
|
+
"typescript": "*",
|
|
22
|
+
"@akinon/typescript-config": "1.0.0",
|
|
23
|
+
"@akinon/ui-theme": "1.0.0"
|
|
22
24
|
},
|
|
23
25
|
"peerDependencies": {
|
|
24
26
|
"react": ">=18",
|
|
@@ -38,7 +40,7 @@
|
|
|
38
40
|
"build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
|
|
39
41
|
"build:esm": "tsc --outDir dist/esm",
|
|
40
42
|
"build:commonjs": "tsc --module commonjs --outDir dist/cjs",
|
|
41
|
-
"copy:files": "copyfiles -u 1 src
|
|
43
|
+
"copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
|
|
42
44
|
"clean": "rimraf dist/",
|
|
43
45
|
"typecheck": "tsc --noEmit"
|
|
44
46
|
}
|