@type-dom/ui 0.1.0 → 0.1.2

package/src/components/form/td-upload/use-handlers.js

@@ -0,0 +1,175 @@
+"use strict";
+// import { watch } from 'vue'
+// import { isNil } from 'lodash-unified'
+// import { useVModel } from '@vueuse/core'
+// import { debugWarn, throwError } from '@element-plus/utils'
+// import { genFileId } from './upload'
+// import type { ShallowRef } from 'vue'
+// import type {
+//   UploadContentInstance,
+//   UploadContentProps,
+// } from './upload-content'
+// import type {
+//   UploadFile,
+//   UploadFiles,
+//   UploadProps,
+//   UploadRawFile,
+//   UploadStatus,
+// } from './upload'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandlers = void 0;
+const tslib_1 = require("tslib");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const td_upload_const_1 = require("./td-upload.const");
+const framework_1 = require("@type-dom/framework");
+const SCOPE = 'TdUpload';
+const revokeFileObjectURL = (file) => {
+    var _a;
+    if ((_a = file.url) === null || _a === void 0 ? void 0 : _a.startsWith('blob:')) {
+        URL.revokeObjectURL(file.url);
+    }
+};
+const useHandlers = (props, uploadRef) => {
+    const uploadFiles = (0, framework_1.useVModel)(props, 'fileList', undefined, { passive: true });
+    const getFile = (rawFile) => uploadFiles === null || uploadFiles === void 0 ? void 0 : uploadFiles.get().find((file) => file.uid === rawFile.uid);
+    function abort(file) {
+        var _a, _b;
+        (_b = (_a = uploadRef.get()) === null || _a === void 0 ? void 0 : _a.abort) === null || _b === void 0 ? void 0 : _b.call(_a, file);
+    }
+    function clearFiles(
+    /** @default ['ready', 'uploading', 'success', 'fail'] */
+    states = ['ready', 'uploading', 'success', 'fail']) {
+        uploadFiles.set(uploadFiles.get().filter((row) => !states.includes(row.status)));
+    }
+    function removeFile(file) {
+        console.warn('removeFile file is ', file);
+        uploadFiles.set(uploadFiles.get().filter((uploadFile) => uploadFile.uid !== file.uid));
+    }
+    const handleError = (err, rawFile) => {
+        var _a, _b;
+        const file = getFile(rawFile);
+        if (!file)
+            return;
+        // console.error(err)
+        file.status = 'fail';
+        removeFile(file);
+        (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, err, file, uploadFiles.get());
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, file, uploadFiles.get());
+    };
+    const handleProgress = (evt, rawFile) => {
+        var _a;
+        const file = getFile(rawFile);
+        if (!file)
+            return;
+        (_a = props.onProgress) === null || _a === void 0 ? void 0 : _a.call(props, evt, file, uploadFiles.get());
+        file.status = 'uploading';
+        file.percentage = Math.round(evt.percent);
+    };
+    const handleSuccess = (response, rawFile) => {
+        var _a, _b;
+        console.log('handleSuccess', response, rawFile);
+        const file = getFile(rawFile);
+        if (!file)
+            return;
+        file.status = 'success';
+        file.response = response;
+        (_a = props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props, response, file, uploadFiles.get());
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, file, uploadFiles.get());
+    };
+    const handleStart = (file) => {
+        var _a, _b;
+        if ((0, utils_1.isNil)(file.uid))
+            file.uid = (0, td_upload_const_1.genFileId)();
+        const uploadFile = {
+            name: file.name,
+            percentage: 0,
+            status: 'ready',
+            size: file.size,
+            raw: file,
+            uid: file.uid,
+        };
+        if (props.listType === 'picture-card' || props.listType === 'picture') {
+            try {
+                uploadFile.url = URL.createObjectURL(file);
+            }
+            catch (err) {
+                (0, utils_1.debugWarn)(SCOPE, err.message);
+                (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, err, uploadFile, uploadFiles.get());
+            }
+        }
+        uploadFiles.set(uploadFiles.get()
+            ? [...uploadFiles.get(), uploadFile]
+            : [uploadFile]);
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, uploadFile, uploadFiles.get());
+    };
+    const handleRemove = (file) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.error('handleRemove');
+        const uploadFile = file instanceof File ? getFile(file) : file;
+        if (!uploadFile)
+            (0, utils_1.throwError)(SCOPE, 'file to be removed not found');
+        const doRemove = (file) => {
+            var _a;
+            console.warn('doRemove . file is ', file);
+            abort(file);
+            removeFile(file);
+            (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, file, uploadFiles.get());
+            revokeFileObjectURL(file);
+        };
+        if (props.beforeRemove) {
+            const before = yield props.beforeRemove(uploadFile, uploadFiles.get());
+            if (before !== false)
+                doRemove(uploadFile);
+        }
+        else {
+            doRemove(uploadFile);
+        }
+    });
+    function submit() {
+        console.warn('submit');
+        uploadFiles.get()
+            .filter(({ status }) => status === 'ready')
+            .forEach(({ raw }) => { var _a, _b; return raw && ((_b = (_a = uploadRef.get()) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.call(_a, raw)); });
+    }
+    (0, signals_1.watch)(() => props.listType, (val) => {
+        var _a;
+        if (val !== 'picture-card' && val !== 'picture') {
+            return;
+        }
+        uploadFiles.set((_a = (0, signals_1.toRaw)(uploadFiles)) === null || _a === void 0 ? void 0 : _a.map((file) => {
+            var _a;
+            const { raw, url } = file;
+            if (!url && raw) {
+                try {
+                    file.url = URL.createObjectURL(raw);
+                }
+                catch (err) {
+                    (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, err, file, uploadFiles.get());
+                }
+            }
+            return file;
+        }));
+    });
+    (0, signals_1.watch)(uploadFiles, (files) => {
+        if (!files)
+            return;
+        for (const file of (0, signals_1.unref)(files)) {
+            file.uid || (file.uid = (0, td_upload_const_1.genFileId)());
+            file.status || (file.status = 'success');
+        }
+    });
+    return {
+        /** @description two-way binding ref from props `fileList` */
+        uploadFiles,
+        abort,
+        clearFiles,
+        handleError,
+        handleProgress,
+        handleStart,
+        handleSuccess,
+        handleRemove,
+        submit,
+        revokeFileObjectURL,
+    };
+};
+exports.useHandlers = useHandlers;

package/src/components/navigation/index.d.ts

@@ -4,15 +4,16 @@ export { TdAffix } from './td-affix/td-affix.class';
 export type { ITdAffix } from './td-affix/td-affix.interface';
 export { TdAnchor } from './td-anchor/td-anchor.class';
 export type { ITdAnchor } from './td-anchor/td-anchor.interface';
-export { TdAnchorLink } from './td-anchor/td-anchor-link/td-anchor-link.class';
-export type { ITdAnchorLink } from './td-anchor/td-anchor-link/td-anchor-link.interface';
+export { TdAnchorLink } from './td-anchor-link/td-anchor-link.class';
+export type { ITdAnchorLink } from './td-anchor-link/td-anchor-link.interface';
 export { TdBackTop } from './td-backtop/td-backtop.class';
 export type { ITdBackTop } from './td-backtop/td-backtop.interface';
 export { TdBreadcrumb } from './td-breadcrumb/td-breadcrumb.class';
 export type { ITdBreadcrumb } from './td-breadcrumb/td-breadcrumb.interface';
 export { TdBreadcrumbItem } from './td-breadcrumb-item/td-breadcrumb-item.class';
 export type { ITdBreadcrumbItem } from './td-breadcrumb-item/td-breadcrumb-item.interface';
+export * from './td-menu/index';
 export { TdTabs } from './td-tabs/td-tabs.class';
 export type * from './td-tabs/td-tabs.interface';
-export { TdTabPane } from './td-tabs/td-tab-pane.class';
-export type * from './td-tabs/td-tab-pane.interface';
+export { TdTabPane } from './td-tab-pane/td-tab-pane.class';
+export type * from './td-tab-pane/td-tab-pane.interface';

package/src/components/navigation/index.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabPane = exports.TdTabs = exports.TdBreadcrumbItem = exports.TdBreadcrumb = exports.TdBackTop = exports.TdAnchorLink = exports.TdAnchor = exports.TdAffix = exports.TdMenu = void 0;
+const tslib_1 = require("tslib");
 var td_menu_class_1 = require("./td-menu/td-menu.class");
 Object.defineProperty(exports, "TdMenu", { enumerable: true, get: function () { return td_menu_class_1.TdMenu; } });
 var td_affix_class_1 = require("./td-affix/td-affix.class");
 Object.defineProperty(exports, "TdAffix", { enumerable: true, get: function () { return td_affix_class_1.TdAffix; } });
 var td_anchor_class_1 = require("./td-anchor/td-anchor.class");
 Object.defineProperty(exports, "TdAnchor", { enumerable: true, get: function () { return td_anchor_class_1.TdAnchor; } });
-var td_anchor_link_class_1 = require("./td-anchor/td-anchor-link/td-anchor-link.class");
+var td_anchor_link_class_1 = require("./td-anchor-link/td-anchor-link.class");
 Object.defineProperty(exports, "TdAnchorLink", { enumerable: true, get: function () { return td_anchor_link_class_1.TdAnchorLink; } });
 var td_backtop_class_1 = require("./td-backtop/td-backtop.class");
 Object.defineProperty(exports, "TdBackTop", { enumerable: true, get: function () { return td_backtop_class_1.TdBackTop; } });
@@ -15,7 +16,9 @@ var td_breadcrumb_class_1 = require("./td-breadcrumb/td-breadcrumb.class");
 Object.defineProperty(exports, "TdBreadcrumb", { enumerable: true, get: function () { return td_breadcrumb_class_1.TdBreadcrumb; } });
 var td_breadcrumb_item_class_1 = require("./td-breadcrumb-item/td-breadcrumb-item.class");
 Object.defineProperty(exports, "TdBreadcrumbItem", { enumerable: true, get: function () { return td_breadcrumb_item_class_1.TdBreadcrumbItem; } });
+// menu
+tslib_1.__exportStar(require("./td-menu/index"), exports);
 var td_tabs_class_1 = require("./td-tabs/td-tabs.class");
 Object.defineProperty(exports, "TdTabs", { enumerable: true, get: function () { return td_tabs_class_1.TdTabs; } });
-var td_tab_pane_class_1 = require("./td-tabs/td-tab-pane.class");
+var td_tab_pane_class_1 = require("./td-tab-pane/td-tab-pane.class");
 Object.defineProperty(exports, "TdTabPane", { enumerable: true, get: function () { return td_tab_pane_class_1.TdTabPane; } });

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

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

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

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

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

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

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

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

@@ -1,27 +1,11 @@
-import { TypeDiv, TypeNode } from '@type-dom/framework';
-import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
-import { IStyle } from '@type-dom/css-type';
+import { TypeDiv } from '@type-dom/framework';
+import { ITdAffix, AffixProps } from './td-affix.interface';
+import './style/index';
 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

@@ -1,135 +1,165 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAffix = void 0;
+const tslib_1 = require("tslib");
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const event_1 = require("../../../constants/event");
+const td_affix_const_1 = require("./td-affix.const");
+require("./style/index");
 class TdAffix extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        this.onScroll = () => {
-            console.log('this.scrollContainer scroll . ');
-            // if (this.fixed) {
-            this.style.setObj(this.rootStyle);
-            this.affix.style.setObj(this.affixStyle);
-            // }
-            this.updateRoot();
-        };
-        console.log('TdAffix constructor . ');
+        // 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)(() => {
+            // console.warn('rootStyle . ');
+            // const height = fixed.get() && rootHeight.get() ? `${rootHeight.get()}px`: undefined;
+            // const width = fixed.get() && rootWidth.get() ? `${rootWidth.get()}px` : undefined;
+            const height = fixed.get() ? `${rootHeight.get()}px` : undefined;
+            const width = fixed.get() ? `${rootWidth.get()}px` : undefined;
+            // console.log('height is ', height);
+            // console.log('width is ', width);
+            return {
+                height,
+                width,
+            };
         });
-    }
-    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)(() => {
+            // console.log('affixStyle . ');
+            if (!fixed.get())
+                return {
+                    height: undefined,
+                    width: undefined,
+                    top: undefined,
+                    bottom: undefined,
+                    transform: undefined,
+                    zIndex: undefined,
+                };
+            const offsetY = props.offset ? (0, utils_1.addUnit)(props.offset) : 0;
+            const height = rootHeight.get() ? `${rootHeight.get()}px` : undefined;
+            const width = rootWidth.get() ? `${rootWidth.get()}px` : undefined;
+            const top = props.position === 'top' ? offsetY : '';
+            const transformY = transform.get() ? `translateY(${transform.get()}px)` : '';
+            return {
+                height,
+                width,
+                top,
+                bottom: props.position === 'bottom' ? offsetY : '',
+                transform: transformY,
+                zIndex: props.zIndex,
+            };
+        });
+        const updateAffix = () => {
+            var _a, _b, _c;
+            // console.warn('updateAffix . ');
+            if (!scrollContainer.get()) {
+                // console.error(COMPONENT_NAME, 'Scroll container is not available.');
+                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;
+            // todo offset floatingui function, here cannot set .
+            // console.error('then offset . ');
+            const offset = (_b = props.offset) !== null && _b !== void 0 ? _b : 0;
+            const offsetY = (_c = props.offset) !== null && _c !== void 0 ? _c : 0;
+            const rootHeightOffset = offsetY + rootHeight.get();
+            if (position === 'top') {
+                if (target) {
+                    const difference = targetRect.bottom.get() - rootHeightOffset;
+                    fixed.set(offsetY > rootTop.get() && targetRect.bottom.get() > 0);
+                    transform.set(difference < 0 ? difference : 0);
+                }
+                else {
+                    fixed.set(offsetY > rootTop.get());
+                    // console.warn('fixed.get() is ', fixed.get());
+                }
+            }
+            else if (target) {
+                const difference = windowHeight.get() - targetRect.top.get() - rootHeightOffset;
+                fixed.set(windowHeight.get() - offsetY < rootBottom.get() &&
+                    windowHeight.get() > targetRect.top.get());
+                transform.set(difference < 0 ? -difference : 0);
             }
             else {
-                this.fixed = ((_m = (_l = this.props) === null || _l === void 0 ? void 0 : _l.offset) !== null && _m !== void 0 ? _m : 0) > this.rootTop;
+                fixed.set(windowHeight.get() - offsetY < rootBottom.get());
             }
-        }
-        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;
-        }
+        };
+        const handleScroll = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            // console.warn('handleScroll . ');
+            updateRoot();
+            yield (0, framework_1.nextTick)();
+            emit('scroll', {
+                scrollTop: scrollTop.get(),
+                fixed: fixed.get(),
+            });
+        });
+        (0, signals_1.watch)(fixed, (val) => emit(event_1.CHANGE_EVENT, val));
+        (0, framework_1.onMounted)(() => {
+            // console.warn('onMounted . ');
+            (0, framework_1.nextFrame)(() => {
+                // console.warn('nextFrame . ');
+                if (props.target) {
+                    target.set(document.querySelector(props.target));
+                    if (!target.get()) {
+                        (0, utils_1.throwError)(COMPONENT_NAME, `Target does not exist: ${props.target}`);
+                        // console.error(COMPONENT_NAME, `Target does not exist: ${props.target}`);
+                        // return;
+                    }
+                }
+                else {
+                    target.set(document.documentElement);
+                }
+                scrollContainer.set((0, utils_1.getScrollContainer)(root.get(), true));
+                // console.warn('scrollContainer.get() is ', scrollContainer.get());
+                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(), // todo not set
+            // styleObj: rootStyle,
+        });
+        this.attr.addClass(ns.b());
+        this.style.addObj(rootStyle);
+        this.addChild(new framework_1.Div({
+            class: (0, signals_1.computed)(() => [{ [ns.m('fixed')]: fixed.get() }]),
+            // class: computed(() => fixed.get() ? ns.m('fixed') : ''),
+            styleObj: affixStyle,
+            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,8 +1,8 @@
-import { IJsonData, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdAffix extends ITypeDiv {
     className: 'TdAffix';
 }
-export interface ITdAffixConfig extends ITypeConfig {
+export interface AffixProps extends TypeDivProps {
     /**
      * @description affix element zIndex value
      *     default: 100,
@@ -12,7 +12,7 @@ export interface ITdAffixConfig extends ITypeConfig {
      * @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 '../../../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("../../../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");