@type-dom/ui 0.0.8 → 0.0.10

package/README.md

@@ -1,44 +1,44 @@
-## 项目说明
-
-> 这是一个基于自建前端框架TypeDom创建的ui组件库。
-
-## 安装
-
-> npm install @type-dom/ui
-
-## 框架介绍
-
-    1、技术栈
-        –	type-dom框架
-        –	webpack
-        –	typescript
-        –	抽象类
-        –	实体类
-    2、项目结构
-        –	src
-            –	lib
-                -   basic
-                -   data
-                -   feedback
-                -   form
-                -   navigation
-                -   other
-                -   styles
-            –
-        -   test
-
-# type-dom 自定义组件
-
-## basic 基础组件
-
-### button 按钮组件
-
-## data 数据组件
-
-## form 表单组件
-
-## feedback 反馈组件
-
-## navigation 导航组件
-
-## other 其它组件
+## 项目说明
+
+> 这是一个基于自建前端框架TypeDom创建的ui组件库。
+
+## 安装
+
+> npm install @type-dom/ui
+
+## 框架介绍
+
+    1、技术栈
+        –	type-dom框架
+        –	webpack
+        –	typescript
+        –	抽象类
+        –	实体类
+    2、项目结构
+        –	src
+            –	lib
+                -   basic
+                -   data
+                -   feedback
+                -   form
+                -   navigation
+                -   other
+                -   styles
+            –
+        -   test
+
+# type-dom 自定义组件
+
+## basic 基础组件
+
+### button 按钮组件
+
+## data 数据组件
+
+## form 表单组件
+
+## feedback 反馈组件
+
+## navigation 导航组件
+
+## other 其它组件

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "dependencies": {
-    "@type-dom/svgs": "*",
-    "rxjs": "^7.5.7",
-    "tslib": "^2.3.0"
+    "@type-dom/svgs": "*"
   },
   "type": "commonjs",
   "main": "./src/index.js",
@@ -13,9 +11,5 @@
     "type": "git",
     "url": "git+https://github.com/type-dom/ui.git"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "types": "./src/index.d.ts"
 }

package/src/aria.d.ts

@@ -1,21 +1,4 @@
 import { IUIConfig } from './ui/ui.interface';
-export declare const EVENT_CODE: {
-    tab: string;
-    enter: string;
-    space: string;
-    left: string;
-    up: string;
-    right: string;
-    down: string;
-    esc: string;
-    delete: string;
-    backspace: string;
-    numpadEnter: string;
-    pageUp: string;
-    pageDown: string;
-    home: string;
-    end: string;
-};
 export interface IAriaConfig extends IUIConfig {
     /**
      * @description native `aria-label` attribute

package/src/aria.js

@@ -1,20 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EVENT_CODE = void 0;
-exports.EVENT_CODE = {
-    tab: 'Tab',
-    enter: 'Enter',
-    space: 'Space',
-    left: 'ArrowLeft', // 37
-    up: 'ArrowUp', // 38
-    right: 'ArrowRight', // 39
-    down: 'ArrowDown', // 40
-    esc: 'Escape',
-    delete: 'Delete',
-    backspace: 'Backspace',
-    numpadEnter: 'NumpadEnter',
-    pageUp: 'PageUp',
-    pageDown: 'PageDown',
-    home: 'Home',
-    end: 'End',
-};

package/src/components/basic/td-button/td-button.abstract.d.ts

@@ -1,4 +1,4 @@
-import { Span, TextNode } from '@type-dom/framework';
+import { SlotNode, Span, TextNode } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdButtonAbstract, ITdButtonConfig } from './td-button.interface';
@@ -11,9 +11,8 @@ export declare abstract class TdButtonAbstract extends UI implements ITdButtonAb
     private type?;
     private plain?;
     private disabled?;
-    private icon?;
+    icon?: TdIcon | SlotNode;
     protected constructor(params?: ITdButtonConfig);
     setup(): void;
-    initEvents(): void;
     useType(params?: ITdButtonConfig): void;
 }

package/src/components/basic/td-button/td-button.abstract.js

@@ -6,18 +6,19 @@ const svgs_1 = require("@type-dom/svgs");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_input_style_1 = require("../../form/td-input/td-input.style");
+// import { $iconLeft, $iconLoading, $iconRight } from '../td-icon/td-icon.style';
 const td_icon_class_1 = require("../td-icon/td-icon.class");
 const td_button_style_1 = require("./td-button.style");
 // import '../../styles/style.css';
 class TdButtonAbstract extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, params.tag || 'button');
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             type: 'button' // 默认
         });
-        this.ctrl.addStyleObj(td_button_style_1.$tdButtonBase);
+        this.style.addObj(td_button_style_1.$tdButtonBase);
         this.childNodes = [];
-        this.props = this.setProps(params); // 这里的config赋值是要替换掉上面的config的预置值的。
+        this.props = this.useParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
     }
     setup() {
         var _a, _b, _c;
@@ -57,7 +58,7 @@ class TdButtonAbstract extends ui_abstract_1.UI {
         // this.useIcon(props);
         if (props === null || props === void 0 ? void 0 : props.slot) {
             // this.defaultSlot = new SlotNode('default', props.slot);
-            // this.icon?.ctrl.addStyleObj($iconLeft);
+            // this.icon?.style.addObj($iconLeft);
             // todo 会运行 2 次；
             const span = new framework_1.Span({
                 name: 'text-expand',
@@ -75,39 +76,42 @@ class TdButtonAbstract extends ui_abstract_1.UI {
         this.useType(props);
         if (props === null || props === void 0 ? void 0 : props.disabled) {
             this.disabled = props.disabled;
-            this.ctrl.addStyleObj(var_1.$button.disabled);
+            this.style.addObj({
+            // color: $button.disabled.textColor,
+            // backgroundColor: $button.disabled.bgColor,
+            // borderColor: $button.disabled.borderColor,
+            });
         }
         const size = (props === null || props === void 0 ? void 0 : props.size) ? props.size : 'default';
-        this.ctrl.addStyleObj(td_button_style_1.$sizeOpts[size]);
+        this.style.addObj(td_button_style_1.$sizeOpts[size]);
         if (props === null || props === void 0 ? void 0 : props.round) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 borderRadius: var_1.$borderRadius.round
             });
         }
         else if (props === null || props === void 0 ? void 0 : props.circle) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 width: td_input_style_1.$inputHeight[props.size || 'default'], // map.get($input-height, 'default');
                 borderRadius: var_1.$borderRadius.circle,
                 padding: var_1.$paddingVerticalMap.default
             });
         }
-    }
-    // 悬浮、聚焦、激活状态样式
-    initEvents() {
+        // 悬浮、聚焦、激活状态样式
+        // console.log('then td-button add events . ');
         this.addEvents({
-            mouseover: (evt) => {
-                // console.log('td-button mouseover . ');
+            mouseenter: (evt) => {
+                // console.log('td-button mouseenter . ');
                 if (this.disabled) {
-                    this.ctrl.setStyleObj({
-                        cursor: 'notAllowed'
+                    this.style.setObj({
+                        cursor: 'not-allowed'
                     });
                 }
                 else {
                     if (this.type) {
-                        this.ctrl.setStyleObj(td_button_style_1.$buttonStateColors[this.type].hover);
+                        this.style.setObj(td_button_style_1.$buttonStateColors[this.type].hover);
                     }
                     else {
-                        this.ctrl.setStyleObj({
+                        this.style.setObj({
                             color: var_1.$button.hover.textColor,
                             backgroundColor: var_1.$button.hover.borderColor, // $colors['primary']['light-3'],
                             borderColor: var_1.$button.hover.borderColor
@@ -115,24 +119,24 @@ class TdButtonAbstract extends ui_abstract_1.UI {
                     }
                 }
             },
-            mouseout: () => {
+            mouseleave: () => {
                 // console.log('td-button mouseout . ');
                 if (this.disabled) {
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         cursor: 'auto'
                     });
                 }
                 else {
                     if (this.type) {
                         if (this.plain) {
-                            this.ctrl.setStyleObj(td_button_style_1.$buttonPlainColors[this.type].default);
+                            this.style.setObj(td_button_style_1.$buttonPlainColors[this.type].default);
                         }
                         else {
-                            this.ctrl.setStyleObj(td_button_style_1.$buttonStateColors[this.type].default);
+                            this.style.setObj(td_button_style_1.$buttonStateColors[this.type].default);
                         }
                     }
                     else {
-                        this.ctrl.setStyleObj({
+                        this.style.setObj({
                             color: var_1.$button.textColor,
                             backgroundColor: var_1.$button.bgColor,
                             borderColor: var_1.$button.borderColor
@@ -152,21 +156,21 @@ class TdButtonAbstract extends ui_abstract_1.UI {
                 this.plain = params.plain;
                 if (params.disabled) {
                     this.disabled = params.disabled;
-                    this.ctrl.addStyleObj(td_button_style_1.$buttonPlainColors[params.type].disabled);
+                    this.style.addObj(td_button_style_1.$buttonPlainColors[params.type].disabled);
                 }
                 else {
                     console.log(td_button_style_1.$buttonPlainColors[params.type].default);
-                    this.ctrl.addStyleObj(td_button_style_1.$buttonPlainColors[params.type].default);
+                    this.style.addObj(td_button_style_1.$buttonPlainColors[params.type].default);
                 }
             }
             else {
                 if (params === null || params === void 0 ? void 0 : params.disabled) {
                     console.log('params?.disabled is true . $button.disabled is ', var_1.$button.disabled);
                     this.disabled = params.disabled;
-                    this.ctrl.addStyleObj(td_button_style_1.$buttonStateColors[params.type].disabled);
+                    this.style.addObj(td_button_style_1.$buttonStateColors[params.type].disabled);
                 }
                 else {
-                    this.ctrl.addStyleObj(td_button_style_1.$buttonStateColors[params.type].default);
+                    this.style.addObj(td_button_style_1.$buttonStateColors[params.type].default);
                 }
             }
         }

package/src/components/basic/td-button/td-button.interface.d.ts

@@ -34,7 +34,6 @@ export interface ITdButtonConfig extends IUIConfig {
     disabled?: boolean;
     type?: IButtonType;
     svgObj?: TypeSvgSvg;
-    iconPosition?: 'left' | 'right';
     icon?: string;
     nativeType?: IButtonNativeType;
     loading?: boolean;

package/src/components/basic/td-button-group/td-button-group.class.d.ts

@@ -1,11 +1,10 @@
 import { UI } from '../../../ui/ui.abstract';
-import { ITdButtonGroup, ITdButtonGroupConfig } from './td-button-group.interface';
 import { TdButton } from '../td-button/td-button.class';
+import { ITdButtonGroup, ITdButtonGroupConfig } from './td-button-group.interface';
 export declare class TdButtonGroup extends UI implements ITdButtonGroup {
     className: 'TdButtonGroup';
     constructor(params: ITdButtonGroupConfig);
-    created(): void;
-    mounted(): void;
+    setup(): void;
     addBtnStyle(btn: TdButton, index: number): void;
     setBtnStyle(btn: TdButton, index: number): void;
 }

package/src/components/basic/td-button-group/td-button-group.class.js

@@ -8,16 +8,16 @@ class TdButtonGroup extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdButtonGroup';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-block',
             verticalAlign: 'middle'
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+            this.slotChild(params.slot);
         }
-        this.setProps(params);
+        this.useParams(params);
     }
-    created() {
+    setup() {
         this.children.forEach((btn, index) => {
             if (btn instanceof td_button_class_1.TdButton) {
                 if (this.children.length > 1) {
@@ -25,21 +25,19 @@ class TdButtonGroup extends ui_abstract_1.UI {
                 }
             }
         });
-    }
-    mounted() {
         this.children.forEach((btn, index) => {
             if (btn instanceof td_button_class_1.TdButton) {
                 btn.addEvents({
-                    mouseover: () => {
-                        btn.ctrl.setStyleObj({
+                    mouseenter: () => {
+                        btn.style.setObj({
                             zIndex: 1
                         });
                         if (this.children.length > 1) {
                             this.setBtnStyle(btn, index);
                         }
                     },
-                    mouseout: () => {
-                        btn.ctrl.setStyleObj({
+                    mouseleave: () => {
+                        btn.style.setObj({
                             zIndex: 1
                         });
                         if (this.children.length > 1) {
@@ -52,7 +50,7 @@ class TdButtonGroup extends ui_abstract_1.UI {
     }
     addBtnStyle(btn, index) {
         if (index === 0) {
-            btn.ctrl.addStyleObj({
+            btn.style.addObj({
                 borderTopRightRadius: 0,
                 borderBottomRightRadius: 0,
                 marginRight: '-1px',
@@ -60,14 +58,14 @@ class TdButtonGroup extends ui_abstract_1.UI {
             });
         }
         else if (index === this.children.length - 1) {
-            btn.ctrl.addStyleObj({
+            btn.style.addObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeftColor: td_button_style_1.$borderRightColor
             });
         }
         else {
-            btn.ctrl.addStyleObj({
+            btn.style.addObj({
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
                 borderBottomRightRadius: 0,
@@ -79,7 +77,7 @@ class TdButtonGroup extends ui_abstract_1.UI {
     }
     setBtnStyle(btn, index) {
         if (index === 0) {
-            btn.ctrl.setStyleObj({
+            btn.style.setObj({
                 borderTopRightRadius: 0,
                 borderBottomRightRadius: 0,
                 marginRight: '-1px',
@@ -87,14 +85,14 @@ class TdButtonGroup extends ui_abstract_1.UI {
             });
         }
         else if (index === this.children.length - 1) {
-            btn.ctrl.setStyleObj({
+            btn.style.setObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeftColor: td_button_style_1.$borderRightColor
             });
         }
         else {
-            btn.ctrl.setStyleObj({
+            btn.style.setObj({
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
                 borderBottomRightRadius: 0,

package/src/components/basic/td-container/td-aside/td-aside.class.js

@@ -7,14 +7,14 @@ class TdAside extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdAside';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             overflow: 'auto',
             boxSizing: 'border-box',
             flexShrink: 0,
             width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.width) : '300px'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdAside = TdAside;

package/src/components/basic/td-container/td-container.class.js

@@ -6,9 +6,9 @@ class TdContainer extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'section');
         this.className = 'TdContainer';
-        this.ctrl.addAttrName('td-container');
-        this.ctrl.addAttrClass('td-container');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-container');
+        this.attr.addClass('td-container');
+        this.style.addObj({
             display: 'flex',
             flexDirection: 'row', // vertical ===> column
             flex: 1,
@@ -18,12 +18,12 @@ class TdContainer extends ui_abstract_1.UI {
         });
         this.childNodes = [];
         if (params === null || params === void 0 ? void 0 : params.vertical) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 flexDirection: 'column'
             });
         }
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdContainer = TdContainer;

package/src/components/basic/td-container/td-container.js

@@ -11,7 +11,7 @@ class TdContainerComp extends HTMLElement {
         // 省去了监听document加载完毕
         const title = 'td-container';
         const container = new td_container_class_1.TdContainer();
-        container.ctrl.setAttrName(title);
+        container.attr.setName(title);
         // 渲染
         container.mount();
         console.log('container is ', container);

package/src/components/basic/td-container/td-footer/td-footer.class.js

@@ -6,7 +6,7 @@ class TdFooter extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'footer');
         this.className = 'TdFooter';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '0 20px',
             height: (params === null || params === void 0 ? void 0 : params.height) || '60px',
             boxSizing: 'border-box',
@@ -16,7 +16,7 @@ class TdFooter extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params.slot);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdFooter = TdFooter;

package/src/components/basic/td-container/td-header/td-header.class.js

@@ -6,8 +6,8 @@ class TdHeader extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'header');
         this.className = 'TdHeader';
-        this.ctrl.addAttrName('td-header');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-header');
+        this.style.addObj({
             display: 'flex',
             alignItems: 'center',
             padding: '0 20px',
@@ -19,7 +19,7 @@ class TdHeader extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params.slot);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdHeader = TdHeader;

package/src/components/basic/td-container/td-main/td-main.class.js

@@ -6,7 +6,7 @@ class TdMain extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'main');
         this.className = 'TdMain';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'block',
             flex: 1,
             flexBasis: 'auto',
@@ -16,7 +16,7 @@ class TdMain extends ui_abstract_1.UI {
         });
         this.addChild(this.getSlotNode());
         console.warn('TdMain slotNodes.default is ', this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdMain = TdMain;

package/src/components/basic/td-icon/td-icon.class.js

@@ -17,31 +17,31 @@ class TdIcon extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'i');
         this.className = 'TdIcon';
-        this.ctrl.addStyleObj(td_icon_style_1.$tdIcon);
+        this.style.addObj(td_icon_style_1.$tdIcon);
         if (params === null || params === void 0 ? void 0 : params.loading) {
-            this.ctrl.addStyleObj(td_icon_style_1.$iconLoading);
+            this.style.addObj(td_icon_style_1.$iconLoading);
         }
         // 首次创建时，添加style标签；避免重复创建
         if (!TdIcon.initCalled) {
             TdIcon.initCalled = true;
-            const cssText = `
-/* 选择所有带有 data-v-366071 属性的元素 */
-/* 在这里添加您的样式规则 */
-@keyframes rotating-${framework_1.vHash} {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
+            const cssText = `
+/* 选择所有带有 data-v-366071 属性的元素 */
+/* 在这里添加您的样式规则 */
+@keyframes rotating-${framework_1.vHash} {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
       `;
             (0, framework_1.createStyle)(cssText);
             // createClass('td-icon', $tdIcon);
         }
-        this.ctrl.addAttrClass('td-icon');
+        this.attr.addClass('td-icon');
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     /**
      * 根据配置更新图标的状态和样式。
@@ -54,28 +54,28 @@ class TdIcon extends ui_abstract_1.UI {
             // 直接作为 childNodes的子元素更合理；
             this.getSlotNode().resetSlot(props.svgObj);
             this.svg = props.svgObj;
-            this.svg.ctrl.addAttrObj({
+            this.svg.attr.addObj({
                 height: '1em',
                 width: '1em',
             });
         }
         if (props === null || props === void 0 ? void 0 : props.color) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 color: props.color,
             });
         }
         if (props === null || props === void 0 ? void 0 : props.size) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 fontSize: (0, utils_1.addUnit)(props.size),
             });
             (_a = this.svg) === null || _a === void 0 ? void 0 : _a.resetSize(props.size, props.size);
         }
         if ((props === null || props === void 0 ? void 0 : props.position) === 'right') {
             // 位置应该是引用的对象中设置，自身应该不需要设置。
-            this.ctrl.addStyleObj(td_icon_style_1.$iconRight);
+            this.style.addObj(td_icon_style_1.$iconRight);
         }
         else if ((props === null || props === void 0 ? void 0 : props.position) === 'left') {
-            this.ctrl.addStyleObj(td_icon_style_1.$iconLeft);
+            this.style.addObj(td_icon_style_1.$iconLeft);
         }
     }
     /**

package/src/components/basic/td-layout/td-col/td-col.class.d.ts

@@ -1,6 +1,7 @@
 import { UI } from '../../../../ui/ui.abstract';
 import { TdRow } from '../td-row/td-row.class';
 import { ITdCol, ITdColConfig } from './td-col.interface';
+import { TypeNode } from '@type-dom/framework';
 export declare class TdCol extends UI implements ITdCol {
     className: 'TdCol';
     parent?: TdRow;
@@ -8,6 +9,8 @@ export declare class TdCol extends UI implements ITdCol {
     constructor(params?: ITdColConfig);
     get screenWidth(): number;
     setup(): void;
-    resize(): void;
-    initEvents(): void;
+    mounted(): void;
+    destroy(root?: TypeNode): void;
+    debounceResize: () => void;
+    resize: () => void;
 }