wex-ui-lib 1.4.0 → 1.4.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/dist/index.cjs.js +26 -17
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +26 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +2 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -190,12 +190,13 @@ type EntrySelectorProps = {
|
|
|
190
190
|
declare function EntrySelector(props: EntrySelectorProps): React$1.JSX.Element;
|
|
191
191
|
|
|
192
192
|
interface TabsProps {
|
|
193
|
+
activeTabId?: string;
|
|
193
194
|
tabPadding?: string;
|
|
194
195
|
accentColor?: string;
|
|
195
196
|
displayMode?: DisplayMode;
|
|
196
197
|
font?: Font;
|
|
197
198
|
tabs: {
|
|
198
|
-
id
|
|
199
|
+
id: string;
|
|
199
200
|
label: string;
|
|
200
201
|
content: React$1.ReactNode;
|
|
201
202
|
}[];
|
package/dist/index.esm.js
CHANGED
|
@@ -2188,6 +2188,7 @@ function Navbar(props) {
|
|
|
2188
2188
|
return (React__default.createElement(Subitem, { key: subitem.label },
|
|
2189
2189
|
React__default.createElement("a", { href: "#", onClick: function (e) {
|
|
2190
2190
|
e.preventDefault();
|
|
2191
|
+
e.stopPropagation();
|
|
2191
2192
|
subitem.onClick && subitem.onClick();
|
|
2192
2193
|
} }, subitem.label)));
|
|
2193
2194
|
})))));
|
|
@@ -2196,9 +2197,9 @@ function Navbar(props) {
|
|
|
2196
2197
|
}
|
|
2197
2198
|
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
|
|
2198
2199
|
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
|
|
2199
|
-
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n
|
|
2200
|
+
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a; return ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a; return ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.primary; }, appearAnimation, function (props) { var _a; return !props.hasSubitems ? ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2200
2201
|
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2201
|
-
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n
|
|
2202
|
+
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2202
2203
|
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2203
2204
|
|
|
2204
2205
|
function Hero(props) {
|
|
@@ -2535,29 +2536,37 @@ var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __ma
|
|
|
2535
2536
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2536
2537
|
|
|
2537
2538
|
var Tabs = function (_a) {
|
|
2538
|
-
var
|
|
2539
|
-
var
|
|
2540
|
-
var
|
|
2539
|
+
var _b, _c;
|
|
2540
|
+
var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
|
|
2541
|
+
var _e = useState((_b = tabs[0]) === null || _b === undefined ? undefined : _b.id), internalActiveTabId = _e[0], setInternalActiveTabId = _e[1];
|
|
2542
|
+
var isControlled = activeTabId !== undefined;
|
|
2543
|
+
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2544
|
+
var _f = useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2541
2545
|
var tabRefs = useRef([]);
|
|
2542
2546
|
useEffect(function () {
|
|
2543
|
-
onTabChange && onTabChange(
|
|
2544
|
-
var updateIndicator = function (
|
|
2545
|
-
var
|
|
2546
|
-
if (
|
|
2547
|
-
|
|
2547
|
+
onTabChange && onTabChange(activeTab);
|
|
2548
|
+
var updateIndicator = function () {
|
|
2549
|
+
var index = tabs.findIndex(function (tab) { return tab.id === activeTab; });
|
|
2550
|
+
if (index !== -1) {
|
|
2551
|
+
var tab = tabRefs.current[index];
|
|
2552
|
+
if (tab) {
|
|
2553
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2554
|
+
}
|
|
2548
2555
|
}
|
|
2549
2556
|
};
|
|
2550
|
-
updateIndicator(
|
|
2557
|
+
updateIndicator();
|
|
2551
2558
|
}, [activeTab]);
|
|
2559
|
+
var handleTabClick = function (id) {
|
|
2560
|
+
if (!isControlled) {
|
|
2561
|
+
setInternalActiveTabId(id);
|
|
2562
|
+
}
|
|
2563
|
+
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2564
|
+
};
|
|
2552
2565
|
return (React__default.createElement(TabsContainer, null,
|
|
2553
2566
|
React__default.createElement(TabsList, null,
|
|
2554
|
-
tabs.map(function (tab, index) { return (React__default.createElement(Tab
|
|
2555
|
-
// @ts-ignore
|
|
2556
|
-
, {
|
|
2557
|
-
// @ts-ignore
|
|
2558
|
-
ref: function (el) { return (tabRefs.current[index] = el); }, key: index, active: activeTab === index, onClick: function () { return setActiveTab(index); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2567
|
+
tabs.map(function (tab, index) { return (React__default.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2559
2568
|
React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2560
|
-
React__default.createElement(TabPanel, null, tabs
|
|
2569
|
+
React__default.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2561
2570
|
};
|
|
2562
2571
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2563
2572
|
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n"])));
|