@semcore/tag 3.7.2 → 4.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/CHANGELOG.md +23 -0
- package/lib/cjs/Tag.js +118 -70
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/index.d.ts +5 -3
- package/lib/cjs/style/tag.shadow.css +93 -176
- package/lib/es6/Tag.js +116 -71
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/index.d.ts +5 -3
- package/lib/es6/style/tag.shadow.css +93 -176
- package/lib/types/index.d.ts +5 -3
- package/package.json +1 -1
- package/src/Tag.jsx +86 -29
- package/src/index.d.ts +5 -3
- package/src/style/tag.shadow.css +93 -176
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.1] - 2022-05-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
|
|
10
|
+
|
|
11
|
+
## [4.0.0] - 2022-05-17
|
|
12
|
+
|
|
13
|
+
### BREAK
|
|
14
|
+
|
|
15
|
+
- Updated styles according to the library redesign policy.
|
|
16
|
+
- Set `primary` as default component theme.
|
|
17
|
+
|
|
18
|
+
### Added
|
|
19
|
+
|
|
20
|
+
- Added `additional` theme.
|
|
21
|
+
|
|
22
|
+
## [3.7.3] - 2022-05-16
|
|
23
|
+
|
|
24
|
+
### Changed
|
|
25
|
+
|
|
26
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
27
|
+
|
|
5
28
|
## [3.7.2] - 2022-04-28
|
|
6
29
|
|
|
7
30
|
### Changed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -31,6 +31,8 @@ var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
|
|
|
31
31
|
|
|
32
32
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
33
33
|
|
|
34
|
+
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
35
|
+
|
|
34
36
|
var _m = _interopRequireDefault(require("@semcore/icon/Close/m"));
|
|
35
37
|
|
|
36
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -50,64 +52,118 @@ var style = (
|
|
|
50
52
|
/*__reshadow_css_start__*/
|
|
51
53
|
_core.sstyled.insert(
|
|
52
54
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
55
|
+
".___STag_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p);border-color:var(--colorBorder_mtk9p)}.___STag_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_.__disabled_1xzml_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1xzml_gg_.__interactive_1xzml_gg_{cursor:pointer}.___STag_1xzml_gg_._size_m_1xzml_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:first-child{margin-left:-2px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:last-child{margin-right:-2px}.___STag_1xzml_gg_._size_l_1xzml_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1xzml_gg_._size_xl_1xzml_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1xzml_gg_._theme_primary_1xzml_gg_{background-color:var(--colorBg_mtk9p);border-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p)}.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:hover,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1xzml_gg_._theme_additional_1xzml_gg_{border-style:dashed}.___SText_1xzml_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1xzml_gg_:not(:only-child):first-child{padding-right:0}.___SText_1xzml_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1xzml_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1xzml_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1xzml_gg_:first-child{margin-left:0}.___SCircle_1xzml_gg_:last-child{margin-right:0}.___SCircle_1xzml_gg_._size_m_1xzml_gg_{width:16px;height:16px}.___SCircle_1xzml_gg_._size_l_1xzml_gg_{width:20px;height:20px}.___SCircle_1xzml_gg_._size_xl_1xzml_gg_{width:20px;height:20px}.___SClose_1xzml_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
57
|
+
, "mtk9p_gg_")
|
|
56
58
|
/*__reshadow_css_end__*/
|
|
57
59
|
, {
|
|
58
|
-
"__STag": "
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"_interactive": "
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"_size_m": "
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"_theme_primary
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"_theme_secondary-
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
60
|
+
"__STag": "___STag_1xzml_gg_",
|
|
61
|
+
"--colorBg": "--colorBg_mtk9p",
|
|
62
|
+
"--colorText": "--colorText_mtk9p",
|
|
63
|
+
"--colorBorder": "--colorBorder_mtk9p",
|
|
64
|
+
"_active": "__active_1xzml_gg_",
|
|
65
|
+
"_interactive": "__interactive_1xzml_gg_",
|
|
66
|
+
"--colorBgHover": "--colorBgHover_mtk9p",
|
|
67
|
+
"_disabled": "__disabled_1xzml_gg_",
|
|
68
|
+
"_size_m": "_size_m_1xzml_gg_",
|
|
69
|
+
"__SCircle": "___SCircle_1xzml_gg_",
|
|
70
|
+
"_size_l": "_size_l_1xzml_gg_",
|
|
71
|
+
"_size_xl": "_size_xl_1xzml_gg_",
|
|
72
|
+
"_theme_primary": "_theme_primary_1xzml_gg_",
|
|
73
|
+
"_theme_primary-invert": "_theme_primary-invert_1xzml_gg_",
|
|
74
|
+
"_theme_additional-invert": "_theme_additional-invert_1xzml_gg_",
|
|
75
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1xzml_gg_",
|
|
76
|
+
"_theme_additional": "_theme_additional_1xzml_gg_",
|
|
77
|
+
"__SText": "___SText_1xzml_gg_",
|
|
78
|
+
"__SAddon": "___SAddon_1xzml_gg_",
|
|
79
|
+
"__SClose": "___SClose_1xzml_gg_"
|
|
78
80
|
});
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
var textColorToBgColor = {
|
|
82
|
+
'gray-500': 'gray-100',
|
|
83
|
+
'blue-500': 'blue-100',
|
|
84
|
+
'green-500': 'green-100',
|
|
85
|
+
'salad-500': 'salad-100',
|
|
86
|
+
'orange-500': 'orange-100',
|
|
87
|
+
'yellow-500': 'yellow-100',
|
|
88
|
+
'red-500': 'red-100',
|
|
89
|
+
'pink-500': 'pink-100',
|
|
90
|
+
'violet-500': 'violet-100'
|
|
91
|
+
};
|
|
92
|
+
var textColorToHoveredTextColor = {
|
|
93
|
+
'gray-500': 'gray-50',
|
|
94
|
+
'blue-500': 'blue-50',
|
|
95
|
+
'green-500': 'green-50',
|
|
96
|
+
'salad-500': 'salad-50',
|
|
97
|
+
'orange-500': 'orange-50',
|
|
98
|
+
'yellow-500': 'yellow-50',
|
|
99
|
+
'red-500': 'red-50',
|
|
100
|
+
'pink-500': 'pink-50',
|
|
101
|
+
'violet-500': 'violet-50'
|
|
102
|
+
};
|
|
103
|
+
var textColorToBorderColor = {
|
|
104
|
+
'gray-500': 'gray-200',
|
|
105
|
+
'blue-500': 'blue-200',
|
|
106
|
+
'green-500': 'green-200',
|
|
107
|
+
'salad-500': 'salad-200',
|
|
108
|
+
'orange-500': 'orange-200',
|
|
109
|
+
'yellow-500': 'yellow-200',
|
|
110
|
+
'red-500': 'red-200',
|
|
111
|
+
'pink-500': 'pink-200',
|
|
112
|
+
'violet-500': 'violet-200'
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
var getPrimaryColors = function getPrimaryColors(color) {
|
|
116
|
+
return {
|
|
117
|
+
colorBg: (0, _color.opacity)((0, _color["default"])(textColorToBgColor[color]), 0.5) || (0, _color.light)(color, 0.95),
|
|
118
|
+
colorBgHover: (0, _color["default"])(textColorToBgColor[color] || (0, _color.light)(color, 0.8)),
|
|
119
|
+
colorText: (0, _color["default"])(color)
|
|
84
120
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
var getSecondaryColors = function getSecondaryColors(color) {
|
|
124
|
+
return {
|
|
125
|
+
colorBg: (0, _color["default"])('white'),
|
|
126
|
+
colorBgHover: (0, _color["default"])(textColorToHoveredTextColor[color] || (0, _color.light)(color, 0.95)),
|
|
127
|
+
colorText: (0, _color["default"])(color),
|
|
128
|
+
colorBorder: (0, _color["default"])(textColorToBorderColor[color] || (0, _color.light)(color, 0.5))
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
var legacyThemeRecommendedMigration = {
|
|
133
|
+
primary: {
|
|
134
|
+
muted: 'gray-500',
|
|
135
|
+
info: 'blue-500',
|
|
136
|
+
success: 'green-500',
|
|
137
|
+
warning: 'orange-500',
|
|
138
|
+
danger: 'red-500'
|
|
139
|
+
},
|
|
140
|
+
secondary: {
|
|
141
|
+
muted: 'gray-50'
|
|
142
|
+
}
|
|
143
|
+
};
|
|
91
144
|
|
|
92
145
|
var RootTag = /*#__PURE__*/function (_Component) {
|
|
93
146
|
(0, _inherits2["default"])(RootTag, _Component);
|
|
94
147
|
|
|
95
148
|
var _super = _createSuper(RootTag);
|
|
96
149
|
|
|
97
|
-
function RootTag() {
|
|
150
|
+
function RootTag(props) {
|
|
151
|
+
var _this;
|
|
152
|
+
|
|
98
153
|
(0, _classCallCheck2["default"])(this, RootTag);
|
|
99
|
-
|
|
154
|
+
_this = _super.call(this, props);
|
|
155
|
+
|
|
156
|
+
_logger["default"].warn(props.use, "Property 'use' is deprecated, replace property to \"theme='".concat(props.use, "' color='").concat(legacyThemeRecommendedMigration[props.use]?.[props.theme], "'\""), props['data-ui-name'] || Tag.displayName);
|
|
157
|
+
|
|
158
|
+
return _this;
|
|
100
159
|
}
|
|
101
160
|
|
|
102
161
|
(0, _createClass2["default"])(RootTag, [{
|
|
103
|
-
key: "
|
|
104
|
-
value: function
|
|
105
|
-
var
|
|
106
|
-
use = _this$asProps.use,
|
|
107
|
-
theme = _this$asProps.theme;
|
|
162
|
+
key: "getCircleProps",
|
|
163
|
+
value: function getCircleProps() {
|
|
164
|
+
var size = this.asProps.size;
|
|
108
165
|
return {
|
|
109
|
-
|
|
110
|
-
theme: theme
|
|
166
|
+
size: size
|
|
111
167
|
};
|
|
112
168
|
}
|
|
113
169
|
}, {
|
|
@@ -117,28 +173,22 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
117
173
|
_ref6;
|
|
118
174
|
|
|
119
175
|
var STag = _flexBox.Box;
|
|
120
|
-
var _this$
|
|
121
|
-
Children = _this$
|
|
122
|
-
styles = _this$
|
|
123
|
-
theme = _this$
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
if (disabled) {
|
|
132
|
-
interactive = false;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
var colorTag = theme ? (0, _color.opacity)((0, _color["default"])(theme), 0.5) : '';
|
|
136
|
-
var colorText = color ? (0, _color["default"])(color) : (0, _color["default"])(theme);
|
|
176
|
+
var _this$asProps = this.asProps,
|
|
177
|
+
Children = _this$asProps.Children,
|
|
178
|
+
styles = _this$asProps.styles,
|
|
179
|
+
theme = _this$asProps.theme,
|
|
180
|
+
color = _this$asProps.color,
|
|
181
|
+
interactive = _this$asProps.interactive,
|
|
182
|
+
disabled = _this$asProps.disabled,
|
|
183
|
+
addonLeft = _this$asProps.addonLeft,
|
|
184
|
+
addonRight = _this$asProps.addonRight;
|
|
185
|
+
var colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);
|
|
137
186
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STag, _ref6.cn("STag", _objectSpread({}, (0, _core.assignProps)({
|
|
138
|
-
"use:
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
187
|
+
"use:interactive": !disabled && interactive,
|
|
188
|
+
"colorBg": colors.colorBg,
|
|
189
|
+
"colorBgHover": colors.colorBgHover,
|
|
190
|
+
"colorText": colors.colorText,
|
|
191
|
+
"colorBorder": colors.colorBorder
|
|
142
192
|
}, _ref))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
|
|
143
193
|
tag: addonLeft
|
|
144
194
|
}) : null, (0, _addonTextChildren["default"])(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
|
|
@@ -152,8 +202,8 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
152
202
|
(0, _defineProperty2["default"])(RootTag, "displayName", 'Tag');
|
|
153
203
|
(0, _defineProperty2["default"])(RootTag, "style", style);
|
|
154
204
|
(0, _defineProperty2["default"])(RootTag, "defaultProps", {
|
|
155
|
-
|
|
156
|
-
|
|
205
|
+
theme: 'primary',
|
|
206
|
+
color: 'gray-500',
|
|
157
207
|
size: 'm'
|
|
158
208
|
});
|
|
159
209
|
|
|
@@ -173,12 +223,10 @@ function Close(props) {
|
|
|
173
223
|
_ref8;
|
|
174
224
|
|
|
175
225
|
var SClose = _flexBox.Box;
|
|
176
|
-
var styles = props.styles
|
|
177
|
-
use = props.use,
|
|
178
|
-
theme = props.theme;
|
|
226
|
+
var styles = props.styles;
|
|
179
227
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
|
|
180
|
-
"
|
|
181
|
-
"
|
|
228
|
+
"tag": _m["default"],
|
|
229
|
+
"interactive": true
|
|
182
230
|
}, _ref3))));
|
|
183
231
|
}
|
|
184
232
|
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.jsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["textColorToBgColor","textColorToHoveredTextColor","textColorToBorderColor","getPrimaryColors","color","colorBg","colorBgHover","colorText","getSecondaryColors","colorBorder","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","props","logger","warn","use","theme","Tag","displayName","size","asProps","STag","Box","Children","styles","interactive","disabled","addonLeft","addonRight","colors","Text","Addon","Component","style","SText","Close","SClose","CloseM","SAddon","Circle","SCircle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity, light } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nconst textColorToBgColor = {\n 'gray-500': 'gray-100',\n 'blue-500': 'blue-100',\n 'green-500': 'green-100',\n 'salad-500': 'salad-100',\n 'orange-500': 'orange-100',\n 'yellow-500': 'yellow-100',\n 'red-500': 'red-100',\n 'pink-500': 'pink-100',\n 'violet-500': 'violet-100',\n};\nconst textColorToHoveredTextColor = {\n 'gray-500': 'gray-50',\n 'blue-500': 'blue-50',\n 'green-500': 'green-50',\n 'salad-500': 'salad-50',\n 'orange-500': 'orange-50',\n 'yellow-500': 'yellow-50',\n 'red-500': 'red-50',\n 'pink-500': 'pink-50',\n 'violet-500': 'violet-50',\n};\nconst textColorToBorderColor = {\n 'gray-500': 'gray-200',\n 'blue-500': 'blue-200',\n 'green-500': 'green-200',\n 'salad-500': 'salad-200',\n 'orange-500': 'orange-200',\n 'yellow-500': 'yellow-200',\n 'red-500': 'red-200',\n 'pink-500': 'pink-200',\n 'violet-500': 'violet-200',\n};\n\nconst getPrimaryColors = (color) => ({\n colorBg: opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(color, 0.95),\n colorBgHover: resolveColor(textColorToBgColor[color] || light(color, 0.8)),\n colorText: resolveColor(color),\n});\n\nconst getSecondaryColors = (color) => ({\n colorBg: resolveColor('white'),\n colorBgHover: resolveColor(textColorToHoveredTextColor[color] || light(color, 0.95)),\n colorText: resolveColor(color),\n colorBorder: resolveColor(textColorToBorderColor[color] || light(color, 0.5)),\n});\n\nconst legacyThemeRecommendedMigration = {\n primary: {\n muted: 'gray-500',\n info: 'blue-500',\n success: 'green-500',\n warning: 'orange-500',\n danger: 'red-500',\n },\n secondary: {\n muted: 'gray-50',\n },\n};\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n theme: 'primary',\n color: 'gray-500',\n size: 'm',\n };\n\n constructor(props) {\n super(props);\n\n logger.warn(\n props.use,\n `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n legacyThemeRecommendedMigration[props.use]?.[props.theme]\n }'\"`,\n props['data-ui-name'] || Tag.displayName,\n );\n }\n\n getCircleProps() {\n const { size } = this.asProps;\n return { size };\n }\n\n render() {\n const STag = Root;\n const { Children, styles, theme, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n const colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:interactive={!disabled && interactive}\n colorBg={colors.colorBg}\n colorBgHover={colors.colorBgHover}\n colorText={colors.colorText}\n colorBorder={colors.colorBorder}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles } = props;\n\n return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -3,9 +3,10 @@ import { CProps, ReturnEl, PropGetterFn } from '@semcore/core';
|
|
|
3
3
|
import { IBoxProps } from '@semcore/flex-box';
|
|
4
4
|
import { IIconProps } from '@semcore/icon';
|
|
5
5
|
|
|
6
|
-
export type TagSize = 'xl' | 'l' | 'm'
|
|
7
|
-
export type
|
|
8
|
-
export type
|
|
6
|
+
export type TagSize = 'xl' | 'l' | 'm';
|
|
7
|
+
export type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';
|
|
8
|
+
export type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);
|
|
9
|
+
export type TagUse = 'primary' | 'secondary';
|
|
9
10
|
|
|
10
11
|
export interface ITagProps extends IBoxProps {
|
|
11
12
|
/** Value responsible for tag availability
|
|
@@ -19,6 +20,7 @@ export interface ITagProps extends IBoxProps {
|
|
|
19
20
|
interactive?: boolean;
|
|
20
21
|
/** Tag type
|
|
21
22
|
* @default secondary
|
|
23
|
+
* @deprecated {@link ITagProps.theme}
|
|
22
24
|
*/
|
|
23
25
|
use?: TagUse;
|
|
24
26
|
/** Tag theme, there are several default themes or you can use your color
|