@akinon/ui-tag 0.6.0 → 1.0.1
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 -19
- package/dist/cjs/types.d.ts +64 -1
- package/dist/esm/index.d.ts +14 -10
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +47 -14
- package/dist/esm/types.d.ts +64 -1
- package/package.json +9 -6
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { type TagProps } from './types.d';
|
|
3
|
+
export { type AntTagProps, type TagProps, TagStatus } 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":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAoBvE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAyGV,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -15,34 +15,58 @@ exports.Tag = exports.TagStatus = void 0;
|
|
|
15
15
|
const ui_theme_1 = require("@akinon/ui-theme");
|
|
16
16
|
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
17
17
|
const antd_1 = require("antd");
|
|
18
|
+
const antd_style_1 = require("antd-style");
|
|
18
19
|
const clsx_1 = require("clsx");
|
|
20
|
+
const color_1 = require("color");
|
|
19
21
|
const React = require("react");
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
22
|
+
const types_d_1 = require("./types.d");
|
|
23
|
+
var types_d_2 = require("./types.d");
|
|
24
|
+
Object.defineProperty(exports, "TagStatus", { enumerable: true, get: function () { return types_d_2.TagStatus; } });
|
|
25
|
+
// It is necessary for dynamic styles to be created in this way.
|
|
26
|
+
const useDynamicStyles = (0, antd_style_1.createStyles)(({ css }, { prefixClsWithoutHash, color, status }) => ({
|
|
27
|
+
dynamicStyles: css `
|
|
28
|
+
${color &&
|
|
29
|
+
`&${prefixClsWithoutHash}-${status} {
|
|
30
|
+
color: ${color};
|
|
31
|
+
background-color: ${(0, color_1.default)(color)
|
|
32
|
+
.lighten(0.4)
|
|
33
|
+
.whiten(0.4)
|
|
34
|
+
.hsl()
|
|
35
|
+
.toString()};
|
|
36
|
+
border-color: ${(0, color_1.default)(color).lighten(0.2).whiten(0.2).hsl().toString()};
|
|
37
|
+
}`}
|
|
38
|
+
`
|
|
39
|
+
}));
|
|
40
|
+
/**
|
|
41
|
+
* Tag component for Akinon UI.
|
|
42
|
+
*
|
|
43
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
44
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
45
|
+
* allowing for enhanced flexibility and design consistency.
|
|
46
|
+
*
|
|
47
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
48
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
49
|
+
* filtering, or highlighting content within an application.
|
|
50
|
+
*/
|
|
28
51
|
const Tag = (_a) => {
|
|
29
|
-
var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
|
|
52
|
+
var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
|
|
30
53
|
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
31
54
|
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
32
55
|
const tagToken = token.Tag;
|
|
56
|
+
const customTokens = theme.CustomTokens || {};
|
|
57
|
+
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
33
58
|
const useStyle = (0, cssinjs_1.useStyleRegister)({
|
|
34
59
|
token: token,
|
|
35
60
|
path: ['Tag'],
|
|
36
61
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
37
62
|
theme: theme
|
|
38
63
|
}, () => {
|
|
39
|
-
const prefixCls = `:where(.${hashId})
|
|
40
|
-
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
64
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
41
65
|
return {
|
|
42
66
|
[prefixCls]: {
|
|
43
67
|
borderRadius: tagToken.borderRadius,
|
|
44
68
|
fontSize: tagToken.fontSize,
|
|
45
|
-
fontWeight:
|
|
69
|
+
fontWeight: customTokens.typography.fontWeightMedium,
|
|
46
70
|
paddingLeft: tagToken.paddingLeft,
|
|
47
71
|
paddingRight: tagToken.paddingRight
|
|
48
72
|
},
|
|
@@ -52,9 +76,9 @@ const Tag = (_a) => {
|
|
|
52
76
|
}
|
|
53
77
|
},
|
|
54
78
|
[`${prefixClsWithoutHash}-borderless`]: {
|
|
55
|
-
border:
|
|
79
|
+
border: customTokens.border.borderNone
|
|
56
80
|
},
|
|
57
|
-
[`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
|
|
81
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Success}`]: {
|
|
58
82
|
color: tagToken.defaultColorSuccess,
|
|
59
83
|
borderColor: tagToken.defaultBorderColorSuccess,
|
|
60
84
|
backgroundColor: tagToken.defaultBgSuccess,
|
|
@@ -62,7 +86,7 @@ const Tag = (_a) => {
|
|
|
62
86
|
color: tagToken.defaultColorSuccess
|
|
63
87
|
}
|
|
64
88
|
},
|
|
65
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
|
|
89
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info1}`]: {
|
|
66
90
|
color: tagToken.defaultColorWaiting1,
|
|
67
91
|
borderColor: tagToken.defaultBorderColorWaiting1,
|
|
68
92
|
backgroundColor: tagToken.defaultBgWaiting1,
|
|
@@ -70,7 +94,7 @@ const Tag = (_a) => {
|
|
|
70
94
|
color: tagToken.defaultColorWaiting1
|
|
71
95
|
}
|
|
72
96
|
},
|
|
73
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
|
|
97
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info2}`]: {
|
|
74
98
|
color: tagToken.defaultColorWaiting2,
|
|
75
99
|
borderColor: tagToken.defaultBorderColorWaiting2,
|
|
76
100
|
backgroundColor: tagToken.defaultBgWaiting2,
|
|
@@ -78,7 +102,7 @@ const Tag = (_a) => {
|
|
|
78
102
|
color: tagToken.defaultColorWaiting2
|
|
79
103
|
}
|
|
80
104
|
},
|
|
81
|
-
[`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
|
|
105
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info3}`]: {
|
|
82
106
|
color: tagToken.defaultColorWaiting3,
|
|
83
107
|
borderColor: tagToken.defaultBorderColorWaiting3,
|
|
84
108
|
backgroundColor: tagToken.defaultBgWaiting3,
|
|
@@ -86,16 +110,26 @@ const Tag = (_a) => {
|
|
|
86
110
|
color: tagToken.defaultColorWaiting3
|
|
87
111
|
}
|
|
88
112
|
},
|
|
89
|
-
[`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
|
|
113
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Error}`]: {
|
|
90
114
|
color: tagToken.defaultColorFailed,
|
|
91
115
|
borderColor: tagToken.defaultBorderColorFailed,
|
|
92
116
|
backgroundColor: tagToken.defaultBgFailed,
|
|
93
117
|
svg: {
|
|
94
118
|
color: tagToken.defaultColorFailed
|
|
95
119
|
}
|
|
120
|
+
},
|
|
121
|
+
[`${prefixClsWithoutHash}-${types_d_1.TagStatus.Empty}`]: {
|
|
122
|
+
color: tagToken.defaultColorEmpty,
|
|
123
|
+
borderColor: tagToken.defaultBorderColorEmpty,
|
|
124
|
+
backgroundColor: tagToken.defaultBgEmpty
|
|
96
125
|
}
|
|
97
126
|
};
|
|
98
127
|
});
|
|
99
|
-
|
|
128
|
+
const { styles } = useDynamicStyles({
|
|
129
|
+
prefixClsWithoutHash,
|
|
130
|
+
status,
|
|
131
|
+
color
|
|
132
|
+
});
|
|
133
|
+
return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `${getPrefixCls()}-tag-${status}`, styles.dynamicStyles, className) }, restTagProps), children));
|
|
100
134
|
};
|
|
101
135
|
exports.Tag = Tag;
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
|
-
|
|
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
|
+
}
|
|
2
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Props for the Tag component, extending AntTagProps and adding status support.
|
|
38
|
+
*/
|
|
3
39
|
export type TagProps = Omit<
|
|
4
40
|
AntTagProps,
|
|
5
41
|
'prefixCls' | 'style' | 'styles' | 'visible'
|
|
@@ -10,43 +46,70 @@ export type TagProps = Omit<
|
|
|
10
46
|
status?: TagStatus;
|
|
11
47
|
};
|
|
12
48
|
|
|
49
|
+
/**
|
|
50
|
+
* Props for the AntTag component.
|
|
51
|
+
*/
|
|
13
52
|
export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
/**
|
|
54
|
+
* Prefix class for the tag component.
|
|
55
|
+
*/
|
|
14
56
|
prefixCls?: string;
|
|
57
|
+
|
|
15
58
|
/**
|
|
16
59
|
* The additional css class
|
|
17
60
|
*/
|
|
18
61
|
className?: string;
|
|
62
|
+
|
|
19
63
|
/**
|
|
20
64
|
* ClassName on the root element
|
|
21
65
|
*/
|
|
22
66
|
rootClassName?: string;
|
|
67
|
+
|
|
23
68
|
/**
|
|
24
69
|
* Color of the Tag
|
|
25
70
|
*/
|
|
26
71
|
color?: string;
|
|
72
|
+
|
|
27
73
|
/**
|
|
28
74
|
* Closable Tag supports onClose event
|
|
29
75
|
*/
|
|
30
76
|
closable?:
|
|
31
77
|
| boolean
|
|
32
78
|
| ({
|
|
79
|
+
/**
|
|
80
|
+
* Custom close icon for the tag.
|
|
81
|
+
*/
|
|
33
82
|
closeIcon?: React.ReactNode;
|
|
34
83
|
} & React.AriaAttributes);
|
|
84
|
+
|
|
35
85
|
/**
|
|
36
86
|
* Custom close icon
|
|
37
87
|
*/
|
|
38
88
|
closeIcon?: React.ReactNode;
|
|
89
|
+
|
|
39
90
|
/**
|
|
40
91
|
* Callback executed when tag is closed
|
|
41
92
|
*/
|
|
42
93
|
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Inline styles for the tag component.
|
|
97
|
+
*/
|
|
43
98
|
style?: React.CSSProperties;
|
|
99
|
+
|
|
44
100
|
/**
|
|
45
101
|
* Set the icon of tag
|
|
46
102
|
*/
|
|
47
103
|
icon?: React.ReactNode;
|
|
104
|
+
|
|
48
105
|
/**
|
|
49
106
|
* Whether has border style
|
|
50
107
|
*/
|
|
51
108
|
bordered?: boolean;
|
|
52
109
|
}
|
|
110
|
+
|
|
111
|
+
interface DynamicStylesProps {
|
|
112
|
+
prefixClsWithoutHash: string;
|
|
113
|
+
color?: string;
|
|
114
|
+
status?: TagStatus;
|
|
115
|
+
}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { type TagProps } from './types.d';
|
|
3
|
+
export { type AntTagProps, type TagProps, TagStatus } 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":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAoBvE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAyGV,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -12,34 +12,57 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { useToken } from '@akinon/ui-theme';
|
|
13
13
|
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
14
14
|
import { ConfigProvider, Tag as AntTag } from 'antd';
|
|
15
|
+
import { createStyles } from 'antd-style';
|
|
15
16
|
import clsx from 'clsx';
|
|
17
|
+
import Color from 'color';
|
|
16
18
|
import * as React from 'react';
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
import { TagStatus } from './types.d';
|
|
20
|
+
export { TagStatus } from './types.d';
|
|
21
|
+
// It is necessary for dynamic styles to be created in this way.
|
|
22
|
+
const useDynamicStyles = createStyles(({ css }, { prefixClsWithoutHash, color, status }) => ({
|
|
23
|
+
dynamicStyles: css `
|
|
24
|
+
${color &&
|
|
25
|
+
`&${prefixClsWithoutHash}-${status} {
|
|
26
|
+
color: ${color};
|
|
27
|
+
background-color: ${Color(color)
|
|
28
|
+
.lighten(0.4)
|
|
29
|
+
.whiten(0.4)
|
|
30
|
+
.hsl()
|
|
31
|
+
.toString()};
|
|
32
|
+
border-color: ${Color(color).lighten(0.2).whiten(0.2).hsl().toString()};
|
|
33
|
+
}`}
|
|
34
|
+
`
|
|
35
|
+
}));
|
|
36
|
+
/**
|
|
37
|
+
* Tag component for Akinon UI.
|
|
38
|
+
*
|
|
39
|
+
* The Tag component is used to represent categorized or labeled content.
|
|
40
|
+
* It supports customizable colors, closable functionality, and icons,
|
|
41
|
+
* allowing for enhanced flexibility and design consistency.
|
|
42
|
+
*
|
|
43
|
+
* This component adheres to the Akinon design system, ensuring uniformity
|
|
44
|
+
* and accessibility. It is ideal for use cases such as categorization,
|
|
45
|
+
* filtering, or highlighting content within an application.
|
|
46
|
+
*/
|
|
25
47
|
export const Tag = (_a) => {
|
|
26
|
-
var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
|
|
48
|
+
var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
|
|
27
49
|
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
28
50
|
const { token, hashId } = useToken();
|
|
29
51
|
const tagToken = token.Tag;
|
|
52
|
+
const customTokens = theme.CustomTokens || {};
|
|
53
|
+
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
30
54
|
const useStyle = useStyleRegister({
|
|
31
55
|
token: token,
|
|
32
56
|
path: ['Tag'],
|
|
33
57
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34
58
|
theme: theme
|
|
35
59
|
}, () => {
|
|
36
|
-
const prefixCls = `:where(.${hashId})
|
|
37
|
-
const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
|
|
60
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
38
61
|
return {
|
|
39
62
|
[prefixCls]: {
|
|
40
63
|
borderRadius: tagToken.borderRadius,
|
|
41
64
|
fontSize: tagToken.fontSize,
|
|
42
|
-
fontWeight:
|
|
65
|
+
fontWeight: customTokens.typography.fontWeightMedium,
|
|
43
66
|
paddingLeft: tagToken.paddingLeft,
|
|
44
67
|
paddingRight: tagToken.paddingRight
|
|
45
68
|
},
|
|
@@ -49,7 +72,7 @@ export const Tag = (_a) => {
|
|
|
49
72
|
}
|
|
50
73
|
},
|
|
51
74
|
[`${prefixClsWithoutHash}-borderless`]: {
|
|
52
|
-
border:
|
|
75
|
+
border: customTokens.border.borderNone
|
|
53
76
|
},
|
|
54
77
|
[`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
|
|
55
78
|
color: tagToken.defaultColorSuccess,
|
|
@@ -90,8 +113,18 @@ export const Tag = (_a) => {
|
|
|
90
113
|
svg: {
|
|
91
114
|
color: tagToken.defaultColorFailed
|
|
92
115
|
}
|
|
116
|
+
},
|
|
117
|
+
[`${prefixClsWithoutHash}-${TagStatus.Empty}`]: {
|
|
118
|
+
color: tagToken.defaultColorEmpty,
|
|
119
|
+
borderColor: tagToken.defaultBorderColorEmpty,
|
|
120
|
+
backgroundColor: tagToken.defaultBgEmpty
|
|
93
121
|
}
|
|
94
122
|
};
|
|
95
123
|
});
|
|
96
|
-
|
|
124
|
+
const { styles } = useDynamicStyles({
|
|
125
|
+
prefixClsWithoutHash,
|
|
126
|
+
status,
|
|
127
|
+
color
|
|
128
|
+
});
|
|
129
|
+
return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `${getPrefixCls()}-tag-${status}`, styles.dynamicStyles, className) }, restTagProps), children));
|
|
97
130
|
};
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
|
-
|
|
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
|
+
}
|
|
2
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Props for the Tag component, extending AntTagProps and adding status support.
|
|
38
|
+
*/
|
|
3
39
|
export type TagProps = Omit<
|
|
4
40
|
AntTagProps,
|
|
5
41
|
'prefixCls' | 'style' | 'styles' | 'visible'
|
|
@@ -10,43 +46,70 @@ export type TagProps = Omit<
|
|
|
10
46
|
status?: TagStatus;
|
|
11
47
|
};
|
|
12
48
|
|
|
49
|
+
/**
|
|
50
|
+
* Props for the AntTag component.
|
|
51
|
+
*/
|
|
13
52
|
export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
/**
|
|
54
|
+
* Prefix class for the tag component.
|
|
55
|
+
*/
|
|
14
56
|
prefixCls?: string;
|
|
57
|
+
|
|
15
58
|
/**
|
|
16
59
|
* The additional css class
|
|
17
60
|
*/
|
|
18
61
|
className?: string;
|
|
62
|
+
|
|
19
63
|
/**
|
|
20
64
|
* ClassName on the root element
|
|
21
65
|
*/
|
|
22
66
|
rootClassName?: string;
|
|
67
|
+
|
|
23
68
|
/**
|
|
24
69
|
* Color of the Tag
|
|
25
70
|
*/
|
|
26
71
|
color?: string;
|
|
72
|
+
|
|
27
73
|
/**
|
|
28
74
|
* Closable Tag supports onClose event
|
|
29
75
|
*/
|
|
30
76
|
closable?:
|
|
31
77
|
| boolean
|
|
32
78
|
| ({
|
|
79
|
+
/**
|
|
80
|
+
* Custom close icon for the tag.
|
|
81
|
+
*/
|
|
33
82
|
closeIcon?: React.ReactNode;
|
|
34
83
|
} & React.AriaAttributes);
|
|
84
|
+
|
|
35
85
|
/**
|
|
36
86
|
* Custom close icon
|
|
37
87
|
*/
|
|
38
88
|
closeIcon?: React.ReactNode;
|
|
89
|
+
|
|
39
90
|
/**
|
|
40
91
|
* Callback executed when tag is closed
|
|
41
92
|
*/
|
|
42
93
|
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Inline styles for the tag component.
|
|
97
|
+
*/
|
|
43
98
|
style?: React.CSSProperties;
|
|
99
|
+
|
|
44
100
|
/**
|
|
45
101
|
* Set the icon of tag
|
|
46
102
|
*/
|
|
47
103
|
icon?: React.ReactNode;
|
|
104
|
+
|
|
48
105
|
/**
|
|
49
106
|
* Whether has border style
|
|
50
107
|
*/
|
|
51
108
|
bordered?: boolean;
|
|
52
109
|
}
|
|
110
|
+
|
|
111
|
+
interface DynamicStylesProps {
|
|
112
|
+
prefixClsWithoutHash: string;
|
|
113
|
+
color?: string;
|
|
114
|
+
status?: TagStatus;
|
|
115
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-tag",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -9,16 +9,19 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"antd": "5.
|
|
13
|
-
"
|
|
12
|
+
"antd": "5.22.6",
|
|
13
|
+
"antd-style": "^3.7.1",
|
|
14
|
+
"clsx": "^2.0.0",
|
|
15
|
+
"color": "4.2.3"
|
|
14
16
|
},
|
|
15
17
|
"devDependencies": {
|
|
18
|
+
"@types/color": "4.2.0",
|
|
16
19
|
"clean-package": "2.2.0",
|
|
17
20
|
"copyfiles": "^2.4.1",
|
|
18
21
|
"rimraf": "^5.0.5",
|
|
19
|
-
"typescript": "
|
|
20
|
-
"@akinon/typescript-config": "0.
|
|
21
|
-
"@akinon/ui-theme": "0.
|
|
22
|
+
"typescript": "*",
|
|
23
|
+
"@akinon/typescript-config": "1.0.1",
|
|
24
|
+
"@akinon/ui-theme": "1.0.1"
|
|
22
25
|
},
|
|
23
26
|
"peerDependencies": {
|
|
24
27
|
"react": ">=18",
|