@type-dom/ui 0.0.10 → 0.1.1

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-link/td-anchor-link.interface.d.ts

@@ -0,0 +1,14 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdAnchorLink extends ITypeDiv {
+    className: 'TdAnchorLink';
+}
+export interface AnchorLinkProps extends TypeDivProps {
+    /**
+     * @description the text content of the anchor link
+     */
+    title?: string;
+    /**
+     * @description The address of the anchor link
+     */
+    href?: string;
+}

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-link/td-anchor-link.old.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';
+    private href;
+    private list?;
+    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}

@@ -2,28 +2,27 @@
 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) || '',
+            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 '@element-plus/components/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("@element-plus/components/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,19 +1,8 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { ITdBackTop, ITdBackTopConfig } from './td-backtop.interface';
-export declare class TdBackTop extends UI implements ITdBackTop {
+import { TypeFragment } from '@type-dom/framework';
+import { ITdBackTop, BacktopProps } from './td-backtop.interface';
+export declare class TdBackTop extends TypeFragment implements ITdBackTop {
     className: 'TdBackTop';
-    props: ITdBackTopConfig;
-    static initCalled: boolean;
-    private container;
-    private el;
-    private visible;
-    private transition;
-    private division;
-    constructor(params?: ITdBackTopConfig);
-    mounted(): void;
-    destroy(root?: TypeNode): void;
-    throttleScroll: () => void;
-    handleScroll: () => void;
-    handleClick(): void;
+    props: BacktopProps;
+    constructor(params?: BacktopProps);
+    setup(): void;
 }

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

@@ -3,151 +3,48 @@ 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 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 signals_1 = require("@type-dom/signals");
+const td_backtop_const_1 = require("./td-backtop.const");
+const use_backtop_1 = require("./use-backtop");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+class TdBackTop extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
-        this.visible = false;
-        this.throttleScroll = () => {
-            console.log('throttleScroll .');
-            return (0, utils_1.throttle)(this.handleScroll, 300)();
-        };
-        this.handleScroll = () => {
-            var _a;
-            console.error('handleScroll . ');
-            // console.log('this.el', this.el);
-            if (this.el) {
-                this.visible =
-                    this.el.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);
-            }
-        };
+        super(); // 要传 params， 否则 el 无法定位。
         this.className = 'TdBackTop';
-        this.division = new framework_1.Div({
-            name: 'td-back-top',
-            attrObj: {
-                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
-            },
-            events: {
-                click: () => {
-                    this.handleClick();
-                }
-            }
-        });
-        this.division.attr.addObj({
-            componentId: this.componentId
-        });
-        this.transition = new framework_1.Transition({
-            name: 'fade',
-            slot: this.division,
-        });
-        this.addChild(this.transition);
-        // this.attr.addName('td-back-top');
-        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',
-                // // 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);
-        }
-        else {
-            this.getSlotNode().resetSlot(new td_icon_class_1.TdIcon({
-                size: 20,
-                svgObj: new svgs_1.ElCaretTopSvg()
-            }));
-        }
-        this.container = document;
-        this.el = document.documentElement; // todo 监听不生效 ？？？？
-        this.buildProps({
-            visibilityHeight: 200,
-            right: 40,
-            bottom: 40,
-        });
+        this.addEmits(td_backtop_const_1.backtopEmits);
+        this.assignProps(td_backtop_const_1.backtopProps);
         this.props = this.useParams(params);
     }
-    mounted() {
+    setup() {
         var _a;
-        console.log('TdBackTop mounted');
-        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.container = this.root?.dom as HTMLDivElement; // this.el;
-        // this.container.style.setProperty('over-flow', 'scroll');
-        // 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) {
-        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' });
+        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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backtopEmits = exports.backtopProps = void 0;
+exports.backtopProps = {
+    visibilityHeight: 200,
+    right: 40,
+    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 { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBackTop extends IUI {
+import type { TransitionProps, ITypeElement } from '@type-dom/framework';
+export interface ITdBackTop extends ITypeElement {
     className: 'TdBackTop';
 }
-export interface ITdBackTopConfig extends IUIConfig {
+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 IUIConfig {
      * @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.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'),
@@ -8,6 +8,24 @@ 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 = {
+    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,5 @@
-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) => {
-    visible: boolean;
-    handleClick: (fn: AnyFn) => 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,46 @@
 "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 = (fn) => {
-        el === null || el === void 0 ? void 0 : el.scrollTo({ top: 0, behavior: 'smooth' });
-        emit('click', fn);
+    const handleClick = (event) => {
+        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 '@element-plus/components/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("@element-plus/components/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 { UI } from '../../../ui/ui.abstract';
-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 {
+import { TypeDiv } from '@type-dom/framework';
+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);
-    created(): void;
-    mounted(): void;
+    props: BreadcrumbProps;
+    constructor(params?: BreadcrumbProps);
+    setup(): void;
 }