@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,28 +1,10 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
-import { IStyle } from '@type-dom/css-type';
-export declare class TdAffix extends UI implements ITdAffix {
+import { TypeDiv } from '@type-dom/framework';
+import { ITdAffix, AffixProps } from './td-affix.interface';
+export declare class TdAffix extends TypeDiv implements ITdAffix {
     className: 'TdAffix';
-    props: ITdAffixConfig;
-    private affix;
-    private target?;
-    private rootHeight;
-    private rootWidth;
-    private rootTop;
-    private rootBottom;
-    private updateRoot;
-    private transform;
-    private targetRect?;
-    private fixed;
-    private scrollTop;
-    private scrollContainer?;
-    private windowHeight?;
-    constructor(params?: ITdAffixConfig);
-    get rootStyle(): IStyle;
-    get affixStyle(): IStyle;
-    mounted(): void;
-    destroy(root?: TypeNode): void;
-    onScroll: () => void;
-    change(): void;
+    props: AffixProps;
+    updateAffix?: () => void;
+    updateRoot?: () => void;
+    constructor(params?: AffixProps);
+    setup(): void;
 }

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

@@ -2,135 +2,122 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAffix = void 0;
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdAffix extends ui_abstract_1.UI {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_affix_const_1 = require("./td-affix.const");
+class TdAffix extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
-        this.onScroll = () => {
-            console.log('this.scrollContainer scroll . ');
-            // if (this.fixed) {
-            this.style.setObj(this.rootStyle);
-            this.affix.style.setObj(this.affixStyle);
-            // }
-            this.updateRoot();
-        };
+        super();
         console.log('TdAffix constructor . ');
         this.className = 'TdAffix';
         this.attr.addName('td-affix');
-        this.windowHeight = (0, framework_1.useWindowSize)().height;
-        const { height, width, top, bottom, update } = (0, framework_1.useElementBounding)(this, {
-            windowScroll: false,
-        });
-        this.rootHeight = height;
-        this.rootWidth = width;
-        this.rootTop = top;
-        this.rootBottom = bottom;
-        this.updateRoot = update;
-        // const rect = this.dom.getBoundingClientRect();
-        // console.log('rect is ', rect);
-        this.targetRect = (params === null || params === void 0 ? void 0 : params.target)
-            ? (0, framework_1.useElementBounding)(params.target.value)
-            : undefined;
-        this.fixed = false;
-        this.scrollTop = 0;
-        this.transform = 0;
-        // todo rootStyle
-        this.style.addObj(this.rootStyle);
-        this.affix = new framework_1.Div({
-            name: 'fix',
-            styleObj: this.affixStyle,
-        });
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.affix.slotChild(params.slot);
-        }
-        this.addChild(this.affix);
+        this.addEmits(td_affix_const_1.affixEmits);
+        this.assignProps(td_affix_const_1.affixProps);
         this.props = this.useParams(params);
     }
-    get rootStyle() {
-        return {
-            height: this.fixed ? this.rootHeight : '',
-            width: this.fixed ? this.rootWidth : '',
-        };
-    }
-    get affixStyle() {
+    setup() {
+        var _a;
+        const COMPONENT_NAME = 'TdAffix';
         const props = this.props;
-        const offset = (props === null || props === void 0 ? void 0 : props.offset) ? (0, utils_1.addUnit)(props.offset) : 0;
-        const position = (props === null || props === void 0 ? void 0 : props.position) || 'top';
-        return {
-            position: this.fixed ? 'fixed' : '',
-            // height: this.rootHeight + 'px',
-            // width: this.rootWidth + 'px',
-            top: position === 'top' ? offset : '',
-            bottom: position === 'bottom' ? offset : '',
-            transform: this.transform ? `translateY(${this.transform}px)` : '',
-            zIndex: (props === null || props === void 0 ? void 0 : props.zIndex) || 100,
-        };
-    }
-    mounted() {
-        var _a, _b, _c;
-        console.log('TdAffix mounted . ');
-        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.target) {
-            if (!((_b = this.props) === null || _b === void 0 ? void 0 : _b.target.value)) {
-                throw Error(`Target is not existed: ${(_c = this.props) === null || _c === void 0 ? void 0 : _c.target}`);
-            }
-            this.target = this.props.target.value;
-        }
-        else {
-            this.target = document.documentElement;
-        }
-        (0, framework_1.nextTick)(() => {
-            console.log('nextTick . ');
-            this.scrollContainer = (0, utils_1.getScrollContainer)(this.dom, true);
-            console.log('this.scrollContainer is ', this.scrollContainer);
-            this.updateRoot();
-            // todo destroy
-            this.scrollContainer &&
-                this.scrollContainer.addEventListener('scroll', this.onScroll);
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('affix');
+        const target = (0, signals_1.signal)();
+        const root = (0, signals_1.signal)();
+        const scrollContainer = (0, signals_1.signal)();
+        const { height: windowHeight } = (0, framework_1.useWindowSize)();
+        const { height: rootHeight, width: rootWidth, top: rootTop, bottom: rootBottom, update: updateRoot, } = (0, framework_1.useElementBounding)(root, { windowScroll: false });
+        const targetRect = (0, framework_1.useElementBounding)(target);
+        const fixed = (0, signals_1.signal)(false);
+        const scrollTop = (0, signals_1.signal)(0);
+        const transform = (0, signals_1.signal)(0);
+        const rootStyle = (0, signals_1.computed)(() => {
+            return {
+                height: fixed.get() ? `${rootHeight.get()}px` : '',
+                width: fixed.get() ? `${rootWidth.get()}px` : '',
+            };
         });
-    }
-    destroy(root) {
-        this.scrollContainer &&
-            this.scrollContainer.removeEventListener('scroll', this.onScroll);
-        super.destroy(root);
-    }
-    change() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
-        if (!this.scrollContainer)
-            return;
-        this.scrollTop =
-            this.scrollContainer instanceof Window
+        const affixStyle = (0, signals_1.computed)(() => {
+            if (!fixed.get())
+                return {};
+            const offset = props.offset ? (0, utils_1.addUnit)(props.offset) : 0;
+            return {
+                height: `${rootHeight.get()}px`,
+                width: `${rootWidth.get()}px`,
+                top: props.position === 'top' ? offset : '',
+                bottom: props.position === 'bottom' ? offset : '',
+                transform: transform.get() ? `translateY(${transform.get()}px)` : '',
+                zIndex: props.zIndex,
+            };
+        });
+        const updateAffix = () => {
+            var _a;
+            if (!scrollContainer.get())
+                return;
+            scrollTop.set(scrollContainer.get() instanceof Window
                 ? document.documentElement.scrollTop
-                : this.scrollContainer.scrollTop || 0;
-        if (((_a = this.props) === null || _a === void 0 ? void 0 : _a.position) === 'top') {
-            if ((_b = this.props) === null || _b === void 0 ? void 0 : _b.target) {
-                const difference = ((_d = (_c = this.targetRect) === null || _c === void 0 ? void 0 : _c.bottom) !== null && _d !== void 0 ? _d : 0) -
-                    ((_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.offset) !== null && _f !== void 0 ? _f : 0) -
-                    this.rootHeight;
-                this.fixed =
-                    ((_h = (_g = this.props) === null || _g === void 0 ? void 0 : _g.offset) !== null && _h !== void 0 ? _h : 0) > this.rootTop &&
-                        ((_k = (_j = this.targetRect) === null || _j === void 0 ? void 0 : _j.bottom) !== null && _k !== void 0 ? _k : 0) > 0;
-                this.transform = difference < 0 ? difference : 0;
+                : ((_a = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.get()) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            const { position, target } = props;
+            const offset = props.offset;
+            const rootHeightOffset = offset + rootHeight.get();
+            if (position === 'top') {
+                if (target) {
+                    const difference = targetRect.bottom.get() - rootHeightOffset;
+                    fixed.set(offset > rootTop.get() && targetRect.bottom.get() > 0);
+                    transform.set(difference < 0 ? difference : 0);
+                }
+                else {
+                    fixed.set(offset > rootTop.get());
+                }
+            }
+            else if (target) {
+                const difference = windowHeight.get() - targetRect.top.get() - rootHeightOffset;
+                fixed.set(windowHeight.get() - offset < rootBottom.get() &&
+                    windowHeight.get() > targetRect.top.get());
+                transform.set(difference < 0 ? -difference : 0);
+            }
+            else {
+                fixed.set(windowHeight.get() - offset < rootBottom.get());
+            }
+        };
+        const handleScroll = () => {
+            updateRoot();
+            emit('scroll', {
+                scrollTop: scrollTop.get(),
+                fixed: fixed.get(),
+            });
+        };
+        (0, signals_1.watch)(fixed, (val) => emit('change', val));
+        (0, framework_1.onMounted)(() => {
+            var _a;
+            if (props.target) {
+                target.set((_a = document.querySelector(props.target)) !== null && _a !== void 0 ? _a : undefined);
+                if (!target.get())
+                    (0, utils_1.throwError)(COMPONENT_NAME, `Target does not exist: ${props.target}`);
             }
             else {
-                this.fixed = ((_m = (_l = this.props) === null || _l === void 0 ? void 0 : _l.offset) !== null && _m !== void 0 ? _m : 0) > this.rootTop;
+                target.set(document.documentElement);
             }
-        }
-        else if ((_o = this.props) === null || _o === void 0 ? void 0 : _o.target) {
-            const difference = ((_p = this.windowHeight) !== null && _p !== void 0 ? _p : 0) -
-                ((_r = (_q = this.targetRect) === null || _q === void 0 ? void 0 : _q.top) !== null && _r !== void 0 ? _r : 0) -
-                ((_t = (_s = this.props) === null || _s === void 0 ? void 0 : _s.offset) !== null && _t !== void 0 ? _t : 0) -
-                this.rootHeight;
-            this.fixed =
-                ((_u = this.windowHeight) !== null && _u !== void 0 ? _u : 0) - ((_w = (_v = this.props) === null || _v === void 0 ? void 0 : _v.offset) !== null && _w !== void 0 ? _w : 0) <
-                    this.rootBottom &&
-                    ((_x = this.windowHeight) !== null && _x !== void 0 ? _x : 0) > ((_z = (_y = this.targetRect) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0);
-            this.transform = difference < 0 ? -difference : 0;
-        }
-        else {
-            this.fixed =
-                ((_0 = this.windowHeight) !== null && _0 !== void 0 ? _0 : 0) - ((_2 = (_1 = this.props) === null || _1 === void 0 ? void 0 : _1.offset) !== null && _2 !== void 0 ? _2 : 0) < this.rootBottom;
-        }
+            scrollContainer.set((0, utils_1.getScrollContainer)(root.get(), true));
+            updateRoot();
+        });
+        (0, framework_1.useEventListener)(scrollContainer, 'scroll', handleScroll);
+        (0, signals_1.effect)(updateAffix);
+        (0, framework_1.defineExpose)({
+            /** @description update affix status */
+            updateAffix,
+            /** @description update rootRect info */
+            updateRoot,
+        });
+        this.assignProps({
+            refDom: root,
+            class: ns.b(),
+            styleObj: rootStyle,
+        });
+        this.addChild(new framework_1.Div({
+            class: (0, signals_1.computed)(() => [{ [ns.m('fixed')]: fixed.get() }]),
+            slot: props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default),
+        }));
     }
 }
 exports.TdAffix = TdAffix;

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

@@ -0,0 +1,9 @@
+import { AffixProps } from './td-affix.interface';
+export declare const affixProps: AffixProps;
+export declare const affixEmits: {
+    scroll: ({ scrollTop, fixed }: {
+        scrollTop: number;
+        fixed: boolean;
+    }) => boolean;
+    change: (fixed: boolean) => boolean;
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.affixEmits = exports.affixProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.affixProps = {
+    zIndex: 100,
+    offset: 0,
+    position: 'top',
+};
+exports.affixEmits = {
+    scroll: ({ scrollTop, fixed }) => (0, utils_1.isNumber)(scrollTop) && (0, utils_1.isBoolean)(fixed),
+    [event_1.CHANGE_EVENT]: (fixed) => (0, utils_1.isBoolean)(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 { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdAffix extends ITypeDiv {
     className: 'TdAffix';
 }
-export interface ITdAffixConfig extends IUIConfig {
+export interface AffixProps extends TypeDivProps {
     /**
      * @description affix element zIndex value
      *     default: 100,
@@ -13,7 +12,7 @@ export interface ITdAffixConfig extends IUIConfig {
      * @description target container. (CSS selector)
      *     default: '',
      */
-    target?: XProxy<IJsonData>;
+    target?: string;
     /**
      * @description offset distance
      *     default: 0,

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

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

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

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

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

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

package/src/components/navigation/td-anchor/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.css");

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

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

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

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

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

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