@type-dom/ui 0.1.3 → 0.2.0

package/src/components/data/td-pagination/components/jumper.class.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationJumper = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const use_namespace_1 = require("../../../../hooks/use-namespace");
-const td_input_class_1 = require("../../../form/td-input/td-input.class");
-const usePagination_1 = require("../usePagination");
-class PaginationJumper extends framework_1.TypeSpan {
-    constructor(params = {}) {
-        super();
-        this.className = 'PaginationJumper';
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('pagination');
-        const { pageCount, disabled, currentPage, changeEvent } = (0, usePagination_1.usePagination)();
-        const userInput = (0, signals_1.signal)();
-        const innerValue = (0, signals_1.computed)(() => { var _a; return (_a = userInput.get()) !== null && _a !== void 0 ? _a : currentPage === null || currentPage === void 0 ? void 0 : currentPage.get(); });
-        function handleInput(val) {
-            userInput.set(val ? +val : '');
-        }
-        function handleChange(val) {
-            val = Math.trunc(+val);
-            changeEvent === null || changeEvent === void 0 ? void 0 : changeEvent(val);
-            userInput.set(undefined);
-        }
-        this.attr.addClass(ns.e('jump'));
-        this.assignProps({
-            disabled: disabled,
-        });
-        this.addChildren(new framework_1.Span({
-            class: ns.e('goto'),
-            slot: t('el.pagination.goto'),
-        }), new td_input_class_1.TdInput({
-            size: props.size,
-            class: [ns.e('editor'), ns.is('in-pagination')],
-            disabled: disabled,
-            modelValue: innerValue.get(),
-            validateEvent: false,
-            attrObj: {
-                min: 1,
-                max: pageCount,
-                ariaLabel: t('el.pagination.page'),
-                type: 'number',
-            },
-            emits: {
-                'update:model-value': handleInput,
-                change: handleChange,
-            },
-        }), new framework_1.Span({
-            class: ns.e('classifier'),
-            slot: t('el.pagination.pageClassifier'),
-        }));
-    }
-}
-exports.PaginationJumper = PaginationJumper;

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

@@ -1,15 +0,0 @@
-import { TypeButton, TypeButtonProps, TypeSvgSvg } from '@type-dom/framework';
-export interface PaginationNextProps extends TypeButtonProps {
-    disabled?: boolean;
-    currentPage?: number;
-    pageCount?: number;
-    nextText?: string;
-    nextIcon?: typeof TypeSvgSvg;
-}
-export declare const paginationNextProps: PaginationNextProps;
-export declare class PaginationNext extends TypeButton {
-    className: 'PaginationNext';
-    props: PaginationNextProps;
-    constructor(params?: PaginationNextProps);
-    setup(): void;
-}

package/src/components/data/td-pagination/components/next.class.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationNext = exports.paginationNextProps = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
-exports.paginationNextProps = {
-    currentPage: 1,
-    pageCount: 50,
-};
-class PaginationNext extends framework_1.TypeButton {
-    constructor(params) {
-        super();
-        this.className = 'PaginationNext';
-        this.assignProps(exports.paginationNextProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const { t } = (0, use_locale_1.useLocale)();
-        const internalDisabled = (0, signals_1.computed)(() => props.disabled ||
-            props.currentPage === props.pageCount ||
-            props.pageCount === 0);
-        this.attr.addObj({
-            disabled: internalDisabled,
-            type: 'button',
-            class: 'btn-next',
-            ariaLabel: props.nextText || t('el.pagination.next'),
-            ariaDisabled: internalDisabled,
-        });
-        this.addEmits({
-            click: (e) => {
-                this.emit('click', e);
-            },
-        });
-        if (props.nextText) {
-            this.addChild(new framework_1.Span({
-                vIf: props.nextText,
-                slot: props.nextText,
-            }));
-        }
-        else {
-            this.addChild(new td_icon_class_1.TdIcon({
-                slot: new props.nextIcon(),
-            }));
-        }
-    }
-}
-exports.PaginationNext = PaginationNext;

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

@@ -1,14 +0,0 @@
-import { TypeUL, TypeULProps } from '@type-dom/framework';
-export interface PaginationPagerProps extends TypeULProps {
-    currentPage?: number;
-    pageCount?: number;
-    pagerCount?: number;
-    disabled?: boolean;
-}
-export declare const paginationPagerProps: PaginationPagerProps;
-export declare class PaginationPager extends TypeUL {
-    className: 'PaginationPager';
-    props: PaginationPagerProps;
-    constructor(params?: PaginationPagerProps);
-    setup(): void;
-}

package/src/components/data/td-pagination/components/pager.class.js

@@ -1,221 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationPager = exports.paginationPagerProps = void 0;
-const framework_1 = require("@type-dom/framework");
-const use_namespace_1 = require("../../../../hooks/use-namespace");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const signals_1 = require("@type-dom/signals");
-const svgs_1 = require("@type-dom/svgs");
-exports.paginationPagerProps = {
-    currentPage: 1,
-    pagerCount: 7,
-};
-class PaginationPager extends framework_1.TypeUL {
-    constructor(params = {}) {
-        super();
-        this.className = 'PaginationPager';
-        this.assignProps(exports.paginationPagerProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const nsPager = (0, use_namespace_1.useNamespace)('pager');
-        const nsIcon = (0, use_namespace_1.useNamespace)('icon');
-        const { t } = (0, use_locale_1.useLocale)();
-        const showPrevMore = (0, signals_1.signal)(false);
-        const showNextMore = (0, signals_1.signal)(false);
-        const quickPrevHover = (0, signals_1.signal)(false);
-        const quickNextHover = (0, signals_1.signal)(false);
-        const quickPrevFocus = (0, signals_1.signal)(false);
-        const quickNextFocus = (0, signals_1.signal)(false);
-        const pagers = (0, signals_1.computed)(() => {
-            const pagerCount = props.pagerCount;
-            const halfPagerCount = (pagerCount - 1) / 2;
-            const currentPage = Number(props.currentPage);
-            const pageCount = Number(props.pageCount);
-            let showPrevMore = false;
-            let showNextMore = false;
-            if (pageCount > pagerCount) {
-                if (currentPage > pagerCount - halfPagerCount) {
-                    showPrevMore = true;
-                }
-                if (currentPage < pageCount - halfPagerCount) {
-                    showNextMore = true;
-                }
-            }
-            const array = [];
-            if (showPrevMore && !showNextMore) {
-                const startPage = pageCount - (pagerCount - 2);
-                for (let i = startPage; i < pageCount; i++) {
-                    array.push(i);
-                }
-            }
-            else if (!showPrevMore && showNextMore) {
-                for (let i = 2; i < pagerCount; i++) {
-                    array.push(i);
-                }
-            }
-            else if (showPrevMore && showNextMore) {
-                const offset = Math.floor(pagerCount / 2) - 1;
-                for (let i = currentPage - offset; i <= currentPage + offset; i++) {
-                    array.push(i);
-                }
-            }
-            else {
-                for (let i = 2; i < pageCount; i++) {
-                    array.push(i);
-                }
-            }
-            return array;
-        });
-        const prevMoreKls = (0, signals_1.computed)(() => [
-            'more',
-            'btn-quickprev',
-            nsIcon.b(),
-            nsPager.is('disabled', props.disabled),
-        ]);
-        const nextMoreKls = (0, signals_1.computed)(() => [
-            'more',
-            'btn-quicknext',
-            nsIcon.b(),
-            nsPager.is('disabled', props.disabled),
-        ]);
-        const tabindex = (0, signals_1.computed)(() => (props.disabled ? -1 : 0));
-        (0, signals_1.effect)(() => {
-            const halfPagerCount = (props.pagerCount - 1) / 2;
-            showPrevMore.set(false);
-            showNextMore.set(false);
-            if (props.pageCount > props.pagerCount) {
-                if (props.currentPage > props.pagerCount - halfPagerCount) {
-                    showPrevMore.set(true);
-                }
-                if (props.currentPage < props.pageCount - halfPagerCount) {
-                    showNextMore.set(true);
-                }
-            }
-        });
-        function onMouseEnter(forward = false) {
-            if (props.disabled)
-                return;
-            if (forward) {
-                quickPrevHover.set(true);
-            }
-            else {
-                quickNextHover.set(true);
-            }
-        }
-        function onFocus(forward = false) {
-            if (forward) {
-                quickPrevFocus.set(true);
-            }
-            else {
-                quickNextFocus.set(true);
-            }
-        }
-        function onEnter(e) {
-            const target = e.target;
-            if (target.tagName.toLowerCase() === 'li' &&
-                Array.from(target.classList).includes('number')) {
-                const newPage = Number(target.textContent);
-                if (newPage !== props.currentPage) {
-                    emit('change', newPage);
-                }
-            }
-            else if (target.tagName.toLowerCase() === 'li' &&
-                Array.from(target.classList).includes('more')) {
-                onPagerClick(e);
-            }
-        }
-        function onPagerClick(event) {
-            const target = event === null || event === void 0 ? void 0 : event.target;
-            if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
-                return;
-            }
-            let newPage = Number(target.textContent);
-            const pageCount = props.pageCount;
-            const currentPage = props.currentPage;
-            const pagerCountOffset = props.pagerCount - 2;
-            if (target.className.includes('more')) {
-                if (target.className.includes('quickprev')) {
-                    newPage = currentPage - pagerCountOffset;
-                }
-                else if (target.className.includes('quicknext')) {
-                    newPage = currentPage + pagerCountOffset;
-                }
-            }
-            if (!Number.isNaN(+newPage)) {
-                if (newPage < 1) {
-                    newPage = 1;
-                }
-                if (newPage > pageCount) {
-                    newPage = pageCount;
-                }
-            }
-            if (newPage !== currentPage) {
-                emit('change', newPage);
-            }
-        }
-        this.attr.addClass(nsPager.b());
-        this.addEvents({
-            click: onPagerClick,
-            keyup: (evt) => {
-                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                    onEnter(evt);
-                }
-            },
-        });
-        this.addChildren(new framework_1.LI({
-            vIf: props.pageCount > 0, // todo 待优化 要动态改变
-            class: [
-                nsPager.is('active', props.currentPage === 1),
-                nsPager.is('disabled', props.disabled),
-            ],
-            attrObj: {
-                class: 'number',
-                ariaCurrent: props.currentPage === 1,
-                ariaLabel: t('el.pagination.currentPage', { pager: 1 }),
-                tabindex: tabindex,
-            },
-            slot: 1,
-        }), new framework_1.LI({
-            vIf: showPrevMore,
-            attrObj: {
-                class: prevMoreKls,
-                tabindex: tabindex,
-                ariaLabel: t('el.pagination.prevPages', {
-                    pager: props.pagerCount - 2,
-                }),
-            },
-            events: {
-                mouseenter: () => onMouseEnter(true),
-                mouseleave: () => quickPrevHover.set(false),
-                focus: () => onFocus(true),
-                blur: () => quickPrevFocus.set(false),
-            },
-            slot: [
-                // todo 如何动态刷新
-                new svgs_1.ElDArrowLeftSvg({
-                    vIf: (quickNextHover.get() || quickNextFocus.get()) && !props.disabled,
-                }),
-                new svgs_1.ElMoreFilledSvg(), // v-else
-            ],
-        }), new framework_1.LI({
-            vIf: props.pageCount > 1,
-            class: [
-                nsPager.is('active', props.currentPage === props.pageCount),
-                nsPager.is('disabled', props.disabled),
-            ],
-            attrObj: {
-                class: 'number',
-                ariaCurrent: props.currentPage === props.pageCount,
-                ariaLabel: t('el.pagination.currentPage', {
-                    pager: props.pageCount,
-                }),
-                tabindex: tabindex,
-            },
-            slot: props.pageCount,
-        }));
-    }
-}
-exports.PaginationPager = PaginationPager;

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

@@ -1,17 +0,0 @@
-import { TypeButton, TypeButtonProps, TypeSvgSvg } from '@type-dom/framework';
-export interface PaginationPrevProps extends TypeButtonProps {
-    disabled?: boolean;
-    currentPage?: number;
-    prevText?: string;
-    prevIcon?: typeof TypeSvgSvg;
-}
-export declare const paginationPrevEmits: {
-    click: (evt: MouseEvent) => boolean;
-};
-export declare const paginationPrevProps: PaginationPrevProps;
-export declare class PaginationPrev extends TypeButton {
-    className: 'PaginationPrev';
-    props: PaginationPrevProps;
-    constructor(params?: PaginationPrevProps);
-    setup(): void;
-}

package/src/components/data/td-pagination/components/prev.class.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationPrev = exports.paginationPrevProps = exports.paginationPrevEmits = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
-exports.paginationPrevEmits = {
-    click: (evt) => evt instanceof MouseEvent,
-};
-exports.paginationPrevProps = {
-    currentPage: 1,
-};
-class PaginationPrev extends framework_1.TypeButton {
-    constructor(params = {}) {
-        super();
-        this.className = 'PaginationPrev';
-        this.addEmits(exports.paginationPrevEmits);
-        this.assignProps(exports.paginationPrevProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const { t } = (0, use_locale_1.useLocale)();
-        const internalDisabled = (0, signals_1.computed)(() => props.disabled || props.currentPage <= 1);
-        this.attr.addObj({
-            type: 'button',
-            class: 'btn-prev',
-            disabled: internalDisabled,
-            ariaLabel: this.props.prevText || t('el.pagination.prev'),
-            ariaDisabled: internalDisabled,
-        });
-        this.addEvents({
-            click: (evt) => emit('click', evt),
-        });
-        if (props.prevText) {
-            this.addChild(new framework_1.Span({
-                slot: props.prevText,
-            }));
-        }
-        else {
-            this.addChild(new td_icon_class_1.TdIcon({
-                slot: new props.prevIcon(),
-            }));
-        }
-    }
-}
-exports.PaginationPrev = PaginationPrev;

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

@@ -1,18 +0,0 @@
-import { TypeSpan, TypeSpanProps } from '@type-dom/framework';
-import { ComponentSize } from '../../../../constants/size';
-export interface PaginationSizesProps extends TypeSpanProps {
-    pageSize?: number;
-    pageSizes?: number[];
-    popperClass?: string;
-    disabled?: boolean;
-    teleported?: boolean;
-    size?: ComponentSize;
-    appendSizeTo?: string;
-}
-export declare const paginationSizesProps: PaginationSizesProps;
-export declare class PaginationSizes extends TypeSpan {
-    className: 'PaginationSizes';
-    props: PaginationSizesProps;
-    constructor(params?: PaginationSizesProps);
-    setup(): void;
-}

package/src/components/data/td-pagination/components/sizes.class.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationSizes = exports.paginationSizesProps = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const lodash_1 = require("lodash");
-const use_namespace_1 = require("../../../../hooks/use-namespace");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const td_select_class_1 = require("../../../form/td-select/td-select.class");
-const usePagination_1 = require("../usePagination");
-exports.paginationSizesProps = {
-    pageSizes: [10, 20, 30, 40, 50, 100],
-};
-class PaginationSizes extends framework_1.TypeSpan {
-    constructor(params = {}) {
-        super();
-        this.className = 'PaginationSizes';
-        this.assignProps(exports.paginationSizesProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('pagination');
-        const pagination = (0, usePagination_1.usePagination)();
-        const innerPageSize = (0, signals_1.signal)(props.pageSize);
-        (0, signals_1.watch)(() => props.pageSizes, (newVal, oldVal) => {
-            if ((0, lodash_1.isEqual)(newVal, oldVal))
-                return;
-            if ((0, utils_1.isArray)(newVal)) {
-                const pageSize = newVal.includes(props.pageSize)
-                    ? props.pageSize
-                    : props.pageSizes[0];
-                emit('page-size-change', pageSize);
-            }
-        });
-        (0, signals_1.watch)(() => props.pageSize, (newVal) => {
-            innerPageSize.set(newVal);
-        });
-        const innerPageSizes = (0, signals_1.computed)(() => props.pageSizes);
-        function handleChange(val) {
-            var _a;
-            if (val !== innerPageSize.get()) {
-                innerPageSize.set(Number(val));
-                (_a = pagination.handleSizeChange) === null || _a === void 0 ? void 0 : _a.call(pagination, Number(val));
-            }
-        }
-        this.attr.addClass(ns.e('sizes'));
-        this.addChild(new td_select_class_1.TdSelect({
-            modelValue: innerPageSize,
-            disabled: props.disabled,
-            popperClass: props.popperClass,
-            size: props.size,
-            // teleported: props.teleported,
-            validateEvent: false,
-            // appendTo: props.appendSizeTo,
-            events: {
-                change: (evt) => handleChange((evt === null || evt === void 0 ? void 0 : evt.target).value),
-            },
-        }));
-    }
-}
-exports.PaginationSizes = PaginationSizes;

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

@@ -1,11 +0,0 @@
-import { TypeSpan, TypeSpanProps } from '@type-dom/framework';
-export interface PaginationTotalProps extends TypeSpanProps {
-    total?: number;
-}
-export declare const paginationTotalProps: PaginationTotalProps;
-export declare class PaginationTotal extends TypeSpan {
-    className: 'PaginationTotal';
-    props: PaginationTotalProps;
-    constructor(params?: PaginationTotalProps);
-    setup(): void;
-}

package/src/components/data/td-pagination/components/total.class.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationTotal = exports.paginationTotalProps = void 0;
-const framework_1 = require("@type-dom/framework");
-const use_locale_1 = require("../../../../hooks/use-locale");
-const use_namespace_1 = require("../../../../hooks/use-namespace");
-const usePagination_1 = require("../usePagination");
-exports.paginationTotalProps = {
-    total: 1000,
-};
-class PaginationTotal extends framework_1.TypeSpan {
-    constructor(params = {}) {
-        super();
-        this.className = 'PaginationTotal';
-        this.assignProps(exports.paginationTotalProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('pagination');
-        const { disabled } = (0, usePagination_1.usePagination)();
-        this.attr.addObj({
-            class: ns.e('total'),
-            role: 'status',
-            ariaLabel: t('el.pagination.total'),
-        });
-        this.addChild(new framework_1.TextNode(t('el.pagination.total', {
-            total: props.total.toString(),
-        })));
-    }
-}
-exports.PaginationTotal = PaginationTotal;

package/src/components/data/td-pagination/constants.d.ts

@@ -1,10 +0,0 @@
-import { InjectionKey } from '@type-dom/framework';
-import { Computed } from '@type-dom/signals';
-export interface TdPaginationContext {
-    currentPage?: Computed<number>;
-    pageCount?: Computed<number>;
-    disabled?: Computed<boolean | undefined>;
-    changeEvent?: (val: number) => void;
-    handleSizeChange?: (val: number) => void;
-}
-export declare const tdPaginationKey: InjectionKey<TdPaginationContext>;

package/src/components/data/td-pagination/constants.js

@@ -1,5 +0,0 @@
-"use strict";
-// import type { ComputedRef, InjectionKey, WritableComputedRef } from 'vue'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tdPaginationKey = void 0;
-exports.tdPaginationKey = Symbol('elPaginationKey');

package/src/components/data/td-pagination/style/css.d.ts

@@ -1,4 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-pagination.css';
-import '@element-plus/components/select/style/css';
-import '@element-plus/components/input/style/css';

package/src/components/data/td-pagination/style/css.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-pagination.css");
-require("@element-plus/components/select/style/css");
-require("@element-plus/components/input/style/css");

package/src/components/data/td-pagination/style/index.d.ts

@@ -1,4 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/pagination.scss';
-import '../../../../components/form/td-select/style';
-import '../../../../components/form/td-input/style';

package/src/components/data/td-pagination/style/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/pagination.scss");
-require("../../../../components/form/td-select/style");
-require("../../../../components/form/td-input/style");

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

@@ -1,8 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { ITdPagination, PaginationProps } from './td-pagination.interface';
-export declare class TdPagination extends TypeFragment implements ITdPagination {
-    className: 'TdPagination';
-    props: PaginationProps;
-    constructor(params: PaginationProps);
-    setup(): void;
-}