@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,76 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdEmpty = void 0;
-const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const td_empty_style_1 = require("./td-empty.style");
+const td_empty_const_1 = require("./td-empty.const");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
 const img_empty_class_1 = require("./img-empty.class");
+require("./style/index");
 class TdEmpty extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b;
         super();
         this.className = 'TdEmpty';
         this.attr.addName('td-empty');
-        this.style.addObj(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.style.addObj(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.assignProps(td_empty_const_1.emptyProps);
         this.props = this.useParams(params);
     }
-    get emptyDescription() {
-        return this.props.description || 'No Data'; // || t('el.table.emptyText')
-    }
-    get imageStyle() {
-        return { width: (0, utils_1.addUnit)(this.props.imageSize) };
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = this.props;
+        // const { t } = useLocale()
+        const ns = (0, use_namespace_1.useNamespace)('empty');
+        const emptyDescription = (0, signals_1.computed)(() => props.description // todo || t('el.table.emptyText')
+        );
+        const imageStyle = (0, signals_1.computed)(() => ({
+            width: (0, utils_1.addUnit)(props.imageSize),
+        }));
+        this.attr.addClass(ns.b());
+        this.addChild(new framework_1.Div({
+            class: ns.e('image'),
+            styleObj: imageStyle,
+            slot: props.image
+                ? new framework_1.Img({
+                    attrObj: {
+                        src: props.image,
+                    },
+                    events: {
+                        dragstart: () => false,
+                    },
+                })
+                : (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.image) !== null && _b !== void 0 ? _b : new img_empty_class_1.ImgEmpty(),
+        }));
+        this.addChild(new framework_1.Div({
+            class: ns.e('description'),
+            slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.description) !== null && _d !== void 0 ? _d : new framework_1.P({ slot: emptyDescription }),
+        }));
+        if (props.slot || ((_e = props.slots) === null || _e === void 0 ? void 0 : _e.default)) {
+            this.addChild(new framework_1.Div({
+                class: ns.e('bottom'),
+                slot: props.slot || ((_f = props.slots) === null || _f === void 0 ? void 0 : _f.default),
+            }));
+        }
     }
 }
 exports.TdEmpty = TdEmpty;

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

@@ -0,0 +1,2 @@
+import { EmptyProps } from './td-empty.interface';
+export declare const emptyProps: EmptyProps;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emptyProps = void 0;
+exports.emptyProps = {
+    image: '',
+    description: '',
+};

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

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps, TypeElement } from '@type-dom/framework';
 export interface ITdEmpty extends ITypeDiv {
     className: 'TdEmpty';
 }
-export interface ITdEmptyConfig extends ITypeConfig {
+export interface EmptyProps extends TypeDivProps {
     /**
      * @description image URL of empty
      *     default: ''
@@ -18,6 +18,7 @@ export interface ITdEmptyConfig extends ITypeConfig {
      */
     description?: string;
     slots?: {
+        default?: TypeElement | TypeElement[];
         image?: TypeElement | TypeElement[];
         description?: TypeElement | TypeElement[];
     };

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

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

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

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

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

@@ -0,0 +1,3 @@
+import '../../../base/style';
+import '../../../../theme-chalk/image.scss';
+import '../../td-image-viewer/style';

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

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

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

@@ -1,15 +1,10 @@
-import { SlotNode, TypeDiv } from '@type-dom/framework';
-import { ITdImage, ITdImageConfig } from './td-image.interface';
+import { TypeDiv } from '@type-dom/framework';
+import { ITdImage, ImageProps } from './td-image.interface';
+import './style/index';
 export declare class TdImage extends TypeDiv implements ITdImage {
     className: 'TdImage';
-    props: ITdImageConfig;
-    private img?;
-    private hasLoadError;
-    private errorSlot?;
-    placeholderSlot?: SlotNode;
-    viewerSlot?: SlotNode;
-    constructor(params?: ITdImageConfig);
+    props: ImageProps;
+    showPreview?: () => void;
+    constructor(params?: ImageProps);
     setup(): void;
-    setSrc(src: string): void;
-    handleError(e: Event): void;
 }

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

@@ -1,77 +1,332 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdImage = void 0;
+const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
-const td_image_style_1 = require("./td-image.style");
+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_image_const_1 = require("./td-image.const");
+const utils_1 = require("@type-dom/utils");
+const hooks_1 = require("../../../hooks");
+const td_image_viewer_class_1 = require("../td-image-viewer/td-image-viewer.class");
+require("./style/index");
 class TdImage extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdImage';
         this.attr.addObj({
             name: 'td-image',
-            ref: 'container'
+            ref: 'container',
         });
-        this.style.addObj(td_image_style_1.$imageStyle);
-        this.hasLoadError = false;
-        // todo preview
+        this.addEmits(td_image_const_1.imageEmits);
+        this.assignProps(td_image_const_1.imageProps);
         this.props = this.useParams(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);
+        const emit = this.emit;
+        let prevOverflow = '';
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('image');
+        const rawAttrs = (0, framework_1.useAttrs)();
+        // todo
+        // const containerAttrs = computed(() => {
+        //   return fromPairs(
+        //     Object.entries(rawAttrs!).filter(
+        //       ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)
+        //     )
+        //   );
+        // });
+        const imgAttrs = (0, hooks_1.useAttrs)({
+            excludeListeners: true,
+            // excludeKeys: computed<string[]>(() => {
+            //   return Object.keys(containerAttrs.get());
+            // })
+        });
+        const imageSrc = (0, signals_1.signal)();
+        const hasLoadError = (0, signals_1.signal)(false);
+        const isLoading = (0, signals_1.signal)(true);
+        const showViewer = (0, signals_1.signal)(false);
+        const container = (0, signals_1.signal)();
+        const _scrollContainer = (0, signals_1.signal)();
+        const supportLoading = utils_1.isClient && 'loading' in HTMLImageElement.prototype;
+        let stopScrollListener;
+        let stopWheelListener;
+        const imageKls = (0, signals_1.computed)(() => [
+            ns.e('inner'),
+            preview.get() && ns.e('preview'),
+            isLoading.get() && ns.is('loading'), // todo 不会消除
+        ]);
+        const imageStyle = (0, signals_1.computed)(() => {
+            const { fit } = props;
+            if (utils_1.isClient && fit) {
+                return { objectFit: fit };
             }
-            else {
-                this.errorSlot.addSlot(new framework_1.Div({
-                    name: 'error', // t('el.image.error')
-                    text: 'error',
-                }));
+            return {};
+        });
+        const preview = (0, signals_1.computed)(() => {
+            const { previewSrcList } = props;
+            return (0, utils_1.isArray)(previewSrcList) && previewSrcList.length > 0;
+        });
+        const imageIndex = (0, signals_1.computed)(() => {
+            const { previewSrcList, initialIndex } = props;
+            let previewIndex = initialIndex;
+            if (previewSrcList && initialIndex) {
+                if (initialIndex > previewSrcList.length - 1) {
+                    previewIndex = 0;
+                }
+            }
+            return previewIndex;
+        });
+        const isManual = (0, signals_1.computed)(() => {
+            if (props.loading === 'eager') {
+                return false;
+            }
+            return (!supportLoading && props.loading === 'lazy') || props.lazy;
+        });
+        const loadImage = () => {
+            // console.warn('loadImage . ');
+            if (!utils_1.isClient) {
+                return;
             }
+            // reset status
+            isLoading.set(true);
+            hasLoadError.set(false);
+            imageSrc.set(props.src);
+        };
+        function handleLoad(event) {
+            // console.warn('td-image handleLoad. ');
+            isLoading.set(false);
+            imageKls.get();
+            hasLoadError.set(false);
+            emit('load', event);
         }
-        else {
-            //   todo
+        function handleError(event) {
+            // console.error('td-image handleError . ')
+            isLoading.set(false);
+            hasLoadError.set(true);
+            emit('error', event);
         }
-        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
+        function handleLazyLoad() {
+            if ((0, utils_1.isInContainer)(container.get(), _scrollContainer.get())) {
+                loadImage();
+                removeLazyLoadListener();
+            }
+        }
+        const lazyLoadHandler = (0, framework_1.useThrottleFn)(handleLazyLoad, 200, true);
+        function addLazyLoadListener() {
+            return tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if (!utils_1.isClient)
+                    return;
+                yield (0, framework_1.nextTick)();
+                const { scrollContainer } = props;
+                if ((0, utils_1.isElement)(scrollContainer)) {
+                    _scrollContainer.set(scrollContainer);
+                }
+                else if ((0, utils_1.isString)(scrollContainer) && scrollContainer !== '') {
+                    _scrollContainer.set((_a = document.querySelector(scrollContainer)) !== null && _a !== void 0 ? _a : undefined);
+                }
+                else if (container.get()) {
+                    _scrollContainer.set((0, utils_1.getScrollContainer)(container.get()));
+                }
+                if (_scrollContainer.get()) {
+                    stopScrollListener = (0, framework_1.useEventListener)(_scrollContainer, 'scroll', lazyLoadHandler);
+                    setTimeout(() => handleLazyLoad(), 100);
                 }
             });
-            this.addChild(this.img);
         }
-        else {
-            if (props === null || props === void 0 ? void 0 : props.slot) {
-                this.slotChild(props.slot);
+        function removeLazyLoadListener() {
+            if (!utils_1.isClient || !_scrollContainer.get() || !lazyLoadHandler)
+                return;
+            stopScrollListener === null || stopScrollListener === void 0 ? void 0 : stopScrollListener();
+            _scrollContainer.set(undefined);
+        }
+        function wheelHandler(e) {
+            if (!e.ctrlKey)
+                return;
+            if (e.deltaY < 0) {
+                e.preventDefault();
+                return false;
+            }
+            else if (e.deltaY > 0) {
+                e.preventDefault();
+                return false;
             }
+            return false;
         }
-        const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
-        (_b = this.img) === null || _b === void 0 ? void 0 : _b.style.addObj({
-            objectFit: fit
-        });
-        this.useParams(props);
-    }
-    // todo 监听 src 改变
-    setSrc(src) {
-        if (this.props.src) {
-            this.props.src = src;
+        function clickHandler() {
+            // don't show viewer when preview is false
+            console.error('clickHandler . ');
+            if (!preview.get())
+                return;
+            stopWheelListener = (0, framework_1.useEventListener)('wheel', wheelHandler, {
+                passive: false,
+            });
+            // prevent body scroll
+            prevOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            showViewer.set(true);
+            emit('show');
         }
-        if (this.props.src !== src) {
-            this.hasLoadError = false;
+        function closeViewer() {
+            stopWheelListener === null || stopWheelListener === void 0 ? void 0 : stopWheelListener();
+            document.body.style.overflow = prevOverflow;
+            showViewer.set(false);
+            emit('close');
         }
-    }
-    handleError(e) {
-        this.hasLoadError = true;
-        // emit('error', e)
+        function switchViewer(val) {
+            emit('switch', val);
+        }
+        (0, signals_1.watch)(() => props.src, () => {
+            // console.warn('watch props.src is ', props.src);
+            if (isManual.get()) {
+                console.warn('watch isManual props.src is ', props.src);
+                // reset status
+                isLoading.set(true);
+                hasLoadError.set(false);
+                removeLazyLoadListener();
+                addLazyLoadListener();
+            }
+            else {
+                loadImage();
+            }
+        }
+        // { immediate: true }
+        );
+        (0, framework_1.onMounted)(() => {
+            if (isManual.get()) {
+                addLazyLoadListener();
+            }
+            else {
+                loadImage();
+            }
+        });
+        (0, framework_1.defineExpose)({
+            /** @description manually open preview */
+            showPreview: clickHandler,
+        });
+        this.assignProps({
+            refDom: container,
+            // v-bind="containerAttrs" todo
+            attrObj: {
+                class: ns.b(), // todo [ns.b(), $attrs.class]
+            },
+        });
+        // this.addChild(
+        //   new Fragment({
+        //     slot: computed(() => {
+        //       if (hasLoadError.get()) {
+        //         return props.slots?.error ?? new Div({
+        //           class: ns.e('error'),
+        //           slot: t('el.image.error'),
+        //         })
+        //       } else {
+        //         return [
+        //           new Img({
+        //             // vIf: computed(() => imageSrc.get() !== undefined),
+        //             // loading: props.loading, // todo
+        //             attrObj: {
+        //               // ...imgAttrs.get(), // v-bind imgAttrs
+        //               src: imageSrc.get() ?? "", // must has src. other then trigger events ,eg. load error
+        //               class: imageKls,
+        //               crossorigin: props.crossorigin,
+        //             },
+        //             styleObj: imageStyle,
+        //             events: {
+        //               click: clickHandler,
+        //               load: handleLoad,
+        //               error: handleError,
+        //             }
+        //           }),
+        //           new Div({
+        //             vIf: isLoading,
+        //             class: ns.e('wrapper'),
+        //             slot: props.slots?.placeholder ?? new Div({
+        //               class: ns.e('placeholder'),
+        //             })
+        //           }),
+        //         ]
+        //       }
+        //     })
+        //   }));
+        // todo preview has error
+        const slot = (0, signals_1.computed)(() => {
+            var _a, _b, _c, _d, _e;
+            let els = [];
+            if (hasLoadError.get()) {
+                // console.warn('hasLoadError.get() is ', hasLoadError.get());
+                if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.error) {
+                    els = props.slots.error;
+                }
+                else {
+                    els = new framework_1.Div({
+                        class: ns.e('error'),
+                        slot: t('el.image.error'),
+                    });
+                }
+            }
+            else {
+                // if (imageSrc.get()) {
+                els.push(new framework_1.Img({
+                    // vIf: computed(() => imageSrc.get() !== undefined),
+                    // loading: props.loading, // todo
+                    attrObj: {
+                        // ...imgAttrs.get(), // v-bind imgAttrs
+                        src: (_b = imageSrc.get()) !== null && _b !== void 0 ? _b : '', // must has src. other then trigger events ,eg. load error
+                        class: imageKls,
+                        crossorigin: props.crossorigin,
+                    },
+                    styleObj: imageStyle,
+                    events: {
+                        click: clickHandler,
+                        load: handleLoad,
+                        error: handleError,
+                    },
+                }));
+                // }
+                if (isLoading.get()) {
+                    els.push(new framework_1.Div({
+                        class: ns.e('wrapper'),
+                        slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.placeholder) !== null && _d !== void 0 ? _d : new framework_1.Div({
+                            class: ns.e('placeholder'),
+                        }),
+                    }));
+                    if (preview.get()) {
+                        console.warn('preview.get() is ', true);
+                        els.push(new td_image_viewer_class_1.TdImageViewer({
+                            vIf: showViewer,
+                            zoomRate: props.zoomRate,
+                            initialIndex: imageIndex.get(),
+                            infinite: props.infinite,
+                            minScale: props.minScale,
+                            urlList: props.previewSrcList,
+                            hideOnClickModal: props.hideOnClickModal,
+                            teleported: props.previewTeleported,
+                            closeOnPressEscape: props.closeOnPressEscape,
+                            attrObj: {
+                                zIndex: props.zIndex,
+                                crossorigin: props.crossorigin,
+                            },
+                            emits: {
+                                close: closeViewer,
+                                switch: switchViewer,
+                            },
+                            slot: ((_e = props.slots) === null || _e === void 0 ? void 0 : _e.viewer)
+                                ? new framework_1.Div({
+                                    slot: props.slots.viewer,
+                                })
+                                : undefined,
+                        }));
+                    }
+                }
+            }
+            return els;
+        });
+        // todo 与上面的 slotChildren 方法重叠了。 响应式会清空所有子节点。
+        // console.warn('then slotChildren slot, slot is ', slot);
+        this.slotChildren(slot); // todo slotChildren方法待完善 会清空加载的图片
     }
 }
 exports.TdImage = TdImage;

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

@@ -0,0 +1,9 @@
+import { ImageProps } from './td-image.interface';
+export declare const imageProps: ImageProps;
+export declare const imageEmits: {
+    load: (evt: Event) => boolean;
+    error: (evt: Event) => boolean;
+    switch: (val: number) => boolean;
+    close: () => boolean;
+    show: () => boolean;
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageEmits = exports.imageProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.imageProps = {
+    // src: '',
+    // fit: '',
+    initialIndex: 0,
+    infinite: true,
+    closeOnPressEscape: true,
+    zoomRate: 1.2,
+    minScale: 0.2,
+    maxScale: 7,
+};
+exports.imageEmits = {
+    load: (evt) => evt instanceof Event,
+    error: (evt) => evt instanceof Event,
+    switch: (val) => (0, utils_1.isNumber)(val),
+    close: () => true,
+    show: () => true,
+};

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

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdImage extends ITypeDiv {
     className: 'TdImage';
 }
-export interface ITdImageConfig extends ITypeConfig {
+export interface ImageProps extends TypeDivProps {
     /**
      * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.
      */

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

@@ -10,11 +10,11 @@ exports.$image = {
     textSize: '14px',
     iconSize: '18px',
     // 'border-radius': getCssVar('border-radius-base'),
-    borderRadius: var_1.$borderRadius.base
+    borderRadius: var_1.$borderRadius.base,
 };
 exports.$size = {
     width: '100%',
-    height: '100%'
+    height: '100%',
 };
 exports.$imageStyle = {
     display: 'inline-flex',
@@ -32,5 +32,5 @@ exports.$imageStyle = {
     // height: getCssVar('image', 'size'),
     height: exports.$size.height,
     // font-size: getCssVar('image', 'text-size'),
-    fontSize: exports.$image.textSize
+    fontSize: exports.$image.textSize,
 };

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

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

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

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

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

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