@type-dom/ui 0.0.10 → 0.1.1

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

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

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

@@ -12,7 +12,7 @@ class ExampleFloatControl extends framework_1.TypeDiv {
         this.attr.addName('example-float-control');
         this.attr.addObj({
             role: 'button',
-            tabIndex: 0
+            tabIndex: 0,
         });
         this.style.addObj({
             display: 'flex',
@@ -34,19 +34,19 @@ class ExampleFloatControl extends framework_1.TypeDiv {
             left: '0',
             right: '0',
             bottom: '0',
-            zIndex: 10
+            zIndex: 10,
         });
         this.addChildren(new td_icon_class_1.TdIcon({
-            svgObj: new svgs_1.ElCaretTopSvg(),
+            slot: new svgs_1.ElCaretTopSvg(),
             styleObj: {
-                fontSize: '16px'
-            }
+                fontSize: '16px',
+            },
         }), new framework_1.Span({
-            text: '隐藏源代码',
+            slot: '隐藏源代码',
             styleObj: {
                 fontSize: '14px',
-                marginLeft: '10px'
-            }
+                marginLeft: '10px',
+            },
         }));
         this.useParams(params);
     }
@@ -56,7 +56,7 @@ class ExampleFloatControl extends framework_1.TypeDiv {
                 // 隐藏 代码
                 this.style.hide();
                 this.parent.sourceWrapper.style.hide();
-            }
+            },
         });
     }
 }

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

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

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

@@ -12,7 +12,7 @@ class ExampleShowcase extends framework_1.TypeDiv {
             padding: '1.5rem',
             margin: '.5px',
             // background-color: var(--bg-color),
-            backgroundColor: var_1.$bgColor.default
+            backgroundColor: var_1.$bgColor.default,
         });
         this.useParams(params);
     }

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

@@ -1,6 +1,7 @@
-import { IJsonData, ITypeConfig, TypeDiv, XProxy } from '@type-dom/framework';
-export interface IExampleSourceWrapperConfig extends ITypeConfig {
-    sourceWrapper: string | XProxy<IJsonData>;
+import { TypeDivProps, TypeDiv } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+export interface IExampleSourceWrapperConfig extends TypeDivProps {
+    sourceWrapper: string | Signal<string>;
 }
 export declare class ExampleSourceWrapper extends TypeDiv {
     className: 'ExampleSourceWrapper';

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

@@ -12,18 +12,16 @@ class ExampleSourceWrapper extends framework_1.TypeDiv {
         this.style.addObj({
             // background-color: var(--code-bg-color),
             backgroundColor: styles_1.$fillColor.light,
-            overflowX: 'auto'
+            overflowX: 'auto',
+            userSelect: 'text',
         });
         this.addChild(new framework_1.Pre({
-            childNodes: [
+            slot: [
                 new framework_1.Code({
-                    text: (_a = params.sourceWrapper) !== null && _a !== void 0 ? _a : ''
-                })
-            ]
+                    slot: (_a = params.sourceWrapper) !== null && _a !== void 0 ? _a : '',
+                }),
+            ],
         }));
-        // if (params?.slot) {
-        //   this.slotChild(params.slot);
-        // }
         this.props = this.useParams(params);
     }
 }

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

@@ -1,9 +1,10 @@
-import { IJsonData, ITypeConfig, TypeDiv, TypeElement, XProxy } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { TypeDivProps, TypeDiv, TypeElement } from '@type-dom/framework';
 import { ExampleSourceWrapper } from './example-source-wrapper';
 import { ExampleFloatControl } from './example-float-control';
-export interface IExampleConfig extends ITypeConfig {
+export interface IExampleConfig extends TypeDivProps {
     showcase: TypeElement[];
-    sourceWrapper: string | XProxy<IJsonData>;
+    sourceWrapper: string | Signal<string>;
 }
 export declare class Example extends TypeDiv {
     className: 'Example';

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

@@ -18,57 +18,35 @@ class Example extends framework_1.TypeDiv {
             // 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
+            borderRadius: var_1.$borderRadius.base,
         });
         const exampleShowcase = new example_showcase_1.ExampleShowcase({
-            parent: this
+            parent: this,
         });
         exampleShowcase.addChildren(...params.showcase);
         this.addChild(exampleShowcase);
         this.addChild(new td_divider_class_1.TdDivider({
             styleObj: {
-                margin: '0'
-            }
+                margin: '0',
+            },
         }));
         const opBtns = new op_btns_1.OpBtns({
-            parent: this
+            parent: this,
         });
         this.addChild(opBtns);
         this.sourceWrapper = new example_source_wrapper_1.ExampleSourceWrapper({
             parent: this,
             styleObj: {
-                display: 'none'
+                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'
-            }
+                display: 'none',
+            },
         });
         this.addChild(this.floatControl);
         this.props = this.useParams(params);

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

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

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

@@ -18,7 +18,7 @@ class OpBtns extends framework_1.TypeDiv {
             alignItems: 'center',
             justifyContent: 'flex-end',
             height: '2.5rem',
-            boxSizing: 'border-box'
+            boxSizing: 'border-box',
         });
         this.addChild(new td_icon_class_1.TdIcon({
             styleObj: {
@@ -27,20 +27,20 @@ class OpBtns extends framework_1.TypeDiv {
                 lineHeight: '1em',
                 display: 'inline-flex',
                 justifyContent: 'center',
-                color: var_1.$textColor.secondary
+                color: var_1.$textColor.secondary,
             },
-            svgObj: new svgs_1.ElCopyDocumentSvg(),
+            slot: new svgs_1.ElCopyDocumentSvg(),
             events: {
                 click: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                    var _a, _b;
+                    var _a;
                     // 选取要复制的文本
                     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 : '';
-                    }
+                    // if (this.parent.props.sourceWrapper instanceof XProxy) {
+                    //   textToCopy = this.parent.props.sourceWrapper?.value;
+                    // } else {
+                    textToCopy =
+                        (_a = (0, framework_1.toValue)(this.parent.props.sourceWrapper)) !== null && _a !== void 0 ? _a : '';
+                    // }
                     // 尝试使用Async Clipboard API
                     try {
                         yield navigator.clipboard.writeText(textToCopy);
@@ -50,11 +50,11 @@ class OpBtns extends framework_1.TypeDiv {
                         console.error('无法复制文本: ', err);
                         alert('复制失败，请手动复制。');
                     }
-                })
-            }
+                }),
+            },
         }));
         this.addChild(new td_icon_class_1.TdIcon({
-            // text: '查看代码',
+            // slot: '查看代码',
             styleObj: {
                 height: '1em',
                 width: '1em',
@@ -73,9 +73,9 @@ class OpBtns extends framework_1.TypeDiv {
                 margin: '0 .5rem',
                 // color: var(--text-color-lighter),
                 color: var_1.$textColor.secondary,
-                transition: '.2s'
+                transition: '.2s',
             },
-            svgObj: new svgs_1.TdViewCodeSvg(),
+            slot: new svgs_1.TdViewCodeSvg(),
             events: {
                 click: () => {
                     if (this.parent.sourceWrapper.style.get('display') === 'none') {
@@ -86,8 +86,8 @@ class OpBtns extends framework_1.TypeDiv {
                         this.parent.sourceWrapper.style.hide();
                         this.parent.floatControl.style.hide();
                     }
-                }
-            }
+                },
+            },
         }));
         this.useParams(params);
     }

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

@@ -2,7 +2,7 @@ export { CollapsibleBox } from './collapsible-box/collapsible-box';
 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 type * from './td-divider/td-divider.interface';
 export * from './example';
 export { Menus } from './menus/menus';
 export { Menu } from './menus/menu';

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

@@ -1,7 +1,7 @@
-import { Div, TypeMenu, type IRoute, Router, ITypeConfig } from '@type-dom/framework';
+import { Div, TypeMenu, type IRoute, Router, TypeProps } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { Menus } from './menus';
-export interface IMenuConfig extends ITypeConfig {
+export interface IMenuConfig extends TypeProps {
     route: IRoute;
     router?: Router;
     width?: string;

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

@@ -7,13 +7,13 @@ const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 class Menu extends framework_1.TypeMenu {
     constructor(params) {
         var _a;
-        console.log('Menu constructor . ');
+        // console.log('Menu constructor . ');
         super();
         this.className = 'Menu';
         this.route = params.route;
         this.router = params.router;
         this.style.addObj({
-            paddingInlineStart: '20px'
+            paddingInlineStart: '20px',
             // display: 'flex',
             // flexDirection: 'column',
         });
@@ -21,29 +21,29 @@ class Menu extends framework_1.TypeMenu {
             parent: this,
             styleObj: {
                 display: 'flex',
-                alignItems: 'center'
-            }
+                alignItems: 'center',
+            },
         });
         if (this.route.svgObj) {
             div.addChild(new td_icon_class_1.TdIcon({
-                svgObj: this.route.svgObj,
+                slot: this.route.svgObj,
                 styleObj: {
-                    paddingRight: '5px'
-                }
+                    paddingRight: '5px',
+                },
             }));
         }
         div.addChild(new framework_1.Div({
-            text: this.route.name,
+            slot: this.route.name,
             attrObj: {
-                name: 'route-name'
+                name: 'route-name',
             },
             styleObj: {
-                width: (_a = params.width) !== null && _a !== void 0 ? _a : '160px'
-            }
+                width: (_a = params.width) !== null && _a !== void 0 ? _a : '160px',
+            },
         }));
         if (this.route.children) {
             const caret = new td_icon_class_1.TdIcon({
-                svgObj: new svgs_1.ElCaretBottomSvg(),
+                slot: new svgs_1.ElCaretBottomSvg(),
                 // size: '30px'
             });
             caret.appendParent(div);
@@ -74,7 +74,7 @@ class Menu extends framework_1.TypeMenu {
                     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 {
@@ -102,7 +102,7 @@ class Menu extends framework_1.TypeMenu {
                     this.collapsed = true;
                     this.menuItems.forEach((menu) => {
                         menu.style.setObj({
-                            display: 'none'
+                            display: 'none',
                         });
                     });
                     (_b = this.caret) === null || _b === void 0 ? void 0 : _b.replaceSvg(leftSvg); // 左三角
@@ -111,7 +111,7 @@ class Menu extends framework_1.TypeMenu {
                     this.collapsed = false;
                     this.menuItems.forEach((menu) => {
                         menu.style.setObj({
-                            display: 'block'
+                            display: 'block',
                         });
                     });
                     (_c = this.caret) === null || _c === void 0 ? void 0 : _c.replaceSvg(bottomSvg); // 向下三角

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

@@ -1,6 +1,6 @@
-import { IRoute, ITypeConfig, Router, TypeDiv } from '@type-dom/framework';
+import { IRoute, TypeProps, Router, TypeDiv } from '@type-dom/framework';
 import { Menu } from './menu';
-export interface IMenusConfig extends ITypeConfig {
+export interface IMenusConfig extends TypeProps {
     router?: Router;
 }
 export declare class Menus extends TypeDiv {

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

@@ -16,22 +16,22 @@ class Menus extends framework_1.TypeDiv {
             boxSizing: 'border-box',
             flexShrink: 0,
             maxHeight: 'calc(100vh - 60px)',
-            paddingBottom: '40px'
+            paddingBottom: '40px',
         });
         this.useParams(params);
         this.router = params.router;
-        console.log('ui-doc routerUI.routes is ', this.router);
+        // console.log('ui-doc routerUI.routes is ', this.router);
         if (this.router) {
             this.createMenus(this, this.router.routes, this.router);
         }
-        console.log('menus is ', this);
+        // console.log('menus is ', this);
     }
     get menuRoot() {
         return this;
     }
     mounted() {
         var _a, _b;
-        console.warn('menus mounted . ');
+        // console.warn('menus mounted . ');
         // hash路由和history路由要分别判断
         let path;
         if (((_a = this.router) === null || _a === void 0 ? void 0 : _a.mode) === 'hash') {
@@ -49,7 +49,7 @@ class Menus extends framework_1.TypeDiv {
     }
     // /home '' '/' 首页菜单要单独处理
     createMenus(parent, routes, router) {
-        console.log('createMenus . ');
+        // console.log('createMenus . ');
         routes.forEach((route) => {
             if (route.hidden) {
                 return;
@@ -66,11 +66,12 @@ class Menus extends framework_1.TypeDiv {
                 width: this.style.get('width'),
                 events: {
                     mouseenter: (evt) => {
-                        if ((evt === null || evt === void 0 ? void 0 : evt.target) instanceof HTMLElement || (evt === null || evt === void 0 ? void 0 : evt.target) instanceof SVGElement) {
+                        if ((evt === null || evt === void 0 ? void 0 : evt.target) instanceof HTMLElement ||
+                            (evt === null || evt === void 0 ? void 0 : evt.target) instanceof SVGElement) {
                             evt === null || evt === void 0 ? void 0 : evt.target.style.setProperty('cursor', 'auto');
                         }
-                    }
-                }
+                    },
+                },
             });
             if (parent instanceof menu_1.Menu) {
                 parent.menuItems.push(menuItem);
@@ -86,13 +87,13 @@ class Menus extends framework_1.TypeDiv {
         if (menu !== this.selectedMenu) {
             if (this.selectedMenu) {
                 this.selectedMenu.style.setObj({
-                    backgroundColor: ''
+                    backgroundColor: '',
                 });
             }
             this.selectedMenu = menu;
             if (((_a = menu.route) === null || _a === void 0 ? void 0 : _a.redirect) === undefined) {
                 menu.style.setObj({
-                    backgroundColor: '#ccc'
+                    backgroundColor: '#ccc',
                 });
             }
         }

package/src/components/others/td-divider/style/css.d.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-divider.css';

package/src/components/others/td-divider/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-divider.css");

package/src/components/others/td-divider/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/divider.scss';

package/src/components/others/td-divider/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/divider.scss");

package/src/components/others/td-divider/td-divider.class.d.ts

@@ -1,6 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdDivider, ITdDividerConfig } from './td-divider.interface';
-export declare class TdDivider extends UI implements ITdDivider {
+import { TypeDiv } from '@type-dom/framework';
+import { ITdDivider, DividerProps } from './td-divider.interface';
+import './style/index';
+export declare class TdDivider extends TypeDiv implements ITdDivider {
     className: 'TdDivider';
-    constructor(params?: ITdDividerConfig);
+    props: DividerProps;
+    constructor(params?: DividerProps);
+    setup(): void;
 }

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

@@ -2,80 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDivider = void 0;
 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 {
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_divider_const_1 = require("./td-divider.const");
+require("./style/index");
+class TdDivider extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdDivider';
-        this.style.addObj({
-            position: 'relative'
-        });
-        const direction = (params === null || params === void 0 ? void 0 : params.direction) || 'horizontal';
-        const contentPosition = (params === null || params === void 0 ? void 0 : params.contentPosition) || 'center';
-        const borderStyle = (params === null || params === void 0 ? void 0 : params.borderStyle) || 'solid';
-        if (direction === 'horizontal') {
-            this.style.addObj({
-                display: 'block',
-                height: '1px',
-                width: '100%',
-                margin: '24px 0',
-                // border-top: 1px getCssVar('border-color') getCssVar('border-style'),
-                borderTop: '1px ' + var_1.$borderColor.base + ' ' + borderStyle
-            });
-            if (params === null || params === void 0 ? void 0 : params.text) {
-                // ToDo params.text setConfig中还会处理一次。
-                const textDiv = new framework_1.Div({
-                    name: 'text',
-                    text: params === null || params === void 0 ? void 0 : params.text,
-                    styleObj: {
-                        position: 'absolute',
-                        // backgroundColor: getCssVar('bg-color'),
-                        backgroundColor: var_1.$bgColor.default,
-                        padding: '0 20px',
-                        fontWeight: 500,
-                        // color: getCssVar('text-color', 'primary'),
-                        color: var_1.$textColor.primary,
-                        fontSize: '14px'
-                    }
-                });
-                if (contentPosition === 'left') {
-                    textDiv.style.addObj({
-                        left: '20px',
-                        transform: 'translateY(-50%)'
-                    });
-                }
-                else if (contentPosition === 'right') {
-                    textDiv.style.addObj({
-                        right: '20px',
-                        transform: 'translateY(-50%)'
-                    });
-                }
-                else {
-                    textDiv.style.addObj({
-                        left: '50%',
-                        transform: 'translateX(-50%) translateY(-50%)'
-                    });
-                }
-                this.addChild(textDiv);
-            }
-            if (contentPosition === 'left') {
-                this.style.addObj({});
-            }
-        }
-        else {
-            this.style.addObj({
-                display: 'inline-block',
-                width: '1px',
-                height: '1em',
-                margin: '0 8px',
-                verticalAlign: 'middle',
-                position: 'relative',
-                // border-left: 1px getCssVar('border-color') getCssVar('border-style'),
-                borderLeft: '1px ' + var_1.$borderColor.base + ' ' + borderStyle
+        this.assignProps(td_divider_const_1.dividerProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('divider');
+        const dividerStyle = (0, signals_1.computed)(() => {
+            return ns.cssVar({
+                borderStyle: props.borderStyle,
             });
+        });
+        this.attr.addObj({
+            class: [ns.b(), ns.m(props.direction)],
+            role: 'separator',
+        });
+        this.style.addObj(dividerStyle);
+        if ((props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default)) &&
+            props.direction !== 'vertical') {
+            this.addChild(new framework_1.Div({
+                class: [ns.e('text'), ns.is(props.contentPosition)],
+                slot: (_b = props.slot) !== null && _b !== void 0 ? _b : (_c = props.slots) === null || _c === void 0 ? void 0 : _c.default,
+            }));
         }
-        this.useParams(params);
     }
 }
 exports.TdDivider = TdDivider;

package/src/components/others/td-divider/td-divider.const.d.ts

@@ -0,0 +1,2 @@
+import { DividerProps } from './td-divider.interface';
+export declare const dividerProps: DividerProps;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividerProps = void 0;
+exports.dividerProps = {
+    direction: 'horizontal',
+    contentPosition: 'center',
+    borderStyle: 'solid',
+};

package/src/components/others/td-divider/td-divider.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdDivider extends IUI {
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdDivider extends ITypeDiv {
     className: 'TdDivider';
 }
-export interface ITdDividerConfig extends IUIConfig {
+export interface DividerProps extends TypeDivProps {
     /**
      * @description Set divider's direction
      */
@@ -13,6 +13,7 @@ export interface ITdDividerConfig extends IUIConfig {
     contentPosition?: 'left' | 'center' | 'right';
     /**
      * @description the position of the customized content on the divider line
+     *  default: 'solid',
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
 }