@type-dom/ui 0.0.7 → 0.0.8

package/src/components/others/menus/menu.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+class Menu extends framework_1.TypeMenu {
+    constructor(route, router) {
+        super();
+        this.className = 'Menu';
+        this.route = route;
+        this.router = router;
+        this.ctrl.addStyleObj({
+            paddingInlineStart: '20px'
+            // display: 'flex',
+            // flexDirection: 'column',
+        });
+        const div = new framework_1.Div({
+            parent: this,
+            styleObj: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        });
+        if (route.svgObj) {
+            div.addChild(new td_icon_class_1.TdIcon({
+                svgObj: route.svgObj,
+                styleObj: {
+                    paddingRight: '5px'
+                }
+            }));
+        }
+        div.addChild(new framework_1.Div({
+            text: route.name,
+            attrObj: {
+                name: 'route-name'
+            },
+            styleObj: {
+                width: '160px'
+            }
+        }));
+        if (route.children) {
+            const caret = new td_icon_class_1.TdIcon({
+                svgObj: new svgs_1.ElCaretBottomSvg(),
+                size: '30px'
+            });
+            caret.appendParent(div);
+            this.caret = caret;
+        }
+        div.appendParent(this);
+        this.contentItem = div;
+        this.menuItems = [];
+    }
+    get menuRoot() {
+        var _a;
+        return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.menuRoot;
+    }
+    initEvents() {
+        if (this.route.redirect === undefined) {
+            // todo addEvent 如何pipe ??
+            (0, rxjs_1.fromEvent)(this.contentItem.dom, 'click')
+                .pipe((0, rxjs_1.filter)(() => {
+                var _a;
+                return ((_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.selectedMenu) !== this;
+            }))
+                .subscribe((event) => {
+                var _a;
+                // if (this.menuRoot.selectedMenu === this) {
+                //   return;
+                // }
+                this.router.push(this.route.path);
+                (_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.setSelectedMenu(this);
+                document.title = 'UI - ' + this.route.name;
+                event.stopPropagation(); // 防止冒泡
+                event.preventDefault();
+            });
+        }
+        else {
+            //   todo 添加展开、收起的监听
+            const leftSvg = new svgs_1.ElCaretLeftSvg();
+            // console.log(' leftSvg.resetSize ');
+            // leftSvg.resetSize('1.5em', '1.5em');
+            // leftSvg.ctrl.setStyleObj({
+            //   width: '1.5em',
+            //   height: '1.5em'
+            // })
+            const bottomSvg = new svgs_1.ElCaretBottomSvg();
+            // bottomSvg.ctrl.setStyleObj({
+            //   width: '1.5em',
+            //   height: '1.5em'
+            // })
+            // bottomSvg.resetSize('1.5em', '1.5em');
+            this.addEvent('click', this.contentItem.dom, (event) => {
+                var _a, _b, _c;
+                if (((_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.selectedMenu) === this) {
+                    return;
+                }
+                if (this.collapsed === undefined || this.collapsed === false) {
+                    this.collapsed = true;
+                    this.menuItems.forEach((menu) => {
+                        menu.ctrl.setStyleObj({
+                            display: 'none'
+                        });
+                    });
+                    (_b = this.caret) === null || _b === void 0 ? void 0 : _b.replaceSvg(leftSvg); // 左三角
+                }
+                else {
+                    this.collapsed = false;
+                    this.menuItems.forEach((menu) => {
+                        menu.ctrl.setStyleObj({
+                            display: 'block'
+                        });
+                    });
+                    (_c = this.caret) === null || _c === void 0 ? void 0 : _c.replaceSvg(bottomSvg); // 向下三角
+                }
+                event === null || event === void 0 ? void 0 : event.stopPropagation(); // 防止冒泡
+                event === null || event === void 0 ? void 0 : event.preventDefault();
+            });
+        }
+    }
+}
+exports.Menu = Menu;

package/src/components/others/menus/menus.d.ts

@@ -0,0 +1,10 @@
+import { IRoute, ITypeConfig, Router, TypeDiv } from '@type-dom/framework';
+import { Menu } from './menu';
+export declare class Menus extends TypeDiv {
+    className: 'Menus';
+    selectedMenu?: Menu;
+    constructor(params?: ITypeConfig);
+    get menuRoot(): Menus;
+    createMenus(parent: Menus | Menu, routes: IRoute[], router: Router): void;
+    setSelectedMenu(menu: Menu): void;
+}

package/src/components/others/menus/menus.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menus = void 0;
+// 基于router创建的菜单
+const framework_1 = require("@type-dom/framework");
+const menu_1 = require("./menu");
+class Menus extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'Menus';
+        this.ctrl.addAttrName('menus');
+        // 默认样式
+        this.ctrl.addStyleObj({
+            userSelect: 'none',
+            // overflow: 'auto',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            maxHeight: 'calc(100vh - 40px)'
+        });
+        this.setProps(params);
+        const router = params.router;
+        console.log('ui-doc routerUI.routes is ', router);
+        this.createMenus(this, router.routes, router);
+        console.log('menus is ', this);
+    }
+    get menuRoot() {
+        return this;
+    }
+    // /home '' '/' 首页菜单要单独处理
+    createMenus(parent, routes, router) {
+        console.log('createMenus . ');
+        routes.forEach((route) => {
+            if (route.hidden) {
+                return;
+            }
+            if ((route === null || route === void 0 ? void 0 : route.path) === '/' && route.redirect) {
+                route = route.children.find((item) => item.path === route.redirect);
+                //   todo 没有的话，要报错的。
+            }
+            const menuItem = new menu_1.Menu(route, router);
+            if (parent instanceof menu_1.Menu) {
+                parent.menuItems.push(menuItem);
+            }
+            menuItem.appendParent(parent);
+            // hash路由和history路由要分别判断
+            if (router.mode === 'hash') {
+                if (window.location.hash.slice(1) === route.path) {
+                    // 当前路由与菜单绑定路由一致，则选中状态
+                    this.setSelectedMenu(menuItem);
+                }
+            }
+            else if (router.mode === 'history') {
+                if (window.location.pathname === route.path) {
+                    // 当前路由与菜单绑定路由一致，则选中状态
+                    this.setSelectedMenu(menuItem);
+                }
+            }
+            if (route.children) {
+                this.createMenus(menuItem, route.children, router);
+            }
+        });
+    }
+    setSelectedMenu(menu) {
+        if (menu !== this.selectedMenu) {
+            if (this.selectedMenu) {
+                this.selectedMenu.ctrl.setStyleObj({
+                    backgroundColor: ''
+                });
+            }
+            this.selectedMenu = menu;
+            if (menu.route.redirect === undefined) {
+                menu.ctrl.setStyleObj({
+                    backgroundColor: '#ccc'
+                });
+            }
+        }
+    }
+}
+exports.Menus = Menus;

package/src/components/others/td-divider/td-divider.class.js

@@ -75,7 +75,7 @@ class TdDivider extends ui_abstract_1.UI {
                 borderLeft: '1px ' + var_1.$borderColor.base + ' ' + borderStyle
             });
         }
-        this.setParams(params);
+        this.setProps(params);
     }
 }
 exports.TdDivider = TdDivider;

package/src/ui/ui.abstract.js

@@ -20,7 +20,7 @@ class UI extends framework_1.TypeElement {
             this.dom = document.createElement(this.nodeName.trim());
         }
         this.slotNodes = {
-            default: new framework_1.SlotNode('default'),
+        // default: new SlotNode('default'),
         };
         // todo 统一处理，还是在各个类中处理
         this.useSlots(params);

package/src/ui/ui.interface.d.ts

@@ -1,12 +1,12 @@
-import { ISlotNodes, ITypeConfig, ITypeElement, SlotNode } from '@type-dom/framework';
+import { ISlotNodes, ITypeConfig, ITypeElement, SlotNode, TypeElement } from '@type-dom/framework';
 export interface IUI extends ITypeElement {
     componentId?: string | number;
 }
 export interface IUIConfig extends ITypeConfig {
     tag?: string;
     items?: ITypeConfig[];
-    childNodes?: undefined;
+    childNodes?: TypeElement[] | undefined;
 }
 export interface IUISlotNodes extends ISlotNodes {
-    default: SlotNode;
+    default?: SlotNode;
 }