@type-dom/ui 0.0.1 → 0.0.3

package/src/components/form/td-switch/widget/td-switch-left.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSwitchLeft = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const td_switch_style_1 = require("../td-switch.style");
+class TdSwitchLeft extends framework_1.TypeSpan {
+    constructor(config) {
+        super();
+        this.className = 'TdSwitchLeft';
+        this.config = config;
+        this.addAttrName('switch-label');
+        this.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginRight: '10px' }));
+        if (config === null || config === void 0 ? void 0 : config.inactiveIcon) {
+            this.addChild(new td_icon_class_1.TdIcon({
+                svgObj: config.inactiveIcon
+            }));
+        }
+        if (!(config === null || config === void 0 ? void 0 : config.inactiveIcon) && (config === null || config === void 0 ? void 0 : config.inactiveText)) {
+            this.addChild(new framework_1.Span({
+                text: config.inactiveText
+            }));
+        }
+    }
+}
+exports.TdSwitchLeft = TdSwitchLeft;

package/src/components/form/td-switch/widget/td-switch-right.d.ts

@@ -0,0 +1,7 @@
+import { TypeSpan } from '@type-dom/framework';
+import { ITdSwitchConfig } from '@type-dom/ui';
+export declare class TdSwitchRight extends TypeSpan {
+    className: 'TdSwitchRight';
+    config?: ITdSwitchConfig;
+    constructor(config?: ITdSwitchConfig);
+}

package/src/components/form/td-switch/widget/td-switch-right.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSwitchRight = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_1 = require("@type-dom/ui");
+const td_switch_style_1 = require("../td-switch.style");
+class TdSwitchRight extends framework_1.TypeSpan {
+    constructor(config) {
+        super();
+        this.className = 'TdSwitchRight';
+        this.config = config;
+        this.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));
+        if (config === null || config === void 0 ? void 0 : config.activeIcon) {
+            this.addChild(new ui_1.TdIcon({
+                svgObj: config.activeIcon
+            }));
+        }
+        if (!(config === null || config === void 0 ? void 0 : config.activeIcon) && (config === null || config === void 0 ? void 0 : config.activeText)) {
+            this.addChild(new framework_1.Span({
+                text: config.activeText
+            }));
+        }
+    }
+}
+exports.TdSwitchRight = TdSwitchRight;

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

@@ -0,0 +1,2 @@
+export { TdMenu } from './td-menu/td-menu.class';
+export type { ITdMenu } from './td-menu/td-menu.interface';

package/src/components/navigation/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMenu = void 0;
+var td_menu_class_1 = require("./td-menu/td-menu.class");
+Object.defineProperty(exports, "TdMenu", { enumerable: true, get: function () { return td_menu_class_1.TdMenu; } });

package/src/components/navigation/td-menu/td-menu.class.d.ts

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdMenu, ITdMenuConfig } from './td-menu.interface';
+export declare class TdMenu extends UI implements ITdMenu {
+    className: 'TdMenu';
+    constructor(config?: ITdMenuConfig);
+    setConfig(config?: ITdMenuConfig): void;
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMenu = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+class TdMenu extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'ul' });
+        this.className = 'TdMenu';
+        this.addAttrObj({
+            role: 'menubar'
+        });
+        this.addStyleObj({
+            // border-right: solid 1px var(--el-menu-border-color),
+            borderRight: 'solid 1px ' + var_1.$borderColor.base,
+            listStyle: 'none',
+            position: 'relative',
+            margin: '0',
+            paddingLeft: '0',
+            // background-color: var(--el-menu-bg-color),
+            backgroundColor: var_1.$borderColor.base,
+            boxSizing: 'border-box'
+        });
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'vertical';
+        if (mode === 'vertical') {
+            this.addStyleObj({});
+        }
+        else {
+            this.addStyleObj({
+                display: 'flex',
+                flexWrap: 'nowrap',
+                borderRight: 'none'
+                // height: var(--el-menu-horizontal-height),
+            });
+        }
+    }
+}
+exports.TdMenu = TdMenu;

package/src/components/navigation/td-menu/td-menu.interface.d.ts

@@ -0,0 +1,23 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdMenu extends IUI {
+    className: 'TdMenu';
+}
+export interface ITdMenuConfig extends IUIConfig {
+    mode?: 'horizontal' | 'vertical';
+    defaultActive?: string;
+    uniqueOpened?: boolean;
+    router?: boolean;
+    menuTrigger?: 'hover' | 'click';
+    collapse?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    closeOnClickOutside?: boolean;
+    collapseTransition?: boolean;
+    ellipsis?: boolean;
+    popperOffset?: number;
+    popperEffect?: 'dark' | 'light';
+    popperClass?: string;
+    showTimeout?: number;
+    hideTimeout?: number;
+}

package/src/components/navigation/td-menu/td-menu.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/{others → components/others}/collapsible-box/collapsible-box.js

@@ -11,21 +11,20 @@ class CollapsibleBox extends framework_1.TypeComponent {
     constructor() {
         super('div');
         this.className = 'CollapsibleBox';
-        this.propObj = {
-            styleObj: {
-                // borderTop: '1px solid #dddddd',
-                // borderBottom: '1px solid #dddddd',
-                listStyle: 'none',
-                padding: '3px',
-                marginBottom: '5px',
-            },
-            attrObj: {
-                name: 'collapsible-box',
-            }
+        this.styleObj = {
+            // borderTop: '1px solid #dddddd',
+            // borderBottom: '1px solid #dddddd',
+            listStyle: 'none',
+            padding: '3px',
+            marginBottom: '5px'
+        };
+        this.attrObj = {
+            name: 'collapsible-box'
         };
         this.heading = new expand_heading_1.ExpandHeading('标题');
         this.heading.parent = this;
         this.contents = new contents_1.CollapsibleBoxContents();
+        // 继承的类不能赋值this.contents;只能给this.contents添加子元素
         this.contents.parent = this;
         this.childNodes = [this.heading, this.contents];
     }

package/src/{others → components/others}/collapsible-box/contents/contents.js

@@ -7,17 +7,15 @@ class CollapsibleBoxContents extends framework_1.TypeComponent {
     constructor() {
         super('div');
         this.className = 'CollapsibleBoxContents';
-        this.propObj = {
-            styleObj: {
-                display: framework_1.StyleDisplay.flex,
-                flexWrap: 'wrap',
-                justifyContent: 'flex-start',
-                // width: '194px',
-                border: '1px solid #a0a0a0',
-            },
-            attrObj: {
-                name: 'collapsible-box-contents',
-            }
+        this.styleObj = {
+            display: framework_1.StyleDisplay.flex,
+            flexWrap: 'wrap',
+            justifyContent: 'flex-start',
+            // width: '194px',
+            border: '1px solid #a0a0a0'
+        };
+        this.attrObj = {
+            name: 'collapsible-box-contents'
         };
         this.childNodes = [];
     }

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

@@ -8,50 +8,52 @@ class ExpandHeading extends framework_1.TypeComponent {
     constructor(title) {
         super('div');
         this.className = 'ExpandHeading';
-        this.propObj = {
-            styleObj: {
-                margin: '0',
-                paddingLeft: '10px',
-                boxSizing: 'border-box',
-                backgroundColor: '#a0a0a0',
-                color: '#fff',
-                textIndent: '20px',
-                borderRadius: '4px 4px 0 0',
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                height: '36px'
-            },
+        this.styleObj = {
+            margin: '0',
+            paddingLeft: '10px',
+            boxSizing: 'border-box',
+            backgroundColor: '#a0a0a0',
+            color: '#fff',
+            textIndent: '20px',
+            borderRadius: '4px 4px 0 0',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            height: '36px'
+        };
+        this.attrObj = {
+            name: 'expand-heading'
+        };
+        this.svg = new svgs_1.ElCaretBottomSvg({
             attrObj: {
-                name: 'expand-heading',
+                fill: '#FFF'
             }
-        };
-        this.svg = new svgs_1.ElCaretBottomSvg();
-        this.svg.addAttrObj({
-            fill: '#FFF',
         });
         this.title = new framework_1.TextNode(title);
         // span.setStyle('verticalAlign', 'middle');
-        const span = new framework_1.Span(this);
-        span.childNodes = [this.title];
+        const span = new framework_1.Span({
+            parent: this,
+            childNodes: [this.title]
+        });
         this.childNodes = [this.svg, span];
     }
     setTitle(title) {
         this.title.setText(title);
     }
     initEvents() {
-        this.events.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
             var _a, _b;
+            console.log('expand-heading svg.dom clicked');
             e.stopPropagation();
-            const style = getComputedStyle(this.svg.dom);
-            console.log('style.transform is ', style.transform);
+            // const style = getComputedStyle(this.svg.dom);
+            // console.log('style.transform is ', style.transform);
             if (this.svg.styleObj.transform === 'rotate(-90deg)') {
                 this.svg.setStyleObj({
                     transform: 'rotate(0deg)',
                     transition: 'transform 0.3s'
                 });
-                console.log('style.transform is ', style.transform);
-                if (((_a = this === null || this === void 0 ? void 0 : this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeElement) {
+                // console.log('style.transform is ', style.transform);
+                if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeElement) {
                     this.parent.lastChild.setStyle('display', 'flex'); // flex
                 }
             }

package/src/{others → components/others}/index.d.ts

@@ -1,3 +1,5 @@
 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';

package/src/{others → components/others}/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleBoxContents = exports.ExpandHeading = exports.CollapsibleBox = void 0;
+exports.TdDivider = exports.CollapsibleBoxContents = exports.ExpandHeading = exports.CollapsibleBox = void 0;
 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");
 Object.defineProperty(exports, "ExpandHeading", { enumerable: true, get: function () { return expand_heading_1.ExpandHeading; } });
 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; } });

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

@@ -0,0 +1,6 @@
+import { ITdDivider, ITdDividerConfig } from './td-divider.interface';
+import { UI } from '../../../ui/ui.abstract';
+export declare class TdDivider extends UI implements ITdDivider {
+    className: 'TdDivider';
+    constructor(config?: ITdDividerConfig);
+}

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

@@ -0,0 +1,80 @@
+"use strict";
+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 {
+    constructor(config) {
+        super();
+        this.className = 'TdDivider';
+        this.addStyleObj({
+            position: 'relative'
+        });
+        const direction = (config === null || config === void 0 ? void 0 : config.direction) || 'horizontal';
+        const contentPosition = (config === null || config === void 0 ? void 0 : config.contentPosition) || 'center';
+        const borderStyle = (config === null || config === void 0 ? void 0 : config.borderStyle) || 'solid';
+        if (direction === 'horizontal') {
+            this.addStyleObj({
+                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 (config === null || config === void 0 ? void 0 : config.text) { // ToDo config.text setConfig中还会处理一次。
+                const textDiv = new framework_1.Div({
+                    name: 'text',
+                    text: config === null || config === void 0 ? void 0 : config.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.addStyleObj({
+                        left: '20px',
+                        transform: 'translateY(-50%)'
+                    });
+                }
+                else if (contentPosition === 'right') {
+                    textDiv.addStyleObj({
+                        right: '20px',
+                        transform: 'translateY(-50%)'
+                    });
+                }
+                else {
+                    textDiv.addStyleObj({
+                        left: '50%',
+                        transform: 'translateX(-50%) translateY(-50%)'
+                    });
+                }
+                this.addChild(textDiv);
+            }
+            if (contentPosition === 'left') {
+                this.addStyleObj({});
+            }
+        }
+        else {
+            this.addStyleObj({
+                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.setConfig(config);
+    }
+}
+exports.TdDivider = TdDivider;

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

@@ -0,0 +1,18 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdDivider extends IUI {
+    className: 'TdDivider';
+}
+export interface ITdDividerConfig extends IUIConfig {
+    /**
+     * @description Set divider's direction
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @description Set the style of divider
+     */
+    contentPosition?: 'left' | 'center' | 'right';
+    /**
+     * @description the position of the customized content on the divider line
+     */
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/index.d.ts

@@ -1,4 +1,6 @@
-export * from './basic';
-export * from './feedback';
-export * from './form';
-export * from './others';
+export * from './styles/index';
+export * from './components/basic';
+export * from './components/feedback';
+export * from './components/form';
+export * from './components/navigation';
+export * from './components/others';

package/src/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./basic"), exports);
-tslib_1.__exportStar(require("./feedback"), exports);
-tslib_1.__exportStar(require("./form"), exports);
-// export * from './navigation';
-tslib_1.__exportStar(require("./others"), exports);
+// import './styles/index.scss'; // 打包后整合在main.css文件中；
+tslib_1.__exportStar(require("./styles/index"), exports);
+tslib_1.__exportStar(require("./components/basic"), exports);
+tslib_1.__exportStar(require("./components/feedback"), exports);
+tslib_1.__exportStar(require("./components/form"), exports);
+tslib_1.__exportStar(require("./components/navigation"), exports);
+tslib_1.__exportStar(require("./components/others"), exports);

package/src/styles/color-scheme.js

@@ -13,10 +13,10 @@ const colorScheme = {
                     5: '#a0cfff',
                     7: '#c6e2ff',
                     8: '#d9ecff',
-                    9: '#ecf5ff',
+                    9: '#ecf5ff'
                 },
                 dark: {
-                    2: '#337ecc',
+                    2: '#337ecc'
                 }
             },
             success: {
@@ -26,7 +26,7 @@ const colorScheme = {
                     5: '#b3e19d',
                     7: '#d1edc4',
                     8: '#e1f3d8',
-                    9: '#f0f9eb',
+                    9: '#f0f9eb'
                 },
                 dark: {
                     2: '#529b2e'
@@ -39,7 +39,7 @@ const colorScheme = {
                     5: '#f3d19e',
                     7: '#f8e3c5',
                     8: '#faecd8',
-                    9: '#fdf6ec',
+                    9: '#fdf6ec'
                 },
                 dark: {
                     2: '#b88230'
@@ -52,7 +52,7 @@ const colorScheme = {
                     5: '#fab6b6',
                     7: '#fcd3d3',
                     8: '#fde2e2',
-                    9: '#fef0f0',
+                    9: '#fef0f0'
                 },
                 dark: {
                     2: '#c45656'
@@ -66,23 +66,23 @@ const colorScheme = {
                     5: '#c8c9cc',
                     7: '#dedfe0',
                     8: '#e9e9eb',
-                    9: '#f4f4f5',
+                    9: '#f4f4f5'
                 },
                 dark: {
                     2: '#73767a'
                 }
             }
         },
-        bgColor: var_1.$bgColors,
-        textColor: var_1.$textColors,
-        borderColor: var_1.$borderColors,
-        fillColor: var_1.$fillColors,
+        bgColor: var_1.$bgColor,
+        textColor: var_1.$textColor,
+        borderColor: var_1.$borderColor,
+        fillColor: var_1.$fillColor,
         boxShadow: var_1.$boxShadow,
         disabled: var_1.$disabled,
         overlay: {
-            color: var_1.$overlayColor,
+            color: var_1.$overlayColor
         },
         borderWidth: var_1.$borderWidth,
-        borderStyle: var_1.$borderStyle,
+        borderStyle: var_1.$borderStyle
     }
 };

package/src/styles/index.d.ts

@@ -0,0 +1 @@
+export * from './var';

package/src/styles/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./var"), exports);

package/src/styles/size.d.ts

@@ -0,0 +1,7 @@
+export declare const componentSizes: readonly ["", "default", "small", "large"];
+export declare const componentSizeMap: {
+    readonly large: 40;
+    readonly default: 32;
+    readonly small: 24;
+};
+export type ISize = /*'' | */ 'default' | 'small' | 'large';

package/src/styles/size.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentSizeMap = exports.componentSizes = void 0;
+exports.componentSizes = ['', 'default', 'small', 'large'];
+exports.componentSizeMap = {
+    large: 40,
+    default: 32,
+    small: 24
+};

package/src/styles/var.d.ts

@@ -7,24 +7,24 @@ export declare const $fontLineHeightPrimary = "24px";
  * 样式的通用全局变量
  * scss/common/var
  */
-export type IType = 'primary' | 'success' | 'warning' | 'danger' | 'error' | 'info';
+export type IType = 'primary' | 'success' | 'warning' | 'danger' | 'error' | 'info' | 'default';
 export declare const $types: IType[];
-export declare const $textColors: {
+export declare const $textColor: {
     primary: string;
     regular: string;
     secondary: string;
     placeholder: string;
     disabled: string;
 };
-export declare const $borderColors: {
-    '': string;
+export declare const $borderColor: {
+    base: string;
     light: string;
     lighter: string;
     extraLight: string;
     dark: string;
     darker: string;
 };
-export declare const $fillColors: {
+export declare const $fillColor: {
     '': string;
     light: string;
     lighter: string;
@@ -33,8 +33,9 @@ export declare const $fillColors: {
     darker: string;
     blank: string;
 };
-export declare const $bgColors: {
+export declare const $bgColor: {
     '': string;
+    default: string;
     page: string;
     overlay: string;
 };
@@ -60,6 +61,7 @@ export declare const $fontSizes: {
     extraLarge: string;
     large: string;
     medium: string;
+    default: string;
     base: string;
     small: string;
     extraSmall: string;
@@ -74,6 +76,13 @@ export declare const $disabled: {
     textColor: string;
     borderColor: string;
 };
+export declare const componentSizes: readonly ["", "default", "small", "large"];
+export type ComponentSize = (typeof componentSizes)[number];
+export declare const componentSizeMap: {
+    readonly large: 40;
+    readonly default: 32;
+    readonly small: 24;
+};
 export declare const $commonComponentSize: {
     large: string;
     default: string;
@@ -162,23 +171,32 @@ export declare const $buttonActiveShadePercent = "10%";
 export declare const $buttonBorderColor: Record<string, string>;
 export declare const $buttonBgColor: Record<string, string>;
 export declare const $buttonTextColor: {};
-export declare const $buttonFontSize: {
+export declare const $fontSizeMap: {
     large: string;
     default: string;
     small: string;
 };
-export declare const $buttonBorderRadius: {
+export declare const $borderRadiusMap: {
     large: string;
     default: string;
     small: string;
 };
-export declare const $buttonPaddingVertical: {
+export declare const $paddingVerticalMap: {
     large: string;
     default: string;
     small: string;
 };
-export declare const $buttonPaddingHorizontal: {
+export declare const $paddingHorizontalMap: {
     large: string;
     default: string;
     small: string;
 };
+export declare const $transitionDuration = "0.3s";
+export declare const $transitionDurationFast = "0.2s";
+export declare const $colorPrimaryRgb = "64, 158, 255";
+export declare const $scrollbar: {
+    opacity: number;
+    bgColor: string;
+    hoverOpacity: number;
+    hoverBgColor: string;
+};