@type-dom/ui 0.1.0 → 0.1.1

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

@@ -2,119 +2,198 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAnchor = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_anchor_style_1 = require("./td-anchor.style");
-const td_anchor_function_1 = require("./td-anchor.function");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_anchor_const_1 = require("./td-anchor.const");
+const constants_1 = require("./constants");
 class TdAnchor extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b, _c, _d;
         super();
         this.className = 'TdAnchor';
-        this.attr.setObj({
-            name: 'td-anchor'
+        this.attr.addObj({
+            name: 'td-anchor',
         });
-        this.style.setObj({
-            position: 'relative',
-            // background-color: getCssVar('anchor-bg-color')
-            backgroundColor: td_anchor_style_1.$anchor.bgColor.default
-        });
-        if (params === null || params === void 0 ? void 0 : params.marker) {
-            this.marker = new framework_1.Div({
-                styleObj: {
-                    position: 'absolute',
-                    // background-color: getCssVar('anchor-marker-bg-color'),
-                    backgroundColor: td_anchor_style_1.$anchor.markerBgColor,
-                    borderRadius: '4px',
-                    opacity: 0,
-                    zIndex: 0
-                }
+        this.addEmits(td_anchor_const_1.anchorEmits);
+        this.assignProps(td_anchor_const_1.anchorProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const emit = this.emit;
+        const currentAnchor = (0, signals_1.signal)('');
+        const anchorRef = (0, signals_1.signal)(undefined);
+        const markerRef = (0, signals_1.signal)(undefined);
+        const containerEl = (0, signals_1.signal)();
+        const links = {};
+        let isScrolling = false;
+        let currentScrollTop = 0;
+        const ns = (0, use_namespace_1.useNamespace)('anchor');
+        const cls = (0, signals_1.computed)(() => [
+            ns.b(),
+            props.type === 'underline' ? ns.m('underline') : '',
+            ns.m(props.direction),
+        ]);
+        const addLink = (state) => {
+            links[state.href] = state.el;
+        };
+        const removeLink = (href) => {
+            delete links[href];
+        };
+        const setCurrentAnchor = (href) => {
+            const activeHref = currentAnchor.get();
+            if (activeHref !== href) {
+                currentAnchor.set(href);
+                emit('change', href);
+            }
+        };
+        let clearAnimate = null;
+        const scrollToAnchor = (href) => {
+            if (!containerEl.get())
+                return;
+            const target = (0, utils_1.getElement)(href);
+            if (!target)
+                return;
+            if (clearAnimate)
+                clearAnimate();
+            isScrolling = true;
+            const scrollEle = (0, utils_1.getScrollElement)(target, containerEl.get());
+            const distance = (0, utils_1.getOffsetTopDistance)(target, scrollEle);
+            const max = scrollEle.scrollHeight - scrollEle.clientHeight;
+            const to = Math.min(distance - props.offset, max);
+            clearAnimate = (0, utils_1.animateScrollTo)(containerEl.get(), currentScrollTop, to, props.duration, () => {
+                // make sure it is executed after throttleByRaf's handleScroll
+                setTimeout(() => {
+                    isScrolling = false;
+                }, 20);
             });
-            this.addChild(this.marker);
-        }
-        this.list = new framework_1.Div({
-            name: 'list'
+        };
+        const scrollTo = (href) => {
+            if (href) {
+                setCurrentAnchor(href);
+                scrollToAnchor(href);
+            }
+        };
+        const handleClick = (e, href) => {
+            emit('click', e, href);
+            scrollTo(href);
+        };
+        const handleScroll = (0, utils_1.throttleByRaf)(() => {
+            if (containerEl.get()) {
+                currentScrollTop = (0, utils_1.getScrollTop)(containerEl.get());
+            }
+            const currentHref = getCurrentHref();
+            if (isScrolling || (0, utils_1.isUndefined)(currentHref))
+                return;
+            setCurrentAnchor(currentHref);
         });
-        this.addChild(this.list);
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.list.slotChild(params.slot);
-        }
-        const type = (params === null || params === void 0 ? void 0 : params.type) || 'default';
-        const direction = (params === null || params === void 0 ? void 0 : params.direction) || 'vertical';
-        if (direction === 'vertical') {
-            (_a = this.marker) === null || _a === void 0 ? void 0 : _a.style.addObj({
-                width: '4px',
-                height: '14px',
-                top: '8px',
-                left: '0',
-                transition: 'top 0.25s ease-in-out, opacity 0.25s'
-            });
-            this.list.style.addObj({
-                // paddingLeft: getCssVar('anchor-padding-indent'),
-                paddingLeft: td_anchor_style_1.$anchor.paddingIndent
-            });
-            if (type === 'underline') {
-                this.unshiftChild(new framework_1.I({
-                    styleObj: {
-                        position: 'absolute',
-                        left: '0',
-                        width: '2px',
-                        height: '100%',
-                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
-                        content: ''
-                    }
-                }));
-                (_b = this.marker) === null || _b === void 0 ? void 0 : _b.style.addObj({
-                    width: '2px',
-                    borderRadius: 'unset'
+        const getCurrentHref = () => {
+            if (!containerEl.get())
+                return;
+            const scrollTop = (0, utils_1.getScrollTop)(containerEl.get());
+            const anchorTopList = [];
+            for (const href of Object.keys(links)) {
+                const target = (0, utils_1.getElement)(href);
+                if (!target)
+                    continue;
+                const scrollEle = (0, utils_1.getScrollElement)(target, containerEl.get());
+                const distance = (0, utils_1.getOffsetTopDistance)(target, scrollEle);
+                anchorTopList.push({
+                    top: distance - props.offset - props.bound,
+                    href,
                 });
             }
-        }
-        else {
-            (_c = this.marker) === null || _c === void 0 ? void 0 : _c.style.addObj({
-                height: '2px',
-                width: '20px',
-                bottom: '0',
-                transition: 'left 0.25s ease-in-out, opacity 0.25s, width 0.25s'
-            });
-            this.list.style.addObj({
-                display: 'flex',
-                paddingBottom: '4px'
-            });
-            this.list.childNodes.forEach((item, index) => {
-                if (item instanceof framework_1.TypeHtml) {
-                    if (index === 0) {
-                        item.style.addObj({
-                            paddingLeft: '0'
-                        });
-                    }
-                    else {
-                        item.style.addObj({
-                            paddingLeft: '16px'
-                        });
-                    }
+            anchorTopList.sort((prev, next) => prev.top - next.top);
+            for (let i = 0; i < anchorTopList.length; i++) {
+                const item = anchorTopList[i];
+                const next = anchorTopList[i + 1];
+                if (i === 0 && scrollTop === 0) {
+                    return props.scrollTop ? item.href : '';
+                }
+                if (item.top <= scrollTop && (!next || next.top > scrollTop)) {
+                    return item.href;
                 }
-            });
-            if (type === 'underline') {
-                this.unshiftChild(new framework_1.I({
-                    styleObj: {
-                        position: 'absolute',
-                        bottom: '0',
-                        width: '100%',
-                        height: '2px',
-                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
-                        content: ''
-                    }
-                }));
-                (_d = this.marker) === null || _d === void 0 ? void 0 : _d.style.addObj({
-                    height: '2px',
-                    borderRadius: 'unset'
-                });
             }
-        }
-        this.props = this.useParams(params);
-    }
-    handleClick(e, href) {
-        // emit('click', e, href)
-        (0, td_anchor_function_1.scrollTo)(href, this.props);
+            return;
+        };
+        const getContainer = () => {
+            const el = (0, utils_1.getElement)(props.container);
+            if (!el || (0, utils_1.isWindow)(el)) {
+                containerEl.set(window);
+            }
+            else {
+                containerEl.set(el);
+            }
+        };
+        (0, framework_1.useEventListener)(containerEl, 'scroll', handleScroll);
+        const markerStyle = (0, signals_1.computed)(() => {
+            var _a, _b;
+            if (!anchorRef.get() || !markerRef.get() || !currentAnchor.get())
+                return {};
+            const currentLinkEl = links[currentAnchor.get()];
+            if (!currentLinkEl)
+                return {};
+            const anchorRect = (_a = anchorRef.get()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const markerRect = (_b = markerRef.get()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const linkRect = currentLinkEl.getBoundingClientRect();
+            if (props.direction === 'horizontal') {
+                const left = linkRect.left - anchorRect.left;
+                return {
+                    left: `${left}px`,
+                    width: `${linkRect.width}px`,
+                    opacity: 1,
+                };
+            }
+            else {
+                const top = linkRect.top -
+                    anchorRect.top +
+                    (linkRect.height - markerRect.height) / 2;
+                return {
+                    top: `${top}px`,
+                    opacity: 1,
+                };
+            }
+        });
+        (0, framework_1.onMounted)(() => {
+            getContainer();
+            const hash = decodeURIComponent(window.location.hash);
+            const target = (0, utils_1.getElement)(hash);
+            if (target) {
+                scrollTo(hash);
+            }
+            else {
+                handleScroll();
+            }
+        });
+        (0, signals_1.watch)(() => props.container, () => {
+            getContainer();
+        });
+        (0, framework_1.provide)(constants_1.anchorKey, {
+            ns,
+            direction: props.direction,
+            currentAnchor,
+            addLink,
+            removeLink,
+            handleClick,
+        });
+        (0, framework_1.defineExpose)({
+            scrollTo,
+        });
+        this.assignProps({
+            refDom: anchorRef,
+        });
+        this.attr.addClass(cls);
+        this.addChild(new framework_1.Div({
+            vIf: props.marker,
+            refDom: markerRef,
+            class: ns.e('marker'),
+            styleObj: markerStyle,
+        }));
+        this.addChild(new framework_1.Div({
+            class: ns.e('list'),
+            slot: this.props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default),
+        }));
     }
 }
 exports.TdAnchor = TdAnchor;

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

@@ -0,0 +1,6 @@
+import { AnchorProps } from './td-anchor.interface';
+export declare const anchorProps: AnchorProps;
+export declare const anchorEmits: {
+    change: (href: string) => boolean;
+    click: (e: MouseEvent, href?: string) => boolean;
+};

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.anchorEmits = exports.anchorProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.anchorProps = {
+    offset: 0,
+    bound: 15,
+    duration: 300,
+    marker: true,
+    type: 'default',
+    direction: 'vertical',
+    scrollTop: false,
+};
+exports.anchorEmits = {
+    change: (href) => (0, utils_1.isString)(href),
+    click: (e, href) => e instanceof MouseEvent && ((0, utils_1.isString)(href) || (0, utils_1.isUndefined)(href)),
+};

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

@@ -1,2 +1,2 @@
-import { ITdAnchorConfig } from './td-anchor.interface';
-export declare const scrollTo: (href?: string, config?: ITdAnchorConfig) => void;
+import { AnchorProps } from './td-anchor.interface';
+export declare const scrollTo: (href?: string, config?: AnchorProps) => void;

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollTo = void 0;
-const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
-const currentAnchor = (0, framework_1.createProxy)(null);
-const containerEl = (0, framework_1.createProxy)(null); // ref<HTMLElement | Window>()
+const currentAnchor = (0, signals_1.signal)(null);
+const containerEl = (0, signals_1.signal)(null); // ref<HTMLElement | Window>()
 const links = {};
 let isScrolling = false;
 const currentScrollTop = 0;
@@ -15,15 +15,15 @@ const removeLink = (href) => {
     delete links[href];
 };
 const setCurrentAnchor = (href) => {
-    const activeHref = currentAnchor.value;
+    const activeHref = currentAnchor.get();
     if (activeHref !== href) {
-        currentAnchor.value = href;
+        currentAnchor.set(href);
         // emit('change', href)
     }
 };
 let clearAnimate = null;
 const scrollToAnchor = (href, props) => {
-    if (!containerEl.value)
+    if (!containerEl.get())
         return;
     const target = (0, utils_1.getElement)(href);
     if (!target)
@@ -31,11 +31,11 @@ const scrollToAnchor = (href, props) => {
     if (clearAnimate)
         clearAnimate();
     isScrolling = true;
-    const scrollEle = (0, utils_1.getScrollElement)(target, containerEl.value);
+    const scrollEle = (0, utils_1.getScrollElement)(target, containerEl.get());
     const distance = (0, utils_1.getOffsetTopDistance)(target, scrollEle);
     const max = scrollEle.scrollHeight - scrollEle.clientHeight;
     const to = Math.min(distance - ((props === null || props === void 0 ? void 0 : props.offset) || 0), max);
-    clearAnimate = (0, utils_1.animateScrollTo)(containerEl.value, currentScrollTop, to, (props === null || props === void 0 ? void 0 : props.duration) || 300, () => {
+    clearAnimate = (0, utils_1.animateScrollTo)(containerEl.get(), currentScrollTop, to, (props === null || props === void 0 ? void 0 : props.duration) || 300, () => {
         // make sure it is executed after throttleByRaf's handleScroll
         setTimeout(() => {
             isScrolling = false;
@@ -60,7 +60,7 @@ exports.scrollTo = scrollTo;
 // });
 //
 //
-// const getCurrentHref = (props?: ITdAnchorConfig) => {
+// const getCurrentHref = (props?: AnchorProps) => {
 //   if (!containerEl.value) return;
 //   const scrollTop = getScrollTop(containerEl.value);
 //   const anchorTopList: { top: number; href: string }[] = [];

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

@@ -1,8 +1,10 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+import { UseNamespaceReturn } from '../../../hooks/use-namespace';
 export interface ITdAnchor extends ITypeDiv {
     className: 'TdAnchor';
 }
-export interface ITdAnchorConfig extends ITypeConfig {
+export interface AnchorProps extends TypeDivProps {
     /**
      * @description scroll container
      */
@@ -37,8 +39,25 @@ export interface ITdAnchorConfig extends ITypeConfig {
      *     default: 'vertical',
      */
     direction?: 'vertical' | 'horizontal';
+    /**
+     * @description Scroll whether link is selected at the top
+     *     default: false,
+     */
+    scrollTop?: boolean;
 }
 export interface AnchorLinkState {
     el: HTMLElement;
     href: string;
 }
+export interface AnchorLinkState {
+    el: HTMLElement;
+    href: string;
+}
+export interface AnchorContext {
+    ns: UseNamespaceReturn;
+    direction: string;
+    currentAnchor: Ref<string>;
+    addLink(state: AnchorLinkState): void;
+    removeLink(href: string): void;
+    handleClick(e: MouseEvent, href?: string): void;
+}

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

@@ -0,0 +1,10 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdAnchor, AnchorProps } from './td-anchor.interface';
+export declare class TdAnchor extends TypeDiv implements ITdAnchor {
+    className: 'TdAnchor';
+    props: AnchorProps;
+    private marker?;
+    private list?;
+    constructor(params?: AnchorProps);
+    handleClick(e: MouseEvent, href?: string): void;
+}

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAnchor = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_anchor_style_1 = require("./td-anchor.style");
+const td_anchor_function_1 = require("./td-anchor.function");
+class TdAnchor extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        var _a, _b, _c, _d;
+        super();
+        this.className = 'TdAnchor';
+        this.attr.addObj({
+            name: 'td-anchor',
+        });
+        this.style.addObj({
+            position: 'relative',
+            // background-color: getCssVar('anchor-bg-color')
+            backgroundColor: td_anchor_style_1.$anchor.bgColor.default,
+        });
+        if (params === null || params === void 0 ? void 0 : params.marker) {
+            this.marker = new framework_1.Div({
+                styleObj: {
+                    position: 'absolute',
+                    // background-color: getCssVar('anchor-marker-bg-color'),
+                    backgroundColor: td_anchor_style_1.$anchor.markerBgColor,
+                    borderRadius: '4px',
+                    opacity: 0,
+                    zIndex: 0,
+                },
+            });
+            this.addChild(this.marker);
+        }
+        this.list = new framework_1.Div({
+            name: 'list',
+        });
+        this.addChild(this.list);
+        this.list.slotChildren(params.slot);
+        const type = (params === null || params === void 0 ? void 0 : params.type) || 'default';
+        const direction = (params === null || params === void 0 ? void 0 : params.direction) || 'vertical';
+        if (direction === 'vertical') {
+            (_a = this.marker) === null || _a === void 0 ? void 0 : _a.style.addObj({
+                width: '4px',
+                height: '14px',
+                top: '8px',
+                left: '0',
+                transition: 'top 0.25s ease-in-out, opacity 0.25s',
+            });
+            this.list.style.addObj({
+                // paddingLeft: getCssVar('anchor-padding-indent'),
+                paddingLeft: td_anchor_style_1.$anchor.paddingIndent,
+            });
+            if (type === 'underline') {
+                this.unshiftChild(new framework_1.I({
+                    styleObj: {
+                        position: 'absolute',
+                        left: '0',
+                        width: '2px',
+                        height: '100%',
+                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
+                        content: '',
+                    },
+                }));
+                (_b = this.marker) === null || _b === void 0 ? void 0 : _b.style.addObj({
+                    width: '2px',
+                    borderRadius: 'unset',
+                });
+            }
+        }
+        else {
+            (_c = this.marker) === null || _c === void 0 ? void 0 : _c.style.addObj({
+                height: '2px',
+                width: '20px',
+                bottom: '0',
+                transition: 'left 0.25s ease-in-out, opacity 0.25s, width 0.25s',
+            });
+            this.list.style.addObj({
+                display: 'flex',
+                paddingBottom: '4px',
+            });
+            this.list.childNodes.forEach((item, index) => {
+                if (item instanceof framework_1.TypeHtml) {
+                    if (index === 0) {
+                        item.style.addObj({
+                            paddingLeft: '0',
+                        });
+                    }
+                    else {
+                        item.style.addObj({
+                            paddingLeft: '16px',
+                        });
+                    }
+                }
+            });
+            if (type === 'underline') {
+                this.unshiftChild(new framework_1.I({
+                    styleObj: {
+                        position: 'absolute',
+                        bottom: '0',
+                        width: '100%',
+                        height: '2px',
+                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
+                        content: '',
+                    },
+                }));
+                (_d = this.marker) === null || _d === void 0 ? void 0 : _d.style.addObj({
+                    height: '2px',
+                    borderRadius: 'unset',
+                });
+            }
+        }
+        this.props = this.useParams(params);
+    }
+    handleClick(e, href) {
+        // emit('click', e, href)
+        (0, td_anchor_function_1.scrollTo)(href, this.props);
+    }
+}
+exports.TdAnchor = TdAnchor;

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

@@ -13,5 +13,5 @@ exports.$anchor = {
     // activeColor: getCssVar('color-primary'),
     activeColor: var_1.$colorPrimary,
     // markerBgColor: getCssVar('color-primary'),
-    markerBgColor: var_1.$colorPrimary
+    markerBgColor: var_1.$colorPrimary,
 };

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

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

package/src/components/navigation/td-anchor-link/style/css.js

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

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

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

package/src/components/navigation/td-anchor-link/style/index.js

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

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

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

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;