@type-dom/ui 0.0.8 → 0.0.9

package/src/components/navigation/td-tabs/td-tab-pane.class.js

@@ -26,15 +26,15 @@ class TdTabPane extends ui_abstract_1.UI {
             }
             this.addChild(this.panel);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setActive(active) {
         var _a, _b;
         if (active) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.show();
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.show();
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.hide();
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.hide();
         }
     }
 }

package/src/components/navigation/td-tabs/td-tabs.class.js

@@ -16,8 +16,8 @@ class TdTabs extends ui_abstract_1.UI {
         var _a, _b;
         super(params);
         this.className = 'TdTabs';
-        this.ctrl.addAttrName('td-tabs');
-        // this.ctrl.addStyleObj($tabsStyle);
+        this.attr.addName('td-tabs');
+        // this.style.addObj($tabsStyle);
         this.currentName = (params === null || params === void 0 ? void 0 : params.modelValue) || '';
         this.header = new framework_1.Div({
             className: 'header',
@@ -28,7 +28,7 @@ class TdTabs extends ui_abstract_1.UI {
         const tabPosition = (params === null || params === void 0 ? void 0 : params.tabPosition) || 'top';
         const isVertical = ['left', 'right'].includes(tabPosition);
         if (isVertical) {
-            this.header.ctrl.addStyleObj(td_tabs_style_1.$tabsHeaderVerticalStyle);
+            this.header.style.addObj(td_tabs_style_1.$tabsHeaderVerticalStyle);
         }
         if ((params === null || params === void 0 ? void 0 : params.editable) || (params === null || params === void 0 ? void 0 : params.addable)) {
             this.newBtn = new framework_1.Span({
@@ -92,7 +92,7 @@ class TdTabs extends ui_abstract_1.UI {
         else {
             this.childNodes = [this.panel, this.header];
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setCurrentName(value_1) {
         return tslib_1.__awaiter(this, arguments, void 0, function* (value, trigger = false) {

package/src/components/others/collapsible-box/collapsible-box.js

@@ -11,14 +11,14 @@ class CollapsibleBox extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CollapsibleBox';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // borderTop: '1px solid #dddddd',
             // borderBottom: '1px solid #dddddd',
             listStyle: 'none',
             padding: '3px',
             marginBottom: '5px'
         });
-        this.ctrl.addAttrName('collapsible-box');
+        this.attr.addName('collapsible-box');
         this.heading = new expand_heading_1.ExpandHeading('标题');
         this.heading.parent = this;
         this.contents = new contents_1.CollapsibleBoxContents();

package/src/components/others/collapsible-box/contents/contents.js

@@ -7,14 +7,14 @@ class CollapsibleBoxContents extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CollapsibleBoxContents';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'flex',
             flexWrap: 'wrap',
             justifyContent: 'flex-start',
             // width: '194px',
             border: '1px solid #a0a0a0'
         });
-        this.ctrl.addAttrName('collapsible-box-contents');
+        this.attr.addName('collapsible-box-contents');
         this.childNodes = [];
     }
 }

package/src/components/others/collapsible-box/heading/expand-heading.d.ts

@@ -7,5 +7,5 @@ export declare class ExpandHeading extends TypeDiv {
     title: TextNode;
     constructor(title: string);
     setTitle(title: string): void;
-    initEvents(): void;
+    setup(): void;
 }

package/src/components/others/collapsible-box/heading/expand-heading.js

@@ -7,7 +7,7 @@ class ExpandHeading extends framework_1.TypeDiv {
     constructor(title) {
         super();
         this.className = 'ExpandHeading';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             margin: '0',
             paddingLeft: '10px',
             boxSizing: 'border-box',
@@ -20,7 +20,7 @@ class ExpandHeading extends framework_1.TypeDiv {
             alignItems: 'center',
             height: '36px'
         });
-        this.ctrl.addAttrName('expand-heading');
+        this.attr.addName('expand-heading');
         this.svg = new svgs_1.ElCaretBottomSvg({
             attrObj: {
                 fill: '#FFF'
@@ -37,31 +37,31 @@ class ExpandHeading extends framework_1.TypeDiv {
     setTitle(title) {
         this.title.setText(title);
     }
-    initEvents() {
+    setup() {
         this.svg.addEvents({
             click: (e) => {
-                var _a, _b, _c;
+                var _a, _b;
                 console.log('expand-heading svg.dom clicked');
                 e === null || e === void 0 ? void 0 : e.stopPropagation();
                 // const style = getComputedStyle(this.svg.dom);
                 // console.log('style.transform is ', style.transform);
-                if (((_a = this.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
-                    this.svg.ctrl.setStyleObj({
+                if (this.svg.style.get('transform') === 'rotate(-90deg)') {
+                    this.svg.style.setObj({
                         transform: 'rotate(0deg)',
                         transition: 'transform 0.3s'
                     });
                     // console.log('style.transform is ', style.transform);
-                    if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
-                        this.parent.lastChild.ctrl.setStyle('display', 'flex'); // flex
+                    if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeHtml) {
+                        this.parent.lastChild.style.set('display', 'flex'); // flex
                     }
                 }
                 else {
-                    this.svg.ctrl.setStyleObj({
+                    this.svg.style.setObj({
                         transform: 'rotate(-90deg)',
                         transition: 'transform 0.3s'
                     });
-                    if (((_c = this.parent) === null || _c === void 0 ? void 0 : _c.lastChild) instanceof framework_1.TypeHtml) {
-                        this.parent.lastChild.ctrl.setStyle('display', 'none');
+                    if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
+                        this.parent.lastChild.style.set('display', 'none');
                     }
                 }
             }

package/src/components/others/custom-block/custom-block.js

@@ -7,10 +7,10 @@ class CustomBlock extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'CustomBlock';
-        this.ctrl.addAttrName('tip');
+        this.attr.addName('tip');
         const bgColor = params.type === 'warning' ? var_1.$colorDangerRgb : var_1.$colorPrimaryRgb;
         const borderLeftColor = params.type === 'warning' ? var_1.$colors.danger.base : var_1.$colors.primary.base;
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '8px 16px',
             // background-color: var(--block-tip-bg-color),
             backgroundColor: 'rgba(' + bgColor + ', 0.1)',

package/src/components/others/example/example-float-control.d.ts

@@ -4,5 +4,5 @@ export declare class ExampleFloatControl extends TypeDiv {
     className: 'ExampleFloatControl';
     parent: Example;
     constructor(params: ITypeConfig);
-    initEvents(): void;
+    setup(): void;
 }

package/src/components/others/example/example-float-control.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFloatControl = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
 const svgs_1 = require("@type-dom/svgs");
+const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 class ExampleFloatControl extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'ExampleFloatControl';
-        this.ctrl.addAttrName('example-float-control');
-        this.ctrl.addAttrObj({
+        this.attr.addName('example-float-control');
+        this.attr.addObj({
             role: 'button',
             tabIndex: 0
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -48,14 +48,14 @@ class ExampleFloatControl extends framework_1.TypeDiv {
                 marginLeft: '10px'
             }
         }));
-        this.setProps(params);
+        this.useParams(params);
     }
-    initEvents() {
+    setup() {
         this.addEvents({
             click: () => {
                 // 隐藏 代码
-                this.ctrl.hide();
-                this.parent.sourceWrapper.ctrl.hide();
+                this.style.hide();
+                this.parent.sourceWrapper.style.hide();
             }
         });
     }

package/src/components/others/example/example-showcase.js

@@ -7,14 +7,14 @@ class ExampleShowcase extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'ExampleShowcase';
-        this.ctrl.addAttrName('example-showcase');
-        this.ctrl.addStyleObj({
+        this.attr.addName('example-showcase');
+        this.style.addObj({
             padding: '1.5rem',
             margin: '.5px',
             // background-color: var(--bg-color),
             backgroundColor: var_1.$bgColor.default
         });
-        this.setProps(params);
+        this.useParams(params);
     }
 }
 exports.ExampleShowcase = ExampleShowcase;

package/src/components/others/example/example-source-wrapper.d.ts

@@ -1,5 +1,9 @@
-import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { IJsonData, ITypeConfig, TypeDiv, XProxy } from '@type-dom/framework';
+export interface IExampleSourceWrapperConfig extends ITypeConfig {
+    sourceWrapper: string | XProxy<IJsonData>;
+}
 export declare class ExampleSourceWrapper extends TypeDiv {
     className: 'ExampleSourceWrapper';
-    constructor(params: ITypeConfig);
+    props: IExampleSourceWrapperConfig;
+    constructor(params: IExampleSourceWrapperConfig);
 }

package/src/components/others/example/example-source-wrapper.js

@@ -8,8 +8,8 @@ class ExampleSourceWrapper extends framework_1.TypeDiv {
         var _a;
         super();
         this.className = 'ExampleSourceWrapper';
-        this.ctrl.addAttrName('example-source-wrapper');
-        this.ctrl.addStyleObj({
+        this.attr.addName('example-source-wrapper');
+        this.style.addObj({
             // background-color: var(--code-bg-color),
             backgroundColor: styles_1.$fillColor.light,
             overflowX: 'auto'
@@ -24,7 +24,7 @@ class ExampleSourceWrapper extends framework_1.TypeDiv {
         // if (params?.slot) {
         //   this.slotChild(params.slot);
         // }
-        this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.ExampleSourceWrapper = ExampleSourceWrapper;

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

@@ -1,7 +1,7 @@
 import { IJsonData, ITypeConfig, TypeDiv, TypeElement, XProxy } from '@type-dom/framework';
 import { ExampleSourceWrapper } from './example-source-wrapper';
 import { ExampleFloatControl } from './example-float-control';
-interface IExampleConfig extends ITypeConfig {
+export interface IExampleConfig extends ITypeConfig {
     showcase: TypeElement[];
     sourceWrapper: string | XProxy<IJsonData>;
 }
@@ -12,4 +12,3 @@ export declare class Example extends TypeDiv {
     props: IExampleConfig;
     constructor(params: IExampleConfig);
 }
-export {};

package/src/components/others/example/example.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Example = void 0;
 const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
+const td_divider_class_1 = require("../td-divider/td-divider.class");
 const example_showcase_1 = require("./example-showcase");
 const example_source_wrapper_1 = require("./example-source-wrapper");
 const op_btns_1 = require("./op-btns");
 const example_float_control_1 = require("./example-float-control");
-const td_divider_class_1 = require("../td-divider/td-divider.class");
 // todo slots 改造
 class Example extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'Example';
-        this.ctrl.addAttrName('example');
-        this.ctrl.addStyleObj({
+        this.attr.addName('example');
+        this.style.addObj({
             // border: '1px solid 'var(--border-color),
             border: '1px solid ' + var_1.$borderColor.base,
             // border-radius: var(--el-border-radius-base);
@@ -71,7 +71,7 @@ class Example extends framework_1.TypeDiv {
             }
         });
         this.addChild(this.floatControl);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.Example = Example;

package/src/components/others/example/op-btns.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpBtns = void 0;
 const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
 const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const svgs_1 = require("@type-dom/svgs");
 class OpBtns extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'OpBtns';
         this.parent = params.parent;
-        this.ctrl.addAttrName('op-btns');
-        this.ctrl.addStyleObj({
+        this.attr.addName('op-btns');
+        this.style.addObj({
             padding: '.5rem',
             display: 'flex',
             alignItems: 'center',
@@ -78,19 +78,18 @@ class OpBtns extends framework_1.TypeDiv {
             svgObj: new svgs_1.TdViewCodeSvg(),
             events: {
                 click: () => {
-                    var _a;
-                    if (((_a = this.parent.sourceWrapper.props.styleObj) === null || _a === void 0 ? void 0 : _a.display) === 'none') {
-                        this.parent.sourceWrapper.ctrl.show();
-                        this.parent.floatControl.ctrl.show('flex');
+                    if (this.parent.sourceWrapper.style.get('display') === 'none') {
+                        this.parent.sourceWrapper.style.show();
+                        this.parent.floatControl.style.show('flex');
                     }
                     else {
-                        this.parent.sourceWrapper.ctrl.hide();
-                        this.parent.floatControl.ctrl.hide();
+                        this.parent.sourceWrapper.style.hide();
+                        this.parent.floatControl.style.hide();
                     }
                 }
             }
         }));
-        this.setProps(params);
+        this.useParams(params);
     }
 }
 exports.OpBtns = OpBtns;

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

@@ -1,16 +1,21 @@
-import { Div, TypeMenu, type IRoute, Router } from '@type-dom/framework';
+import { Div, TypeMenu, type IRoute, Router, ITypeConfig } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { Menus } from './menus';
+export interface IMenuConfig extends ITypeConfig {
+    route: IRoute;
+    router?: Router;
+    width?: string;
+}
 export declare class Menu extends TypeMenu {
     className: 'Menu';
-    route: IRoute;
-    router: Router;
+    route?: IRoute;
+    router?: Router;
     parent?: Menu | Menus;
     contentItem: Div;
     menuItems: Menu[];
     collapsed?: boolean;
     caret?: TdIcon;
-    constructor(route: IRoute, router: Router);
+    constructor(params: IMenuConfig);
     get menuRoot(): Menus | undefined;
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -1,17 +1,18 @@
 "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) {
+    constructor(params) {
+        var _a;
+        console.log('Menu constructor . ');
         super();
         this.className = 'Menu';
-        this.route = route;
-        this.router = router;
-        this.ctrl.addStyleObj({
+        this.route = params.route;
+        this.router = params.router;
+        this.style.addObj({
             paddingInlineStart: '20px'
             // display: 'flex',
             // flexDirection: 'column',
@@ -23,27 +24,27 @@ class Menu extends framework_1.TypeMenu {
                 alignItems: 'center'
             }
         });
-        if (route.svgObj) {
+        if (this.route.svgObj) {
             div.addChild(new td_icon_class_1.TdIcon({
-                svgObj: route.svgObj,
+                svgObj: this.route.svgObj,
                 styleObj: {
                     paddingRight: '5px'
                 }
             }));
         }
         div.addChild(new framework_1.Div({
-            text: route.name,
+            text: this.route.name,
             attrObj: {
                 name: 'route-name'
             },
             styleObj: {
-                width: '160px'
+                width: (_a = params.width) !== null && _a !== void 0 ? _a : '160px'
             }
         }));
-        if (route.children) {
+        if (this.route.children) {
             const caret = new td_icon_class_1.TdIcon({
                 svgObj: new svgs_1.ElCaretBottomSvg(),
-                size: '30px'
+                // size: '30px'
             });
             caret.appendParent(div);
             this.caret = caret;
@@ -51,29 +52,29 @@ class Menu extends framework_1.TypeMenu {
         div.appendParent(this);
         this.contentItem = div;
         this.menuItems = [];
+        this.useParams(params);
     }
     get menuRoot() {
         var _a;
         return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.menuRoot;
     }
-    initEvents() {
-        if (this.route.redirect === undefined) {
+    setup() {
+        var _a;
+        if (((_a = this.route) === null || _a === void 0 ? void 0 : _a.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();
+            this.contentItem.addEvents({
+                click: (event) => {
+                    var _a, _b, _c, _d;
+                    console.log('click . ');
+                    if (((_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.selectedMenu) === this) {
+                        return;
+                    }
+                    (_b = this.router) === null || _b === void 0 ? void 0 : _b.push(this.route.path);
+                    (_c = this.menuRoot) === null || _c === void 0 ? void 0 : _c.setSelectedMenu(this);
+                    document.title = 'UI - ' + ((_d = this.route) === null || _d === void 0 ? void 0 : _d.name);
+                    event === null || event === void 0 ? void 0 : event.stopPropagation(); // 防止冒泡
+                    event === null || event === void 0 ? void 0 : event.preventDefault();
+                }
             });
         }
         else {
@@ -81,25 +82,26 @@ class Menu extends framework_1.TypeMenu {
             const leftSvg = new svgs_1.ElCaretLeftSvg();
             // console.log(' leftSvg.resetSize ');
             // leftSvg.resetSize('1.5em', '1.5em');
-            // leftSvg.ctrl.setStyleObj({
+            // leftSvg.style.setObj({
             //   width: '1.5em',
             //   height: '1.5em'
             // })
             const bottomSvg = new svgs_1.ElCaretBottomSvg();
-            // bottomSvg.ctrl.setStyleObj({
+            // bottomSvg.style.setObj({
             //   width: '1.5em',
             //   height: '1.5em'
             // })
             // bottomSvg.resetSize('1.5em', '1.5em');
-            this.addEvent('click', this.contentItem.dom, (event) => {
+            this.contentItem.addEvent('click', (event) => {
                 var _a, _b, _c;
+                console.log('click .');
                 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({
+                        menu.style.setObj({
                             display: 'none'
                         });
                     });
@@ -108,7 +110,7 @@ class Menu extends framework_1.TypeMenu {
                 else {
                     this.collapsed = false;
                     this.menuItems.forEach((menu) => {
-                        menu.ctrl.setStyleObj({
+                        menu.style.setObj({
                             display: 'block'
                         });
                     });

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

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