@type-dom/ui 0.0.4 → 0.0.6

package/src/components/data/td-empty/img-empty.class.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgEmpty = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_empty_style_1 = require("./td-empty.style");
+class ImgEmpty extends framework_1.TypeSvgSvg {
+    constructor(params) {
+        super();
+        this.className = 'ImgEmpty';
+        this.ctrl.addAttrObj({
+            name: 'image-empty',
+            viewBox: '0 0 79 86'
+        });
+        (params === null || params === void 0 ? void 0 : params.styleObj) && this.ctrl.addStyleObj(params.styleObj);
+        const id = 111;
+        this.addChild(new framework_1.SvgDefs({
+            childNodes: [
+                new framework_1.SvgLinearGradient({
+                    attrObj: {
+                        id: `linearGradient-1-` + id,
+                        x1: '38.8503086%',
+                        y1: '0%',
+                        x2: '61.1496914%',
+                        y2: '100%'
+                    },
+                    childNodes: [
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-1'],
+                                offset: '0%'
+                            }
+                        }),
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-4'],
+                                offset: '100%'
+                            }
+                        })
+                    ]
+                }),
+                new framework_1.SvgLinearGradient({
+                    attrObj: {
+                        id: `linearGradient-2-` + id,
+                        x1: '0%',
+                        y1: '9.5%',
+                        x2: '100%',
+                        y2: '90.5%'
+                    },
+                    childNodes: [
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-1'],
+                                offset: '0%'
+                            }
+                        }),
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-6'],
+                                offset: '100%'
+                            }
+                        })
+                    ]
+                }),
+                new framework_1.SvgRect({
+                    attrObj: {
+                        id: `path-3-` + id,
+                        x: 0,
+                        y: 0,
+                        width: 17,
+                        height: 36
+                    }
+                })
+            ]
+        }));
+        this.addChild(new framework_1.SvgG({
+            attrObj: {
+                id: 'Illustrations',
+                stroke: 'none',
+                strokeWidth: '1',
+                fill: 'none',
+                fillRule: 'evenodd'
+            },
+            childNodes: [
+                new framework_1.SvgG({
+                    attrObj: {
+                        id: 'B-type',
+                        transform: 'translate(-1268.000000, -535.000000)'
+                    },
+                    childNodes: [
+                        new framework_1.SvgG({
+                            attrObj: {
+                                id: 'Group-2',
+                                transform: 'translate(1268.000000, 535.000000)'
+                            },
+                            childNodes: [
+                                new framework_1.SvgPath({
+                                    attrObj: {
+                                        id: 'Oval-Copy-2',
+                                        d: 'M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z',
+                                        fill: td_empty_style_1.$empty['fill-color-3']
+                                    }
+                                }),
+                                new framework_1.SvgPolygon({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-14',
+                                        fill: td_empty_style_1.$empty['fill-color-7'],
+                                        transform: 'translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ',
+                                        points: '13 58 53 58 42 45 2 45'
+                                    }
+                                }),
+                                new framework_1.SvgG({
+                                    attrObj: {
+                                        id: 'Group-Copy',
+                                        transform: 'translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)'
+                                    },
+                                    childNodes: [
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-10',
+                                                fill: td_empty_style_1.$empty['fill-color-7'],
+                                                transform: 'translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ',
+                                                points: '2.84078316e-14 3 18 3 23 7 5 7'
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-11',
+                                                fill: td_empty_style_1.$empty['fill-color-5'],
+                                                points: '-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43'
+                                            }
+                                        }),
+                                        new framework_1.SvgRect({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-12',
+                                                fill: 'url(#linearGradient-1-' + id + ')',
+                                                transform: 'translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) ',
+                                                x: 38,
+                                                y: 7,
+                                                width: 17,
+                                                height: 36
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-13',
+                                                fill: td_empty_style_1.$empty['fill-color-2'],
+                                                transform: 'translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ',
+                                                points: '24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12'
+                                            }
+                                        })
+                                    ]
+                                }),
+                                new framework_1.SvgRect({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-15',
+                                        fill: 'url(#linearGradient-2-' + id + ')',
+                                        x: 13,
+                                        y: 45,
+                                        width: 40,
+                                        height: 36
+                                    }
+                                }),
+                                new framework_1.SvgG({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-17', transform: 'translate(53.000000, 45.000000)'
+                                    },
+                                    childNodes: [
+                                        new framework_1.SvgUse({
+                                            attrObj: {
+                                                id: 'Mask',
+                                                fill: td_empty_style_1.$empty['fill-color-8'],
+                                                transform: 'translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ',
+                                                xlinkHref: '#path-3-' + id
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy',
+                                                fill: td_empty_style_1.$empty['fill-color-9'],
+                                                mask: 'url(#mask-4-' + id + ')',
+                                                transform: 'translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ',
+                                                points: '7 0 24 0 20 18 7 16.5'
+                                            }
+                                        })
+                                    ]
+                                }),
+                                new framework_1.SvgPolygon({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-18',
+                                        fill: td_empty_style_1.$empty['fill-color-2'],
+                                        transform: 'translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ',
+                                        points: '62 45 79 45 70 58 53 58'
+                                    }
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        }));
+        // this.setParams(params);
+    }
+}
+exports.ImgEmpty = ImgEmpty;

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

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdEmpty, ITdEmptyConfig } from './td-empty.interface';
+export declare class TdEmpty extends UI implements ITdEmpty {
+    className: 'TdEmpty';
+    props: ITdEmptyConfig;
+    private image;
+    private description;
+    private bottom?;
+    constructor(params?: ITdEmptyConfig);
+    get emptyDescription(): string;
+    get imageStyle(): IStyle;
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdEmpty = void 0;
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const td_empty_style_1 = require("./td-empty.style");
+const img_empty_class_1 = require("./img-empty.class");
+class TdEmpty extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b;
+        super(params);
+        this.className = 'TdEmpty';
+        this.ctrl.addAttrName('td-empty');
+        this.ctrl.addStyleObj(td_empty_style_1.$emptyStyle);
+        this.image = new framework_1.Div({
+            name: 'image',
+            styleObj: td_empty_style_1.$emptyImageStyle
+        });
+        if (params === null || params === void 0 ? void 0 : params.imageSize) {
+            this.image.ctrl.addStyleObj(this.imageStyle);
+        }
+        this.addChild(this.image);
+        if (params === null || params === void 0 ? void 0 : params.image) {
+            this.image.addChild(new framework_1.Img({
+                styleObj: td_empty_style_1.$emptyImageImgStyle,
+                attrObj: {
+                    src: params.image,
+                },
+                events: {
+                    dragstart: () => {
+                        return false;
+                    }
+                }
+            }));
+        }
+        else {
+            const imageSlot = this.getSlotNode('image');
+            this.image.addChild(imageSlot);
+            if (!((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.image)) {
+                imageSlot.addSlot(new img_empty_class_1.ImgEmpty({
+                    styleObj: td_empty_style_1.$emptyImageSvgStyle,
+                }));
+            }
+        }
+        this.description = new framework_1.Div({
+            name: 'description',
+            styleObj: td_empty_style_1.$emptyDescriptionStyle
+        });
+        this.addChild(this.description);
+        if ((_b = params === null || params === void 0 ? void 0 : params.slots) === null || _b === void 0 ? void 0 : _b.description) {
+            this.description.slotChild(params.slots.description);
+        }
+        else {
+            this.description.addChild(new framework_1.P({
+                text: this.emptyDescription,
+                styleObj: td_empty_style_1.$emptyDescriptionPStyle,
+            }));
+        }
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.bottom = new framework_1.Div({
+                name: 'bottom',
+                styleObj: td_empty_style_1.$emptyBottomStyle,
+            });
+            this.addChild(this.bottom);
+            this.bottom.slotChild(params.slot);
+        }
+        this.props = this.setParams(params);
+    }
+    get emptyDescription() {
+        return this.props.description || 'No Data'; // || t('el.table.emptyText')
+    }
+    get imageStyle() {
+        return { width: (0, utils_1.addUnit)(this.props.imageSize) };
+    }
+}
+exports.TdEmpty = TdEmpty;

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

@@ -0,0 +1,25 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeElement } from '@type-dom/framework';
+export interface ITdEmpty extends IUI {
+    className: 'TdEmpty';
+}
+export interface ITdEmptyConfig extends IUIConfig {
+    /**
+     * @description image URL of empty
+     *     default: ''
+     */
+    image?: string;
+    /**
+     * @description image size (width) of empty
+     */
+    imageSize?: number;
+    /**
+     * @description description of empty
+     *     default: ''
+     */
+    description?: string;
+    slots?: {
+        image?: TypeElement | TypeElement[];
+        description?: TypeElement | TypeElement[];
+    };
+}

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

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

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

@@ -0,0 +1,24 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $empty: {
+    padding: string;
+    imageWidth: string;
+    descriptionMarginTop: string;
+    bottomMarginTop: string;
+    'fill-color-0': string;
+    'fill-color-1': string;
+    'fill-color-2': string;
+    'fill-color-3': string;
+    'fill-color-4': string;
+    'fill-color-5': string;
+    'fill-color-6': string;
+    'fill-color-7': string;
+    'fill-color-8': string;
+    'fill-color-9': string;
+};
+export declare const $emptyStyle: IStyle;
+export declare const $emptyImageStyle: IStyle;
+export declare const $emptyImageImgStyle: IStyle;
+export declare const $emptyImageSvgStyle: IStyle;
+export declare const $emptyDescriptionStyle: IStyle;
+export declare const $emptyDescriptionPStyle: IStyle;
+export declare const $emptyBottomStyle: IStyle;

package/src/components/data/td-empty/td-empty.style.js

@@ -0,0 +1,65 @@
+"use strict";
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$emptyBottomStyle = exports.$emptyDescriptionPStyle = exports.$emptyDescriptionStyle = exports.$emptyImageSvgStyle = exports.$emptyImageImgStyle = exports.$emptyImageStyle = exports.$emptyStyle = exports.$empty = void 0;
+const var_1 = require("../../../styles/var");
+exports.$empty = {
+    padding: '40px 0',
+    imageWidth: '160px',
+    descriptionMarginTop: '20px',
+    bottomMarginTop: '20px',
+    'fill-color-0': var_1.$colorWhite,
+    'fill-color-1': '#fcfcfd',
+    'fill-color-2': '#f8f9fb',
+    'fill-color-3': '#f7f8fc',
+    'fill-color-4': '#eeeff3',
+    'fill-color-5': '#edeef2',
+    'fill-color-6': '#e9ebef',
+    'fill-color-7': '#e5e7e9',
+    'fill-color-8': '#e0e3e9',
+    'fill-color-9': '#d5d7de',
+};
+exports.$emptyStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    textAlign: 'center',
+    boxSizing: 'border-box',
+    padding: exports.$empty.padding,
+};
+exports.$emptyImageStyle = {
+    // width: getCssVar('empty-image-width');
+    width: exports.$empty.imageWidth,
+};
+exports.$emptyImageImgStyle = {
+    userSelect: 'none',
+    width: '100%',
+    height: '100%',
+    verticalAlign: 'top',
+    objectFit: 'contain',
+};
+exports.$emptyImageSvgStyle = {
+    // color: getCssVar('svg-monochrome-grey'),
+    color: var_1.$svgMonochromeGrey,
+    fill: 'currentColor',
+    width: '100%',
+    height: '100%',
+    verticalAlign: 'top',
+};
+exports.$emptyDescriptionStyle = {
+    // marginTop: getCssVar('empty-description-margin-top');
+    marginTop: exports.$empty.descriptionMarginTop,
+};
+exports.$emptyDescriptionPStyle = {
+    margin: 0,
+    // font-size: getCssVar('font-size', 'base');
+    fontSize: var_1.$fontSizes.base,
+    // color: getCssVar('text-color', 'secondary');
+    color: var_1.$textColor.secondary,
+};
+exports.$emptyBottomStyle = {
+    // margin-top: getCssVar('empty-bottom-margin-top');
+    marginTop: exports.$empty.bottomMarginTop,
+};

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

@@ -0,0 +1,16 @@
+import { SlotNode } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdImage, ITdImageConfig } from './td-image.interface';
+export declare class TdImage extends UI implements ITdImage {
+    className: 'TdImage';
+    props: ITdImageConfig;
+    private img?;
+    private hasLoadError;
+    private errorSlot?;
+    placeholderSlot?: SlotNode;
+    viewerSlot?: SlotNode;
+    constructor(params?: ITdImageConfig);
+    setup(): void;
+    setSrc(src: string): void;
+    handleError(e: Event): void;
+}

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdImage = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_image_style_1 = require("./td-image.style");
+class TdImage extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdImage';
+        this.ctrl.addAttrName('td-image');
+        this.ctrl.addAttrObj({
+            ref: 'container'
+        });
+        this.ctrl.addStyleObj({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            textAlign: 'center',
+            overflow: 'hidden',
+            // color: getCssVar('image', 'text-color'),
+            color: td_image_style_1.$image.textColor,
+            // background: getCssVar('image', 'bg-color'),
+            background: td_image_style_1.$image.bgColor,
+            // width: getCssVar('image', 'size'),
+            width: td_image_style_1.$size.width,
+            // height: getCssVar('image', 'size'),
+            height: td_image_style_1.$size.height,
+            // font-size: getCssVar('image', 'text-size'),
+            fontSize: td_image_style_1.$image.textSize
+        });
+        this.hasLoadError = false;
+        // todo preview
+        this.props = this.setParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const props = this.props;
+        if (this.hasLoadError) {
+            this.errorSlot = new framework_1.SlotNode('error');
+            this.addChild(this.errorSlot);
+            if ((_a = props === null || props === void 0 ? void 0 : props.slots) === null || _a === void 0 ? void 0 : _a.error) {
+                this.errorSlot.addSlot(props.slots.error);
+            }
+            else {
+                this.errorSlot.addSlot(new framework_1.Div({
+                    name: 'error', // t('el.image.error')
+                    text: 'error',
+                }));
+            }
+        }
+        else {
+            //   todo
+        }
+        if ((props === null || props === void 0 ? void 0 : props.src) && !this.hasLoadError) {
+            this.img = new framework_1.Img({
+                name: 'image',
+                styleObj: {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%'
+                },
+                attrObj: {
+                    src: props.src
+                }
+            });
+            this.addChild(this.img);
+        }
+        else {
+            if (props === null || props === void 0 ? void 0 : props.slot) {
+                this.slotChild(props.slot);
+            }
+        }
+        const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
+        (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+            objectFit: fit
+        });
+        super.setParams(props);
+    }
+    // todo 监听 src 改变
+    setSrc(src) {
+        if (this.props.src) {
+            this.props.src = src;
+        }
+        if (this.props.src !== src) {
+            this.hasLoadError = false;
+        }
+    }
+    handleError(e) {
+        this.hasLoadError = true;
+        // emit('error', e)
+    }
+}
+exports.TdImage = TdImage;

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

@@ -0,0 +1,78 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdImage extends IUI {
+    className: 'TdImage';
+}
+export interface ITdImageConfig extends IUIConfig {
+    /**
+     * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.
+     */
+    hideOnClickModal?: boolean;
+    /**
+     * @description image source, same as native.
+     *     default: '',
+     */
+    src?: string;
+    /**
+     * @description indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+     *     default: '',
+     */
+    fit?: '' | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * @description Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * @description whether to use lazy load.
+     */
+    lazy?: boolean;
+    /**
+     * @description the container to add scroll listener when using lazy load.
+     */
+    scrollContainer?: HTMLElement;
+    /**
+     * @description allow big image preview.
+     */
+    previewSrcList?: string[];
+    /**
+     * @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.
+     */
+    previewTeleported?: boolean;
+    /**
+     * @description set image preview z-index.
+     */
+    zIndex?: number;
+    /**
+     * @description initial preview image index, less than the length of `url-list`.
+     *     default: 0,
+     */
+    initialIndex?: number;
+    /**
+     * @description whether the viewer preview is infinite.
+     *     default: true,
+     */
+    infinite?: 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' | '';
+}

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

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

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

@@ -0,0 +1,11 @@
+export declare const $image: {
+    textColor: string;
+    bgColor: string;
+    textSize: string;
+    iconSize: string;
+    borderRadius: string;
+};
+export declare const $size: {
+    width: string;
+    height: string;
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$size = exports.$image = void 0;
+const var_1 = require("../../../styles/var");
+exports.$image = {
+    // 'text-color': getCssVar('color-white'),
+    textColor: var_1.$colorWhite,
+    // 'bg-color': getCssVar('text-color', 'disabled'),
+    bgColor: var_1.$textColor.disabled,
+    textSize: '14px',
+    iconSize: '18px',
+    // 'border-radius': getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base
+};
+exports.$size = {
+    width: '100%',
+    height: '100%'
+};

package/src/components/data/td-image/util.d.ts

@@ -0,0 +1 @@
+export declare function wheelHandler(e: WheelEvent): boolean;

package/src/components/data/td-image/util.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wheelHandler = wheelHandler;
+function wheelHandler(e) {
+    if (!e.ctrlKey)
+        return false;
+    if (e.deltaY < 0) {
+        e.preventDefault();
+        return false;
+    }
+    else if (e.deltaY > 0) {
+        e.preventDefault();
+        return false;
+    }
+    else {
+        return false;
+    }
+}