@type-dom/ui 0.1.3 → 0.2.0

package/src/components/data/td-image-viewer/td-image-viewer.class.js

@@ -1,476 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdImageViewer = void 0;
-const lodash_1 = require("lodash");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-const framework_1 = require("@type-dom/framework");
-const svgs_1 = require("@type-dom/svgs");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const use_z_index_1 = require("../../../hooks/use-z-index");
-const use_locale_1 = require("../../../hooks/use-locale");
-const aria_1 = require("../../../constants/aria");
-const td_teleport_class_1 = require("../../base/td-teleport/td-teleport.class");
-const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const td_focus_trap_class_1 = require("../../feedback/td-focus-trap/td-focus-trap.class");
-const td_image_viewer_const_1 = require("./td-image-viewer.const");
-require("./style/index");
-class TdImageViewer extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdImageViewer';
-        this.addEmits(td_image_viewer_const_1.imageViewerEmits);
-        this.assignProps(td_image_viewer_const_1.imageViewerProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a;
-        // console.warn('TdImageViewer setup . ');
-        const modes = {
-            CONTAIN: {
-                name: 'contain',
-                icon: new svgs_1.ElFullScreenSvg(),
-            },
-            ORIGINAL: {
-                name: 'original',
-                icon: new svgs_1.ElScaleToOriginalSvg(),
-            },
-        };
-        const props = this.props;
-        const emit = this.emit;
-        let stopWheelListener;
-        let prevOverflow = '';
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('image-viewer');
-        const { nextZIndex } = (0, use_z_index_1.useZIndex)();
-        const wrapper = (0, signals_1.signal)();
-        const imgRefs = (0, signals_1.signal)([]);
-        // const scopeEventListener = new EffectScope();
-        let scopeEventListener;
-        const loading = (0, signals_1.signal)(true);
-        const activeIndex = (0, signals_1.signal)(props.initialIndex);
-        const mode = (0, signals_1.signal)(modes.CONTAIN);
-        const transform = (0, signals_1.signal)({
-            // signal is object, then effect reset object .
-            scale: 1,
-            deg: 0,
-            offsetX: 0,
-            offsetY: 0,
-            enableTransition: false,
-        });
-        const zIndex = (0, signals_1.signal)((_a = props.zIndex) !== null && _a !== void 0 ? _a : nextZIndex());
-        const isSingle = (0, signals_1.computed)(() => {
-            const { urlList } = props;
-            return urlList && urlList.length <= 1;
-        });
-        const isFirst = (0, signals_1.computed)(() => {
-            return activeIndex.get() === 0;
-        });
-        const isLast = (0, signals_1.computed)(() => {
-            return activeIndex.get() === props.urlList.length - 1;
-        });
-        const currentImg = (0, signals_1.computed)(() => {
-            // console.warn('currentImg . ');
-            return props.urlList && props.urlList[activeIndex.get() || 0];
-        });
-        const arrowPrevKls = (0, signals_1.computed)(() => [
-            ns.e('btn'),
-            ns.e('prev'),
-            ns.is('disabled', !props.infinite && isFirst.get()),
-        ]);
-        const arrowNextKls = (0, signals_1.computed)(() => [
-            ns.e('btn'),
-            ns.e('next'),
-            ns.is('disabled', !props.infinite && isLast.get()),
-        ]);
-        // only when set transform, imgStyle will change; it is different from vue's reactivity.
-        const imgStyle = (0, signals_1.computed)(() => {
-            // console.warn('imgStyle . ');
-            // console.warn('imgStyle transform.get() is ', transform.get());
-            const { scale, deg, offsetX, offsetY, enableTransition } = transform.get();
-            let translateX = offsetX / scale;
-            let translateY = offsetY / scale;
-            const radian = (deg * Math.PI) / 180;
-            const cosRadian = Math.cos(radian);
-            const sinRadian = Math.sin(radian);
-            translateX = translateX * cosRadian + translateY * sinRadian;
-            translateY = translateY * cosRadian - (offsetX / scale) * sinRadian;
-            const style = {
-                transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
-                transition: enableTransition ? 'transform .3s' : '',
-            };
-            if (mode.get().name === modes.CONTAIN.name) {
-                style.maxWidth = style.maxHeight = '100%';
-            }
-            return style;
-        });
-        const progress = (0, signals_1.computed)(() => `${activeIndex.get() + 1} / ${props.urlList.length}`);
-        function hide() {
-            // console.warn('hide . ');
-            unregisterEventListener();
-            stopWheelListener === null || stopWheelListener === void 0 ? void 0 : stopWheelListener();
-            document.body.style.overflow = prevOverflow;
-            emit('close');
-        }
-        function registerEventListener() {
-            console.error('registerEventListener . ');
-            const keydownHandler = (0, lodash_1.throttle)((e) => {
-                switch (e.code) {
-                    // ESC
-                    case aria_1.EVENT_CODE.esc:
-                        if (props.closeOnPressEscape)
-                            hide();
-                        break;
-                    // SPACE
-                    case aria_1.EVENT_CODE.space:
-                        toggleMode();
-                        break;
-                    // LEFT_ARROW
-                    case aria_1.EVENT_CODE.left:
-                        prev();
-                        break;
-                    // UP_ARROW
-                    case aria_1.EVENT_CODE.up:
-                        handleActions('zoomIn');
-                        break;
-                    // RIGHT_ARROW
-                    case aria_1.EVENT_CODE.right:
-                        next();
-                        break;
-                    // DOWN_ARROW
-                    case aria_1.EVENT_CODE.down:
-                        handleActions('zoomOut');
-                        break;
-                }
-            });
-            const mousewheelHandler = (0, lodash_1.throttle)((e) => {
-                if (!e)
-                    return;
-                const delta = e.deltaY || e.deltaX;
-                handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {
-                    zoomRate: props.zoomRate,
-                    enableTransition: false,
-                });
-            });
-            // scopeEventListener.run(() => {
-            //   useEventListener(document, 'keydown', keydownHandler)
-            //   useEventListener(document, 'wheel', mousewheelHandler)
-            // })
-            scopeEventListener = (0, signals_1.effectScope)(() => {
-                (0, framework_1.useEventListener)(document, 'keydown', keydownHandler);
-                (0, framework_1.useEventListener)(document, 'wheel', mousewheelHandler);
-            });
-        }
-        function unregisterEventListener() {
-            scopeEventListener === null || scopeEventListener === void 0 ? void 0 : scopeEventListener();
-            // scopeEventListener.stop()
-        }
-        function handleImgLoad() {
-            // console.warn('handleImgLoad . ');
-            loading.set(false);
-        }
-        function handleImgError(e) {
-            // console.warn('handleImgError . ');
-            loading.set(false);
-            e.target.alt = t('el.image.error');
-        }
-        function handleMouseDown(e) {
-            if (loading.get() || e.button !== 0 || !wrapper.get())
-                return;
-            transform.get().enableTransition = false;
-            const { offsetX, offsetY } = transform.get();
-            const startX = e.pageX;
-            const startY = e.pageY;
-            const dragHandler = (0, lodash_1.throttle)((ev) => {
-                transform.set(Object.assign(Object.assign({}, transform.get()), { offsetX: offsetX + ev.pageX - startX, offsetY: offsetY + ev.pageY - startY }));
-            });
-            const removeMousemove = (0, framework_1.useEventListener)(document, 'mousemove', dragHandler);
-            (0, framework_1.useEventListener)(document, 'mouseup', () => {
-                removeMousemove();
-            });
-            e.preventDefault();
-        }
-        function reset() {
-            transform.set({
-                scale: 1,
-                deg: 0,
-                offsetX: 0,
-                offsetY: 0,
-                enableTransition: false,
-            });
-        }
-        function toggleMode() {
-            // console.error('toggleMode . ');
-            // if (loading.get()) return; // todo edit by me
-            const modeNames = (0, utils_1.keysOf)(modes);
-            const modeValues = Object.values(modes);
-            const currentMode = mode.get().name;
-            const index = modeValues.findIndex((i) => i.name === currentMode);
-            const nextIndex = (index + 1) % modeNames.length;
-            mode.set(modes[modeNames[nextIndex]]);
-            reset();
-        }
-        function setActiveItem(index) {
-            // console.error('setActiveItem . index is ', index);
-            const len = props.urlList.length;
-            activeIndex.set((index + len) % len);
-        }
-        function prev() {
-            if (isFirst.get() && !props.infinite)
-                return;
-            setActiveItem(activeIndex.get() - 1);
-        }
-        function next() {
-            // console.error('next . ');
-            if (isLast.get() && !props.infinite)
-                return;
-            setActiveItem(activeIndex.get() + 1);
-        }
-        function handleActions(action, options = {}) {
-            // console.error('handleActions . action is ', action);
-            // if (loading.get()) return; // todo
-            const { minScale, maxScale } = props;
-            const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: props.zoomRate, rotateDeg: 90, enableTransition: true }, options);
-            switch (action) {
-                case 'zoomOut':
-                    if (transform.get().scale > minScale) {
-                        transform.get().scale = Number.parseFloat((transform.get().scale / zoomRate).toFixed(3));
-                    }
-                    break;
-                case 'zoomIn':
-                    if (transform.get().scale < maxScale) {
-                        transform.get().scale = Number.parseFloat((transform.get().scale * zoomRate).toFixed(3));
-                    }
-                    break;
-                case 'clockwise':
-                    transform.get().deg += rotateDeg;
-                    // transform.set({ ...transform.get(), deg: transform.get().deg })
-                    emit('rotate', transform.get().deg);
-                    break;
-                case 'anticlockwise':
-                    transform.get().deg -= rotateDeg;
-                    // transform.set({ ...transform.get(), deg: transform.get().deg })
-                    emit('rotate', transform.get().deg);
-                    break;
-            }
-            transform.get().enableTransition = enableTransition;
-            // must distracture, otherwise will not trigger effect
-            transform.set(Object.assign({}, transform.get())); // add by me to trigger effect
-        }
-        function onFocusoutPrevented(event) {
-            var _a;
-            if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.focusReason) === 'pointer') {
-                event === null || event === void 0 ? void 0 : event.preventDefault();
-            }
-        }
-        function onCloseRequested() {
-            if (props.closeOnPressEscape) {
-                hide();
-            }
-        }
-        function wheelHandler(e) {
-            if (!e.ctrlKey)
-                return undefined;
-            if (e.deltaY < 0) {
-                e.preventDefault();
-                return false;
-            }
-            else if (e.deltaY > 0) {
-                e.preventDefault();
-                return false;
-            }
-            return undefined;
-        }
-        (0, signals_1.watch)(currentImg, () => {
-            (0, framework_1.nextTick)(() => {
-                // todo imgRefs.get()[0] has error , can not get nothing ;
-                //      then loading always is true;
-                const $img = imgRefs.get()[0];
-                if (!($img === null || $img === void 0 ? void 0 : $img.complete)) {
-                    loading.set(true); // todo reopen
-                }
-            });
-        });
-        (0, signals_1.watch)(activeIndex, (val) => {
-            reset();
-            emit('switch', val);
-        });
-        (0, framework_1.onMounted)(() => {
-            (0, signals_1.watch)(() => (0, signals_1.unref)(props.vIf), (val) => {
-                if (val !== false) { // add by me
-                    registerEventListener();
-                    stopWheelListener = (0, framework_1.useEventListener)('wheel', wheelHandler, {
-                        passive: false,
-                    });
-                    // prevent body scroll
-                    prevOverflow = document.body.style.overflow;
-                    document.body.style.overflow = 'hidden';
-                }
-            });
-        });
-        /**
-         * @description manually switch image
-         */
-        this.setActiveItem = setActiveItem;
-        // console.error('then image-viewer add TdTeleport');
-        this.addChild(new td_teleport_class_1.TdTeleport({
-            to: 'body',
-            disabled: !props.teleported,
-            slot: new framework_1.Transition({
-                name: 'viewer-fade',
-                appear: true,
-                slot: new framework_1.Div({
-                    // vIf: props.vIf,  // parent element convert to down real element;
-                    refDom: wrapper,
-                    attrObj: {
-                        tabindex: '-1',
-                        class: ns.e('wrapper'),
-                    },
-                    styleObj: {
-                        zIndex: zIndex.get(),
-                    },
-                    slot: new td_focus_trap_class_1.TdFocusTrap({
-                        loop: true,
-                        trapped: true,
-                        focusTrapEl: wrapper,
-                        focusStartEl: 'container',
-                        emits: {
-                            focusoutPrevented: onFocusoutPrevented,
-                            releaseRequested: onCloseRequested,
-                        },
-                        slot: () => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h;
-                            return [
-                                new framework_1.Div({
-                                    class: ns.e('mask'),
-                                    events: {
-                                        click: (evt, ele) => {
-                                            if ((evt === null || evt === void 0 ? void 0 : evt.target) === (ele === null || ele === void 0 ? void 0 : ele.dom)) {
-                                                if (props.hideOnClickModal)
-                                                    hide();
-                                            }
-                                        },
-                                    },
-                                }),
-                                // <!-- CLOSE -->
-                                new framework_1.Span({
-                                    class: [ns.e('btn'), ns.e('close')],
-                                    events: {
-                                        click: hide,
-                                    },
-                                    slot: new td_icon_class_1.TdIcon({
-                                        slot: new svgs_1.ElCloseSvg(),
-                                    }),
-                                }),
-                                // <!-- ARROW -->
-                                new framework_1.Fragment({
-                                    vIf: (0, signals_1.computed)(() => !isSingle.get()),
-                                    slot: [
-                                        new framework_1.Span({
-                                            class: arrowPrevKls,
-                                            events: {
-                                                click: prev,
-                                            },
-                                            slot: new td_icon_class_1.TdIcon({
-                                                slot: new svgs_1.ElArrowLeftSvg(),
-                                            }),
-                                        }),
-                                        new framework_1.Span({
-                                            class: arrowNextKls,
-                                            events: {
-                                                click: next,
-                                            },
-                                            slot: new td_icon_class_1.TdIcon({
-                                                slot: new svgs_1.ElArrowRightSvg(),
-                                            }),
-                                        }),
-                                    ],
-                                }),
-                                new framework_1.Div({
-                                    vIf: props.showProgress,
-                                    class: [ns.e('btn'), ns.e('progress')],
-                                    slot: (_d = (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.progress) === null || _b === void 0 ? void 0 : _b.call(_a, activeIndex, (_c = props.urlList) === null || _c === void 0 ? void 0 : _c.length)) !== null && _d !== void 0 ? _d : progress,
-                                }),
-                                // <!-- ACTIONS -->
-                                new framework_1.Div({
-                                    class: [ns.e('btn'), ns.e('actions')],
-                                    slot: new framework_1.Div({
-                                        class: ns.e('actions__inner'),
-                                        slot: (_g = (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.toolbar) === null || _f === void 0 ? void 0 : _f.call(_e, {
-                                            actions: handleActions,
-                                            prev: prev,
-                                            next: next,
-                                            reset: toggleMode,
-                                            activeIndex: activeIndex,
-                                            setActiveItem: setActiveItem
-                                        })) !== null && _g !== void 0 ? _g : [
-                                            new td_icon_class_1.TdIcon({
-                                                events: {
-                                                    click: () => handleActions('zoomOut'),
-                                                },
-                                                slot: new svgs_1.ElZoomOutSvg(),
-                                            }),
-                                            new td_icon_class_1.TdIcon({
-                                                events: {
-                                                    click: () => handleActions('zoomIn'),
-                                                },
-                                                slot: new svgs_1.ElZoomInSvg(),
-                                            }),
-                                            new framework_1.I({
-                                                class: ns.e('actions__divider'),
-                                            }),
-                                            new td_icon_class_1.TdIcon({
-                                                events: {
-                                                    click: toggleMode,
-                                                },
-                                                slot: (0, signals_1.computed)(() => mode.get().icon),
-                                            }),
-                                            new framework_1.I({
-                                                class: ns.e('actions__divider'),
-                                            }),
-                                            new td_icon_class_1.TdIcon({
-                                                events: {
-                                                    click: () => handleActions('anticlockwise'),
-                                                },
-                                                slot: new svgs_1.ElRefreshLeftSvg(),
-                                            }),
-                                            new td_icon_class_1.TdIcon({
-                                                events: {
-                                                    click: () => handleActions('clockwise'),
-                                                },
-                                                slot: new svgs_1.ElRefreshRightSvg(),
-                                            }),
-                                        ],
-                                    }),
-                                }),
-                                // <!-- CANVAS -->
-                                new framework_1.Div({
-                                    class: ns.e('canvas'),
-                                    slot: (_h = props.urlList) === null || _h === void 0 ? void 0 : _h.map((url, i) => new framework_1.Img({
-                                        vShow: (0, signals_1.computed)(() => i === activeIndex.get()),
-                                        // refDom: ((el) => (imgRefs.get()[i] = el as HTMLImageElement)), // todo ??? how todo
-                                        attrObj: {
-                                            src: url || '',
-                                            class: ns.e('img'),
-                                            crossorigin: props.crossorigin,
-                                        },
-                                        styleObj: imgStyle,
-                                        emits: {
-                                            load: handleImgLoad,
-                                            error: handleImgError,
-                                            mousedown: handleMouseDown,
-                                        },
-                                    })),
-                                }),
-                                new framework_1.Fragment({
-                                    slot: props.slot,
-                                })
-                            ];
-                        },
-                    }),
-                }),
-            }),
-        }));
-    }
-}
-exports.TdImageViewer = TdImageViewer;

package/src/components/data/td-image-viewer/td-image-viewer.const.d.ts

@@ -1,7 +0,0 @@
-import { ImageViewerProps } from './td-image-viewer.interface';
-export declare const imageViewerProps: ImageViewerProps;
-export declare const imageViewerEmits: {
-    close: () => boolean;
-    switch: (index: number) => boolean;
-    rotate: (deg: number) => boolean;
-};

package/src/components/data/td-image-viewer/td-image-viewer.const.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageViewerEmits = exports.imageViewerProps = void 0;
-const utils_1 = require("@type-dom/utils");
-exports.imageViewerProps = {
-    urlList: [],
-    initialIndex: 0,
-    infinite: true,
-    closeOnPressEscape: true,
-    zoomRate: 1.2,
-    minScale: 0.2,
-    maxScale: 7,
-    showProgress: false,
-};
-exports.imageViewerEmits = {
-    close: () => true,
-    switch: (index) => (0, utils_1.isNumber)(index),
-    rotate: (deg) => (0, utils_1.isNumber)(deg),
-};

package/src/components/data/td-image-viewer/td-image-viewer.interface.d.ts

@@ -1,71 +0,0 @@
-import { ISlotRaw, ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
-export interface ITdImageViewer extends ITypeFragment {
-    className: 'TdImageViewer';
-}
-export interface ImageViewerProps extends TypeFragmentProps {
-    /**
-     * @description preview link list.
-     *     default: () => mutable([] as const),
-     */
-    urlList?: string[];
-    /**
-     * @description preview backdrop z-index.
-     */
-    zIndex?: number;
-    /**
-     * @description the initial preview image index, less than or equal to the length of `url-list`.
-     *     default: 0,
-     */
-    initialIndex?: number;
-    /**
-     * @description whether preview is infinite.
-     *     default: true,
-     */
-    infinite?: boolean;
-    /**
-     * @description whether user can emit close event when clicking backdrop.
-     */
-    hideOnClickModal?: boolean;
-    /**
-     * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.
-     */
-    teleported?: boolean;
-    /**
-     * @description whether the image-viewer can be closed by pressing ESC.
-     *     default?: true,
-     */
-    closeOnPressEscape?: boolean;
-    /**
-     * @description the zoom rate of the image viewer zoom event.
-     *     default: 1.2,
-     */
-    zoomRate?: number;
-    /**
-     * @description the min scale of the image viewer zoom event.
-     *     default: 0.2,
-     */
-    minScale?: number;
-    /**
-     * @description the max scale of the image viewer zoom event.
-     *     default: 7,
-     */
-    maxScale?: number;
-    /**
-     * @description show preview image progress content.
-     *    default: false,
-     */
-    showProgress?: boolean;
-    /**
-     * @description set HTML attribute: crossorigin.
-     */
-    crossorigin?: 'anonymous' | 'use-credentials' | '';
-    slots?: {
-        progress?: (progress: any, index?: number) => ISlotRaw | ISlotRaw[];
-        toolbar?: (toolbar: any) => ISlotRaw | ISlotRaw[];
-    };
-}
-export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
-export interface ImageViewerMode {
-    name: string;
-    icon: TypeSvgSvg;
-}

package/src/components/data/td-image-viewer/td-image-viewer.interface.js

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

package/src/components/data/td-image-viewer/td-image-viewer.style.d.ts

@@ -1,9 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-export declare const $opIcon: IStyle;
-export declare const $btn: IStyle;
-export declare const $canvas: IStyle;
-export declare const $actions: IStyle;
-export declare const $actionsInner: IStyle;
-export declare const $prev: IStyle;
-export declare const $next: IStyle;
-export declare const $mask: IStyle;

package/src/components/data/td-image-viewer/td-image-viewer.style.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$mask = exports.$next = exports.$prev = exports.$actionsInner = exports.$actions = exports.$canvas = exports.$btn = exports.$opIcon = void 0;
-const var_1 = require("../../../styles/var");
-exports.$opIcon = {
-    width: '44px',
-    height: '44px',
-    fontSize: '24px',
-    color: '#fff',
-    // background-color: getCssVar('text-color', 'regular'),
-    backgroundColor: var_1.$textColor.regular,
-    borderColor: '#fff',
-};
-exports.$btn = {
-    position: 'absolute',
-    zIndex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '50%',
-    opacity: 0.8,
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-};
-exports.$canvas = {
-    position: 'static',
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    userSelect: 'none',
-};
-exports.$actions = {
-    left: '50%',
-    bottom: '30px',
-    transform: 'translateX(-50%)',
-    width: '282px',
-    height: '44px',
-    padding: '0 23px',
-    // background-color: getCssVar('text-color', 'regular'),
-    backgroundColor: var_1.$textColor.regular,
-    borderColor: '#fff',
-    borderRadius: '22px',
-};
-exports.$actionsInner = {
-    width: '100%',
-    height: '100%',
-    cursor: 'default',
-    fontSize: '23px',
-    color: '#fff',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-};
-exports.$prev = Object.assign({ top: '50%', transform: 'translateY(-50%)', left: '40px' }, exports.$opIcon);
-exports.$next = Object.assign({ top: '50%', transform: 'translateY(-50%)', right: '40px', textIndent: '2px' }, exports.$opIcon);
-exports.$mask = {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    opacity: 0.5,
-    background: '#000',
-};

package/src/components/data/td-pagination/components/jumper.class.d.ts

@@ -1,11 +0,0 @@
-import { TypeSpan, TypeSpanProps } from '@type-dom/framework';
-import { ComponentSize } from '../../../../constants/size';
-export interface PaginationJumperProps extends TypeSpanProps {
-    size?: ComponentSize;
-}
-export declare class PaginationJumper extends TypeSpan {
-    className: 'PaginationJumper';
-    props: PaginationJumperProps;
-    constructor(params?: PaginationJumperProps);
-    setup(): void;
-}