@type-dom/ui 0.0.6 → 0.0.8

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

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdDivider extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdDivider';
         this.ctrl.addStyleObj({
@@ -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;
 }