@type-dom/ui 0.0.7 → 0.0.8

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandHeading = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class ExpandHeading extends framework_1.TypeDiv {
@@ -39,32 +38,34 @@ class ExpandHeading extends framework_1.TypeDiv {
         this.title.setText(title);
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
-            var _a, _b, _c;
-            console.log('expand-heading svg.dom clicked');
-            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({
-                    transform: 'rotate(0deg)',
-                    transition: 'transform 0.3s'
-                });
+        this.svg.addEvents({
+            click: (e) => {
+                var _a, _b, _c;
+                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 (((_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.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
+                    this.svg.ctrl.setStyleObj({
+                        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
+                    }
                 }
-            }
-            else {
-                this.svg.ctrl.setStyleObj({
-                    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');
+                else {
+                    this.svg.ctrl.setStyleObj({
+                        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');
+                    }
                 }
             }
-        }));
+        });
     }
 }
 exports.ExpandHeading = ExpandHeading;

package/src/components/others/custom-block/custom-block.d.ts

@@ -0,0 +1,11 @@
+import { ITypeConfig, TextNode, TypeDiv, TypeElement } from '@type-dom/framework';
+export interface ICustomBlockConfig extends ITypeConfig {
+    type?: 'tip' | 'warning';
+    title: string;
+    paragraphs: (TypeElement | TextNode)[];
+    blockquote?: TypeElement | TextNode;
+}
+export declare class CustomBlock extends TypeDiv {
+    className: 'CustomBlock';
+    constructor(params: ICustomBlockConfig);
+}

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