@semcore/tag 3.5.2 → 3.6.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 +28 -0
- package/lib/cjs/Tag.js +31 -29
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/cjs/style/tag.shadow.css +4 -2
- package/lib/es6/Tag.js +26 -27
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +4 -2
- package/lib/types/index.d.ts +1 -1
- package/package.json +3 -3
- package/src/Tag.js +2 -9
- package/src/index.d.ts +1 -1
- package/src/style/tag.shadow.css +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.6.1] - 2022-01-18
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Tag text vertical cut in some rare cases.
|
|
10
|
+
|
|
11
|
+
## [3.6.0] - 2022-01-18
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Up version icons and use new icon.
|
|
16
|
+
|
|
17
|
+
## [3.5.4] - 2021-12-28
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- [ts] Added type `custom` in property `use`.
|
|
22
|
+
|
|
23
|
+
## [3.5.3] - 2021-12-23
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
|
|
28
|
+
|
|
5
29
|
## [3.5.2] - 2021-12-17
|
|
6
30
|
|
|
7
31
|
### Fixed
|
|
@@ -20,6 +44,10 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
20
44
|
|
|
21
45
|
- Added property for Tag color
|
|
22
46
|
|
|
47
|
+
### Changed
|
|
48
|
+
|
|
49
|
+
- Changed the opacity of the Tag color from 0.15 to 0.5.
|
|
50
|
+
|
|
23
51
|
## [3.4.2] - 2021-8-26
|
|
24
52
|
|
|
25
53
|
### Changed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -31,13 +31,15 @@ var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
|
|
|
31
31
|
|
|
32
32
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _m = _interopRequireDefault(require("@semcore/icon/Close/m"));
|
|
35
|
+
|
|
36
|
+
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); }
|
|
35
37
|
|
|
36
|
-
var
|
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
39
|
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
40
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
39
41
|
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
42
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
41
43
|
|
|
42
44
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
43
45
|
|
|
@@ -48,31 +50,31 @@ var style = (
|
|
|
48
50
|
/*__reshadow_css_start__*/
|
|
49
51
|
_core.sstyled.insert(
|
|
50
52
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
53
|
+
".___STag_1ikt5_gg_{justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px}.___STag_1ikt5_gg_,.___SText_1ikt5_gg_{display:inline-flex;align-items:center;padding-left:4px;padding-right:4px}.___SText_1ikt5_gg_{height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_1ikt5_gg_:not(:only-child):first-child{padding-right:0}.___SText_1ikt5_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1ikt5_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1ikt5_gg_{flex-shrink:0;padding-left:4px;padding-right:4px}.___SAddon_1ikt5_gg_,.___SCircle_1ikt5_gg_{display:inline-flex;align-items:center;justify-content:center}.___SCircle_1ikt5_gg_{overflow:hidden;border-radius:50%;margin-right:4px}.___STag_1ikt5_gg_.__disabled_1ikt5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1ikt5_gg_.__interactive_1ikt5_gg_{cursor:pointer}.___STag_1ikt5_gg_._size_xl_1ikt5_gg_{height:42px;min-width:42px;font-size:16px}.___STag_1ikt5_gg_._size_xl_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:28px;height:28px}.___STag_1ikt5_gg_._size_l_1ikt5_gg_{height:32px;min-width:32px;font-size:14px}.___STag_1ikt5_gg_._size_l_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:24px;height:24px}.___STag_1ikt5_gg_._size_m_1ikt5_gg_{height:26px;min-width:26px;font-size:12px}.___STag_1ikt5_gg_._size_m_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:20px;height:20px}.___STag_1ikt5_gg_._size_s_1ikt5_gg_{height:18px;min-width:18px;font-size:10px}.___STag_1ikt5_gg_._size_s_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:12px;height:12px}.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:hover{background-color:#e0e1e9}.___STag_1ikt5_gg_._theme_primary-warning_1ikt5_gg_{background-color:#ff7f00;color:#fff;border-color:#ff7f00}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:hover{background-color:#fff;color:#333333}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_ .___SClose_1ikt5_gg_:hover{color:#333333}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:hover{color:#333333}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:active{background-color:#eeeeee;color:#333333}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_{color:var(--colorText_1bujtnd);background-color:var(--colorTag_1bujtnd)}.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__interactive_1ikt5_gg_:hover{color:#fff;background-color:var(--colorText_1bujtnd)}.___SClose_1ikt5_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_1ikt5_gg_._theme_primary-warning_1ikt5_gg_,.___SClose_1ikt5_gg_._theme_primary-warning_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_primary-invert_1ikt5_gg_{color:#999}.___SClose_1ikt5_gg_._theme_primary-invert_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_{color:hsla(0,0%,40%,.5)}.___SClose_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_:hover{color:#333333}.___SClose_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_{color:hsla(0,0%,100%,.5)}.___SClose_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_custom_1ikt5_gg_{opacity:.5}.___SClose_1ikt5_gg_._theme_custom_1ikt5_gg_:hover{opacity:1}"
|
|
52
54
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
55
|
+
, "1bujtnd_gg_")
|
|
54
56
|
/*__reshadow_css_end__*/
|
|
55
57
|
, {
|
|
56
|
-
"__STag": "
|
|
57
|
-
"__SText": "
|
|
58
|
-
"__SAddon": "
|
|
59
|
-
"__SCircle": "
|
|
60
|
-
"_disabled": "
|
|
61
|
-
"_interactive": "
|
|
62
|
-
"_size_xl": "
|
|
63
|
-
"_size_l": "
|
|
64
|
-
"_size_m": "
|
|
65
|
-
"_size_s": "
|
|
66
|
-
"_theme_primary-muted": "_theme_primary-
|
|
67
|
-
"_active": "
|
|
68
|
-
"_theme_primary-warning": "_theme_primary-
|
|
69
|
-
"_theme_primary-invert": "_theme_primary-
|
|
70
|
-
"__SClose": "
|
|
71
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
72
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
73
|
-
"_theme_custom": "
|
|
74
|
-
"--colorText": "--
|
|
75
|
-
"--colorTag": "--
|
|
58
|
+
"__STag": "___STag_1ikt5_gg_",
|
|
59
|
+
"__SText": "___SText_1ikt5_gg_",
|
|
60
|
+
"__SAddon": "___SAddon_1ikt5_gg_",
|
|
61
|
+
"__SCircle": "___SCircle_1ikt5_gg_",
|
|
62
|
+
"_disabled": "__disabled_1ikt5_gg_",
|
|
63
|
+
"_interactive": "__interactive_1ikt5_gg_",
|
|
64
|
+
"_size_xl": "_size_xl_1ikt5_gg_",
|
|
65
|
+
"_size_l": "_size_l_1ikt5_gg_",
|
|
66
|
+
"_size_m": "_size_m_1ikt5_gg_",
|
|
67
|
+
"_size_s": "_size_s_1ikt5_gg_",
|
|
68
|
+
"_theme_primary-muted": "_theme_primary-muted_1ikt5_gg_",
|
|
69
|
+
"_active": "__active_1ikt5_gg_",
|
|
70
|
+
"_theme_primary-warning": "_theme_primary-warning_1ikt5_gg_",
|
|
71
|
+
"_theme_primary-invert": "_theme_primary-invert_1ikt5_gg_",
|
|
72
|
+
"__SClose": "___SClose_1ikt5_gg_",
|
|
73
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1ikt5_gg_",
|
|
74
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1ikt5_gg_",
|
|
75
|
+
"_theme_custom": "_theme_custom_1ikt5_gg_",
|
|
76
|
+
"--colorText": "--colorText_1bujtnd",
|
|
77
|
+
"--colorTag": "--colorTag_1bujtnd"
|
|
76
78
|
});
|
|
77
79
|
|
|
78
80
|
function isCustomTheme(use, theme) {
|
|
@@ -180,7 +182,7 @@ function Close(props) {
|
|
|
180
182
|
size = props.size;
|
|
181
183
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
|
|
182
184
|
"use:theme": getThemeName(use, theme),
|
|
183
|
-
"tag":
|
|
185
|
+
"tag": _m["default"]
|
|
184
186
|
}, _ref3))));
|
|
185
187
|
}
|
|
186
188
|
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.js"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","Component","style","props","SText","Close","SClose","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.js"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","Component","style","props","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 } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme, size } = this.asProps;\n return { use, theme, size };\n }\n\n render() {\n const STag = Root;\n let {\n Children,\n styles,\n theme,\n use,\n color,\n interactive,\n disabled,\n addonLeft,\n addonRight,\n } = this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const useTheme = getThemeName(use, theme);\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={useTheme}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\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, use, theme, size } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\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.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -26,4 +26,8 @@ Object.keys(_Tag).forEach(function (key) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
|
+
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
33
|
//# sourceMappingURL=index.js.map
|
|
@@ -15,13 +15,15 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
height: 100%;
|
|
19
21
|
padding-left: 4px;
|
|
20
22
|
padding-right: 4px;
|
|
21
23
|
white-space: nowrap;
|
|
22
24
|
overflow: hidden;
|
|
23
25
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
26
|
+
line-height: 1.1;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
SText:not(:only-child):first-child {
|
package/lib/es6/Tag.js
CHANGED
|
@@ -11,9 +11,9 @@ import { assignProps as _assignProps3 } from "@semcore/core";
|
|
|
11
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
13
|
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
15
|
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
17
|
|
|
18
18
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
19
19
|
|
|
@@ -24,39 +24,38 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
24
24
|
import { Box } from '@semcore/flex-box';
|
|
25
25
|
import resolveColor, { opacity } from '@semcore/utils/lib/color';
|
|
26
26
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
27
|
-
import
|
|
28
|
-
import CloseXXS from '@semcore/icon/lib/Close/xxs';
|
|
27
|
+
import CloseM from '@semcore/icon/Close/m';
|
|
29
28
|
|
|
30
29
|
/*__reshadow-styles__:"./style/tag.shadow.css"*/
|
|
31
30
|
var style = (
|
|
32
31
|
/*__reshadow_css_start__*/
|
|
33
32
|
_sstyled.insert(
|
|
34
33
|
/*__inner_css_start__*/
|
|
35
|
-
".
|
|
34
|
+
".___STag_1ikt5_gg_{justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px}.___STag_1ikt5_gg_,.___SText_1ikt5_gg_{display:inline-flex;align-items:center;padding-left:4px;padding-right:4px}.___SText_1ikt5_gg_{height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_1ikt5_gg_:not(:only-child):first-child{padding-right:0}.___SText_1ikt5_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1ikt5_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1ikt5_gg_{flex-shrink:0;padding-left:4px;padding-right:4px}.___SAddon_1ikt5_gg_,.___SCircle_1ikt5_gg_{display:inline-flex;align-items:center;justify-content:center}.___SCircle_1ikt5_gg_{overflow:hidden;border-radius:50%;margin-right:4px}.___STag_1ikt5_gg_.__disabled_1ikt5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1ikt5_gg_.__interactive_1ikt5_gg_{cursor:pointer}.___STag_1ikt5_gg_._size_xl_1ikt5_gg_{height:42px;min-width:42px;font-size:16px}.___STag_1ikt5_gg_._size_xl_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:28px;height:28px}.___STag_1ikt5_gg_._size_l_1ikt5_gg_{height:32px;min-width:32px;font-size:14px}.___STag_1ikt5_gg_._size_l_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:24px;height:24px}.___STag_1ikt5_gg_._size_m_1ikt5_gg_{height:26px;min-width:26px;font-size:12px}.___STag_1ikt5_gg_._size_m_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:20px;height:20px}.___STag_1ikt5_gg_._size_s_1ikt5_gg_{height:18px;min-width:18px;font-size:10px}.___STag_1ikt5_gg_._size_s_1ikt5_gg_ .___SCircle_1ikt5_gg_{width:12px;height:12px}.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_primary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:hover{background-color:#e0e1e9}.___STag_1ikt5_gg_._theme_primary-warning_1ikt5_gg_{background-color:#ff7f00;color:#fff;border-color:#ff7f00}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:hover{background-color:#fff;color:#333333}.___STag_1ikt5_gg_._theme_primary-invert_1ikt5_gg_.__interactive_1ikt5_gg_ .___SClose_1ikt5_gg_:hover{color:#333333}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:hover{color:#333333}.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_.__interactive_1ikt5_gg_:active{background-color:#eeeeee;color:#333333}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_.__interactive_1ikt5_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_{color:var(--colorText_1bujtnd);background-color:var(--colorTag_1bujtnd)}.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__active_1ikt5_gg_,.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__interactive_1ikt5_gg_:active,.___STag_1ikt5_gg_._theme_custom_1ikt5_gg_.__interactive_1ikt5_gg_:hover{color:#fff;background-color:var(--colorText_1bujtnd)}.___SClose_1ikt5_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_1ikt5_gg_._theme_primary-warning_1ikt5_gg_,.___SClose_1ikt5_gg_._theme_primary-warning_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_primary-invert_1ikt5_gg_{color:#999}.___SClose_1ikt5_gg_._theme_primary-invert_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_{color:hsla(0,0%,40%,.5)}.___SClose_1ikt5_gg_._theme_secondary-muted_1ikt5_gg_:hover{color:#333333}.___SClose_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_{color:hsla(0,0%,100%,.5)}.___SClose_1ikt5_gg_._theme_secondary-invert_1ikt5_gg_:hover{color:#fff}.___SClose_1ikt5_gg_._theme_custom_1ikt5_gg_{opacity:.5}.___SClose_1ikt5_gg_._theme_custom_1ikt5_gg_:hover{opacity:1}"
|
|
36
35
|
/*__inner_css_end__*/
|
|
37
|
-
, "
|
|
36
|
+
, "1bujtnd_gg_")
|
|
38
37
|
/*__reshadow_css_end__*/
|
|
39
38
|
, {
|
|
40
|
-
"__STag": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"__SAddon": "
|
|
43
|
-
"__SCircle": "
|
|
44
|
-
"_disabled": "
|
|
45
|
-
"_interactive": "
|
|
46
|
-
"_size_xl": "
|
|
47
|
-
"_size_l": "
|
|
48
|
-
"_size_m": "
|
|
49
|
-
"_size_s": "
|
|
50
|
-
"_theme_primary-muted": "_theme_primary-
|
|
51
|
-
"_active": "
|
|
52
|
-
"_theme_primary-warning": "_theme_primary-
|
|
53
|
-
"_theme_primary-invert": "_theme_primary-
|
|
54
|
-
"__SClose": "
|
|
55
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
56
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
57
|
-
"_theme_custom": "
|
|
58
|
-
"--colorText": "--
|
|
59
|
-
"--colorTag": "--
|
|
39
|
+
"__STag": "___STag_1ikt5_gg_",
|
|
40
|
+
"__SText": "___SText_1ikt5_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_1ikt5_gg_",
|
|
42
|
+
"__SCircle": "___SCircle_1ikt5_gg_",
|
|
43
|
+
"_disabled": "__disabled_1ikt5_gg_",
|
|
44
|
+
"_interactive": "__interactive_1ikt5_gg_",
|
|
45
|
+
"_size_xl": "_size_xl_1ikt5_gg_",
|
|
46
|
+
"_size_l": "_size_l_1ikt5_gg_",
|
|
47
|
+
"_size_m": "_size_m_1ikt5_gg_",
|
|
48
|
+
"_size_s": "_size_s_1ikt5_gg_",
|
|
49
|
+
"_theme_primary-muted": "_theme_primary-muted_1ikt5_gg_",
|
|
50
|
+
"_active": "__active_1ikt5_gg_",
|
|
51
|
+
"_theme_primary-warning": "_theme_primary-warning_1ikt5_gg_",
|
|
52
|
+
"_theme_primary-invert": "_theme_primary-invert_1ikt5_gg_",
|
|
53
|
+
"__SClose": "___SClose_1ikt5_gg_",
|
|
54
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1ikt5_gg_",
|
|
55
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1ikt5_gg_",
|
|
56
|
+
"_theme_custom": "_theme_custom_1ikt5_gg_",
|
|
57
|
+
"--colorText": "--colorText_1bujtnd",
|
|
58
|
+
"--colorTag": "--colorTag_1bujtnd"
|
|
60
59
|
});
|
|
61
60
|
|
|
62
61
|
function isCustomTheme(use, theme) {
|
|
@@ -168,7 +167,7 @@ function Close(props) {
|
|
|
168
167
|
size = props.size;
|
|
169
168
|
return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps3({
|
|
170
169
|
"use:theme": getThemeName(use, theme),
|
|
171
|
-
"tag":
|
|
170
|
+
"tag": CloseM
|
|
172
171
|
}, _ref3))));
|
|
173
172
|
}
|
|
174
173
|
|
package/lib/es6/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","CloseM","isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","style","props","SText","Close","SClose","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 } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme, size } = this.asProps;\n return { use, theme, size };\n }\n\n render() {\n const STag = Root;\n let {\n Children,\n styles,\n theme,\n use,\n color,\n interactive,\n disabled,\n addonLeft,\n addonRight,\n } = this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const useTheme = getThemeName(use, theme);\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={useTheme}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\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, use, theme, size } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\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"}
|
|
@@ -15,13 +15,15 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
height: 100%;
|
|
19
21
|
padding-left: 4px;
|
|
20
22
|
padding-right: 4px;
|
|
21
23
|
white-space: nowrap;
|
|
22
24
|
overflow: hidden;
|
|
23
25
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
26
|
+
line-height: 1.1;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
SText:not(:only-child):first-child {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { IIconProps } from '@semcore/icon';
|
|
|
5
5
|
|
|
6
6
|
export type TagSize = 'xl' | 'l' | 'm' | 's';
|
|
7
7
|
export type TagTheme = 'muted' | 'invert' | 'warning' | string;
|
|
8
|
-
export type TagUse = 'primary' | 'secondary';
|
|
8
|
+
export type TagUse = 'primary' | 'secondary' | 'custom';
|
|
9
9
|
|
|
10
10
|
export interface ITagProps extends IBoxProps {
|
|
11
11
|
/** Value responsible for tag availability
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tag",
|
|
3
3
|
"description": "SEMRush Tag Component",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.6.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.15",
|
|
17
|
-
"@semcore/icon": "^2",
|
|
17
|
+
"@semcore/icon": "^2.16",
|
|
18
18
|
"@semcore/flex-box": "^4"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -22,6 +22,6 @@
|
|
|
22
22
|
"react": "16.8 - 17"
|
|
23
23
|
},
|
|
24
24
|
"jest": {
|
|
25
|
-
"preset": "jest-preset-ui"
|
|
25
|
+
"preset": "@semcore/jest-preset-ui"
|
|
26
26
|
}
|
|
27
27
|
}
|
package/src/Tag.js
CHANGED
|
@@ -3,8 +3,7 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
4
|
import resolveColor, { opacity } from '@semcore/utils/lib/color';
|
|
5
5
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
6
|
-
import
|
|
7
|
-
import CloseXXS from '@semcore/icon/lib/Close/xxs';
|
|
6
|
+
import CloseM from '@semcore/icon/Close/m';
|
|
8
7
|
|
|
9
8
|
import style from './style/tag.shadow.css';
|
|
10
9
|
|
|
@@ -82,13 +81,7 @@ function Close(props) {
|
|
|
82
81
|
const SClose = Root;
|
|
83
82
|
const { styles, use, theme, size } = props;
|
|
84
83
|
|
|
85
|
-
return sstyled(styles)(
|
|
86
|
-
<SClose
|
|
87
|
-
render={Box}
|
|
88
|
-
use:theme={getThemeName(use, theme)}
|
|
89
|
-
tag={size === 'xl' ? CloseXS : CloseXXS}
|
|
90
|
-
/>,
|
|
91
|
-
);
|
|
84
|
+
return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);
|
|
92
85
|
}
|
|
93
86
|
|
|
94
87
|
function Addon(props) {
|
package/src/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { IIconProps } from '@semcore/icon';
|
|
|
5
5
|
|
|
6
6
|
export type TagSize = 'xl' | 'l' | 'm' | 's';
|
|
7
7
|
export type TagTheme = 'muted' | 'invert' | 'warning' | string;
|
|
8
|
-
export type TagUse = 'primary' | 'secondary';
|
|
8
|
+
export type TagUse = 'primary' | 'secondary' | 'custom';
|
|
9
9
|
|
|
10
10
|
export interface ITagProps extends IBoxProps {
|
|
11
11
|
/** Value responsible for tag availability
|
package/src/style/tag.shadow.css
CHANGED
|
@@ -15,13 +15,15 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
height: 100%;
|
|
19
21
|
padding-left: 4px;
|
|
20
22
|
padding-right: 4px;
|
|
21
23
|
white-space: nowrap;
|
|
22
24
|
overflow: hidden;
|
|
23
25
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
26
|
+
line-height: 1.1;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
SText:not(:only-child):first-child {
|