@type-dom/ui 0.1.0 → 0.1.1

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageViewerEmits = exports.imageViewerProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.imageViewerProps = {
+    initialIndex: 0,
+    infinite: true,
+    closeOnPressEscape: true,
+    zoomRate: 1.2,
+    minScale: 0.2,
+    maxScale: 7,
+};
+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,9 +1,8 @@
-import { TdIcon } from '../../basic/td-icon/td-icon.class';
-import { ITypeElement, ITypeTransitionConfig } from '@type-dom/framework';
-export interface ITdImageViewer extends ITypeElement {
+import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdImageViewer extends ITypeFragment {
     className: 'TdImageViewer';
 }
-export interface ITdImageViewerConfig extends ITypeTransitionConfig {
+export interface ImageViewerProps extends TypeFragmentProps {
     /**
      * @description preview link list.
      *     default: () => mutable([] as const),
@@ -56,8 +55,8 @@ export interface ITdImageViewerConfig extends ITypeTransitionConfig {
      */
     crossorigin?: 'anonymous' | 'use-credentials' | '';
 }
-export type TdImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
-export interface TdImageViewerMode {
+export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+export interface ImageViewerMode {
     name: string;
-    icon: TdIcon;
+    icon: TypeSvgSvg;
 }

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

@@ -9,7 +9,7 @@ exports.$opIcon = {
     color: '#fff',
     // background-color: getCssVar('text-color', 'regular'),
     backgroundColor: var_1.$textColor.regular,
-    borderColor: '#fff'
+    borderColor: '#fff',
 };
 exports.$btn = {
     position: 'absolute',
@@ -21,7 +21,7 @@ exports.$btn = {
     opacity: 0.8,
     cursor: 'pointer',
     boxSizing: 'border-box',
-    userSelect: 'none'
+    userSelect: 'none',
 };
 exports.$canvas = {
     position: 'static',
@@ -30,7 +30,7 @@ exports.$canvas = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    userSelect: 'none'
+    userSelect: 'none',
 };
 exports.$actions = {
     left: '50%',
@@ -42,7 +42,7 @@ exports.$actions = {
     // background-color: getCssVar('text-color', 'regular'),
     backgroundColor: var_1.$textColor.regular,
     borderColor: '#fff',
-    borderRadius: '22px'
+    borderRadius: '22px',
 };
 exports.$actionsInner = {
     width: '100%',
@@ -52,7 +52,7 @@ exports.$actionsInner = {
     color: '#fff',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-around'
+    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);
@@ -63,5 +63,5 @@ exports.$mask = {
     top: 0,
     left: 0,
     opacity: 0.5,
-    background: '#000'
+    background: '#000',
 };

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

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

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

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

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

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

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

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

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

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

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

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

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