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.cjs.js
CHANGED
|
@@ -2208,6 +2208,7 @@ function Navbar(props) {
|
|
|
2208
2208
|
return (React.createElement(Subitem, { key: subitem.label },
|
|
2209
2209
|
React.createElement("a", { href: "#", onClick: function (e) {
|
|
2210
2210
|
e.preventDefault();
|
|
2211
|
+
e.stopPropagation();
|
|
2211
2212
|
subitem.onClick && subitem.onClick();
|
|
2212
2213
|
} }, subitem.label)));
|
|
2213
2214
|
})))));
|
|
@@ -2216,9 +2217,9 @@ function Navbar(props) {
|
|
|
2216
2217
|
}
|
|
2217
2218
|
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'; });
|
|
2218
2219
|
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'; });
|
|
2219
|
-
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n
|
|
2220
|
+
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);
|
|
2220
2221
|
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'; });
|
|
2221
|
-
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n
|
|
2222
|
+
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"])));
|
|
2222
2223
|
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2223
2224
|
|
|
2224
2225
|
function Hero(props) {
|
|
@@ -2555,29 +2556,37 @@ var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __ma
|
|
|
2555
2556
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2556
2557
|
|
|
2557
2558
|
var Tabs = function (_a) {
|
|
2558
|
-
var
|
|
2559
|
-
var
|
|
2560
|
-
var
|
|
2559
|
+
var _b, _c;
|
|
2560
|
+
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;
|
|
2561
|
+
var _e = React.useState((_b = tabs[0]) === null || _b === undefined ? undefined : _b.id), internalActiveTabId = _e[0], setInternalActiveTabId = _e[1];
|
|
2562
|
+
var isControlled = activeTabId !== undefined;
|
|
2563
|
+
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2564
|
+
var _f = React.useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2561
2565
|
var tabRefs = React.useRef([]);
|
|
2562
2566
|
React.useEffect(function () {
|
|
2563
|
-
onTabChange && onTabChange(
|
|
2564
|
-
var updateIndicator = function (
|
|
2565
|
-
var
|
|
2566
|
-
if (
|
|
2567
|
-
|
|
2567
|
+
onTabChange && onTabChange(activeTab);
|
|
2568
|
+
var updateIndicator = function () {
|
|
2569
|
+
var index = tabs.findIndex(function (tab) { return tab.id === activeTab; });
|
|
2570
|
+
if (index !== -1) {
|
|
2571
|
+
var tab = tabRefs.current[index];
|
|
2572
|
+
if (tab) {
|
|
2573
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2574
|
+
}
|
|
2568
2575
|
}
|
|
2569
2576
|
};
|
|
2570
|
-
updateIndicator(
|
|
2577
|
+
updateIndicator();
|
|
2571
2578
|
}, [activeTab]);
|
|
2579
|
+
var handleTabClick = function (id) {
|
|
2580
|
+
if (!isControlled) {
|
|
2581
|
+
setInternalActiveTabId(id);
|
|
2582
|
+
}
|
|
2583
|
+
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2584
|
+
};
|
|
2572
2585
|
return (React.createElement(TabsContainer, null,
|
|
2573
2586
|
React.createElement(TabsList, null,
|
|
2574
|
-
tabs.map(function (tab, index) { return (React.createElement(Tab
|
|
2575
|
-
// @ts-ignore
|
|
2576
|
-
, {
|
|
2577
|
-
// @ts-ignore
|
|
2578
|
-
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)); }),
|
|
2587
|
+
tabs.map(function (tab, index) { return (React.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)); }),
|
|
2579
2588
|
React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2580
|
-
React.createElement(TabPanel, null, tabs
|
|
2589
|
+
React.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2581
2590
|
};
|
|
2582
2591
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2583
2592
|
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"])));
|