@uxf/cms 10.0.0-beta.63 → 10.0.0-beta.64

package/lib/menu/factory.d.ts

@@ -1,10 +1,10 @@
 import { MenuItem, UserMenuData } from "./model";
 import { IconName } from "@uxf/ui/icon/types";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 export declare function createCustomContent(title: string, content: ReactNode): MenuItem;
 export declare function createSuperSection(title: string, children?: MenuItem[]): MenuItem;
 export declare function createSection(title: string, icon?: IconName, children?: MenuItem[]): MenuItem;
-export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName): MenuItem;
-export declare function createExternalLink(title: string, href: string, icon?: IconName): MenuItem;
+export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName, endElement?: ReactElement): MenuItem;
+export declare function createExternalLink(title: string, href: string, icon?: IconName, endElement?: ReactElement): MenuItem;
 export declare function createUserMenu(userMenuData: UserMenuData, children?: MenuItem[]): MenuItem;
-export declare function createTableLink(title: string, entityAlias: string, icon?: IconName): MenuItem;
+export declare function createTableLink(title: string, entityAlias: string, icon?: IconName, endElement?: ReactElement): MenuItem;

package/lib/menu/factory.js

@@ -15,25 +15,27 @@ function createSection(title, icon, children) {
     return model_1.MenuItem.create(title, "section").setIcon(icon).setChildren(children);
 }
 exports.createSection = createSection;
-function createLink(title, routeName, routeParams, icon) {
+function createLink(title, routeName, routeParams, icon, endElement) {
     return model_1.MenuItem.create(title, "link")
         .setRoute(routeName, routeParams)
         .setIcon(icon)
+        .setEndElement(endElement)
         .setActiveResolver(active_item_resolver_1.ActiveItemResolver.anyOf([routeName]));
 }
 exports.createLink = createLink;
-function createExternalLink(title, href, icon) {
-    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setUrl(href);
+function createExternalLink(title, href, icon, endElement) {
+    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setEndElement(endElement).setUrl(href);
 }
 exports.createExternalLink = createExternalLink;
 function createUserMenu(userMenuData, children) {
     return model_1.MenuItem.create("Můj profil", "super-section").setUserMenuData(userMenuData).setChildren(children);
 }
 exports.createUserMenu = createUserMenu;
-function createTableLink(title, entityAlias, icon) {
+function createTableLink(title, entityAlias, icon, endElement) {
     return model_1.MenuItem.create(title, "link")
         .setRoute("cms/table", { entityAlias })
         .setIcon(icon)
+        .setEndElement(endElement)
         .setActiveResolver(active_item_resolver_1.ActiveItemResolver.tableLink());
 }
 exports.createTableLink = createTableLink;

package/lib/menu/model.d.ts

@@ -2,7 +2,7 @@ import { LoggedUser } from "../../config/container";
 import { Resolver } from "./types";
 import { NextRouter } from "next/router";
 import { IconName } from "@uxf/ui/icon/types";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 type ItemType = "custom" | "super-section" | "section" | "link";
 export type UserMenuData = {
     avatar?: string;
@@ -18,6 +18,7 @@ export declare class MenuItem {
     private _routeParams?;
     private _isExternal?;
     private _icon?;
+    private _endElement?;
     private _activeItemResolver?;
     private _allowedRoles?;
     private _content?;
@@ -26,6 +27,7 @@ export declare class MenuItem {
     constructor(title: string, type: ItemType);
     setContent(content: ReactNode): MenuItem;
     setIcon(icon?: IconName): MenuItem;
+    setEndElement(endElement?: ReactElement): MenuItem;
     setChildren(children?: MenuItem[]): MenuItem;
     setRoute(route: string, routeParams?: object): MenuItem;
     setUrl(url: string): MenuItem;
@@ -45,6 +47,7 @@ export declare class MenuItem {
     get routeParams(): any;
     get isExternal(): boolean | undefined;
     get icon(): IconName | undefined;
+    get endElement(): ReactElement | undefined;
     get allowedRoles(): string[] | undefined;
     get content(): ReactNode;
     get userMenuData(): UserMenuData | undefined;

package/lib/menu/model.js

@@ -18,6 +18,10 @@ class MenuItem {
         this._icon = icon;
         return this;
     }
+    setEndElement(endElement) {
+        this._endElement = endElement;
+        return this;
+    }
     setChildren(children) {
         this._children = children !== null && children !== void 0 ? children : [];
         return this;
@@ -91,6 +95,9 @@ class MenuItem {
     get icon() {
         return this._icon;
     }
+    get endElement() {
+        return this._endElement;
+    }
     get allowedRoles() {
         return this._allowedRoles;
     }

package/lib/menu/ui/list-item/list-item.js

@@ -16,6 +16,7 @@ const ListItem = (props) => {
     const Content = (_b = props.children) !== null && _b !== void 0 ? _b : (react_1.default.createElement("div", { className: `uxf-cms-menu__item uxf-cms-menu__item--basic ${props.selected ? classes_1.CLASSES.IS_SELECTED : ""}` },
         react_1.default.createElement("div", { className: `uxf-cms-menu__icon-wrapper ${props.level === 1 ? "uxf-cms-menu__icon-wrapper--level-one" : ""}` }, !!props.icon && props.level !== 1 && react_1.default.createElement(icon_1.Icon, { name: props.icon, size: 16 })),
         react_1.default.createElement("div", { className: "uxf-cms-menu__item-label" }, props.label),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-end-element" }, props.endElement),
         hasSubMenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-menu__caret ${!props.isOpen ? classes_1.CLASSES.IS_OPEN : ""}` }))));
     // eslint-disable-next-line react/destructuring-assignment
     const Button = ({ className }) => (react_1.default.createElement("button", { type: "button", onClick: props.toggle, className: className }, Content));

package/lib/menu/ui/list-item/types.d.ts

@@ -3,16 +3,17 @@ import { IconName } from "@uxf/ui/icon/types";
 import { MenuItem } from "../../model";
 export interface ListItemProps<RouteList> {
     children?: ReactElement;
+    endElement?: ReactElement;
+    href?: string;
     icon?: IconName;
+    isExternal?: boolean;
+    isInitiallyOpen?: boolean;
+    isOpen?: boolean;
     label: string;
     level?: number;
     params?: any;
     route?: keyof RouteList;
     selected?: boolean;
-    href?: string;
     subMenu?: MenuItem[];
-    isOpen?: boolean;
-    isInitiallyOpen?: boolean;
     toggle?: () => void;
-    isExternal?: boolean;
 }

package/lib/menu/ui/menu-item.js

@@ -46,10 +46,10 @@ const MenuItem = (props) => {
         return null;
     }
     return (react_1.default.createElement("div", { className: "uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--basic" },
-        react_1.default.createElement(list_item_1.ListItem, { label: props.item.title, icon: props.item.icon, href: (_a = props.item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, route: (_b = props.item.route) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, params: (_d = (_c = props.item.routeParams) !== null && _c !== void 0 ? _c : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _d !== void 0 ? _d : null, selected: isActive, subMenu: props.item.children, isOpen: isSubmenuOpen, toggle: toggle, isInitiallyOpen: isInitiallyOpen, isExternal: props.item.isExternal }),
+        react_1.default.createElement(list_item_1.ListItem, { endElement: props.item.endElement, href: (_a = props.item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, icon: props.item.icon, isExternal: props.item.isExternal, isInitiallyOpen: isInitiallyOpen, isOpen: isSubmenuOpen, label: props.item.title, params: (_c = (_b = props.item.routeParams) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _c !== void 0 ? _c : null, route: (_d = props.item.route) !== null && _d !== void 0 ? _d : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, selected: isActive, subMenu: props.item.children, toggle: toggle }),
         isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-menu__submenu-list" }, visibleChildren.map((i) => {
             const isSelected = i.isActive(router, activeRoute);
-            return (react_1.default.createElement(list_item_1.ListItem, { key: i.title, label: i.title, href: i.url, icon: i.icon, route: i.route, params: i.routeParams, level: 1, selected: isSelected, isExternal: i.isExternal }));
+            return (react_1.default.createElement(list_item_1.ListItem, { endElement: i.endElement, href: i.url, icon: i.icon, isExternal: i.isExternal, key: i.title, label: i.title, level: 1, params: i.routeParams, route: i.route, selected: isSelected }));
         })))));
 };
 exports.MenuItem = MenuItem;

package/lib/menu/ui/user-menu.js

@@ -40,7 +40,7 @@ const Component = (props) => {
                 react_1.default.createElement("div", { className: "uxf-cms-user-menu__name" }, props.name),
                 react_1.default.createElement("div", { className: "uxf-cms-user-menu__roles" }, props.roles)),
             react_1.default.createElement("div", { className: "uxf-cms-user-menu__caret-wrapper" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-user-menu__caret ${!isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` })))),
-        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-user-menu__sub-menu" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { href: item.url, label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-user-menu__sub-menu" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { endElement: item.endElement, href: item.url, label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
 };
 const UserMenu = (props) => {
     var _a, _b, _c, _d, _e, _f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "10.0.0-beta.63",
+  "version": "10.0.0-beta.64",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",

package/ui/styles/menu.css

@@ -68,6 +68,10 @@
         }
     }
 
+    &__item-end-element {
+        margin-left: auto;
+    }
+
     &__icon-wrapper {
         flex-shrink: 0;
     }