@type-dom/ui 0.1.0 → 0.1.1

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

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

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

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

@@ -0,0 +1,4 @@
+import '@element-plus/components/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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/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

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

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

@@ -0,0 +1,8 @@
+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;
+}

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

@@ -1 +1,278 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPagination = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_pagination_const_1 = require("./td-pagination.const");
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_size_1 = require("../../../hooks/use-size");
+const use_deprecated_1 = require("../../../hooks/use-deprecated");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const utils_1 = require("@type-dom/utils");
+const constants_1 = require("./constants");
+const prev_class_1 = require("./components/prev.class");
+const jumper_class_1 = require("./components/jumper.class");
+const pager_class_1 = require("./components/pager.class");
+const next_class_1 = require("./components/next.class");
+const sizes_class_1 = require("./components/sizes.class");
+const total_class_1 = require("./components/total.class");
+class TdPagination extends framework_1.TypeFragment {
+    constructor(params) {
+        super();
+        this.className = 'TdPagination';
+        this.addEmits(td_pagination_const_1.paginationEmits);
+        this.assignProps(td_pagination_const_1.paginationProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const componentName = 'TdPagination';
+        const props = this.props;
+        const emit = this.emit;
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('pagination');
+        // const vnodeProps = getCurrentInstance()!.vnode.props || {}
+        const vnodeProps = (0, framework_1.getCurrentInstance)().props.emits || {};
+        const _globalSize = (0, use_size_1.useGlobalSize)();
+        const _size = (0, signals_1.computed)(() => { var _a; return props.small ? 'small' : (_a = props.size) !== null && _a !== void 0 ? _a : _globalSize.get(); });
+        (0, use_deprecated_1.useDeprecated)({
+            from: 'small',
+            replacement: 'size',
+            version: '3.0.0',
+            scope: 'el-pagination',
+            ref: 'https://element-plus.org/zh-CN/component/pagination.html',
+        }, (0, signals_1.computed)(() => !!props.small));
+        // we can find @xxx="xxx" props on `vnodeProps` to check if user bind corresponding events
+        const hasCurrentPageListener = 'onUpdate:currentPage' in vnodeProps ||
+            'onUpdate:current-page' in vnodeProps ||
+            'onCurrentChange' in vnodeProps;
+        const hasPageSizeListener = 'onUpdate:pageSize' in vnodeProps ||
+            'onUpdate:page-size' in vnodeProps ||
+            'onSizeChange' in vnodeProps;
+        const assertValidUsage = (0, signals_1.computed)(() => {
+            var _a;
+            // Users have to set either one, otherwise count of pages cannot be determined
+            if ((0, td_pagination_const_1.isAbsent)(props.total) && (0, td_pagination_const_1.isAbsent)(props.pageCount))
+                return false;
+            // <el-pagination ...otherProps :current-page="xxx" /> without corresponding listener is forbidden now
+            // Users have to use two way binding of `currentPage`
+            // If users just want to provide a default value, `defaultCurrentPage` is here for you
+            if (!(0, td_pagination_const_1.isAbsent)(props.currentPage) && !hasCurrentPageListener)
+                return false;
+            // When you want to change sizes, things get more complex, detailed below
+            // Basically the most important value we need is page count
+            // either directly from props.pageCount
+            // or calculated from props.total
+            // we will take props.pageCount precedence over props.total
+            if ((_a = props.layout) === null || _a === void 0 ? void 0 : _a.includes('sizes')) {
+                if (!(0, td_pagination_const_1.isAbsent)(props.pageCount)) {
+                    // if props.pageCount is assign by user, then user have to watch pageSize change
+                    // and recalculate pageCount
+                    if (!hasPageSizeListener)
+                        return false;
+                }
+                else if (!(0, td_pagination_const_1.isAbsent)(props.total)) {
+                    // Otherwise, we will see if user have props.pageSize defined
+                    // If so, meaning user want to have pageSize controlled himself/herself from component
+                    // Thus page size listener is required
+                    // users are account for page size change
+                    if (!(0, td_pagination_const_1.isAbsent)(props.pageSize)) {
+                        if (!hasPageSizeListener) {
+                            return false;
+                        }
+                    }
+                    else {
+                        // (else block just for explaination)
+                        // else page size is controlled by el-pagination internally
+                    }
+                }
+            }
+            return true;
+        });
+        const innerPageSize = (0, signals_1.signal)((0, td_pagination_const_1.isAbsent)(props.defaultPageSize) ? 10 : props.defaultPageSize);
+        const innerCurrentPage = (0, signals_1.signal)((0, td_pagination_const_1.isAbsent)(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
+        const pageSizeBridge = (0, signals_1.computed)({
+            get() {
+                return (0, td_pagination_const_1.isAbsent)(props.pageSize) ? innerPageSize.get() : props.pageSize;
+            },
+            set(v) {
+                if ((0, td_pagination_const_1.isAbsent)(props.pageSize)) {
+                    innerPageSize.set(v);
+                }
+                if (hasPageSizeListener) {
+                    emit('update:page-size', v);
+                    emit('size-change', v);
+                }
+            },
+        });
+        const pageCountBridge = (0, signals_1.computed)(() => {
+            let pageCount = 0;
+            if (!(0, td_pagination_const_1.isAbsent)(props.pageCount)) {
+                pageCount = props.pageCount;
+            }
+            else if (!(0, td_pagination_const_1.isAbsent)(props.total)) {
+                pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.get()));
+            }
+            return pageCount;
+        });
+        const currentPageBridge = (0, signals_1.computed)({
+            get() {
+                return (0, td_pagination_const_1.isAbsent)(props.currentPage)
+                    ? innerCurrentPage.get()
+                    : props.currentPage;
+            },
+            set(v) {
+                let newCurrentPage = v;
+                if (v < 1) {
+                    newCurrentPage = 1;
+                }
+                else if (v > pageCountBridge.get()) {
+                    newCurrentPage = pageCountBridge.get();
+                }
+                if ((0, td_pagination_const_1.isAbsent)(props.currentPage)) {
+                    innerCurrentPage.set(newCurrentPage);
+                }
+                if (hasCurrentPageListener) {
+                    emit('update:current-page', newCurrentPage);
+                    emit('current-change', newCurrentPage);
+                }
+            },
+        });
+        (0, signals_1.watch)(pageCountBridge, (val) => {
+            if (currentPageBridge.get() > val)
+                currentPageBridge.set(val);
+        });
+        (0, signals_1.watch)(() => [currentPageBridge.get(), pageSizeBridge.get()], (value) => {
+            emit('change', ...value);
+        }, { flush: 'post' });
+        function handleCurrentChange(val) {
+            currentPageBridge.set(val);
+        }
+        function handleSizeChange(val) {
+            pageSizeBridge.set(val);
+            const newPageCount = pageCountBridge.get();
+            if (currentPageBridge.get() > newPageCount) {
+                currentPageBridge.set(newPageCount);
+            }
+        }
+        function prev() {
+            if (props.disabled)
+                return;
+            currentPageBridge.set(currentPageBridge.get() - 1);
+            emit('prev-click', currentPageBridge.get());
+        }
+        function next() {
+            if (props.disabled)
+                return;
+            currentPageBridge.set(currentPageBridge.get() + 1);
+            emit('next-click', currentPageBridge.get());
+        }
+        function addClass(element, cls) {
+            if (element) {
+                if (!element.props) {
+                    element.props = {};
+                }
+                element.props.class = [element.props.class, cls];
+            }
+        }
+        (0, framework_1.provide)(constants_1.tdPaginationKey, {
+            pageCount: pageCountBridge,
+            disabled: (0, signals_1.computed)(() => props.disabled),
+            currentPage: currentPageBridge,
+            changeEvent: handleCurrentChange,
+            handleSizeChange,
+        });
+        if (!assertValidUsage.get()) {
+            (0, utils_1.debugWarn)(componentName, t('el.pagination.deprecationWarning'));
+            return;
+        }
+        if (!props.layout)
+            return;
+        if (props.hideOnSinglePage && pageCountBridge.get() <= 1)
+            return;
+        const rootChildren = [];
+        const rightWrapperChildren = [];
+        const rightWrapperRoot = new framework_1.Div({
+            class: ns.e('rightwrapper'),
+            slot: rightWrapperChildren,
+        });
+        const TEMPLATE_MAP = {
+            prev: new prev_class_1.PaginationPrev({
+                disabled: props.disabled,
+                currentPage: currentPageBridge.get(),
+                prevText: props.prevText,
+                prevIcon: props.prevIcon,
+                events: {
+                    click: prev,
+                },
+            }),
+            jumper: new jumper_class_1.PaginationJumper({
+                size: _size.get(),
+            }),
+            pager: new pager_class_1.PaginationPager({
+                currentPage: currentPageBridge.get(),
+                pageCount: pageCountBridge.get(),
+                pagerCount: props.pagerCount,
+                disabled: props.disabled,
+                events: {
+                    change: (evt) => handleCurrentChange, // todo
+                },
+            }),
+            next: new next_class_1.PaginationNext({
+                disabled: props.disabled,
+                currentPage: currentPageBridge.get(),
+                pageCount: pageCountBridge.get(),
+                nextText: props.nextText,
+                nextIcon: props.nextIcon,
+                events: {
+                    click: next,
+                },
+            }),
+            sizes: new sizes_class_1.PaginationSizes({
+                pageSize: pageSizeBridge.get(),
+                pageSizes: props.pageSizes,
+                popperClass: props.popperClass,
+                disabled: props.disabled,
+                teleported: props.teleported,
+                size: _size.get(),
+                appendSizeTo: props.appendSizeTo,
+            }),
+            slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
+            total: new total_class_1.PaginationTotal({
+                total: (0, td_pagination_const_1.isAbsent)(props.total) ? 0 : props.total,
+            }),
+        };
+        const components = props.layout
+            .split(',')
+            .map((item) => item.trim());
+        let haveRightWrapper = false;
+        components.forEach((c) => {
+            if (c === '->') {
+                haveRightWrapper = true;
+                return;
+            }
+            if (!haveRightWrapper) {
+                rootChildren.push(TEMPLATE_MAP[c]);
+            }
+            else {
+                rightWrapperChildren.push(TEMPLATE_MAP[c]);
+            }
+        });
+        addClass(rootChildren[0], ns.is('first'));
+        addClass(rootChildren[rootChildren.length - 1], ns.is('last'));
+        if (haveRightWrapper && rightWrapperChildren.length > 0) {
+            addClass(rightWrapperChildren[0], ns.is('first'));
+            addClass(rightWrapperChildren[rightWrapperChildren.length - 1], ns.is('last'));
+            rootChildren.push(rightWrapperRoot);
+        }
+        this.addChild(new framework_1.Div({
+            class: [
+                ns.b(),
+                ns.is('background', props.background),
+                ns.m(_size.get()),
+            ],
+            slot: rootChildren,
+        }));
+    }
+}
+exports.TdPagination = TdPagination;

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

@@ -0,0 +1,17 @@
+import { PaginationProps } from './td-pagination.interface';
+/**
+ * It it user's responsibility to guarantee that the value of props.total... is number
+ * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)
+ * Otherwise we can reasonable infer that the corresponding field is absent
+ */
+export declare const isAbsent: (v: unknown) => v is undefined;
+export declare const paginationProps: PaginationProps;
+export declare const paginationEmits: {
+    'update:current-page': (val: number) => boolean;
+    'update:page-size': (val: number) => boolean;
+    'size-change': (val: number) => boolean;
+    change: (currentPage: number, pageSize: number) => boolean;
+    'current-change': (val: number) => boolean;
+    'prev-click': (val: number) => boolean;
+    'next-click': (val: number) => boolean;
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paginationEmits = exports.paginationProps = exports.isAbsent = void 0;
+const utils_1 = require("@type-dom/utils");
+const svgs_1 = require("@type-dom/svgs");
+/**
+ * It it user's responsibility to guarantee that the value of props.total... is number
+ * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)
+ * Otherwise we can reasonable infer that the corresponding field is absent
+ */
+const isAbsent = (v) => typeof v !== 'number';
+exports.isAbsent = isAbsent;
+exports.paginationProps = {
+    pagerCount: 7,
+    layout: ['prev', 'pager', 'next', 'jumper', '->', 'total'].join(', '),
+    pageSizes: [10, 20, 30, 40, 50, 100],
+    prevIcon: svgs_1.ElArrowLeftSvg,
+    nextIcon: svgs_1.ElArrowRightSvg,
+    teleported: true,
+};
+exports.paginationEmits = {
+    'update:current-page': (val) => (0, utils_1.isNumber)(val),
+    'update:page-size': (val) => (0, utils_1.isNumber)(val),
+    'size-change': (val) => (0, utils_1.isNumber)(val),
+    change: (currentPage, pageSize) => (0, utils_1.isNumber)(currentPage) && (0, utils_1.isNumber)(pageSize),
+    'current-change': (val) => (0, utils_1.isNumber)(val),
+    'prev-click': (val) => (0, utils_1.isNumber)(val),
+    'next-click': (val) => (0, utils_1.isNumber)(val),
+};

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

@@ -0,0 +1,102 @@
+import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
+import { paginationEmits } from './td-pagination.const';
+export interface ITdPagination extends ITypeFragment {
+    className: 'TdPagination';
+    props: PaginationProps;
+}
+export interface PaginationProps extends TypeFragmentProps {
+    /**
+     * @description options of item count per page
+     */
+    pageSize?: number;
+    /**
+     * @description default initial value of page size, not setting is the same as setting 10
+     */
+    defaultPageSize?: number;
+    /**
+     * @description total item count
+     */
+    total?: number;
+    /**
+     * @description total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required
+     */
+    pageCount?: number;
+    /**
+     * @description number of pagers. Pagination collapses when the total page count exceeds this value
+     */
+    pagerCount?: number;
+    /**
+     * @description current page number
+     */
+    currentPage?: number;
+    /**
+     * @description default initial value of current-page, not setting is the same as setting 1
+     */
+    defaultCurrentPage?: number;
+    /**
+     * @description layout of Pagination, elements separated with a comma
+     */
+    layout?: string;
+    /**
+     * @description item count of each page
+     *     default: () => mutable([10, 20, 30, 40, 50, 100] as const),
+     */
+    pageSizes?: number[];
+    /**
+     * @description custom class name for the page size Select's dropdown
+     *     default: '',
+     */
+    popperClass?: string;
+    /**
+     * @description text for the prev button
+     *     default: '',
+     */
+    prevText?: string;
+    /**
+     * @description icon for the prev button, higher priority of `prev-text`
+     *     default: () => ArrowLeft,
+     */
+    prevIcon: typeof TypeSvgSvg;
+    /**
+     * @description text for the next button
+     *     default: '',
+     */
+    nextText?: string;
+    /**
+     * @description icon for the next button, higher priority of `next-text`
+     *     default: () => ArrowRight,
+     */
+    nextIcon?: typeof TypeSvgSvg;
+    /**
+     * @description whether Pagination size is teleported to body
+     *     default: true,
+     */
+    teleported?: boolean;
+    /**
+     * @description whether to use small pagination
+     */
+    small?: boolean;
+    /**
+     * @description set page size
+     */
+    size?: ComponentSize;
+    /**
+     * @description whether the buttons have a background color
+     */
+    background?: boolean;
+    /**
+     * @description whether Pagination is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether to hide when there's only one page
+     */
+    hideOnSinglePage?: boolean;
+    /**
+     * @description which element the size dropdown appends to.
+     */
+    appendSizeTo?: string;
+}
+export type LayoutKey = 'prev' | 'pager' | 'next' | 'jumper' | '->' | 'total' | 'sizes' | 'slot';
+export type PaginationEmits = typeof paginationEmits;

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

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

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

@@ -0,0 +1 @@
+export declare const usePagination: () => import("./constants").TdPaginationContext;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagination = void 0;
+// import { inject } from 'vue'
+const framework_1 = require("@type-dom/framework");
+const constants_1 = require("./constants");
+const usePagination = () => (0, framework_1.inject)(constants_1.tdPaginationKey, {});
+exports.usePagination = usePagination;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ProgressProps } from './td-progress.interface';
+export declare class TdProgress extends TypeDiv {
+    className: 'TdProgress';
+    props: ProgressProps;
+    constructor(params?: ProgressProps);
+    setup(): void;
+}