@type-dom/ui 0.0.6 → 0.0.8

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomBlock = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+class CustomBlock extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'CustomBlock';
+        this.ctrl.addAttrName('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({
+            padding: '8px 16px',
+            // background-color: var(--block-tip-bg-color),
+            backgroundColor: 'rgba(' + bgColor + ', 0.1)',
+            borderRadius: '4px',
+            // border-left: 5px solid var(--el-color-primary),
+            borderLeft: '5px solid ' + borderLeftColor,
+            margin: '20px 0'
+        });
+        if (params.title) {
+            this.addChild(new framework_1.P({
+                text: params.title,
+                styleObj: {
+                    fontSize: '1.1rem',
+                    fontWeight: 700,
+                    marginTop: '0'
+                }
+            }));
+        }
+        if (params.paragraphs) {
+            params.paragraphs.forEach((paragraph) => {
+                this.addChild(new framework_1.P({
+                    styleObj: {
+                        fontSize: '0.9rem'
+                    },
+                    childNodes: [paragraph]
+                }));
+            });
+        }
+        if (params.blockquote) {
+            this.addChild(new framework_1.BlockQuote({
+                styleObj: {
+                    margin: '1rem 0',
+                    // border-left: .2rem solid var(--el-border-color),
+                    borderLeft: '.2rem solid ' + var_1.$borderColor.base,
+                    padding: '.25rem 0 .25rem 1rem',
+                    fontSize: '1rem',
+                    // color: var(--text-color-lighter),
+                    color: var_1.$textColor.secondary
+                },
+                childNodes: [params.blockquote]
+            }));
+        }
+    }
+}
+exports.CustomBlock = CustomBlock;

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

@@ -0,0 +1,8 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { Example } from './example';
+export declare class ExampleFloatControl extends TypeDiv {
+    className: 'ExampleFloatControl';
+    parent: Example;
+    constructor(params: ITypeConfig);
+    initEvents(): void;
+}

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

@@ -0,0 +1,63 @@
+"use strict";
+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 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({
+            role: 'button',
+            tabIndex: 0
+        });
+        this.ctrl.addStyleObj({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // border-top: 1px solid var(--border-color),
+            borderTop: '1px solid ' + var_1.$borderColor.base,
+            height: '44px',
+            boxSizing: 'border-box',
+            // background-color: var(--bg-color, #fff),
+            backgroundColor: var_1.$bgColor.default,
+            borderBottomLeftRadius: '4px',
+            borderBottomRightRadius: '4px',
+            marginTop: '-1px',
+            // color: var(--el-text-color-secondary),
+            color: var_1.$textColor.secondary,
+            cursor: 'pointer',
+            position: 'sticky',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            zIndex: 10
+        });
+        this.addChildren(new td_icon_class_1.TdIcon({
+            svgObj: new svgs_1.ElCaretTopSvg(),
+            styleObj: {
+                fontSize: '16px'
+            }
+        }), new framework_1.Span({
+            text: '隐藏源代码',
+            styleObj: {
+                fontSize: '14px',
+                marginLeft: '10px'
+            }
+        }));
+        this.setProps(params);
+    }
+    initEvents() {
+        this.addEvents({
+            click: () => {
+                // 隐藏 代码
+                this.ctrl.hide();
+                this.parent.sourceWrapper.ctrl.hide();
+            }
+        });
+    }
+}
+exports.ExampleFloatControl = ExampleFloatControl;

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

@@ -0,0 +1,7 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { Example } from './example';
+export declare class ExampleShowcase extends TypeDiv {
+    className: 'ExampleShowcase';
+    parent: Example;
+    constructor(params: ITypeConfig);
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleShowcase = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+class ExampleShowcase extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'ExampleShowcase';
+        this.ctrl.addAttrName('example-showcase');
+        this.ctrl.addStyleObj({
+            padding: '1.5rem',
+            margin: '.5px',
+            // background-color: var(--bg-color),
+            backgroundColor: var_1.$bgColor.default
+        });
+        this.setProps(params);
+    }
+}
+exports.ExampleShowcase = ExampleShowcase;

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

@@ -0,0 +1,5 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+export declare class ExampleSourceWrapper extends TypeDiv {
+    className: 'ExampleSourceWrapper';
+    constructor(params: ITypeConfig);
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleSourceWrapper = void 0;
+const framework_1 = require("@type-dom/framework");
+const styles_1 = require("../../../styles");
+class ExampleSourceWrapper extends framework_1.TypeDiv {
+    constructor(params) {
+        var _a;
+        super();
+        this.className = 'ExampleSourceWrapper';
+        this.ctrl.addAttrName('example-source-wrapper');
+        this.ctrl.addStyleObj({
+            // background-color: var(--code-bg-color),
+            backgroundColor: styles_1.$fillColor.light,
+            overflowX: 'auto'
+        });
+        this.addChild(new framework_1.Pre({
+            childNodes: [
+                new framework_1.Code({
+                    text: (_a = params.sourceWrapper) !== null && _a !== void 0 ? _a : ''
+                })
+            ]
+        }));
+        // if (params?.slot) {
+        //   this.slotChild(params.slot);
+        // }
+        this.setProps(params);
+    }
+}
+exports.ExampleSourceWrapper = ExampleSourceWrapper;

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

@@ -0,0 +1,15 @@
+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 {
+    showcase: TypeElement[];
+    sourceWrapper: string | XProxy<IJsonData>;
+}
+export declare class Example extends TypeDiv {
+    className: 'Example';
+    sourceWrapper: ExampleSourceWrapper;
+    floatControl: ExampleFloatControl;
+    props: IExampleConfig;
+    constructor(params: IExampleConfig);
+}
+export {};

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Example = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+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({
+            // border: '1px solid 'var(--border-color),
+            border: '1px solid ' + var_1.$borderColor.base,
+            // border-radius: var(--el-border-radius-base);
+            borderRadius: var_1.$borderRadius.base
+        });
+        const exampleShowcase = new example_showcase_1.ExampleShowcase({
+            parent: this
+        });
+        exampleShowcase.addChildren(...params.showcase);
+        this.addChild(exampleShowcase);
+        this.addChild(new td_divider_class_1.TdDivider({
+            styleObj: {
+                margin: '0'
+            }
+        }));
+        const opBtns = new op_btns_1.OpBtns({
+            parent: this
+        });
+        this.addChild(opBtns);
+        this.sourceWrapper = new example_source_wrapper_1.ExampleSourceWrapper({
+            parent: this,
+            styleObj: {
+                display: 'none'
+            },
+            sourceWrapper: params.sourceWrapper,
+            // slot: [
+            //   new Div({
+            //     attrObj: {
+            //       name: 'source-wrapper'
+            //     },
+            //     styleObj: {
+            //       // background-color: var(--code-bg-color),
+            //       backgroundColor: $fillColor.light,
+            //       overflowX: 'auto'
+            //     },
+            //     childNodes: [
+            //       new Pre({
+            //         childNodes: [
+            //           new Code({
+            //             text: params.sourceWrapper
+            //           })
+            //         ]
+            //       })
+            //     ]
+            //   })
+            // ]
+        });
+        // this.sourceWrapper.addChild(config.sourceWrapper);
+        this.addChild(this.sourceWrapper);
+        this.floatControl = new example_float_control_1.ExampleFloatControl({
+            parent: this,
+            styleObj: {
+                display: 'none'
+            }
+        });
+        this.addChild(this.floatControl);
+        this.props = this.setProps(params);
+    }
+}
+exports.Example = Example;

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

@@ -0,0 +1,5 @@
+export { Example } from './example';
+export { ExampleFloatControl } from './example-float-control';
+export { ExampleShowcase } from './example-showcase';
+export { ExampleSourceWrapper } from './example-source-wrapper';
+export { OpBtns } from './op-btns';

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpBtns = exports.ExampleSourceWrapper = exports.ExampleShowcase = exports.ExampleFloatControl = exports.Example = void 0;
+var example_1 = require("./example");
+Object.defineProperty(exports, "Example", { enumerable: true, get: function () { return example_1.Example; } });
+var example_float_control_1 = require("./example-float-control");
+Object.defineProperty(exports, "ExampleFloatControl", { enumerable: true, get: function () { return example_float_control_1.ExampleFloatControl; } });
+var example_showcase_1 = require("./example-showcase");
+Object.defineProperty(exports, "ExampleShowcase", { enumerable: true, get: function () { return example_showcase_1.ExampleShowcase; } });
+var example_source_wrapper_1 = require("./example-source-wrapper");
+Object.defineProperty(exports, "ExampleSourceWrapper", { enumerable: true, get: function () { return example_source_wrapper_1.ExampleSourceWrapper; } });
+var op_btns_1 = require("./op-btns");
+Object.defineProperty(exports, "OpBtns", { enumerable: true, get: function () { return op_btns_1.OpBtns; } });

package/src/components/others/example/op-btns.d.ts

@@ -0,0 +1,7 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { Example } from './example';
+export declare class OpBtns extends TypeDiv {
+    className: 'OpBtns';
+    parent: Example;
+    constructor(params: ITypeConfig);
+}

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpBtns = void 0;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+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({
+            padding: '.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            height: '2.5rem',
+            boxSizing: 'border-box'
+        });
+        this.addChild(new td_icon_class_1.TdIcon({
+            styleObj: {
+                height: '1em',
+                width: '1em',
+                lineHeight: '1em',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                color: var_1.$textColor.secondary
+            },
+            svgObj: new svgs_1.ElCopyDocumentSvg(),
+            events: {
+                click: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    // 选取要复制的文本
+                    let textToCopy = '';
+                    if (this.parent.props.sourceWrapper instanceof framework_1.XProxy) {
+                        textToCopy = (_a = this.parent.props.sourceWrapper) === null || _a === void 0 ? void 0 : _a.value;
+                    }
+                    else {
+                        textToCopy = (_b = this.parent.props.sourceWrapper) !== null && _b !== void 0 ? _b : '';
+                    }
+                    // 尝试使用Async Clipboard API
+                    try {
+                        yield navigator.clipboard.writeText(textToCopy);
+                        alert('文本已复制到剪贴板！');
+                    }
+                    catch (err) {
+                        console.error('无法复制文本: ', err);
+                        alert('复制失败，请手动复制。');
+                    }
+                })
+            }
+        }));
+        this.addChild(new td_icon_class_1.TdIcon({
+            // text: '查看代码',
+            styleObj: {
+                height: '1em',
+                width: '1em',
+                lineHeight: '1em',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                fill: 'currentColor',
+                // color: var(--color),
+                fontSize: '16px',
+                background: 'none',
+                border: 'none',
+                padding: '0',
+                cursor: 'pointer',
+                margin: '0 .5rem',
+                // color: var(--text-color-lighter),
+                color: var_1.$textColor.secondary,
+                transition: '.2s'
+            },
+            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');
+                    }
+                    else {
+                        this.parent.sourceWrapper.ctrl.hide();
+                        this.parent.floatControl.ctrl.hide();
+                    }
+                }
+            }
+        }));
+        this.setProps(params);
+    }
+}
+exports.OpBtns = OpBtns;

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

@@ -3,3 +3,7 @@ export { ExpandHeading } from './collapsible-box/heading/expand-heading';
 export { CollapsibleBoxContents } from './collapsible-box/contents/contents';
 export { TdDivider } from './td-divider/td-divider.class';
 export type { ITdDivider, ITdDividerConfig } from './td-divider/td-divider.interface';
+export * from './example';
+export { Menus } from './menus/menus';
+export { Menu } from './menus/menu';
+export { CustomBlock } from './custom-block/custom-block';

package/src/components/others/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdDivider = exports.CollapsibleBoxContents = exports.ExpandHeading = exports.CollapsibleBox = void 0;
+exports.CustomBlock = exports.Menu = exports.Menus = exports.TdDivider = exports.CollapsibleBoxContents = exports.ExpandHeading = exports.CollapsibleBox = void 0;
+const tslib_1 = require("tslib");
 var collapsible_box_1 = require("./collapsible-box/collapsible-box");
 Object.defineProperty(exports, "CollapsibleBox", { enumerable: true, get: function () { return collapsible_box_1.CollapsibleBox; } });
 var expand_heading_1 = require("./collapsible-box/heading/expand-heading");
@@ -9,3 +10,10 @@ var contents_1 = require("./collapsible-box/contents/contents");
 Object.defineProperty(exports, "CollapsibleBoxContents", { enumerable: true, get: function () { return contents_1.CollapsibleBoxContents; } });
 var td_divider_class_1 = require("./td-divider/td-divider.class");
 Object.defineProperty(exports, "TdDivider", { enumerable: true, get: function () { return td_divider_class_1.TdDivider; } });
+tslib_1.__exportStar(require("./example"), exports);
+var menus_1 = require("./menus/menus");
+Object.defineProperty(exports, "Menus", { enumerable: true, get: function () { return menus_1.Menus; } });
+var menu_1 = require("./menus/menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });
+var custom_block_1 = require("./custom-block/custom-block");
+Object.defineProperty(exports, "CustomBlock", { enumerable: true, get: function () { return custom_block_1.CustomBlock; } });

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

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

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;
+}