@type-dom/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAnchorLink = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const constants_1 = require("../td-anchor/constants");
+class TdAnchorLink extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdAnchorLink';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const linkRef = (0, signals_1.signal)(undefined);
+        const { ns, direction, currentAnchor, addLink, removeLink, handleClick: contextHandleClick, } = (0, framework_1.inject)(constants_1.anchorKey);
+        const cls = (0, signals_1.computed)(() => [
+            ns.e('link'),
+            ns.is('active', currentAnchor.get() === props.href),
+        ]);
+        const handleClick = (e) => {
+            contextHandleClick(e, props.href);
+        };
+        (0, signals_1.watch)(() => props.href, (val, oldVal) => {
+            (0, framework_1.nextTick)(() => {
+                if (oldVal)
+                    removeLink(oldVal);
+                if (val) {
+                    addLink({
+                        href: val,
+                        el: linkRef.get(),
+                    });
+                }
+            });
+        });
+        (0, framework_1.onMounted)(() => {
+            const { href } = props;
+            if (href) {
+                addLink({
+                    href,
+                    el: linkRef.get(),
+                });
+            }
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            const { href } = props;
+            if (href) {
+                removeLink(href);
+            }
+        });
+        this.attr.addClass(ns.e('item'));
+        this.addChild(new framework_1.A({
+            refDom: linkRef,
+            attrObj: {
+                class: cls,
+                href: props.href,
+            },
+            events: {
+                click: handleClick,
+            },
+            slot: (_b = (props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default))) !== null && _b !== void 0 ? _b : props.title,
+        }));
+        this.addChild(new framework_1.Div({
+            vIf: (0, signals_1.computed)(() => { var _a; return ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.subLink) && direction === 'vertical'; }),
+            class: ns.e('list'),
+            slot: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.subLink,
+        }));
+    }
+}
+exports.TdAnchorLink = TdAnchorLink;

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

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdAnchorLink extends ITypeDiv {
     className: 'TdAnchorLink';
 }
-export interface ITdAnchorLinkConfig extends ITypeConfig {
+export interface AnchorLinkProps extends TypeDivProps {
     /**
      * @description the text content of the anchor link
      */
@@ -11,5 +11,4 @@ export interface ITdAnchorLinkConfig extends ITypeConfig {
      * @description The address of the anchor link
      */
     href?: string;
-    contents?: TypeElement[];
 }

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

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

package/src/components/navigation/{td-anchor/td-anchor-link/td-anchor-link.class.d.ts → td-anchor-link/td-anchor-link.old.d.ts}

@@ -1,8 +1,8 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdAnchorLink, ITdAnchorLinkConfig } from './td-anchor-link.interface';
+import { ITdAnchorLink, AnchorLinkProps } from './td-anchor-link.interface';
 export declare class TdAnchorLink extends TypeDiv implements ITdAnchorLink {
     className: 'TdAnchorLink';
     private href;
     private list?;
-    constructor(params?: ITdAnchorLinkConfig);
+    constructor(params?: AnchorLinkProps);
 }

package/src/components/navigation/{td-anchor/td-anchor-link/td-anchor-link.class.js → td-anchor-link/td-anchor-link.old.js}

@@ -7,22 +7,22 @@ class TdAnchorLink extends framework_1.TypeDiv {
         super();
         this.className = 'TdAnchorLink';
         this.href = new framework_1.A({
-            text: (params === null || params === void 0 ? void 0 : params.title) || '',
+            slot: params.slot || (params === null || params === void 0 ? void 0 : params.title) || '',
             attrObj: {
-                href: (params === null || params === void 0 ? void 0 : params.href) || ''
+                href: (params === null || params === void 0 ? void 0 : params.href) || '',
             },
             events: {
                 click: () => {
                     console.log('click . ');
-                }
-            }
+                },
+            },
         });
         this.addChild(this.href);
-        if (params === null || params === void 0 ? void 0 : params.contents) {
-            this.list = new framework_1.Div({});
-            this.list.addChildren(...params.contents);
-            this.addChild(this.list);
-        }
+        // if (params?.contents) {
+        //   this.list = new Div({});
+        //   this.list.addChildren(...params.contents);
+        //   this.addChild(this.list);
+        // }
         this.useParams(params);
     }
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -3,128 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const td_backtop_style_1 = require("./td-backtop.style");
 const td_backtop_const_1 = require("./td-backtop.const");
+const use_backtop_1 = require("./use-backtop");
+require("./style/index");
 class TdBackTop extends framework_1.TypeFragment {
     constructor(params = {}) {
         super(); // 要传 params， 否则 el 无法定位。
-        this.visible = false;
-        this.throttleScroll = () => {
-            console.log('throttleScroll .');
-            return (0, utils_1.throttle)(this.handleScroll, 300)();
-        };
-        this.handleScroll = (target, event) => {
-            var _a;
-            console.error('handleScroll . target is ', target);
-            // console.log('this.el', this.el);
-            if (this.target) {
-                this.visible =
-                    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.content.showSlot(this.visible);
-            }
-        };
         this.className = 'TdBackTop';
+        this.addEmits(td_backtop_const_1.backtopEmits);
         this.assignProps(td_backtop_const_1.backtopProps);
-        this.division = new framework_1.Div({
-            attrObj: {
-                name: 'td-back-top',
-                class: 'td-back-top'
-            },
-            styleObj: td_backtop_style_1.$backtopStyle,
-            events: {
-                click: (evt) => this.handleClick()
-            }
-        });
-        this.division.attr.addObj({
-            componentId: this.componentId
-        });
-        this.content = new framework_1.Transition({
-            name: 'fade',
-            slot: this.division,
-        });
-        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', {
-                // position: 'fixed',
-                // backgroundColor: getCssVar('backtop', 'bg-color'),
-                backgroundColor: td_backtop_style_1.$backtop.bgColor
-                // width: '40px',
-                // height: '40px',
-                // borderRadius: '50%',
-                // // color: getCssVar('backtop', 'text-color'),
-                // color: $backtop.textColor,
-                // display: 'flex',
-                // alignItems: 'center',
-                // justifyContent: 'center',
-                // fontSize: '20px',
-                // // boxShadow: getCssVar('box-shadow', 'lighter'),
-                // boxShadow: $boxShadow.lighter,
-                // cursor: 'pointer',
-                // zIndex: 5
-            });
-            (0, framework_1.createClass)('td-back-top:hover', {
-                backgroundColor: td_backtop_style_1.$backtop.hoverBgColor
-            });
-        }
-        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({
-                size: 20,
-                svgObj: new svgs_1.ElCaretTopSvg()
-            }));
-        }
-        this.container = document;
-        this.target = document.documentElement; // todo 监听不生效 ？？？？
         this.props = this.useParams(params);
     }
-    mounted() {
+    setup() {
         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.target = this.props.target;
-            if (!this.target) {
-                throw Error(`target does not exist: ${this.props.target}`);
-            }
-        }
-        // 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();
-    }
-    destroy(root) {
-        console.log('TdBackTop destroy');
-        this.container.removeEventListener('scroll', this.throttleScroll);
-        super.destroy(root);
-    }
-    handleClick() {
-        var _a;
-        console.error('handleClick . ');
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+        const COMPONENT_NAME = 'TdBacktop';
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('backtop');
+        const { handleClick, visible } = (0, use_backtop_1.useBackTop)(props, emit, COMPONENT_NAME);
+        const backTopStyle = (0, signals_1.computed)(() => ({
+            right: `${props.right}px`,
+            bottom: `${props.bottom}px`,
+        }));
+        this.addChild(new framework_1.Transition({
+            name: `${ns.namespace.get()}-fade-in`,
+            slot: new framework_1.Div({
+                vIf: visible,
+                styleObj: backTopStyle,
+                class: ns.b(),
+                events: {
+                    click: (evt) => {
+                        handleClick(evt);
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    },
+                },
+                slot: (_a = props.slot) !== null && _a !== void 0 ? _a : new td_icon_class_1.TdIcon({
+                    class: ns.e('icon'),
+                    slot: new svgs_1.ElCaretTopSvg(),
+                }),
+            }),
+        }));
     }
 }
 exports.TdBackTop = TdBackTop;
-TdBackTop.initCalled = false;

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

@@ -1,18 +1,6 @@
-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;
+import { BacktopProps } from './td-backtop.interface';
+export declare const backtopProps: BacktopProps;
+export declare const backtopEmits: {
+    click: (evt: MouseEvent, target?: HTMLElement) => boolean;
 };
+export type BacktopEmits = typeof backtopEmits;

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

@@ -1,21 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.backtopProps = void 0;
+exports.backtopEmits = 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,
 };
+exports.backtopEmits = {
+    click: (evt, target) => evt instanceof MouseEvent,
+};

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

@@ -1,8 +1,8 @@
-import type { ITransitionConfig, ITypeElement } from '@type-dom/framework';
+import type { TransitionProps, ITypeElement } from '@type-dom/framework';
 export interface ITdBackTop extends ITypeElement {
     className: 'TdBackTop';
 }
-export interface ITdBackTopConfig extends ITransitionConfig {
+export interface BacktopProps extends TransitionProps {
     /**
      * @description the button will not show until the scroll height reaches this value.
      *     default: 200,
@@ -12,7 +12,7 @@ export interface ITdBackTopConfig extends ITransitionConfig {
      * @description the target to trigger scroll.
      *     default: '',
      */
-    target?: HTMLElement;
+    target?: string;
     /**
      * @description right distance.
      *     default: 40,

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

@@ -8,7 +8,7 @@ exports.$backtop = {
     // 'text-color': getCssVar('color-primary'),
     textColor: var_1.$colorPrimary,
     // 'hover-bg-color': getCssVar('border-color-extra-light'),
-    hoverBgColor: var_1.$borderColor.extraLight
+    hoverBgColor: var_1.$borderColor.extraLight,
     // 'hover-text-color':
 };
 exports.$backtopStyle = {

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

@@ -1,6 +1,5 @@
-import { ITdBackTopConfig } from './td-backtop.interface';
-export declare const useBackTop: (props: ITdBackTopConfig, emit: (eventName: string, event?: Event) => void, componentName: string) => {
-    visible: boolean;
-    handleClick: (event: MouseEvent) => void;
-    mounted: () => void;
+import { BacktopProps } from './td-backtop.interface';
+export declare const useBackTop: (props: BacktopProps, emit: any, componentName: string) => {
+    visible: import("@type-dom/signals").Signal<boolean>;
+    handleClick: (event?: MouseEvent) => void;
 };

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

@@ -1,44 +1,47 @@
 "use strict";
+// import { onMounted, ref, shallowRef } from 'vue'
+// import { useEventListener, useThrottleFn } from '@vueuse/core'
+// import { throwError } from '@element-plus/utils'
+// import type { SetupContext } from 'vue'
+// import type { BacktopEmits, BacktopProps } from './backtop'
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBackTop = void 0;
-const useBackTop = (props, 
-// emit: ITdBacktopEmits,
-emit, componentName) => {
-    let el;
-    let container;
-    let visible = false;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const useBackTop = (props, emit, componentName) => {
+    const el = (0, signals_1.signal)();
+    const container = (0, signals_1.signal)();
+    const visible = (0, signals_1.signal)(false);
     const handleScroll = () => {
-        var _a;
-        if (el) {
-            visible = el.scrollTop >= ((_a = props.visibilityHeight) !== null && _a !== void 0 ? _a : 0);
+        if (el.get()) {
+            visible.set(el.get().scrollTop >= props.visibilityHeight);
         }
     };
     const handleClick = (event) => {
-        el === null || el === void 0 ? void 0 : el.scrollTo({ top: 0, behavior: 'smooth' });
+        var _a;
+        (_a = el.get()) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
         emit('click', event);
     };
-    // const handleScrollThrottled = useThrottleFn(handleScroll, 300, true)
-    //
-    // useEventListener(container, 'scroll', handleScrollThrottled);
-    const mounted = () => {
+    const handleScrollThrottled = (0, framework_1.useThrottleFn)(handleScroll, 300, true);
+    (0, framework_1.useEventListener)(container, 'scroll', handleScrollThrottled);
+    (0, framework_1.onMounted)(() => {
         var _a;
-        container = document;
-        el = document.documentElement;
+        container.set(document);
+        el.set(document.documentElement);
         if (props.target) {
-            // el = document.querySelector<HTMLElement>(props.target) ?? undefined
-            el = (_a = props.target) !== null && _a !== void 0 ? _a : undefined;
-            if (!el) {
-                throw Error(componentName + `target does not exist: ${props.target}`);
+            el.set((_a = document.querySelector(props.target)) !== null && _a !== void 0 ? _a : undefined);
+            if (!el.get()) {
+                (0, utils_1.throwError)(componentName, `target does not exist: ${props.target}`);
             }
-            container = el;
+            container.set(el.get());
         }
         // Give visible an initial value, fix #13066
         handleScroll();
-    };
+    });
     return {
         visible,
         handleClick,
-        mounted
     };
 };
 exports.useBackTop = useBackTop;

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

@@ -0,0 +1,3 @@
+import { InjectionKey } from '@type-dom/framework';
+import type { BreadcrumbProps } from './td-breadcrumb.interface';
+export declare const breadcrumbKey: InjectionKey<BreadcrumbProps>;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbKey = void 0;
+exports.breadcrumbKey = Symbol('breadcrumbKey');

package/src/components/navigation/td-breadcrumb/style/css.d.ts

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

package/src/components/navigation/td-breadcrumb/style/css.js

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

package/src/components/navigation/td-breadcrumb/style/index.d.ts

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

package/src/components/navigation/td-breadcrumb/style/index.js

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

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

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

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

@@ -2,38 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumb = void 0;
 const framework_1 = require("@type-dom/framework");
-//  todo link 样式没有添加
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const constants_1 = require("./constants");
+const td_breadcrumb_const_1 = require("./td-breadcrumb.const");
+require("./style/index");
 class TdBreadcrumb extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdBreadcrumb';
-        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.slotChild(params.slot);
+        this.attr.addName('td-breadcrumb');
+        this.assignProps(td_breadcrumb_const_1.breadcrumbProps);
         this.props = this.useParams(params);
     }
     setup() {
-        console.log('TdBreadcrumb setup . ');
-        this.childNodes.forEach((item, index) => {
-            if (index < this.childNodes.length - 1) {
-                item.addSeparator(this.props);
+        var _a;
+        // console.log('TdBreadcrumb setup . ');
+        const { t } = (0, use_locale_1.useLocale)();
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('breadcrumb');
+        const breadcrumb = (0, signals_1.signal)();
+        (0, framework_1.provide)(constants_1.breadcrumbKey, props);
+        (0, framework_1.onMounted)(() => {
+            const items = breadcrumb.get().querySelectorAll(`.${ns.e('item')}`);
+            if (items.length) {
+                items[items.length - 1].setAttribute('aria-current', 'page');
             }
         });
-    }
-    mounted() {
-        var _a;
-        const items = this.childNodes;
-        if (items.length) {
-            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.attr.set('aria-current', 'page');
-        }
+        this.assignProps({
+            refDom: breadcrumb,
+        });
+        this.attr.addObj({
+            class: ns.b(),
+            ariaLabel: t('el.breadcrumb.label'),
+            role: 'navigation',
+        });
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdBreadcrumb = TdBreadcrumb;

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

@@ -0,0 +1,2 @@
+import { BreadcrumbProps } from './td-breadcrumb.interface';
+export declare const breadcrumbProps: BreadcrumbProps;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbProps = void 0;
+exports.breadcrumbProps = {
+    separator: '/',
+};