@semcore/tag 3.6.4 → 3.7.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 +18 -0
- package/lib/cjs/Tag.js +22 -22
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/style/tag.shadow.css +2 -4
- package/lib/es6/Tag.js +22 -22
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +2 -4
- package/package.json +1 -1
- package/src/{Tag.js → Tag.jsx} +0 -0
- package/src/style/tag.shadow.css +2 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.7.1] - 2022-03-21
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.19.4 ~> 2.20.0]).
|
|
10
|
+
|
|
11
|
+
## [3.7.0] - 2022-03-18
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed previously lost overflowed text ellipsis.
|
|
16
|
+
|
|
17
|
+
## [3.6.5] - 2022-03-14
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/icon` [2.19.3 ~> 2.19.4], `@semcore/flex-box` [4.5.0 ~> 4.5.1]).
|
|
22
|
+
|
|
5
23
|
## [3.6.4] - 2022-02-24
|
|
6
24
|
|
|
7
25
|
### Added
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -50,31 +50,31 @@ var style = (
|
|
|
50
50
|
/*__reshadow_css_start__*/
|
|
51
51
|
_core.sstyled.insert(
|
|
52
52
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
53
|
+
".___STag_u6arl_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:21px;padding-left:4px;padding-right:4px}.___SText_u6arl_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.___SText_u6arl_gg_:not(:only-child):first-child{padding-right:0}.___SText_u6arl_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_u6arl_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_u6arl_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_u6arl_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin-right:4px}.___STag_u6arl_gg_.__disabled_u6arl_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_u6arl_gg_.__interactive_u6arl_gg_{cursor:pointer}.___STag_u6arl_gg_._size_xl_u6arl_gg_{height:42px;min-width:42px;font-size:16px}.___STag_u6arl_gg_._size_xl_u6arl_gg_ .___SCircle_u6arl_gg_{width:28px;height:28px}.___STag_u6arl_gg_._size_l_u6arl_gg_{height:32px;min-width:32px;font-size:14px}.___STag_u6arl_gg_._size_l_u6arl_gg_ .___SCircle_u6arl_gg_{width:24px;height:24px}.___STag_u6arl_gg_._size_m_u6arl_gg_{height:26px;min-width:26px;font-size:12px}.___STag_u6arl_gg_._size_m_u6arl_gg_ .___SCircle_u6arl_gg_{width:20px;height:20px}.___STag_u6arl_gg_._size_s_u6arl_gg_{height:18px;min-width:18px;font-size:10px}.___STag_u6arl_gg_._size_s_u6arl_gg_ .___SCircle_u6arl_gg_{width:12px;height:12px}.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__interactive_u6arl_gg_:active,.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#e0e1e9}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_{background-color:rgba(255,127,0,.15);color:#ff7f00}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#ff7f00;color:#fff}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_ .___SClose_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active .___SClose_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover .___SClose_u6arl_gg_{color:hsla(0,0%,100%,.15)}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_ .___SClose_u6arl_gg_:hover,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active .___SClose_u6arl_gg_:hover,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover .___SClose_u6arl_gg_:hover{color:#fff}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:#fff;color:#333333}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#fff;color:#333333}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_ .___SClose_u6arl_gg_:hover{color:#333333}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__interactive_u6arl_gg_:hover{color:#333333}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:#eeeeee;color:#333333}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__interactive_u6arl_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_{color:var(--colorText_rejl88);background-color:var(--colorTag_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__active_u6arl_gg_{color:#fff;background-color:var(--colorText_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__interactive_u6arl_gg_:hover{color:#fff;background-color:var(--colorText_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__interactive_u6arl_gg_:active{color:#fff;background-color:var(--colorText_rejl88)}.___SClose_u6arl_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_u6arl_gg_._theme_primary-warning_u6arl_gg_{color:rgba(255,127,0,.5)}.___SClose_u6arl_gg_._theme_primary-invert_u6arl_gg_{color:#999}.___SClose_u6arl_gg_._theme_primary-invert_u6arl_gg_:hover{color:#fff}.___SClose_u6arl_gg_._theme_secondary-muted_u6arl_gg_{color:hsla(0,0%,40%,.5)}.___SClose_u6arl_gg_._theme_secondary-muted_u6arl_gg_:hover{color:#333333}.___SClose_u6arl_gg_._theme_secondary-invert_u6arl_gg_{color:hsla(0,0%,100%,.5)}.___SClose_u6arl_gg_._theme_secondary-invert_u6arl_gg_:hover{color:#fff}.___SClose_u6arl_gg_._theme_custom_u6arl_gg_{opacity:.5}.___SClose_u6arl_gg_._theme_custom_u6arl_gg_:hover{opacity:1}"
|
|
54
54
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
55
|
+
, "rejl88_gg_")
|
|
56
56
|
/*__reshadow_css_end__*/
|
|
57
57
|
, {
|
|
58
|
-
"__STag": "
|
|
59
|
-
"__SText": "
|
|
60
|
-
"__SAddon": "
|
|
61
|
-
"__SCircle": "
|
|
62
|
-
"_disabled": "
|
|
63
|
-
"_interactive": "
|
|
64
|
-
"_size_xl": "
|
|
65
|
-
"_size_l": "
|
|
66
|
-
"_size_m": "
|
|
67
|
-
"_size_s": "
|
|
68
|
-
"_theme_primary-muted": "_theme_primary-
|
|
69
|
-
"_active": "
|
|
70
|
-
"_theme_primary-warning": "_theme_primary-
|
|
71
|
-
"__SClose": "
|
|
72
|
-
"_theme_primary-invert": "_theme_primary-
|
|
73
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
74
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
75
|
-
"_theme_custom": "
|
|
76
|
-
"--colorText": "--
|
|
77
|
-
"--colorTag": "--
|
|
58
|
+
"__STag": "___STag_u6arl_gg_",
|
|
59
|
+
"__SText": "___SText_u6arl_gg_",
|
|
60
|
+
"__SAddon": "___SAddon_u6arl_gg_",
|
|
61
|
+
"__SCircle": "___SCircle_u6arl_gg_",
|
|
62
|
+
"_disabled": "__disabled_u6arl_gg_",
|
|
63
|
+
"_interactive": "__interactive_u6arl_gg_",
|
|
64
|
+
"_size_xl": "_size_xl_u6arl_gg_",
|
|
65
|
+
"_size_l": "_size_l_u6arl_gg_",
|
|
66
|
+
"_size_m": "_size_m_u6arl_gg_",
|
|
67
|
+
"_size_s": "_size_s_u6arl_gg_",
|
|
68
|
+
"_theme_primary-muted": "_theme_primary-muted_u6arl_gg_",
|
|
69
|
+
"_active": "__active_u6arl_gg_",
|
|
70
|
+
"_theme_primary-warning": "_theme_primary-warning_u6arl_gg_",
|
|
71
|
+
"__SClose": "___SClose_u6arl_gg_",
|
|
72
|
+
"_theme_primary-invert": "_theme_primary-invert_u6arl_gg_",
|
|
73
|
+
"_theme_secondary-muted": "_theme_secondary-muted_u6arl_gg_",
|
|
74
|
+
"_theme_secondary-invert": "_theme_secondary-invert_u6arl_gg_",
|
|
75
|
+
"_theme_custom": "_theme_custom_u6arl_gg_",
|
|
76
|
+
"--colorText": "--colorText_rejl88",
|
|
77
|
+
"--colorTag": "--colorTag_rejl88"
|
|
78
78
|
});
|
|
79
79
|
|
|
80
80
|
function isCustomTheme(use, theme) {
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","colorTag","colorText","Tag","Text","Addon","Component","style","size","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 } = this.asProps;\n return { use, theme };\n }\n\n render() {\n const STag = Root;\n let { Children, styles, theme, use, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\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={getThemeName(use, theme)}\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 } = 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,15 +15,13 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
19
|
-
align-items: center;
|
|
20
|
-
height: 100%;
|
|
18
|
+
display: inline-block;
|
|
21
19
|
padding-left: 4px;
|
|
22
20
|
padding-right: 4px;
|
|
23
21
|
white-space: nowrap;
|
|
24
22
|
overflow: hidden;
|
|
25
23
|
text-overflow: ellipsis;
|
|
26
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.2;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
SText:not(:only-child):first-child {
|
package/lib/es6/Tag.js
CHANGED
|
@@ -31,31 +31,31 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___STag_u6arl_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:21px;padding-left:4px;padding-right:4px}.___SText_u6arl_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.___SText_u6arl_gg_:not(:only-child):first-child{padding-right:0}.___SText_u6arl_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_u6arl_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_u6arl_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_u6arl_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin-right:4px}.___STag_u6arl_gg_.__disabled_u6arl_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_u6arl_gg_.__interactive_u6arl_gg_{cursor:pointer}.___STag_u6arl_gg_._size_xl_u6arl_gg_{height:42px;min-width:42px;font-size:16px}.___STag_u6arl_gg_._size_xl_u6arl_gg_ .___SCircle_u6arl_gg_{width:28px;height:28px}.___STag_u6arl_gg_._size_l_u6arl_gg_{height:32px;min-width:32px;font-size:14px}.___STag_u6arl_gg_._size_l_u6arl_gg_ .___SCircle_u6arl_gg_{width:24px;height:24px}.___STag_u6arl_gg_._size_m_u6arl_gg_{height:26px;min-width:26px;font-size:12px}.___STag_u6arl_gg_._size_m_u6arl_gg_ .___SCircle_u6arl_gg_{width:20px;height:20px}.___STag_u6arl_gg_._size_s_u6arl_gg_{height:18px;min-width:18px;font-size:10px}.___STag_u6arl_gg_._size_s_u6arl_gg_ .___SCircle_u6arl_gg_{width:12px;height:12px}.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__interactive_u6arl_gg_:active,.___STag_u6arl_gg_._theme_primary-muted_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#e0e1e9}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_{background-color:rgba(255,127,0,.15);color:#ff7f00}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#ff7f00;color:#fff}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_ .___SClose_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active .___SClose_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover .___SClose_u6arl_gg_{color:hsla(0,0%,100%,.15)}.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__active_u6arl_gg_ .___SClose_u6arl_gg_:hover,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:active .___SClose_u6arl_gg_:hover,.___STag_u6arl_gg_._theme_primary-warning_u6arl_gg_.__interactive_u6arl_gg_:hover .___SClose_u6arl_gg_:hover{color:#fff}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:#fff;color:#333333}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_:hover{background-color:#fff;color:#333333}.___STag_u6arl_gg_._theme_primary-invert_u6arl_gg_.__interactive_u6arl_gg_ .___SClose_u6arl_gg_:hover{color:#333333}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__interactive_u6arl_gg_:hover{color:#333333}.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_secondary-muted_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:#eeeeee;color:#333333}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__interactive_u6arl_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__active_u6arl_gg_,.___STag_u6arl_gg_._theme_secondary-invert_u6arl_gg_.__interactive_u6arl_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_{color:var(--colorText_rejl88);background-color:var(--colorTag_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__active_u6arl_gg_{color:#fff;background-color:var(--colorText_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__interactive_u6arl_gg_:hover{color:#fff;background-color:var(--colorText_rejl88)}.___STag_u6arl_gg_._theme_custom_u6arl_gg_.__interactive_u6arl_gg_:active{color:#fff;background-color:var(--colorText_rejl88)}.___SClose_u6arl_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_u6arl_gg_._theme_primary-warning_u6arl_gg_{color:rgba(255,127,0,.5)}.___SClose_u6arl_gg_._theme_primary-invert_u6arl_gg_{color:#999}.___SClose_u6arl_gg_._theme_primary-invert_u6arl_gg_:hover{color:#fff}.___SClose_u6arl_gg_._theme_secondary-muted_u6arl_gg_{color:hsla(0,0%,40%,.5)}.___SClose_u6arl_gg_._theme_secondary-muted_u6arl_gg_:hover{color:#333333}.___SClose_u6arl_gg_._theme_secondary-invert_u6arl_gg_{color:hsla(0,0%,100%,.5)}.___SClose_u6arl_gg_._theme_secondary-invert_u6arl_gg_:hover{color:#fff}.___SClose_u6arl_gg_._theme_custom_u6arl_gg_{opacity:.5}.___SClose_u6arl_gg_._theme_custom_u6arl_gg_:hover{opacity:1}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "rejl88_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__STag": "
|
|
40
|
-
"__SText": "
|
|
41
|
-
"__SAddon": "
|
|
42
|
-
"__SCircle": "
|
|
43
|
-
"_disabled": "
|
|
44
|
-
"_interactive": "
|
|
45
|
-
"_size_xl": "
|
|
46
|
-
"_size_l": "
|
|
47
|
-
"_size_m": "
|
|
48
|
-
"_size_s": "
|
|
49
|
-
"_theme_primary-muted": "_theme_primary-
|
|
50
|
-
"_active": "
|
|
51
|
-
"_theme_primary-warning": "_theme_primary-
|
|
52
|
-
"__SClose": "
|
|
53
|
-
"_theme_primary-invert": "_theme_primary-
|
|
54
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
55
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
56
|
-
"_theme_custom": "
|
|
57
|
-
"--colorText": "--
|
|
58
|
-
"--colorTag": "--
|
|
39
|
+
"__STag": "___STag_u6arl_gg_",
|
|
40
|
+
"__SText": "___SText_u6arl_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_u6arl_gg_",
|
|
42
|
+
"__SCircle": "___SCircle_u6arl_gg_",
|
|
43
|
+
"_disabled": "__disabled_u6arl_gg_",
|
|
44
|
+
"_interactive": "__interactive_u6arl_gg_",
|
|
45
|
+
"_size_xl": "_size_xl_u6arl_gg_",
|
|
46
|
+
"_size_l": "_size_l_u6arl_gg_",
|
|
47
|
+
"_size_m": "_size_m_u6arl_gg_",
|
|
48
|
+
"_size_s": "_size_s_u6arl_gg_",
|
|
49
|
+
"_theme_primary-muted": "_theme_primary-muted_u6arl_gg_",
|
|
50
|
+
"_active": "__active_u6arl_gg_",
|
|
51
|
+
"_theme_primary-warning": "_theme_primary-warning_u6arl_gg_",
|
|
52
|
+
"__SClose": "___SClose_u6arl_gg_",
|
|
53
|
+
"_theme_primary-invert": "_theme_primary-invert_u6arl_gg_",
|
|
54
|
+
"_theme_secondary-muted": "_theme_secondary-muted_u6arl_gg_",
|
|
55
|
+
"_theme_secondary-invert": "_theme_secondary-invert_u6arl_gg_",
|
|
56
|
+
"_theme_custom": "_theme_custom_u6arl_gg_",
|
|
57
|
+
"--colorText": "--colorText_rejl88",
|
|
58
|
+
"--colorTag": "--colorTag_rejl88"
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
function isCustomTheme(use, theme) {
|
package/lib/es6/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","CloseM","isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","STag","Children","styles","color","interactive","disabled","addonLeft","addonRight","colorTag","colorText","Tag","Text","Addon","style","size","props","SText","Close","SClose","SAddon","Circle","SCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,IAAuBC,OAAvB,QAAsC,0BAAtC;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,MAAP,MAAmB,uBAAnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,GAAvB,EAA4BC,KAA5B,EAAmC;AACjC,MAAMC,IAAI,GAAG;AACXC,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,CADE;AAEXC,IAAAA,SAAS,EAAE,CAAC,OAAD,EAAU,QAAV;AAFA,GAAb;AAIA,SAAOF,IAAI,CAACF,GAAD,CAAJ,GAAY,CAACE,IAAI,CAACF,GAAD,CAAJ,CAAUK,QAAV,CAAmBJ,KAAnB,CAAb,GAAyC,IAAhD;AACD;;AAED,SAASK,YAAT,CAAsBN,GAAtB,EAA2BC,KAA3B,EAAkC;AAChC,SAAOF,aAAa,CAACC,GAAD,EAAMC,KAAN,CAAb,GAA4B,QAA5B,aAA0CD,GAA1C,cAAiDC,KAAjD,CAAP;AACD;;IAEKM,O;;;;;;;;;;;;;WASJ,yBAAgB;AACd,0BAAuB,KAAKC,OAA5B;AAAA,UAAQR,GAAR,iBAAQA,GAAR;AAAA,UAAaC,KAAb,iBAAaA,KAAb;AACA,aAAO;AAAED,QAAAA,GAAG,EAAHA,GAAF;AAAOC,QAAAA,KAAK,EAALA;AAAP,OAAP;AACD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMQ,IAAI,GAaEf,GAbZ;AACA,2BACE,KAAKc,OADP;AAAA,UAAME,QAAN,kBAAMA,QAAN;AAAA,UAAgBC,MAAhB,kBAAgBA,MAAhB;AAAA,UAAwBV,KAAxB,kBAAwBA,KAAxB;AAAA,UAA+BD,GAA/B,kBAA+BA,GAA/B;AAAA,UAAoCY,KAApC,kBAAoCA,KAApC;AAAA,UAA2CC,WAA3C,kBAA2CA,WAA3C;AAAA,UAAwDC,QAAxD,kBAAwDA,QAAxD;AAAA,UAAkEC,SAAlE,kBAAkEA,SAAlE;AAAA,UAA6EC,UAA7E,kBAA6EA,UAA7E;;AAGA,UAAIF,QAAJ,EAAc;AACZD,QAAAA,WAAW,GAAG,KAAd;AACD;;AAED,UAAMI,QAAQ,GAAGhB,KAAK,GAAGL,OAAO,CAACD,YAAY,CAACM,KAAD,CAAb,EAAsB,GAAtB,CAAV,GAAuC,EAA7D;AACA,UAAMiB,SAAS,GAAGN,KAAK,GAAGjB,YAAY,CAACiB,KAAD,CAAf,GAAyBjB,YAAY,CAACM,KAAD,CAA5D;AAEA,qBAAOT,OAAO,CAACmB,MAAD,CAAd,eACE,oBAAC,IAAD;AAAA,qBAEaL,YAAY,CAACN,GAAD,EAAMC,KAAN,CAFzB;AAAA,2BAGmBY,WAHnB;AAAA,qBAIaK,SAJb;AAAA,oBAKYD;AALZ,kBAOGF,SAAS,gBAAG,oBAAC,GAAD,CAAK,KAAL;AAAW,QAAA,GAAG,EAAEA;AAAhB,QAAH,GAAmC,IAP/C,EAQGlB,iBAAiB,CAACa,QAAD,EAAWS,GAAG,CAACC,IAAf,EAAqBD,GAAG,CAACE,KAAzB,CARpB,EASGL,UAAU,gBAAG,oBAAC,GAAD,CAAK,KAAL;AAAW,QAAA,GAAG,EAAEA;AAAhB,QAAH,GAAoC,IATjD,CADF;AAaD;;;;EAvCmBzB,S;;gBAAhBgB,O,iBACiB,K;;gBADjBA,O,WAEWe,K;;gBAFXf,O,kBAGkB;AACpBP,EAAAA,GAAG,EAAE,WADe;AAEpBC,EAAAA,KAAK,EAAE,OAFa;AAGpBsB,EAAAA,IAAI,EAAE;AAHc,C;;AAuCxB,SAASH,IAAT,CAAcI,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAE2B/B,GAFtC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,iBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASe,KAAT,CAAeF,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GAG2BjC,GAHvC;AACA,MAAQiB,MAAR,GAA+Ba,KAA/B,CAAQb,MAAR;AAAA,MAAgBX,GAAhB,GAA+BwB,KAA/B,CAAgBxB,GAAhB;AAAA,MAAqBC,KAArB,GAA+BuB,KAA/B,CAAqBvB,KAArB;AAEA,iBAAOT,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,iBAAgCL,YAAY,CAACN,GAAD,EAAMC,KAAN,CAA5C;AAAA,WAA+DH;AAA/D,cAAvB;AACD;;AAED,SAASuB,KAAT,CAAeG,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMI,MAAM,GAE2BlC,GAFvC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,iBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,SAASkB,MAAT,CAAgBL,KAAhB,EAAuB;AAAA;AAAA;;AACrB,MAAMM,OAAO,GAE2BpC,GAFxC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,kBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,OAAD;AAAA,WAA0B;AAA1B,cAAvB;AACD;;AAED,IAAMQ,GAAG,GAAG7B,eAAe,CAACiB,OAAD,EAAU;AACnCa,EAAAA,IAAI,EAAJA,IADmC;AAEnCC,EAAAA,KAAK,EAALA,KAFmC;AAGnCK,EAAAA,KAAK,EAALA,KAHmC;AAInCG,EAAAA,MAAM,EAANA;AAJmC,CAAV,CAA3B;AAOA,eAAeV,GAAf","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 } = this.asProps;\n return { use, theme };\n }\n\n render() {\n const STag = Root;\n let { Children, styles, theme, use, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\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={getThemeName(use, theme)}\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 } = 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,15 +15,13 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
19
|
-
align-items: center;
|
|
20
|
-
height: 100%;
|
|
18
|
+
display: inline-block;
|
|
21
19
|
padding-left: 4px;
|
|
22
20
|
padding-right: 4px;
|
|
23
21
|
white-space: nowrap;
|
|
24
22
|
overflow: hidden;
|
|
25
23
|
text-overflow: ellipsis;
|
|
26
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.2;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
SText:not(:only-child):first-child {
|
package/package.json
CHANGED
package/src/{Tag.js → Tag.jsx}
RENAMED
|
File without changes
|
package/src/style/tag.shadow.css
CHANGED
|
@@ -15,15 +15,13 @@ STag {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
SText {
|
|
18
|
-
display: inline-
|
|
19
|
-
align-items: center;
|
|
20
|
-
height: 100%;
|
|
18
|
+
display: inline-block;
|
|
21
19
|
padding-left: 4px;
|
|
22
20
|
padding-right: 4px;
|
|
23
21
|
white-space: nowrap;
|
|
24
22
|
overflow: hidden;
|
|
25
23
|
text-overflow: ellipsis;
|
|
26
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.2;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
SText:not(:only-child):first-child {
|