@type-dom/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,20 @@
+import { IStyle } from '@type-dom/css-type';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdImageViewer, ITdImageViewerConfig, TdImageViewerAction, TdImageViewerMode } from './td-image-viewer.interface';
+export declare class TdImageViewer extends UI<undefined> implements ITdImageViewer {
+    className: 'TdImageViewer';
+    props: ITdImageViewerConfig;
+    private isSingle;
+    private activeIndex?;
+    private transform;
+    private modes;
+    mode: TdImageViewerMode;
+    loading: boolean;
+    private transition;
+    private teleport;
+    constructor(params?: ITdImageViewerConfig);
+    get imgStyle(): IStyle<0 | (string & {}), string & {}>;
+    toggleMode(): void;
+    reset(): void;
+    handleActions(action: TdImageViewerAction, options?: {}): void;
+}

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

@@ -0,0 +1,261 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdImageViewer = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_image_viewer_style_1 = require("./td-image-viewer.style");
+class TdImageViewer extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        this.loading = false;
+        this.className = 'TdImageViewer';
+        this.transform = {
+            scale: 1,
+            deg: 0,
+            offsetX: 0,
+            offsetY: 0,
+            enableTransition: false
+        };
+        this.modes = {
+            CONTAIN: {
+                name: 'contain',
+                // icon:  markRaw(FullScreen),
+                icon: new td_icon_class_1.TdIcon({
+                    svgObj: new svgs_1.ElFullScreenSvg()
+                })
+            },
+            ORIGINAL: {
+                name: 'original',
+                // icon: markRaw(ScaleToOriginal),
+                icon: new td_icon_class_1.TdIcon({
+                    svgObj: new svgs_1.ElScaleToOriginalSvg()
+                })
+            }
+        };
+        this.mode = this.modes.CONTAIN;
+        this.transition = new framework_1.Transition();
+        this.teleport = new framework_1.Teleport({
+            to: document.body,
+        });
+        this.teleport.addChild(this.transition);
+        // this.mount(document.body);
+        // this.ctrl.addAttrName('wrapper');
+        this.transition.ctrl.addStyleObj({
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 2000
+        });
+        this.transition.addChildren(new framework_1.Div({
+            name: 'mask',
+            events: {
+                click: (evt, element) => {
+                    //
+                    element === null || element === void 0 ? void 0 : element.ctrl.hide();
+                }
+            }
+        }), 
+        // <!-- CLOSE -->
+        new framework_1.Span({
+            name: 'close',
+            styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), { 
+                //   close
+                top: '40px', right: '40px', width: '40px', height: '40px', fontSize: '40px' }),
+            events: {
+                click: (evt, element) => {
+                    element === null || element === void 0 ? void 0 : element.ctrl.hide();
+                }
+            },
+            childNodes: [
+                new td_icon_class_1.TdIcon({
+                    svgObj: new svgs_1.ElCloseSvg(),
+                    styleObj: {
+                        fontSize: 'inherit',
+                        cursor: 'pointer'
+                    }
+                })
+            ]
+        }));
+        const urlList = (params === null || params === void 0 ? void 0 : params.urlList) || [];
+        this.isSingle = urlList.length <= 1;
+        // <!-- ARROW -->
+        if (!this.isSingle) {
+            this.transition.addChildren(new framework_1.Span({
+                styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$prev),
+                events: {
+                    click: () => {
+                        //   todo prev
+                    }
+                },
+                childNodes: [
+                    new td_icon_class_1.TdIcon({
+                        svgObj: new svgs_1.ElArrowLeftSvg()
+                    })
+                ]
+            }), new framework_1.Span({
+                styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$next),
+                events: {
+                    click: () => {
+                        //   todo next
+                    }
+                },
+                childNodes: [
+                    new td_icon_class_1.TdIcon({
+                        svgObj: new svgs_1.ElArrowRightSvg()
+                    })
+                ]
+            }));
+        }
+        // <!-- ACTIONS -->
+        this.transition.addChild(new framework_1.Div({
+            styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$actions),
+            childNodes: [
+                new framework_1.Div({
+                    styleObj: td_image_viewer_style_1.$actionsInner,
+                    childNodes: [
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElZoomOutSvg(),
+                            events: {
+                                click: (evt, ele) => {
+                                    this.handleActions('zoomOut');
+                                }
+                            }
+                        }),
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElZoomInSvg(),
+                            events: {
+                                click: (evt, ele) => {
+                                    this.handleActions('zoomIn');
+                                }
+                            }
+                        }),
+                        new framework_1.I({}),
+                        new td_icon_class_1.TdIcon({
+                            // ？？？
+                            // svgObj: this.mode.icon,
+                            slot: this.mode.icon,
+                            events: {
+                                click: (evt, ele) => {
+                                    this.toggleMode();
+                                }
+                            }
+                        }),
+                        new framework_1.I({}),
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElRefreshLeftSvg(),
+                            events: {
+                                click: (evt, ele) => {
+                                    this.handleActions('anticlockwise');
+                                }
+                            }
+                        }),
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElRefreshRightSvg(),
+                            events: {
+                                click: (evt, ele) => {
+                                    this.handleActions('clockwise');
+                                }
+                            }
+                        })
+                    ]
+                })
+            ]
+        }));
+        // <!-- CANVAS -->
+        const imgList = [];
+        urlList.forEach((url, index) => {
+            imgList.push(new framework_1.Img({
+                attrObj: {
+                    src: url
+                },
+                styleObj: Object.assign({ display: index === this.activeIndex ? 'block' : 'none' }, this.imgStyle)
+            }));
+        });
+        this.transition.addChild(new framework_1.Div({
+            childNodes: imgList
+        }));
+        this.props = this.setParams(params);
+    }
+    get imgStyle() {
+        const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+        let translateX = offsetX / scale;
+        let translateY = offsetY / scale;
+        switch (deg % 360) {
+            case 90:
+            case -270:
+                [translateX, translateY] = [translateY, -translateX];
+                break;
+            case 180:
+            case -180:
+                [translateX, translateY] = [-translateX, -translateY];
+                break;
+            case 270:
+            case -90:
+                [translateX, translateY] = [-translateY, translateX];
+                break;
+        }
+        const style = {
+            transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+            transition: enableTransition ? 'transform .3s' : ''
+        };
+        if (this.mode.name === this.modes.CONTAIN.name) {
+            style.maxWidth = style.maxHeight = '100%';
+        }
+        return style;
+    }
+    toggleMode() {
+        if (this.loading)
+            return;
+        const modeNames = (0, utils_1.keysOf)(this.modes);
+        const modeValues = Object.values(this.modes);
+        const currentMode = this.mode.name;
+        const index = modeValues.findIndex((i) => i.name === currentMode);
+        const nextIndex = (index + 1) % modeNames.length;
+        this.mode = this.modes[modeNames[nextIndex]];
+        this.reset();
+    }
+    reset() {
+        this.transform = {
+            scale: 1,
+            deg: 0,
+            offsetX: 0,
+            offsetY: 0,
+            enableTransition: false
+        };
+    }
+    handleActions(action, options = {}) {
+        if (this.loading)
+            return;
+        // const { minScale, maxScale } = this.props;
+        const minScale = this.props.minScale || 0.2;
+        const maxScale = this.props.maxScale || 7;
+        const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: this.props.zoomRate || 1.2, rotateDeg: 90, enableTransition: true }, options);
+        switch (action) {
+            case 'zoomOut':
+                if (this.transform.scale > minScale) {
+                    this.transform.scale = Number.parseFloat((this.transform.scale / zoomRate).toFixed(3));
+                }
+                break;
+            case 'zoomIn':
+                if (this.transform.scale < maxScale) {
+                    this.transform.scale = Number.parseFloat((this.transform.scale * zoomRate).toFixed(3));
+                }
+                break;
+            case 'clockwise':
+                this.transform.deg += rotateDeg;
+                // emit('rotate', this.transform.deg)
+                break;
+            case 'anticlockwise':
+                this.transform.deg -= rotateDeg;
+                // emit('rotate', this.transform.deg)
+                break;
+        }
+        this.transform.enableTransition = enableTransition;
+    }
+}
+exports.TdImageViewer = TdImageViewer;

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

@@ -0,0 +1,63 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+export interface ITdImageViewer extends IUI {
+    className: 'TdImageViewer';
+}
+export interface ITdImageViewerConfig extends IUIConfig {
+    /**
+     * @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 set HTML attribute: crossorigin.
+     */
+    crossorigin?: 'anonymous' | 'use-credentials' | '';
+}
+export type TdImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+export interface TdImageViewerMode {
+    name: string;
+    icon: TdIcon;
+}

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

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

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

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

@@ -0,0 +1,67 @@
+"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/td-pagination.class.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,8 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdResult, ITdResultConfig } from './td-result.interface';
+export declare class TdResult extends UI implements ITdResult {
+    className: 'TdResult';
+    props: ITdResultConfig;
+    constructor(params?: ITdResultConfig);
+    resultIcon(params?: ITdResultConfig): import("@type-dom/framework").TypeSvgSvg;
+}

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdResult = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_result_style_1 = require("./td-result.style");
+const td_result_constant_1 = require("./td-result.constant");
+class TdResult extends ui_abstract_1.UI {
+    // private iconSlot?: SlotNode;
+    // private titleSlot?: SlotNode;
+    constructor(params) {
+        var _a, _b, _c, _d, _e, _f;
+        super(params);
+        this.className = 'TdResult';
+        this.ctrl.addAttrName('td-result');
+        this.ctrl.addStyleObj({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            textAlign: 'center',
+            boxSizing: 'border-box',
+            // padding: getCssVar('result-padding'),
+            padding: td_result_style_1.$result.padding
+        });
+        // this.iconSlot = new SlotNode('icon');
+        this.addChild(new framework_1.Div({
+            name: 'icon',
+            childNodes: [this.getSlotNode('icon')]
+        }));
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.icon) {
+        }
+        else {
+            const resultIcon = this.resultIcon(params);
+            this.getSlotNode('icon').addSlot(resultIcon);
+        }
+        if (((_b = params === null || params === void 0 ? void 0 : params.slots) === null || _b === void 0 ? void 0 : _b.title) || (params === null || params === void 0 ? void 0 : params.title)) {
+            // this.titleSlot = new SlotNode('title');
+            this.addChild(new framework_1.Div({
+                name: 'title',
+                styleObj: td_result_style_1.$titleStyle,
+                childNodes: [this.getSlotNode('title')]
+            }));
+            if ((_c = params.slots) === null || _c === void 0 ? void 0 : _c.title) {
+            }
+            else {
+                this.getSlotNode('title').addSlot(new framework_1.P({
+                    name: 'title',
+                    text: params.title,
+                    styleObj: td_result_style_1.$titlePStyle
+                }));
+            }
+        }
+        if (((_d = params === null || params === void 0 ? void 0 : params.slots) === null || _d === void 0 ? void 0 : _d.subTitle) || (params === null || params === void 0 ? void 0 : params.subTitle)) {
+            // const subTitleSlot = new SlotNode('sub-title');
+            this.addChild(new framework_1.Div({
+                name: 'sub-title',
+                styleObj: td_result_style_1.$subTitleStyle,
+                childNodes: [this.getSlotNode('subTitle')],
+            }));
+            if ((_e = params.slots) === null || _e === void 0 ? void 0 : _e.subTitle) {
+            }
+            else {
+                this.getSlotNode('subTitle').addSlot(new framework_1.P({
+                    name: 'sub-title',
+                    text: params.subTitle,
+                    styleObj: td_result_style_1.$subTitlePStyle
+                }));
+            }
+        }
+        if ((_f = params === null || params === void 0 ? void 0 : params.slots) === null || _f === void 0 ? void 0 : _f.extra) {
+            // const extraSlot = new SlotNode('extra');
+            this.addChild(new framework_1.Div({
+                styleObj: td_result_style_1.$extraStyle,
+                childNodes: [this.getSlotNode('extra')]
+            }));
+            this.getSlotNode('extra').addSlot(params.slots.extra);
+        }
+        this.props = this.setParams(params);
+    }
+    resultIcon(params) {
+        const icon = params === null || params === void 0 ? void 0 : params.icon;
+        const iconClass = icon && td_result_constant_1.IconMap[icon] ? td_result_constant_1.IconMap[icon] : 'icon-info';
+        return td_result_constant_1.IconComponentMap[iconClass] || td_result_constant_1.IconComponentMap['icon-info'];
+    }
+}
+exports.TdResult = TdResult;

package/src/components/data/td-result/td-result.constant.d.ts

@@ -0,0 +1,8 @@
+import { TypeSvgSvg } from '@type-dom/framework';
+export declare const IconMap: {
+    readonly success: "icon-success";
+    readonly warning: "icon-warning";
+    readonly error: "icon-error";
+    readonly info: "icon-info";
+};
+export declare const IconComponentMap: Record<(typeof IconMap)[keyof typeof IconMap], TypeSvgSvg>;

package/src/components/data/td-result/td-result.constant.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconComponentMap = exports.IconMap = void 0;
+const svgs_1 = require("@type-dom/svgs");
+const td_result_style_1 = require("./td-result.style");
+exports.IconMap = {
+    success: 'icon-success',
+    warning: 'icon-warning',
+    error: 'icon-error',
+    info: 'icon-info'
+};
+exports.IconComponentMap = {
+    [exports.IconMap.success]: new svgs_1.ElCircleCheckFilledSvg({
+        styleObj: td_result_style_1.$icon['success'],
+        attrObj: {
+            width: td_result_style_1.$result.iconFontSize,
+            height: td_result_style_1.$result.iconFontSize
+        }
+    }),
+    [exports.IconMap.warning]: new svgs_1.ElWarningFilledSvg({
+        styleObj: td_result_style_1.$icon['warning'],
+        attrObj: {
+            width: td_result_style_1.$result.iconFontSize,
+            height: td_result_style_1.$result.iconFontSize
+        }
+    }),
+    [exports.IconMap.error]: new svgs_1.ElCircleCloseFilledSvg({
+        styleObj: td_result_style_1.$icon['error'],
+        attrObj: {
+            width: td_result_style_1.$result.iconFontSize,
+            height: td_result_style_1.$result.iconFontSize
+        }
+    }),
+    [exports.IconMap.info]: new svgs_1.ElInfoFilledSvg({
+        styleObj: td_result_style_1.$icon['info'],
+        attrObj: {
+            width: td_result_style_1.$result.iconFontSize,
+            height: td_result_style_1.$result.iconFontSize
+        }
+    })
+};

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

@@ -0,0 +1,28 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeElement } from '@type-dom/framework';
+export interface ITdResult extends IUI {
+    className: 'TdResult';
+}
+export interface ITdResultConfig extends IUIConfig {
+    /**
+     * @description title of result
+     *     default: '',
+     */
+    title?: string;
+    /**
+     * @description sub title of result
+     *     default: '',
+     */
+    subTitle?: string;
+    /**
+     * @description icon type of result
+     *     default: 'info',
+     */
+    icon?: 'success' | 'warning' | 'info' | 'error';
+    slots?: {
+        title?: TypeElement;
+        subTitle?: TypeElement;
+        extra?: TypeElement;
+        icon?: TypeElement;
+    };
+}

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

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

package/src/components/data/td-result/td-result.style.d.ts

@@ -0,0 +1,16 @@
+import { IStyle } from '@type-dom/css-type';
+import { IType } from '../../../styles/var';
+export declare const $result: {
+    padding: string;
+    iconFontSize: string;
+    titleFontSize: string;
+    titleMarginTop: string;
+    subtitleMarginTop: string;
+    extraMarginTop: string;
+};
+export declare const $titleStyle: IStyle;
+export declare const $titlePStyle: IStyle;
+export declare const $subTitleStyle: IStyle;
+export declare const $subTitlePStyle: IStyle;
+export declare const $extraStyle: IStyle;
+export declare const $icon: Record<IType, IStyle>;