@type-dom/ui 0.0.10 → 0.1.0

package/src/components/form/td-switch/td-switch.class.d.ts

@@ -1,7 +1,6 @@
-import { Input } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, TypeDiv } from '@type-dom/framework';
 import { ITdSwitch, ITdSwitchConfig } from './td-switch.interface';
-export declare class TdSwitch extends UI implements ITdSwitch {
+export declare class TdSwitch extends TypeDiv implements ITdSwitch {
     className: 'TdSwitch';
     props: ITdSwitchConfig;
     input: Input;

package/src/components/form/td-switch/td-switch.class.js

@@ -3,17 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitch = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const event_1 = require("../../../constants/event");
 const td_switch_core_1 = require("./widget/td-switch-core");
 const td_switch_left_1 = require("./widget/td-switch-left");
 const td_switch_right_1 = require("./widget/td-switch-right");
 const td_switch_style_1 = require("./td-switch.style");
-class TdSwitch extends ui_abstract_1.UI {
+class TdSwitch extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        super(params);
+        super();
         this.className = 'TdSwitch';
         this.style.addObj({
             display: 'inline-flex',

package/src/components/form/td-switch/td-switch.interface.d.ts

@@ -1,10 +1,9 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv, TypeSvgSvg } from '@type-dom/framework';
 import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
-export interface ITdSwitch extends IUI {
+export interface ITdSwitch extends ITypeDiv {
     className: 'TdSwitch';
 }
-export interface ITdSwitchConfig extends IUIConfig {
+export interface ITdSwitchConfig extends ITypeConfig {
     /**
      * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
      * default: false

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

@@ -1,8 +1,7 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv, TypeNode } from '@type-dom/framework';
 import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
 import { IStyle } from '@type-dom/css-type';
-export declare class TdAffix extends UI implements ITdAffix {
+export declare class TdAffix extends TypeDiv implements ITdAffix {
     className: 'TdAffix';
     props: ITdAffixConfig;
     private affix;

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

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAffix = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdAffix extends ui_abstract_1.UI {
+class TdAffix extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.onScroll = () => {
             console.log('this.scrollContainer scroll . ');
             // if (this.fixed) {

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { IJsonData, XProxy } from '@type-dom/framework';
-export interface ITdAffix extends IUI {
+import { IJsonData, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
+export interface ITdAffix extends ITypeDiv {
     className: 'TdAffix';
 }
-export interface ITdAffixConfig extends IUIConfig {
+export interface ITdAffixConfig extends ITypeConfig {
     /**
      * @description affix element zIndex value
      *     default: 100,

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdAnchorLink, ITdAnchorLinkConfig } from './td-anchor-link.interface';
-export declare class TdAnchorLink extends UI implements ITdAnchorLink {
+export declare class TdAnchorLink extends TypeDiv implements ITdAnchorLink {
     className: 'TdAnchorLink';
     private href;
     private list?;

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAnchorLink = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdAnchorLink extends ui_abstract_1.UI {
+class TdAnchorLink extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdAnchorLink';
         this.href = new framework_1.A({
             text: (params === null || params === void 0 ? void 0 : params.title) || '',

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdAnchorLink extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdAnchorLink extends ITypeDiv {
     className: 'TdAnchorLink';
 }
-export interface ITdAnchorLinkConfig extends IUIConfig {
+export interface ITdAnchorLinkConfig extends ITypeConfig {
     /**
      * @description the text content of the anchor link
      */

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdAnchor, ITdAnchorConfig } from './td-anchor.interface';
-export declare class TdAnchor extends UI implements ITdAnchor {
+export declare class TdAnchor extends TypeDiv implements ITdAnchor {
     className: 'TdAnchor';
     props: ITdAnchorConfig;
     private marker?;

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

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAnchor = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_anchor_style_1 = require("./td-anchor.style");
 const td_anchor_function_1 = require("./td-anchor.function");
-class TdAnchor extends ui_abstract_1.UI {
+class TdAnchor extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d;
-        super(params);
+        super();
         this.className = 'TdAnchor';
-        this.style.addObj({
+        this.attr.setObj({
+            name: 'td-anchor'
+        });
+        this.style.setObj({
             position: 'relative',
             // background-color: getCssVar('anchor-bg-color')
             backgroundColor: td_anchor_style_1.$anchor.bgColor.default

package/src/components/navigation/td-anchor/td-anchor.function.js

@@ -7,7 +7,7 @@ const currentAnchor = (0, framework_1.createProxy)(null);
 const containerEl = (0, framework_1.createProxy)(null); // ref<HTMLElement | Window>()
 const links = {};
 let isScrolling = false;
-let currentScrollTop = 0;
+const currentScrollTop = 0;
 const addLink = (state) => {
     links[state.href] = state.el;
 };

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdAnchor extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdAnchor extends ITypeDiv {
     className: 'TdAnchor';
 }
-export interface ITdAnchorConfig extends IUIConfig {
+export interface ITdAnchorConfig extends ITypeConfig {
     /**
      * @description scroll container
      */

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

@@ -1,19 +1,18 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
 import { ITdBackTop, ITdBackTopConfig } from './td-backtop.interface';
-export declare class TdBackTop extends UI implements ITdBackTop {
+export declare class TdBackTop extends TypeFragment implements ITdBackTop {
     className: 'TdBackTop';
+    content: Transition;
     props: ITdBackTopConfig;
     static initCalled: boolean;
     private container;
-    private el;
+    private target;
     private visible;
-    private transition;
     private division;
     constructor(params?: ITdBackTopConfig);
     mounted(): void;
     destroy(root?: TypeNode): void;
     throttleScroll: () => void;
-    handleScroll: () => void;
+    handleScroll: (target?: any, event?: MouseEvent) => void;
     handleClick(): void;
 }

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

@@ -4,74 +4,60 @@ exports.TdBackTop = void 0;
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_backtop_style_1 = require("./td-backtop.style");
-class TdBackTop extends ui_abstract_1.UI {
+const td_backtop_const_1 = require("./td-backtop.const");
+class TdBackTop extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super(); // 要传 params， 否则 el 无法定位。
         this.visible = false;
         this.throttleScroll = () => {
             console.log('throttleScroll .');
             return (0, utils_1.throttle)(this.handleScroll, 300)();
         };
-        this.handleScroll = () => {
+        this.handleScroll = (target, event) => {
             var _a;
-            console.error('handleScroll . ');
+            console.error('handleScroll . target is ', target);
             // console.log('this.el', this.el);
-            if (this.el) {
+            if (this.target) {
                 this.visible =
-                    this.el.scrollTop >= (((_a = this.props) === null || _a === void 0 ? void 0 : _a.visibilityHeight) || 200);
+                    this.target.scrollTop >= (((_a = this.props) === null || _a === void 0 ? void 0 : _a.visibilityHeight) || 200);
                 console.log('this.visible', this.visible);
                 // this.setStyleObj({
                 //   display: this.visible ? 'flex' : 'none',
                 // })
-                this.transition.showSlot(this.visible);
+                this.content.showSlot(this.visible);
             }
         };
         this.className = 'TdBackTop';
+        this.assignProps(td_backtop_const_1.backtopProps);
         this.division = new framework_1.Div({
-            name: 'td-back-top',
             attrObj: {
+                name: 'td-back-top',
                 class: 'td-back-top'
             },
-            styleObj: {
-                right: (0, utils_1.addUnit)(params === null || params === void 0 ? void 0 : params.right) || '40px',
-                bottom: (0, utils_1.addUnit)(params === null || params === void 0 ? void 0 : params.bottom) || '40px',
-                position: 'fixed',
-                // backgroundColor: getCssVar('backtop', 'bg-color'),
-                // backgroundColor: $backtop.bgColor,
-                width: '40px',
-                height: '40px',
-                borderRadius: '50%',
-                // color: getCssVar('backtop', 'text-color'),
-                color: td_backtop_style_1.$backtop.textColor,
-                // display: this.visible ? 'flex' : 'none',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '20px',
-                // boxShadow: getCssVar('box-shadow', 'lighter'),
-                boxShadow: var_1.$boxShadow.lighter,
-                cursor: 'pointer',
-                zIndex: 999
-            },
+            styleObj: td_backtop_style_1.$backtopStyle,
             events: {
-                click: () => {
-                    this.handleClick();
-                }
+                click: (evt) => this.handleClick()
             }
         });
         this.division.attr.addObj({
             componentId: this.componentId
         });
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             slot: this.division,
         });
-        this.addChild(this.transition);
-        // this.attr.addName('td-back-top');
+        this.addChild(this.content);
+        this.division.useStyle(params);
+        this.division.style.addObj({
+            right: (params.right || 40) + 'px',
+            bottom: (params.bottom || 40) + 'px',
+        });
+        this.division.useAttr(params);
+        // if (this.visible) {
+        //   this.content.addChild(this.division);
+        // }
         if (!TdBackTop.initCalled) {
             TdBackTop.initCalled = true;
             (0, framework_1.createClass)('td-back-top', {
@@ -84,7 +70,6 @@ class TdBackTop extends ui_abstract_1.UI {
                 // // color: getCssVar('backtop', 'text-color'),
                 // color: $backtop.textColor,
                 // display: 'flex',
-                // // display: 'flex',
                 // alignItems: 'center',
                 // justifyContent: 'center',
                 // fontSize: '20px',
@@ -100,6 +85,7 @@ class TdBackTop extends ui_abstract_1.UI {
         this.division.addChild(this.getSlotNode());
         if (params === null || params === void 0 ? void 0 : params.slot) {
             // this.division.slotChild(params.slot);
+            this.getSlotNode().addSlot(params.slot);
         }
         else {
             this.getSlotNode().resetSlot(new td_icon_class_1.TdIcon({
@@ -108,45 +94,36 @@ class TdBackTop extends ui_abstract_1.UI {
             }));
         }
         this.container = document;
-        this.el = document.documentElement; // todo 监听不生效 ？？？？
-        this.buildProps({
-            visibilityHeight: 200,
-            right: 40,
-            bottom: 40,
-        });
+        this.target = document.documentElement; // todo 监听不生效 ？？？？
         this.props = this.useParams(params);
     }
     mounted() {
         var _a;
         console.log('TdBackTop mounted');
+        this.container = document; // this.el;
+        this.target = document.documentElement;
         if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.target) {
-            this.el = this.props.target;
-            // if (!this.el) {
-            //   throw Error(`target does not exist: ${this.props.target}`)
-            // }
+            this.target = this.props.target;
+            if (!this.target) {
+                throw Error(`target does not exist: ${this.props.target}`);
+            }
         }
-        // this.container = this.root?.dom as HTMLDivElement; // this.el;
+        // this.container = this.target;
         // this.container.style.setProperty('over-flow', 'scroll');
+        // listener scroll
+        this.container.addEventListener('scroll', this.throttleScroll);
         // Give visible an initial value, fix #13066
         this.handleScroll();
-        this.container.addEventListener('scroll', this.throttleScroll);
-        // 监听 window 的滚动事件
-        window.addEventListener('scroll', () => {
-            console.log('Window scrolled:', window.scrollY);
-        });
-        // 监听 document 的滚动事件
-        document.addEventListener('scroll', () => {
-            console.log('Document scrolled:', document.documentElement.scrollTop || document.body.scrollTop);
-        });
     }
     destroy(root) {
+        console.log('TdBackTop destroy');
         this.container.removeEventListener('scroll', this.throttleScroll);
         super.destroy(root);
     }
     handleClick() {
         var _a;
         console.error('handleClick . ');
-        (_a = this.el) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
     }
 }
 exports.TdBackTop = TdBackTop;

package/src/components/navigation/td-backtop/td-backtop.const.d.ts

@@ -0,0 +1,18 @@
+export declare const backtopProps: {
+    /**
+     * @description the button will not show until the scroll height reaches this value.
+     */
+    visibilityHeight: number;
+    /**
+     * @description the target to trigger scroll.
+     */
+    target: string;
+    /**
+     * @description right distance.
+     */
+    right: number;
+    /**
+     * @description bottom distance.
+     */
+    bottom: number;
+};

package/src/components/navigation/td-backtop/td-backtop.const.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backtopProps = void 0;
+exports.backtopProps = {
+    /**
+     * @description the button will not show until the scroll height reaches this value.
+     */
+    visibilityHeight: 200,
+    /**
+     * @description the target to trigger scroll.
+     */
+    target: '',
+    /**
+     * @description right distance.
+     */
+    right: 40,
+    /**
+     * @description bottom distance.
+     */
+    bottom: 40,
+};

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBackTop extends IUI {
+import type { ITransitionConfig, ITypeElement } from '@type-dom/framework';
+export interface ITdBackTop extends ITypeElement {
     className: 'TdBackTop';
 }
-export interface ITdBackTopConfig extends IUIConfig {
+export interface ITdBackTopConfig extends ITransitionConfig {
     /**
      * @description the button will not show until the scroll height reaches this value.
      *     default: 200,

package/src/components/navigation/td-backtop/td-backtop.style.d.ts

@@ -1,5 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $backtop: {
     bgColor: string;
     textColor: string;
     hoverBgColor: string;
 };
+export declare const $backtopStyle: IStyle;

package/src/components/navigation/td-backtop/td-backtop.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$backtop = void 0;
+exports.$backtopStyle = exports.$backtop = void 0;
 const var_1 = require("../../../styles/var");
 exports.$backtop = {
     // 'bg-color': getCssVar('bg-color', 'overlay'),
@@ -11,3 +11,21 @@ exports.$backtop = {
     hoverBgColor: var_1.$borderColor.extraLight
     // 'hover-text-color':
 };
+exports.$backtopStyle = {
+    position: 'fixed',
+    // background-color: getCssVar('backtop', 'bg-color'),
+    backgroundColor: exports.$backtop.bgColor,
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    // color: getCssVar('backtop', 'text-color'),
+    color: exports.$backtop.textColor,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    // boxShadow: getCssVar('box-shadow', 'lighter'),
+    boxShadow: var_1.$boxShadow.lighter,
+    cursor: 'pointer',
+    zIndex: 15, // 5 会被遮挡
+};

package/src/components/navigation/td-backtop/use-backtop.d.ts

@@ -1,7 +1,6 @@
-import { AnyFn } from '@type-dom/framework';
 import { ITdBackTopConfig } from './td-backtop.interface';
-export declare const useBackTop: (props: ITdBackTopConfig, emit: (event: string, fn: AnyFn) => void, componentName: string) => {
+export declare const useBackTop: (props: ITdBackTopConfig, emit: (eventName: string, event?: Event) => void, componentName: string) => {
     visible: boolean;
-    handleClick: (fn: AnyFn) => void;
+    handleClick: (event: MouseEvent) => void;
     mounted: () => void;
 };

package/src/components/navigation/td-backtop/use-backtop.js

@@ -13,9 +13,9 @@ emit, componentName) => {
             visible = el.scrollTop >= ((_a = props.visibilityHeight) !== null && _a !== void 0 ? _a : 0);
         }
     };
-    const handleClick = (fn) => {
+    const handleClick = (event) => {
         el === null || el === void 0 ? void 0 : el.scrollTo({ top: 0, behavior: 'smooth' });
-        emit('click', fn);
+        emit('click', event);
     };
     // const handleScrollThrottled = useThrottleFn(handleScroll, 300, true)
     //

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

@@ -1,11 +1,11 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdBreadcrumbItem } from '../td-breadcrumb-item/td-breadcrumb-item.class';
 import { ITdBreadcrumb, ITdBreadcrumbConfig } from './td-breadcrumb.interface';
-export declare class TdBreadcrumb extends UI implements ITdBreadcrumb {
+export declare class TdBreadcrumb extends TypeDiv implements ITdBreadcrumb {
     className: 'TdBreadcrumb';
     props: ITdBreadcrumbConfig;
     childNodes: TdBreadcrumbItem[];
     constructor(params?: ITdBreadcrumbConfig);
-    created(): void;
+    setup(): void;
     mounted(): void;
 }

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

@@ -1,23 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumb = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 //  todo link 样式没有添加
-class TdBreadcrumb extends ui_abstract_1.UI {
+class TdBreadcrumb extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdBreadcrumb';
-        this.attr.addName('td-breadcrumb');
-        this.style.addObj({
+        this.attr.setObj({
+            name: 'td-breadcrumb',
+            'aria-label': 'Breadcrumb', // :aria-label="t('el.breadcrumb.label')"
+            role: 'navigation',
+        });
+        this.style.setObj({
             fontSize: '14px',
             lineHeight: 1
         });
         this.childNodes = [];
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
-    created() {
-        console.log('TdBreadcrumb created . ');
+    setup() {
+        console.log('TdBreadcrumb setup . ');
         this.childNodes.forEach((item, index) => {
             if (index < this.childNodes.length - 1) {
                 item.addSeparator(this.props);

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

@@ -1,9 +1,8 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBreadcrumb extends IUI {
+import { ITypeConfig, ITypeDiv, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdBreadcrumb extends ITypeDiv {
     className: 'TdBreadcrumb';
 }
-export interface ITdBreadcrumbConfig extends IUIConfig {
+export interface ITdBreadcrumbConfig extends ITypeConfig {
     /**
      * @description separator character
      *     default: '/',

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.d.ts

@@ -1,7 +1,7 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdBreadcrumbConfig } from '../td-breadcrumb/td-breadcrumb.interface';
 import { ITdBreadcrumbItem, ITdBreadcrumbItemConfig } from './td-breadcrumb-item.interface';
-export declare class TdBreadcrumbItem extends UI implements ITdBreadcrumbItem {
+export declare class TdBreadcrumbItem extends TypeSpan implements ITdBreadcrumbItem {
     className: 'TdBreadcrumbItem';
     constructor(params?: ITdBreadcrumbItemConfig);
     addSeparator(breadcrumbConfig?: ITdBreadcrumbConfig): void;

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumbItem = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-class TdBreadcrumbItem extends ui_abstract_1.UI {
+class TdBreadcrumbItem extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdBreadcrumbItem';
         this.style.addObj({
             float: 'left',

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Router } from '@type-dom/framework';
-export interface ITdBreadcrumbItem extends IUI {
+import { ITypeConfig, ITypeSpan, Router } from '@type-dom/framework';
+export interface ITdBreadcrumbItem extends ITypeSpan {
     className: 'TdBreadcrumbItem';
 }
-export interface ITdBreadcrumbItemConfig extends IUIConfig {
+export interface ITdBreadcrumbItemConfig extends ITypeConfig {
     /**
      * @description target route of the link, same as `to` of `vue-router`
      *     default: '',

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeUL } from '@type-dom/framework';
 import { ITdMenu, ITdMenuConfig } from './td-menu.interface';
-export declare class TdMenu extends UI implements ITdMenu {
+export declare class TdMenu extends TypeUL implements ITdMenu {
     className: 'TdMenu';
     props: ITdMenuConfig;
     constructor(params?: ITdMenuConfig);

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMenu = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-class TdMenu extends ui_abstract_1.UI {
+class TdMenu extends framework_1.TypeUL {
     constructor(params = {}) {
-        super(params, 'ul');
+        super();
+        // this.useTag('ul');
         this.className = 'TdMenu';
         this.attr.addObj({
             name: 'td-menu',