@dilicorp/ui 0.2.3 → 0.2.4-0.1

package/dist/components/page-list/page-list.js

@@ -16,27 +16,33 @@ export const PageList = (props) => {
     const totalRecords = (meta === null || meta === void 0 ? void 0 : meta.to) ? (meta.to - meta.from) + 1 : 0;
     const history = useLocation();
     const search = uriHelper.parse(history.search);
+    const header = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListHeader'; }) : null;
     const filterList = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListFilters'; }) : null;
     const configList = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListConfigDropdown'; }) : null;
-    const restList = Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.filter(child => child !== filterList && child !== configList) : children;
+    const restList = Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.filter(child => child !== filterList && child !== configList && child !== header) : children;
     if (loading) {
         return (React.createElement("div", { className: "my-5" },
             React.createElement(Spinner, null)));
     }
+    const showTitleContainer = Boolean(title) ||
+        Boolean(extraButtonsInline.length) ||
+        Boolean(addButton) ||
+        Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Row, { className: "page-title-container mb-3" },
-            title && (React.createElement(Col, null,
+        showTitleContainer && (React.createElement(Row, { className: "page-title-container mb-3" },
+            title && (React.createElement(Col, { className: "d-flex align-items-center" },
                 React.createElement(Typography, { className: "mb-0", variant: "h4", tag: "h1" }, title))),
             React.createElement(Col, { className: "ms-auto" },
                 React.createElement("div", { className: "extra-buttons-container" },
                     Boolean(extraButtonsInline.length) &&
-                        extraButtonsInline.map((item, index) => (React.createElement(Button, Object.assign({ outline: true, key: `export-button-${index}` }, item),
+                        extraButtonsInline.map((item, index) => (React.createElement(Button, { outline: true, key: `export-button-${index}`, ...item },
                             item.label,
-                            item.icon && React.createElement(Icon, Object.assign({}, item.icon))))),
+                            item.icon && React.createElement(Icon, { ...item.icon })))),
                     Boolean(addButton) && (React.createElement(Button, { tag: Link, href: addButton === null || addButton === void 0 ? void 0 : addButton.uri }, addButton === null || addButton === void 0 ? void 0 :
                         addButton.label,
                         React.createElement(Icon, { icon: "fa-plus", pluxee: true, className: "ms-1" }))),
-                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items }))))),
+                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items })))))),
+        Boolean(header) && header,
         !!customizeFilter && customizeFilter,
         !customizeFilter && filterList && (React.createElement(PageListGetFilters, { filterList: filterList, search: search, filter: filter, key: JSON.stringify(history) }, configList)),
         React.createElement("div", null, restList),

package/dist/components/page-show/page-show.d.ts

@@ -21,6 +21,6 @@ export declare type PageShowProps = {
     };
     extraButtonsInline?: ExtraButtonsInlineProps[];
 };
-export declare const PageShow: React.FC<PageShowProps>;
+export declare const PageShow: (props: PageShowProps) => JSX.Element;
 export {};
 //# sourceMappingURL=page-show.d.ts.map

package/dist/components/page-show/page-show.js

@@ -6,14 +6,14 @@ export const PageShow = (props) => {
         return React.createElement(Spinner, null);
     return (React.createElement("div", null,
         React.createElement(Row, { className: "page-title-container mb-3" },
-            React.createElement(Col, null,
+            React.createElement(Col, { className: "d-flex align-items-center" },
                 React.createElement(Typography, { variant: "h4", tag: "h1", subTitle: subTitle }, title)),
             React.createElement(Col, { className: "ms-auto" },
                 React.createElement("div", { className: "extra-buttons-container" },
                     Boolean(extraButtonsInline.length) &&
-                        extraButtonsInline.map((item, index) => (React.createElement(Button, Object.assign({ outline: true, key: `export-button-${index}` }, item),
+                        extraButtonsInline.map((item, index) => (React.createElement(Button, { outline: true, key: `export-button-${index}`, ...item },
                             item.label,
-                            item.icon && React.createElement(Icon, Object.assign({}, item.icon))))),
+                            item.icon && React.createElement(Icon, { ...item.icon })))),
                     Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "secondary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items })),
                     Boolean(backButton) && (React.createElement(Button, { tag: Link, href: backButton === null || backButton === void 0 ? void 0 : backButton.uri, color: "primary", outline: true },
                         React.createElement(Icon, { icon: "faAngleLeft", className: "me-1" }), backButton === null || backButton === void 0 ? void 0 :

package/dist/components/side-navigation-bar/side-navigation-bar-item.d.ts

@@ -8,6 +8,7 @@ export declare type SideNavigationBarItemProps = LinkProps & {
     items?: SideNavigationBarItemProps[];
     dataLink?: boolean;
     pathname?: string;
+    iconSize?: 'lg' | 'md' | 'sm';
 };
 export declare const SideNavigationBarItem: React.FC<SideNavigationBarItemProps>;
 //# sourceMappingURL=side-navigation-bar-item.d.ts.map

package/dist/components/side-navigation-bar/side-navigation-bar-item.js

@@ -1,38 +1,52 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useState } from 'react';
 import { Icon } from '../../atoms/icon';
 import { Link } from '../../index';
-const InnerItem = ({ icon, pluxee, label, dataLink }) => {
+const InnerItem = ({ icon, iconSize = 'md', pluxee, label, dataLink }) => {
     return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon, { icon: icon, pluxee: pluxee }),
-        React.createElement("span", { className: "link-name", "data-link": `${dataLink ? 'link' : 'container'}` }, label)));
+        icon && React.createElement(Icon, { title: label, icon: icon, pluxee: pluxee, size: iconSize }),
+        React.createElement("span", { title: label, style: { ...(iconSize === 'sm' && { fontSize: 12 }) }, className: "link-name", "data-link": `${dataLink ? 'link' : 'container'}` }, label)));
 };
 export const SideNavigationBarItem = (props) => {
     var _a;
-    const { className = '', items, index, pathname = '' } = props, attrs = __rest(props, ["className", "items", "index", "pathname"]);
-    const [active, setActive] = useState(false);
-    const sanitizedHref = (attrs === null || attrs === void 0 ? void 0 : attrs.href) ? (_a = attrs === null || attrs === void 0 ? void 0 : attrs.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '';
-    const isHomePage = (sanitizedHref === '/' && pathname === '/');
-    const isPathActive = sanitizedHref && sanitizedHref !== '/' && pathname.includes(sanitizedHref);
-    const activeClass = isHomePage || isPathActive ? ' active' : '';
-    return (React.createElement("li", { className: `${className}${activeClass}` }, items
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    const { className = '', items, index, pathname = '', ...attrs } = props;
+    const sanitizedHref = ((attrs === null || attrs === void 0 ? void 0 : attrs.href) ? (_a = attrs === null || attrs === void 0 ? void 0 : attrs.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '/').split('/')[1];
+    const sanitizedPath = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')[1];
+    const isHomePage = ((attrs === null || attrs === void 0 ? void 0 : attrs.href) === '/' && pathname === '/');
+    const isPathActive = sanitizedHref && (sanitizedPath === null || sanitizedPath === void 0 ? void 0 : sanitizedPath.includes(sanitizedHref));
+    const activeClass = (isHomePage || isPathActive) && !className.includes('subitem') ? ' active' : '';
+    const itemclass = items && items.length > 0 ? ' submenu-li' : ' link-li';
+    const submenuActive = items && items.some(item => {
+        var _a, _b;
+        const linkpath = ((item === null || item === void 0 ? void 0 : item.href) ? (_a = item === null || item === void 0 ? void 0 : item.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '/').split('/').slice(-1)[0];
+        return (_b = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')) === null || _b === void 0 ? void 0 : _b.some(sub => sub === linkpath);
+    })
+        ? ' active'
+        : '';
+    const handleSubmenuClick = () => {
+        const sidebar = document.querySelector('.sidebar');
+        if (!sidebar.className.includes('active') && !sidebar.className.includes('mobile')) {
+            const btn = document.querySelector('.btn-sidebar');
+            btn === null || btn === void 0 ? void 0 : btn.click();
+            setSubmenuOpen(true);
+            return;
+        }
+        setSubmenuOpen(prev => !prev);
+    };
+    return (React.createElement("li", { className: `${className}${activeClass}${itemclass}${submenuActive}` }, items
         ? React.createElement("div", { className: "sub-menu-container" },
-            React.createElement("div", { className: "sub-menu", onClick: () => setActive(prev => !prev) },
+            React.createElement("div", { onClick: handleSubmenuClick, className: `sub-menu${submenuOpen ? ' open' : ''}` },
                 React.createElement("div", null,
-                    React.createElement(InnerItem, Object.assign({}, props))),
-                React.createElement(Icon, { icon: "fa-angle-down" })),
-            active && React.createElement("div", null,
-                React.createElement("ul", { className: "sub-menu-list" }, items.map((item, i) => (React.createElement(SideNavigationBarItem, Object.assign({ key: `side-navigation-bar-item-${index}-${i}` }, Object.assign(Object.assign({}, item), { index: i }))))))))
-        : React.createElement(Link, Object.assign({}, attrs),
-            React.createElement(InnerItem, Object.assign({}, props, { dataLink: true })))));
+                    React.createElement(InnerItem, { ...props })),
+                React.createElement(Icon, { pluxee: true, icon: "fa-chevron-down" })),
+            items && React.createElement(React.Fragment, null,
+                React.createElement("ul", { className: "sub-menu-list" }, items.map((item, i) => {
+                    var _a;
+                    const firstpath = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')[1];
+                    const linkpath = ((item === null || item === void 0 ? void 0 : item.href) ? (_a = item === null || item === void 0 ? void 0 : item.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '/').split('/')[1];
+                    const itemclass = Boolean(linkpath) && firstpath === linkpath ? 'subitem active' : 'subitem';
+                    return (React.createElement(SideNavigationBarItem, { key: `side-navigation-bar-item-${index}-${i}`, iconSize: "sm", pathname: pathname, className: itemclass, ...{ ...item, index: i }, icon: "fa-circle", pluxee: true }));
+                }))))
+        : React.createElement(Link, { ...attrs },
+            React.createElement(InnerItem, { ...props, dataLink: true }))));
 };

package/dist/components/side-navigation-bar/side-navigation-bar.js

@@ -7,11 +7,11 @@ import { useLocation } from 'react-router-dom';
 const STORAGE_NAME = 'SIDEBAR_ACTIVE';
 export const SideNavigationBar = memo((props) => {
     const { logout, items = [], active = true, menuLabel = 'Menu' } = props;
+    const navlist = useRef(null);
+    const { pathname, search } = useLocation();
     const activeStorage = storageHelper.get(STORAGE_NAME);
     const showActive = activeStorage ? activeStorage === '1' : active;
     storageHelper.set(STORAGE_NAME, showActive ? '1' : '0');
-    const navlist = useRef(null);
-    const { pathname, search } = useLocation();
     const uri = `${pathname}${search}`;
     useEffect(() => {
         const btnMobile = document.querySelector('.btn-sidebar-mobile');
@@ -49,14 +49,14 @@ export const SideNavigationBar = memo((props) => {
                         React.createElement(Icon, { icon: "fa-double-chevron-right", pluxee: true }),
                         " ",
                         React.createElement("span", { className: "link-name" }, menuLabel))),
-                items.map((item, index) => (React.createElement(SideNavigationBarItem, Object.assign({ pluxee: true, pathname: pathname, key: `side-navigation-bar-item-${index}` }, Object.assign(Object.assign({}, item), { index }))))),
-                !!(logout === null || logout === void 0 ? void 0 : logout.href) && (React.createElement(SideNavigationBarItem, Object.assign({ pathname: pathname }, {
-                    className: 'link-logout',
-                    icon: 'fa-logout',
-                    pluxee: true,
-                    label: logout.label || 'Logout',
-                    href: logout.href
-                }))))),
+                items.map((item, index) => (React.createElement(SideNavigationBarItem, { pluxee: true, pathname: pathname, key: `side-navigation-bar-item-${index}`, ...{ ...item, index } }))),
+                !!(logout === null || logout === void 0 ? void 0 : logout.href) && (React.createElement(SideNavigationBarItem, { pathname: pathname, ...{
+                        className: 'link-logout',
+                        icon: 'fa-logout',
+                        pluxee: true,
+                        label: logout.label || 'Logout',
+                        href: logout.href
+                    } })))),
         React.createElement("div", { className: "side-bar-mobile-overlay" }),
         React.createElement("button", { id: "btn-side-bar-mobile-toogle", type: "button", className: "btn btn-sidebar-mobile" },
             React.createElement(Icon, { icon: "fa-double-chevron-left", pluxee: true }),

package/dist/components/tabs/tabs.js

@@ -18,13 +18,17 @@ export const Tabs = ({ children }) => {
     const getParams = (tab) => {
         return ({
             active: getActive(tab),
-            href: uriHelper.stringify(Object.assign(Object.assign(Object.assign({}, params), (params.page && { page: 1 })), { tab }))
+            href: uriHelper.stringify({
+                ...params,
+                ...(params.page && { page: 1 }),
+                tab
+            })
         });
     };
     return (React.createElement("div", { className: "tabs" },
         React.createElement(TabList, null, (_a = tabList.props.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => {
             var _a;
-            return (React.createElement(Tab, Object.assign({ key: `tab-child-${index}` }, getParams(index)), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children));
+            return (React.createElement(Tab, { key: `tab-child-${index}`, ...getParams(index) }, (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children));
         })),
         tabPanels.filter(item => item).map((child, index) => {
             var _a;