@type-dom/ui 0.0.9 → 0.1.0

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

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdContainer = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdContainer extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdContainer extends framework_1.TypeSection {
     constructor(params = {}) {
-        super(params, 'section');
+        super();
         this.className = 'TdContainer';
-        this.attr.addName('td-container');
-        this.attr.addClass('td-container');
+        this.childNodes = [];
+        this.attr.addObj({
+            name: 'td-container',
+            class: 'td-container'
+        });
         this.style.addObj({
             display: 'flex',
             flexDirection: 'row', // vertical ===> column
@@ -16,13 +19,12 @@ class TdContainer extends ui_abstract_1.UI {
             boxSizing: 'border-box',
             minWidth: 0
         });
-        this.childNodes = [];
         if (params === null || params === void 0 ? void 0 : params.vertical) {
             this.style.addObj({
                 flexDirection: 'column'
             });
         }
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
 }

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

@@ -1,13 +1,12 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeSection, TypeElement } from '@type-dom/framework';
 import { TdAside } from './td-aside/td-aside.class';
 import { TdHeader } from './td-header/td-header.class';
 import { TdMain } from './td-main/td-main.class';
 import { TdContainer } from './td-container.class';
-export interface ITdContainer extends IUI {
+export interface ITdContainer extends ITypeSection {
     className: 'TdContainer';
 }
-export interface ITdContainerConfig extends IUIConfig {
+export interface ITdContainerConfig extends ITypeConfig {
     name?: string;
     vertical?: boolean;
     direction?: 'vertical' | 'horizontal';

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

@@ -10,8 +10,9 @@ class TdContainerComp extends HTMLElement {
     connectedCallback() {
         // 省去了监听document加载完毕
         const title = 'td-container';
-        const container = new td_container_class_1.TdContainer();
-        container.attr.setName(title);
+        const container = new td_container_class_1.TdContainer({
+            attrObj: { name: title },
+        });
         // 渲染
         container.mount();
         console.log('container is ', container);

package/src/components/basic/td-container/td-footer/td-footer.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeFooter } from '@type-dom/framework';
 import type { ITdFooter, ITdFooterConfig } from './td-footer.interface';
-export declare class TdFooter extends UI implements ITdFooter {
+export declare class TdFooter extends TypeFooter implements ITdFooter {
     className: 'TdFooter';
     props: ITdFooterConfig;
     constructor(params?: ITdFooterConfig);

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdFooter = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdFooter extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdFooter extends framework_1.TypeFooter {
     constructor(params = {}) {
-        super(params, 'footer');
+        super();
         this.className = 'TdFooter';
+        this.attr.addName('td-footer');
         this.style.addObj({
             padding: '0 20px',
             height: (params === null || params === void 0 ? void 0 : params.height) || '60px',

package/src/components/basic/td-container/td-footer/td-footer.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdFooter extends IUI {
+import { ITypeConfig, ITypeFooter } from '@type-dom/framework';
+export interface ITdFooter extends ITypeFooter {
     className: 'TdFooter';
 }
-export interface ITdFooterConfig extends IUIConfig {
+export interface ITdFooterConfig extends ITypeConfig {
     height?: string | number;
     backgroundColor?: string;
 }

package/src/components/basic/td-container/td-header/td-header.class.d.ts

@@ -1,7 +1,7 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeHeader } from '@type-dom/framework';
 import { TdContainer } from '../td-container.class';
 import type { ITdHeader, ITdHeaderConfig } from './td-header.interface';
-export declare class TdHeader extends UI implements ITdHeader {
+export declare class TdHeader extends TypeHeader implements ITdHeader {
     className: 'TdHeader';
     props: ITdHeaderConfig;
     parent?: TdContainer;

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdHeader = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdHeader extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdHeader extends framework_1.TypeHeader {
     constructor(params = {}) {
-        super(params, 'header');
+        super();
         this.className = 'TdHeader';
         this.attr.addName('td-header');
         this.style.addObj({

package/src/components/basic/td-container/td-header/td-header.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdHeader extends IUI {
+import { ITypeConfig, ITypeHeader } from '@type-dom/framework';
+export interface ITdHeader extends ITypeHeader {
     className: 'TdHeader';
 }
-export interface ITdHeaderConfig extends IUIConfig {
+export interface ITdHeaderConfig extends ITypeConfig {
     height?: string | number;
     backgroundColor?: string;
 }

package/src/components/basic/td-container/td-main/td-main.class.d.ts

@@ -1,7 +1,9 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdMain, ITdMainConfig } from './td-main.interface';
-export declare class TdMain extends UI implements ITdMain {
+export declare class TdMain extends TypeHtml implements ITdMain {
     className: 'TdMain';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdMainConfig;
     constructor(params?: ITdMainConfig);
 }

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMain = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdMain extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdMain extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'main');
+        super();
         this.className = 'TdMain';
+        this.nodeName = params.tag || 'main';
+        this.dom = document.createElement(this.nodeName);
+        this.attr.addName('td-main');
         this.style.addObj({
             display: 'block',
             flex: 1,
@@ -14,8 +17,8 @@ class TdMain extends ui_abstract_1.UI {
             boxSizing: 'border-box'
             // padding: '20px',
         });
-        this.addChild(this.getSlotNode());
-        console.warn('TdMain slotNodes.default is ', this.getSlotNode());
+        console.log('then slotChild . params.slot is ', params.slot);
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
 }

package/src/components/basic/td-container/td-main/td-main.interface.d.ts

@@ -1,7 +1,7 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdMain extends IUI {
+import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
+export interface ITdMain extends ITypeHtml {
     className: 'TdMain';
 }
-export interface ITdMainConfig extends IUIConfig {
+export interface ITdMainConfig extends ITypeConfig {
     tag?: 'main';
 }

package/src/components/basic/td-icon/td-icon.class.d.ts

@@ -1,24 +1,22 @@
-import { TypeHtml, TypeSvgSvg } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { SlotNode, TypeHtml, TypeI, TypeSvgSvg } from '@type-dom/framework';
 import { ITdIcon, ITdIconConfig } from './td-icon.interface';
 /**
  * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
  * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
  */
-export declare class TdIcon extends UI implements ITdIcon {
+export declare class TdIcon extends TypeI implements ITdIcon {
     className: 'TdIcon';
     props: ITdIconConfig;
     svg?: TypeSvgSvg;
-    parent?: TypeHtml;
+    parent?: TypeHtml | SlotNode;
     static initCalled: boolean;
     /**
      * TdIcon 类的构造函数。
-     * @param config 图标配置对象，可选参数。
+     * @param params
      */
     constructor(params?: ITdIconConfig);
     /**
      * 根据配置更新图标的状态和样式。
-     * @param config 图标的配置对象，可选参数。
      */
     setup(): void;
     /**

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

@@ -3,20 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_style_1 = require("./td-icon.style");
 /**
  * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
  * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
  */
-class TdIcon extends ui_abstract_1.UI {
+// @StyleManager
+class TdIcon extends framework_1.TypeI {
     /**
      * TdIcon 类的构造函数。
-     * @param config 图标配置对象，可选参数。
+     * @param params
      */
     constructor(params = {}) {
-        super(params, 'i');
+        super();
         this.className = 'TdIcon';
+        // this.addStyleObj($iconLeft);
+        this.attr.addName('td-icon');
         this.style.addObj(td_icon_style_1.$tdIcon);
         if (params === null || params === void 0 ? void 0 : params.loading) {
             this.style.addObj(td_icon_style_1.$iconLoading);
@@ -24,35 +26,34 @@ class TdIcon extends ui_abstract_1.UI {
         // 首次创建时，添加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.attr.addClass('td-icon');
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
+        // this.addChild(this.getSlotNode());
         this.props = this.useParams(params);
     }
     /**
      * 根据配置更新图标的状态和样式。
-     * @param config 图标的配置对象，可选参数。
      */
     setup() {
         var _a;
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.svgObj) {
             // 直接作为 childNodes的子元素更合理；
-            this.getSlotNode().resetSlot(props.svgObj);
+            this.addChild(props.svgObj);
             this.svg = props.svgObj;
             this.svg.attr.addObj({
                 height: '1em',
@@ -89,15 +90,15 @@ class TdIcon extends ui_abstract_1.UI {
      */
     replaceSvg(toSvg, fromSvg) {
         var _a;
-        const slotNode = this.getSlotNode('default');
-        console.log('replaceSvg slotNode is ', slotNode);
+        console.log('replaceSvg ');
         // 查找要替换的SVG元素的索引。
-        const svgIndex = (_a = slotNode.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
+        const svgIndex = (_a = this.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
             // 如果指定了要替换的SVG元素，则判断当前元素是否是待替换的元素。
             if (fromSvg) {
                 return child === fromSvg;
             }
-            else if (child instanceof framework_1.TypeSvgSvg) { // 如果没有指定具体的SVG元素，则查找所有实例化的SVG元素的第一个。
+            else if (child instanceof framework_1.TypeSvgSvg) {
+                // 如果没有指定具体的SVG元素，则查找所有实例化的SVG元素的第一个。
                 fromSvg = child;
                 return true;
             }
@@ -105,24 +106,26 @@ class TdIcon extends ui_abstract_1.UI {
         });
         // 如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
         if (svgIndex === -1) {
-            slotNode.addChild(toSvg);
+            this.addChild(toSvg);
         }
         else {
             // 替换找到的SVG元素为新SVG元素。
             if (fromSvg) {
-                fromSvg !== toSvg && slotNode.replaceChild(toSvg, fromSvg);
+                fromSvg !== toSvg && this.replaceSvg(toSvg, fromSvg);
             }
             else {
-                slotNode.addChild(toSvg);
+                this.addChild(toSvg);
             }
-            // slotNode.childNodes.splice(svgIndex, 1, toSvg);
-            this.clearChildrenDom();
         }
         // // 设置新SVG元素的父节点为当前节点。
         // toSvg.parent = slotNode;
         // 更新渲染，以显示替换或添加的新SVG元素。
-        slotNode.mount(this.dom);
+        // toSvg?.mount(this.dom);
+        // this.mount(this.elementParent?.dom);
     }
+    // getSlotNode(name = 'default') {
+    //   return this.slotNodes[name] = this.slotNodes[name] ?? new SlotNode(name);
+    // }
     /**
      * 组件挂载后的钩子函数。
      * 该函数目前用于处理加载状态的动画效果。

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

@@ -1,11 +1,10 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeI, TypeSvgSvg } from '@type-dom/framework';
 import { TdIcon } from './td-icon.class';
 /**
  * 定义了图标的接口，继承自IUI接口。
  * 此接口用于规范图标的属性和行为。
  */
-export interface ITdIcon extends IUI {
+export interface ITdIcon extends ITypeI {
     /**
      * 类名，固定为'TdIcon'，用于在HTML元素上应用样式。
      */
@@ -15,7 +14,7 @@ export interface ITdIcon extends IUI {
  * 定义了图标配置的接口，扩展了IUIConfig接口。
  * 这些配置用于自定义图标的展示方式。
  */
-export interface ITdIconConfig extends IUIConfig {
+export interface ITdIconConfig extends ITypeConfig {
     /**
      * 可选。指定一个SVG图形对象，用于显示自定义SVG图标。
      */

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

@@ -1,8 +1,7 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv, TypeNode } from '@type-dom/framework';
 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 {
+export declare class TdCol extends TypeDiv implements ITdCol {
     className: 'TdCol';
     parent?: TdRow;
     props: ITdColConfig;

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCol = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdCol extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdCol extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         // 使用防抖函数包装处理函数
         this.debounceResize = () => (0, utils_1.debounce)(this.resize, 250)();
         this.resize = () => {
@@ -75,7 +75,7 @@ class TdCol extends ui_abstract_1.UI {
             }
         };
         this.className = 'TdCol';
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
     get screenWidth() {

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdCol extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdCol extends ITypeDiv {
     className: 'TdCol';
 }
-export interface ITdColConfig extends IUIConfig {
+export interface ITdColConfig extends ITypeConfig {
     /**
      * @description number of column the grid spans
      */

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

@@ -1,7 +1,7 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdCol } from '../td-col/td-col.class';
 import { ITdRow, ITdRowConfig } from './td-row.interface';
-export declare class TdRow extends UI implements ITdRow {
+export declare class TdRow extends TypeDiv implements ITdRow {
     className: 'TdRow';
     props: ITdRowConfig;
     childNodes: TdCol[];

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRow = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_col_class_1 = require("../td-col/td-col.class");
-class TdRow extends ui_abstract_1.UI {
+class TdRow extends framework_1.TypeDiv {
     // justify: string = 'start';
     // align: string = 'top';
     // tag: string = 'div';
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdRow';
+        this.attr.addName('td-row');
         this.style.addObj({
             display: 'flex',
             flexWrap: 'wrap',
@@ -17,7 +18,7 @@ class TdRow extends ui_abstract_1.UI {
             boxSizing: 'border-box'
         });
         this.childNodes = [];
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
     setup() {

package/src/components/basic/td-layout/td-row/td-row.interface.d.ts

@@ -1,5 +1,5 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdRow extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdRow extends ITypeDiv {
     className: 'TdRow';
 }
 /**
@@ -8,7 +8,7 @@ export interface ITdRow extends IUI {
  * align: string = 'top';
  * tag: string = 'div';
  */
-export interface ITdRowConfig extends IUIConfig {
+export interface ITdRowConfig extends ITypeConfig {
     gutter?: number;
     justify?: string;
     align?: string;

package/src/components/basic/td-link/td-link.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeA } from '@type-dom/framework';
 import { ITdLink, ITdLinkConfig } from './td-link.interface';
-export declare class TdLink extends UI implements ITdLink {
+export declare class TdLink extends TypeA implements ITdLink {
     className: 'TdLink';
     props: ITdLinkConfig;
     private inner?;

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

@@ -2,19 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdLink = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_link_style_1 = require("../td-link/td-link.style");
-class TdLink extends ui_abstract_1.UI {
+class TdLink extends framework_1.TypeA {
     constructor(params) {
-        super(params, 'a');
+        super();
         this.className = 'TdLink';
-        (0, td_link_style_1.useType)(params);
         this.style.addObj(td_link_style_1.$linkStyle);
+        (0, td_link_style_1.useType)(params);
         this.props = this.useParams(params);
     }
-    // override beforeCreate() {
-    //   this.style.addObj($linkStyle);
-    // }
     setup() {
         const props = this.props;
         this.attr.addObj({
@@ -40,7 +36,7 @@ class TdLink extends ui_abstract_1.UI {
             name: 'inner',
             styleObj: td_link_style_1.$linkInnerStyle
         });
-        this.inner.addChild(this.getSlotNode());
+        this.inner.slotChild(props.slot);
         this.addChild(this.inner);
         this.addEvents({
             click: (evt) => {
@@ -50,7 +46,7 @@ class TdLink extends ui_abstract_1.UI {
                 if (this.props.type) {
                     if (this.props.disabled) {
                         this.style.setObj({
-                            cursor: 'notAllowed'
+                            cursor: 'not-allowed'
                         });
                     }
                     else {
@@ -95,7 +91,7 @@ class TdLink extends ui_abstract_1.UI {
         });
     }
     handleClick(event) {
-        this.emit('click', event);
+        // this.emit('click', event); // 会死循环的
     }
 }
 exports.TdLink = TdLink;

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

@@ -1,10 +1,10 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeA, ITypeConfig } from '@type-dom/framework';
 import { TdIcon } from '../td-icon/td-icon.class';
-export interface ITdLink extends IUI {
+export interface ITdLink extends ITypeA {
     className: 'TdLink';
 }
 export type ITdLinkType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger';
-export interface ITdLinkConfig extends IUIConfig {
+export interface ITdLinkConfig extends ITypeConfig {
     title?: string;
     /**
      * @description type

package/src/components/basic/td-link/td-link.style.js

@@ -29,7 +29,7 @@ exports.$linkStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    verticalAlign: 'middle',
+    // verticalAlign: 'middle',
     position: 'relative',
     textDecoration: 'none',
     outline: 'none',

package/src/components/basic/td-scrollbar/bar/bar.class.d.ts

@@ -1,7 +1,7 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdScrollbarThumb } from '../thumb/thumb.class';
 import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
-export declare class TdScrollbarBar extends UI implements ITdScrollbarBar {
+export declare class TdScrollbarBar extends TypeDiv implements ITdScrollbarBar {
     className: 'TdScrollbarBar';
     props: ITdScrollbarBarConfig;
     thumbs: [TdScrollbarThumb, TdScrollbarThumb];

package/src/components/basic/td-scrollbar/bar/bar.class.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarBar = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const thumb_class_1 = require("../thumb/thumb.class");
-class TdScrollbarBar extends ui_abstract_1.UI {
+class TdScrollbarBar extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdScrollbarBar';
-        this.attr.addName('td-scrollbar-bar');
+        this.attr.addName('td-scrollbar-bar-slot');
         this.style.addObj({
             position: 'absolute',
             right: '2px',

package/src/components/basic/td-scrollbar/bar/bar.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdScrollbarBar extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdScrollbarBar extends ITypeDiv {
     className: 'TdScrollbarBar';
 }
-export interface ITdScrollbarBarConfig extends IUIConfig {
+export interface ITdScrollbarBarConfig extends ITypeConfig {
     always?: boolean;
     minSize?: number;
 }

package/src/components/basic/td-scrollbar/td-scrollbar.class.d.ts

@@ -1,7 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
-export declare class TdScrollbar extends UI implements ITdScrollbar {
+export declare class TdScrollbar extends TypeHtml implements ITdScrollbar {
     className: 'TdScrollbar';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdScrollbarConfig;
     private wrap;
     private view;