@type-dom/ui 0.1.3 → 0.2.1

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

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

@@ -1,19 +0,0 @@
-export { TdMenu } from './td-menu/td-menu.class';
-export type { ITdMenu } from './td-menu/td-menu.interface';
-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-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-tab-pane/td-tab-pane.class';
-export type * from './td-tab-pane/td-tab-pane.interface';

package/src/components/navigation/index.js

@@ -1,24 +0,0 @@
-"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-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; } });
-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-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

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

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

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

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

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

@@ -1,4 +0,0 @@
-"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,11 +0,0 @@
-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: AffixProps;
-    updateAffix?: () => void;
-    updateRoot?: () => void;
-    constructor(params?: AffixProps);
-    setup(): void;
-}

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

@@ -1,165 +0,0 @@
-"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();
-        // console.log('TdAffix constructor . ');
-        this.className = 'TdAffix';
-        this.attr.addName('td-affix');
-        this.addEmits(td_affix_const_1.affixEmits);
-        this.assignProps(td_affix_const_1.affixProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a;
-        const COMPONENT_NAME = 'TdAffix';
-        const props = this.props;
-        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,
-            };
-        });
-        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
-                : ((_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 {
-                fixed.set(windowHeight.get() - offsetY < rootBottom.get());
-            }
-        };
-        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

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

@@ -1,14 +0,0 @@
-"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,26 +0,0 @@
-import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
-export interface ITdAffix extends ITypeDiv {
-    className: 'TdAffix';
-}
-export interface AffixProps extends TypeDivProps {
-    /**
-     * @description affix element zIndex value
-     *     default: 100,
-     * */
-    zIndex?: number | string;
-    /**
-     * @description target container. (CSS selector)
-     *     default: '',
-     */
-    target?: string;
-    /**
-     * @description offset distance
-     *     default: 0,
-     * */
-    offset?: number;
-    /**
-     * @description position of affix
-     *     default: 'top',
-     * */
-    position?: 'top' | 'bottom';
-}

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-"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,9 +0,0 @@
-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;
-    scrollTo?: (href?: string) => void;
-    constructor(params?: AnchorProps);
-    setup(): void;
-}