@type-dom/ui 0.0.3 → 0.0.5

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,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wheelHandler = void 0;
+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;
+    }
+}
+exports.wheelHandler = wheelHandler;

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;
+}