@semcore/tab-line 2.9.1 → 3.0.2
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 +19 -0
- package/lib/cjs/TabLine.js +20 -21
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/index.d.ts +60 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/tab-line.shadow.css +16 -48
- package/lib/es6/TabLine.js +20 -21
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/index.d.ts +60 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/tab-line.shadow.css +16 -48
- package/lib/types/index.d.ts +1 -1
- package/package.json +5 -2
- package/src/index.d.ts +1 -1
- package/src/index.js +0 -1
- package/src/style/tab-line.shadow.css +16 -48
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.2] - 2022-05-31
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.3 ~> 4.5.4], `@semcore/neighbor-location` [2.3.6 ~> 2.3.7], `@semcore/utils` [3.32.1 ~> 3.32.2]).
|
|
10
|
+
|
|
11
|
+
## [3.0.1] - 2022-05-19
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.1 ~> 4.5.3], `@semcore/neighbor-location` [2.3.5 ~> 2.3.6], `@semcore/utils` [3.32.0 ~> 3.32.1]).
|
|
16
|
+
|
|
17
|
+
## [3.0.0] - 2022-05-17
|
|
18
|
+
|
|
19
|
+
### BREAK
|
|
20
|
+
|
|
21
|
+
- Updated styles according to the library redesign policy.
|
|
22
|
+
- Remove value "xl" for "size".
|
|
23
|
+
|
|
5
24
|
## [2.9.1] - 2022-03-14
|
|
6
25
|
|
|
7
26
|
### Changed
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -56,24 +56,23 @@ var style = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___STabLine_nxhjn_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_nxhjn_gg_.__underlined_nxhjn_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_nxhjn_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_nxhjn_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_nxhjn_gg_:active,.___STabLineItem_nxhjn_gg_:focus,.___STabLineItem_nxhjn_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_nxhjn_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_nxhjn_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_nxhjn_gg_ .___SText_nxhjn_gg_:not(:last-child){margin-right:8px}.___STabLineItem_nxhjn_gg_ .___SAddon_nxhjn_gg_:not(:last-child){margin-right:8px}.___SIndicator_nxhjn_gg_,.___STabLineItem_nxhjn_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_nxhjn_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_nxhjn_gg_.__selected_nxhjn_gg_{flex-shrink:0}.___STabLineItem_nxhjn_gg_.__disabled_nxhjn_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_nxhjn_gg_.__keyboardFocused_nxhjn_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_nxhjn_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_nxhjn_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_nxhjn_gg_._size_m_nxhjn_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_nxhjn_gg_._size_l_nxhjn_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_nxhjn_gg_._neighborLocation_left_nxhjn_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_nxhjn_gg_:after{transition:none}.___SIndicator_nxhjn_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "1gtegkz_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__STabLine": "
|
|
65
|
-
"_underlined": "
|
|
66
|
-
"__STabLineItem": "
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"
|
|
76
|
-
"_neighborLocation_left": "_neighborLocation_left_kyktg_gg_"
|
|
64
|
+
"__STabLine": "___STabLine_nxhjn_gg_",
|
|
65
|
+
"_underlined": "__underlined_nxhjn_gg_",
|
|
66
|
+
"__STabLineItem": "___STabLineItem_nxhjn_gg_",
|
|
67
|
+
"__SText": "___SText_nxhjn_gg_",
|
|
68
|
+
"__SAddon": "___SAddon_nxhjn_gg_",
|
|
69
|
+
"__SIndicator": "___SIndicator_nxhjn_gg_",
|
|
70
|
+
"_selected": "__selected_nxhjn_gg_",
|
|
71
|
+
"_disabled": "__disabled_nxhjn_gg_",
|
|
72
|
+
"_keyboardFocused": "__keyboardFocused_nxhjn_gg_",
|
|
73
|
+
"_size_m": "_size_m_nxhjn_gg_",
|
|
74
|
+
"_size_l": "_size_l_nxhjn_gg_",
|
|
75
|
+
"_neighborLocation_left": "_neighborLocation_left_nxhjn_gg_"
|
|
77
76
|
});
|
|
78
77
|
var optionsA11yEnhance = {
|
|
79
78
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -97,8 +96,8 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
97
96
|
_this = _super.call(this, props);
|
|
98
97
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observer", void 0);
|
|
99
98
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observerTab", void 0);
|
|
100
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$indicator",
|
|
101
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$tabsParent",
|
|
99
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$indicator", _react["default"].createRef());
|
|
100
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$tabsParent", _react["default"].createRef());
|
|
102
101
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (value) {
|
|
103
102
|
return function (e) {
|
|
104
103
|
_this.handlers.value(value, e);
|
|
@@ -173,7 +172,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
173
172
|
}, {
|
|
174
173
|
key: "render",
|
|
175
174
|
value: function render() {
|
|
176
|
-
var _ref = this
|
|
175
|
+
var _ref = this.asProps,
|
|
177
176
|
_ref5;
|
|
178
177
|
|
|
179
178
|
var STabLine = _flexBox.Box;
|
|
@@ -205,7 +204,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
205
204
|
(0, _defineProperty2["default"])(TabLineRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
|
|
206
205
|
|
|
207
206
|
function TabLineItem(props) {
|
|
208
|
-
var _ref2 =
|
|
207
|
+
var _ref2 = arguments[0],
|
|
209
208
|
_ref6;
|
|
210
209
|
|
|
211
210
|
var STabLineItem = _flexBox.Box;
|
|
@@ -227,7 +226,7 @@ function TabLineItem(props) {
|
|
|
227
226
|
TabLineItem.enhance = [(0, _keyboardFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()];
|
|
228
227
|
|
|
229
228
|
function Text(props) {
|
|
230
|
-
var _ref3 =
|
|
229
|
+
var _ref3 = arguments[0],
|
|
231
230
|
_ref7;
|
|
232
231
|
|
|
233
232
|
var styles = props.styles;
|
|
@@ -238,7 +237,7 @@ function Text(props) {
|
|
|
238
237
|
}
|
|
239
238
|
|
|
240
239
|
function Addon(props) {
|
|
241
|
-
var _ref4 =
|
|
240
|
+
var _ref4 = arguments[0],
|
|
242
241
|
_ref8;
|
|
243
242
|
|
|
244
243
|
var styles = props.styles;
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"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 addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type TabLineValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
|
+
extends IBoxProps,
|
|
11
|
+
INeighborLocationProps {
|
|
12
|
+
/** TabLine size
|
|
13
|
+
* @default m
|
|
14
|
+
* */
|
|
15
|
+
size?: 'm' | 'l' | false;
|
|
16
|
+
/** Adds a bottom border for the entire component
|
|
17
|
+
* @default true
|
|
18
|
+
* */
|
|
19
|
+
underlined?: boolean;
|
|
20
|
+
/** Is invoked when changing the selection */
|
|
21
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
|
+
/** Value of the selected tab */
|
|
23
|
+
value?: T;
|
|
24
|
+
/** Default value of the selected tab
|
|
25
|
+
* @default null
|
|
26
|
+
* */
|
|
27
|
+
defaultValue?: T;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
31
|
+
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
32
|
+
selected?: boolean;
|
|
33
|
+
/** Disabled state */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** Tab value */
|
|
36
|
+
value?: TabLineValue;
|
|
37
|
+
/** Left addon tag */
|
|
38
|
+
addonLeft?: React.ElementType;
|
|
39
|
+
/** Right addon tag */
|
|
40
|
+
addonRight?: React.ElementType;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface ITabLineContext {
|
|
44
|
+
getItemProps: PropGetterFn;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export interface ITabLineHandlers {
|
|
48
|
+
value: (value: TabLineValue) => void;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
|
|
52
|
+
props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
|
|
53
|
+
) => ReturnEl) & {
|
|
54
|
+
Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
|
|
55
|
+
Text: typeof Box;
|
|
56
|
+
Addon: typeof Box;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default TabLine;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _TabLine =
|
|
17
|
-
|
|
18
|
-
Object.keys(_TabLine).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _TabLine[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _TabLine[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
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; }
|
|
15
|
+
var _TabLine = _interopRequireDefault(require("./TabLine"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './TabLine';\n"],"file":"index.js"}
|
|
@@ -8,14 +8,13 @@ STabLine {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
STabLine[underlined] {
|
|
11
|
-
border-bottom: 1px solid var(--
|
|
11
|
+
border-bottom: 1px solid var(--gray-200);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
STabLineItem {
|
|
15
15
|
display: inline-flex;
|
|
16
16
|
align-items: center;
|
|
17
17
|
justify-content: center;
|
|
18
|
-
line-height: 1.1;
|
|
19
18
|
position: relative;
|
|
20
19
|
touch-action: manipulation;
|
|
21
20
|
white-space: nowrap;
|
|
@@ -35,6 +34,8 @@ STabLineItem {
|
|
|
35
34
|
cursor: pointer;
|
|
36
35
|
border: none;
|
|
37
36
|
background: transparent;
|
|
37
|
+
color: var(--gray-800);
|
|
38
|
+
margin-right: 16px;
|
|
38
39
|
|
|
39
40
|
&::-moz-focus-inner {
|
|
40
41
|
border: none;
|
|
@@ -57,7 +58,15 @@ STabLineItem {
|
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
&:hover::after {
|
|
60
|
-
background-color: var(--
|
|
61
|
+
background-color: var(--gray-200);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
& SText:not(:last-child) {
|
|
65
|
+
margin-right: 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
& SAddon:not(:last-child) {
|
|
69
|
+
margin-right: 8px;
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
72
|
|
|
@@ -71,7 +80,7 @@ STabLineItem::after {
|
|
|
71
80
|
|
|
72
81
|
SIndicator {
|
|
73
82
|
transition: transform 0.5s ease;
|
|
74
|
-
background-color: var(--
|
|
83
|
+
background-color: var(--blue-400);
|
|
75
84
|
will-change: transform;
|
|
76
85
|
}
|
|
77
86
|
|
|
@@ -86,19 +95,17 @@ STabLineItem[disabled] {
|
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
STabLineItem[keyboardFocused] {
|
|
89
|
-
box-shadow: var(--
|
|
98
|
+
box-shadow: var(--keyboard-focus);
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
SText {
|
|
93
102
|
display: inline-block;
|
|
94
|
-
color: var(--gray20);
|
|
95
103
|
white-space: nowrap;
|
|
96
104
|
overflow: hidden;
|
|
97
105
|
text-overflow: ellipsis;
|
|
98
106
|
}
|
|
99
107
|
|
|
100
108
|
SAddon {
|
|
101
|
-
color: var(--gray60);
|
|
102
109
|
display: inline-flex;
|
|
103
110
|
align-items: center;
|
|
104
111
|
justify-content: center;
|
|
@@ -106,53 +113,14 @@ SAddon {
|
|
|
106
113
|
|
|
107
114
|
STabLineItem[size='m'] {
|
|
108
115
|
height: 28px;
|
|
109
|
-
margin-right: 16px;
|
|
110
116
|
min-width: 18px;
|
|
111
|
-
font-size: var(--fs-
|
|
112
|
-
|
|
113
|
-
& SText:not(:last-child) {
|
|
114
|
-
margin-right: 8px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
& SAddon {
|
|
118
|
-
&:not(:last-child) {
|
|
119
|
-
margin-right: 8px;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
117
|
+
font-size: var(--fs-200);
|
|
122
118
|
}
|
|
123
119
|
|
|
124
120
|
STabLineItem[size='l'] {
|
|
125
|
-
height:
|
|
126
|
-
margin-right: 16px;
|
|
121
|
+
height: 40px;
|
|
127
122
|
min-width: 26px;
|
|
128
|
-
font-size: var(--fs-200);
|
|
129
|
-
|
|
130
|
-
& SText:not(:last-child) {
|
|
131
|
-
margin-right: 8px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
& SAddon {
|
|
135
|
-
&:not(:last-child) {
|
|
136
|
-
margin-right: 8px;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
STabLineItem[size='xl'] {
|
|
142
|
-
height: 42px;
|
|
143
|
-
margin-right: 24px;
|
|
144
|
-
min-width: 32px;
|
|
145
123
|
font-size: var(--fs-300);
|
|
146
|
-
|
|
147
|
-
& SText:not(:last-child) {
|
|
148
|
-
margin-right: 12px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
& SAddon {
|
|
152
|
-
&:not(:last-child) {
|
|
153
|
-
margin-right: 12px;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
124
|
}
|
|
157
125
|
|
|
158
126
|
STabLineItem[neighborLocation='left'] {
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -33,24 +33,23 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___STabLine_nxhjn_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_nxhjn_gg_.__underlined_nxhjn_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_nxhjn_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_nxhjn_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_nxhjn_gg_:active,.___STabLineItem_nxhjn_gg_:focus,.___STabLineItem_nxhjn_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_nxhjn_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_nxhjn_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_nxhjn_gg_ .___SText_nxhjn_gg_:not(:last-child){margin-right:8px}.___STabLineItem_nxhjn_gg_ .___SAddon_nxhjn_gg_:not(:last-child){margin-right:8px}.___SIndicator_nxhjn_gg_,.___STabLineItem_nxhjn_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_nxhjn_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_nxhjn_gg_.__selected_nxhjn_gg_{flex-shrink:0}.___STabLineItem_nxhjn_gg_.__disabled_nxhjn_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_nxhjn_gg_.__keyboardFocused_nxhjn_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_nxhjn_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_nxhjn_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_nxhjn_gg_._size_m_nxhjn_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_nxhjn_gg_._size_l_nxhjn_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_nxhjn_gg_._neighborLocation_left_nxhjn_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_nxhjn_gg_:after{transition:none}.___SIndicator_nxhjn_gg_{transition:none}}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "1gtegkz_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__STabLine": "
|
|
42
|
-
"_underlined": "
|
|
43
|
-
"__STabLineItem": "
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"_size_m": "
|
|
51
|
-
"_size_l": "
|
|
52
|
-
"
|
|
53
|
-
"_neighborLocation_left": "_neighborLocation_left_kyktg_gg_"
|
|
41
|
+
"__STabLine": "___STabLine_nxhjn_gg_",
|
|
42
|
+
"_underlined": "__underlined_nxhjn_gg_",
|
|
43
|
+
"__STabLineItem": "___STabLineItem_nxhjn_gg_",
|
|
44
|
+
"__SText": "___SText_nxhjn_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_nxhjn_gg_",
|
|
46
|
+
"__SIndicator": "___SIndicator_nxhjn_gg_",
|
|
47
|
+
"_selected": "__selected_nxhjn_gg_",
|
|
48
|
+
"_disabled": "__disabled_nxhjn_gg_",
|
|
49
|
+
"_keyboardFocused": "__keyboardFocused_nxhjn_gg_",
|
|
50
|
+
"_size_m": "_size_m_nxhjn_gg_",
|
|
51
|
+
"_size_l": "_size_l_nxhjn_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_nxhjn_gg_"
|
|
54
53
|
});
|
|
55
54
|
var optionsA11yEnhance = {
|
|
56
55
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -78,9 +77,9 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
78
77
|
|
|
79
78
|
_defineProperty(_assertThisInitialized(_this), "$observerTab", void 0);
|
|
80
79
|
|
|
81
|
-
_defineProperty(_assertThisInitialized(_this), "$indicator",
|
|
80
|
+
_defineProperty(_assertThisInitialized(_this), "$indicator", React.createRef());
|
|
82
81
|
|
|
83
|
-
_defineProperty(_assertThisInitialized(_this), "$tabsParent",
|
|
82
|
+
_defineProperty(_assertThisInitialized(_this), "$tabsParent", React.createRef());
|
|
84
83
|
|
|
85
84
|
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
|
|
86
85
|
return function (e) {
|
|
@@ -158,7 +157,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
158
157
|
}, {
|
|
159
158
|
key: "render",
|
|
160
159
|
value: function render() {
|
|
161
|
-
var _ref = this
|
|
160
|
+
var _ref = this.asProps,
|
|
162
161
|
_ref5;
|
|
163
162
|
|
|
164
163
|
var STabLine = Box;
|
|
@@ -194,7 +193,7 @@ _defineProperty(TabLineRoot, "defaultProps", {
|
|
|
194
193
|
_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
|
|
195
194
|
|
|
196
195
|
function TabLineItem(props) {
|
|
197
|
-
var _ref2 =
|
|
196
|
+
var _ref2 = arguments[0],
|
|
198
197
|
_ref6;
|
|
199
198
|
|
|
200
199
|
var STabLineItem = Box;
|
|
@@ -216,7 +215,7 @@ function TabLineItem(props) {
|
|
|
216
215
|
TabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
217
216
|
|
|
218
217
|
function Text(props) {
|
|
219
|
-
var _ref3 =
|
|
218
|
+
var _ref3 = arguments[0],
|
|
220
219
|
_ref7;
|
|
221
220
|
|
|
222
221
|
var styles = props.styles;
|
|
@@ -227,7 +226,7 @@ function Text(props) {
|
|
|
227
226
|
}
|
|
228
227
|
|
|
229
228
|
function Addon(props) {
|
|
230
|
-
var _ref4 =
|
|
229
|
+
var _ref4 = arguments[0],
|
|
231
230
|
_ref8;
|
|
232
231
|
|
|
233
232
|
var styles = props.styles;
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,OAAOC,gBAAP,IAA2BC,uBAA3B,QAA0D,4BAA1D;AACA,OAAOC,cAAP,MAA2B,0BAA3B
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"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 addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type TabLineValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
|
+
extends IBoxProps,
|
|
11
|
+
INeighborLocationProps {
|
|
12
|
+
/** TabLine size
|
|
13
|
+
* @default m
|
|
14
|
+
* */
|
|
15
|
+
size?: 'm' | 'l' | false;
|
|
16
|
+
/** Adds a bottom border for the entire component
|
|
17
|
+
* @default true
|
|
18
|
+
* */
|
|
19
|
+
underlined?: boolean;
|
|
20
|
+
/** Is invoked when changing the selection */
|
|
21
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
|
+
/** Value of the selected tab */
|
|
23
|
+
value?: T;
|
|
24
|
+
/** Default value of the selected tab
|
|
25
|
+
* @default null
|
|
26
|
+
* */
|
|
27
|
+
defaultValue?: T;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
31
|
+
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
32
|
+
selected?: boolean;
|
|
33
|
+
/** Disabled state */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** Tab value */
|
|
36
|
+
value?: TabLineValue;
|
|
37
|
+
/** Left addon tag */
|
|
38
|
+
addonLeft?: React.ElementType;
|
|
39
|
+
/** Right addon tag */
|
|
40
|
+
addonRight?: React.ElementType;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface ITabLineContext {
|
|
44
|
+
getItemProps: PropGetterFn;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export interface ITabLineHandlers {
|
|
48
|
+
value: (value: TabLineValue) => void;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
|
|
52
|
+
props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
|
|
53
|
+
) => ReturnEl) & {
|
|
54
|
+
Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
|
|
55
|
+
Text: typeof Box;
|
|
56
|
+
Addon: typeof Box;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default TabLine;
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB","sourcesContent":["export { default } from './TabLine';\n"],"file":"index.js"}
|
|
@@ -8,14 +8,13 @@ STabLine {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
STabLine[underlined] {
|
|
11
|
-
border-bottom: 1px solid var(--
|
|
11
|
+
border-bottom: 1px solid var(--gray-200);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
STabLineItem {
|
|
15
15
|
display: inline-flex;
|
|
16
16
|
align-items: center;
|
|
17
17
|
justify-content: center;
|
|
18
|
-
line-height: 1.1;
|
|
19
18
|
position: relative;
|
|
20
19
|
touch-action: manipulation;
|
|
21
20
|
white-space: nowrap;
|
|
@@ -35,6 +34,8 @@ STabLineItem {
|
|
|
35
34
|
cursor: pointer;
|
|
36
35
|
border: none;
|
|
37
36
|
background: transparent;
|
|
37
|
+
color: var(--gray-800);
|
|
38
|
+
margin-right: 16px;
|
|
38
39
|
|
|
39
40
|
&::-moz-focus-inner {
|
|
40
41
|
border: none;
|
|
@@ -57,7 +58,15 @@ STabLineItem {
|
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
&:hover::after {
|
|
60
|
-
background-color: var(--
|
|
61
|
+
background-color: var(--gray-200);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
& SText:not(:last-child) {
|
|
65
|
+
margin-right: 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
& SAddon:not(:last-child) {
|
|
69
|
+
margin-right: 8px;
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
72
|
|
|
@@ -71,7 +80,7 @@ STabLineItem::after {
|
|
|
71
80
|
|
|
72
81
|
SIndicator {
|
|
73
82
|
transition: transform 0.5s ease;
|
|
74
|
-
background-color: var(--
|
|
83
|
+
background-color: var(--blue-400);
|
|
75
84
|
will-change: transform;
|
|
76
85
|
}
|
|
77
86
|
|
|
@@ -86,19 +95,17 @@ STabLineItem[disabled] {
|
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
STabLineItem[keyboardFocused] {
|
|
89
|
-
box-shadow: var(--
|
|
98
|
+
box-shadow: var(--keyboard-focus);
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
SText {
|
|
93
102
|
display: inline-block;
|
|
94
|
-
color: var(--gray20);
|
|
95
103
|
white-space: nowrap;
|
|
96
104
|
overflow: hidden;
|
|
97
105
|
text-overflow: ellipsis;
|
|
98
106
|
}
|
|
99
107
|
|
|
100
108
|
SAddon {
|
|
101
|
-
color: var(--gray60);
|
|
102
109
|
display: inline-flex;
|
|
103
110
|
align-items: center;
|
|
104
111
|
justify-content: center;
|
|
@@ -106,53 +113,14 @@ SAddon {
|
|
|
106
113
|
|
|
107
114
|
STabLineItem[size='m'] {
|
|
108
115
|
height: 28px;
|
|
109
|
-
margin-right: 16px;
|
|
110
116
|
min-width: 18px;
|
|
111
|
-
font-size: var(--fs-
|
|
112
|
-
|
|
113
|
-
& SText:not(:last-child) {
|
|
114
|
-
margin-right: 8px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
& SAddon {
|
|
118
|
-
&:not(:last-child) {
|
|
119
|
-
margin-right: 8px;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
117
|
+
font-size: var(--fs-200);
|
|
122
118
|
}
|
|
123
119
|
|
|
124
120
|
STabLineItem[size='l'] {
|
|
125
|
-
height:
|
|
126
|
-
margin-right: 16px;
|
|
121
|
+
height: 40px;
|
|
127
122
|
min-width: 26px;
|
|
128
|
-
font-size: var(--fs-200);
|
|
129
|
-
|
|
130
|
-
& SText:not(:last-child) {
|
|
131
|
-
margin-right: 8px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
& SAddon {
|
|
135
|
-
&:not(:last-child) {
|
|
136
|
-
margin-right: 8px;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
STabLineItem[size='xl'] {
|
|
142
|
-
height: 42px;
|
|
143
|
-
margin-right: 24px;
|
|
144
|
-
min-width: 32px;
|
|
145
123
|
font-size: var(--fs-300);
|
|
146
|
-
|
|
147
|
-
& SText:not(:last-child) {
|
|
148
|
-
margin-right: 12px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
& SAddon {
|
|
152
|
-
&:not(:last-child) {
|
|
153
|
-
margin-right: 12px;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
124
|
}
|
|
157
125
|
|
|
158
126
|
STabLineItem[neighborLocation='left'] {
|
package/lib/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "SEMRush TabLine Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.2",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@semcore/flex-box": "^4",
|
|
17
17
|
"@semcore/neighbor-location": "^2",
|
|
18
18
|
"@semcore/utils": "^3.30",
|
|
19
|
-
"resize-observer-polyfill": "
|
|
19
|
+
"resize-observer-polyfill": "1.5.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@semcore/core": "^1.11",
|
|
@@ -29,5 +29,8 @@
|
|
|
29
29
|
"type": "git",
|
|
30
30
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
31
31
|
"directory": "semcore/tab-line"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
32
35
|
}
|
|
33
36
|
}
|
package/src/index.d.ts
CHANGED
package/src/index.js
CHANGED
|
@@ -8,14 +8,13 @@ STabLine {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
STabLine[underlined] {
|
|
11
|
-
border-bottom: 1px solid var(--
|
|
11
|
+
border-bottom: 1px solid var(--gray-200);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
STabLineItem {
|
|
15
15
|
display: inline-flex;
|
|
16
16
|
align-items: center;
|
|
17
17
|
justify-content: center;
|
|
18
|
-
line-height: 1.1;
|
|
19
18
|
position: relative;
|
|
20
19
|
touch-action: manipulation;
|
|
21
20
|
white-space: nowrap;
|
|
@@ -35,6 +34,8 @@ STabLineItem {
|
|
|
35
34
|
cursor: pointer;
|
|
36
35
|
border: none;
|
|
37
36
|
background: transparent;
|
|
37
|
+
color: var(--gray-800);
|
|
38
|
+
margin-right: 16px;
|
|
38
39
|
|
|
39
40
|
&::-moz-focus-inner {
|
|
40
41
|
border: none;
|
|
@@ -57,7 +58,15 @@ STabLineItem {
|
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
&:hover::after {
|
|
60
|
-
background-color: var(--
|
|
61
|
+
background-color: var(--gray-200);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
& SText:not(:last-child) {
|
|
65
|
+
margin-right: 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
& SAddon:not(:last-child) {
|
|
69
|
+
margin-right: 8px;
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
72
|
|
|
@@ -71,7 +80,7 @@ STabLineItem::after {
|
|
|
71
80
|
|
|
72
81
|
SIndicator {
|
|
73
82
|
transition: transform 0.5s ease;
|
|
74
|
-
background-color: var(--
|
|
83
|
+
background-color: var(--blue-400);
|
|
75
84
|
will-change: transform;
|
|
76
85
|
}
|
|
77
86
|
|
|
@@ -86,19 +95,17 @@ STabLineItem[disabled] {
|
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
STabLineItem[keyboardFocused] {
|
|
89
|
-
box-shadow: var(--
|
|
98
|
+
box-shadow: var(--keyboard-focus);
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
SText {
|
|
93
102
|
display: inline-block;
|
|
94
|
-
color: var(--gray20);
|
|
95
103
|
white-space: nowrap;
|
|
96
104
|
overflow: hidden;
|
|
97
105
|
text-overflow: ellipsis;
|
|
98
106
|
}
|
|
99
107
|
|
|
100
108
|
SAddon {
|
|
101
|
-
color: var(--gray60);
|
|
102
109
|
display: inline-flex;
|
|
103
110
|
align-items: center;
|
|
104
111
|
justify-content: center;
|
|
@@ -106,53 +113,14 @@ SAddon {
|
|
|
106
113
|
|
|
107
114
|
STabLineItem[size='m'] {
|
|
108
115
|
height: 28px;
|
|
109
|
-
margin-right: 16px;
|
|
110
116
|
min-width: 18px;
|
|
111
|
-
font-size: var(--fs-
|
|
112
|
-
|
|
113
|
-
& SText:not(:last-child) {
|
|
114
|
-
margin-right: 8px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
& SAddon {
|
|
118
|
-
&:not(:last-child) {
|
|
119
|
-
margin-right: 8px;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
117
|
+
font-size: var(--fs-200);
|
|
122
118
|
}
|
|
123
119
|
|
|
124
120
|
STabLineItem[size='l'] {
|
|
125
|
-
height:
|
|
126
|
-
margin-right: 16px;
|
|
121
|
+
height: 40px;
|
|
127
122
|
min-width: 26px;
|
|
128
|
-
font-size: var(--fs-200);
|
|
129
|
-
|
|
130
|
-
& SText:not(:last-child) {
|
|
131
|
-
margin-right: 8px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
& SAddon {
|
|
135
|
-
&:not(:last-child) {
|
|
136
|
-
margin-right: 8px;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
STabLineItem[size='xl'] {
|
|
142
|
-
height: 42px;
|
|
143
|
-
margin-right: 24px;
|
|
144
|
-
min-width: 32px;
|
|
145
123
|
font-size: var(--fs-300);
|
|
146
|
-
|
|
147
|
-
& SText:not(:last-child) {
|
|
148
|
-
margin-right: 12px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
& SAddon {
|
|
152
|
-
&:not(:last-child) {
|
|
153
|
-
margin-right: 12px;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
124
|
}
|
|
157
125
|
|
|
158
126
|
STabLineItem[neighborLocation='left'] {
|