@type-dom/ui 0.1.1 → 0.1.2

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

@@ -4,11 +4,11 @@ exports.TdImage = void 0;
 const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
 const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_attrs_1 = require("../../../hooks/use-attrs");
 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 {
@@ -24,9 +24,9 @@ class TdImage extends framework_1.TypeDiv {
         this.props = this.useParams(params);
     }
     setup() {
+        var _a;
         const props = this.props;
         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)();
@@ -34,11 +34,11 @@ class TdImage extends framework_1.TypeDiv {
         // const containerAttrs = computed(() => {
         //   return fromPairs(
         //     Object.entries(rawAttrs!).filter(
-        //       ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)
+        //       ([key]) => /^(data-|on[A-Z])/i.test-dts(key) || ['id', 'style'].includes(key)
         //     )
         //   );
         // });
-        const imgAttrs = (0, hooks_1.useAttrs)({
+        const imgAttrs = (0, use_attrs_1.useAttrs)({
             excludeListeners: true,
             // excludeKeys: computed<string[]>(() => {
             //   return Object.keys(containerAttrs.get());
@@ -52,7 +52,6 @@ class TdImage extends framework_1.TypeDiv {
         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'),
@@ -93,6 +92,7 @@ class TdImage extends framework_1.TypeDiv {
             // reset status
             isLoading.set(true);
             hasLoadError.set(false);
+            // console.warn('props.src is ', props.src);
             imageSrc.set(props.src);
         };
         function handleLoad(event) {
@@ -143,46 +143,26 @@ class TdImage extends framework_1.TypeDiv {
             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;
-        }
         function clickHandler() {
             // don't show viewer when preview is false
-            console.error('clickHandler . ');
+            // 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');
         }
         function closeViewer() {
-            stopWheelListener === null || stopWheelListener === void 0 ? void 0 : stopWheelListener();
-            document.body.style.overflow = prevOverflow;
             showViewer.set(false);
             emit('close');
         }
         function switchViewer(val) {
             emit('switch', val);
         }
-        (0, signals_1.watch)(() => props.src, () => {
-            // console.warn('watch props.src is ', props.src);
+        // () => props.src  这样也能监听到 props.src 赋值的。
+        (0, signals_1.watch)(() => props.src, (newSrc, oldSrc) => {
+            // console.warn('watch props.src is ', newSrc, oldSrc);
             if (isManual.get()) {
-                console.warn('watch isManual props.src is ', props.src);
+                // console.warn('watch isManual props.src is ', newSrc);
                 // reset status
                 isLoading.set(true);
                 hasLoadError.set(false);
@@ -192,10 +172,9 @@ class TdImage extends framework_1.TypeDiv {
             else {
                 loadImage();
             }
-        }
-        // { immediate: true }
-        );
+        });
         (0, framework_1.onMounted)(() => {
+            // console.warn('onMounted . ');
             if (isManual.get()) {
                 addLazyLoadListener();
             }
@@ -203,10 +182,11 @@ class TdImage extends framework_1.TypeDiv {
                 loadImage();
             }
         });
-        (0, framework_1.defineExpose)({
-            /** @description manually open preview */
-            showPreview: clickHandler,
-        });
+        this.showPreview = clickHandler;
+        // defineExpose({
+        //   /** @description manually open preview */
+        //   showPreview: clickHandler,
+        // });
         this.assignProps({
             refDom: container,
             // v-bind="containerAttrs" todo
@@ -214,119 +194,89 @@ class TdImage extends framework_1.TypeDiv {
                 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({
+        this.addChild(new framework_1.Fragment({
+            slot: (0, signals_1.computed)(() => {
+                var _a, _b, _c, _d, _e, _f;
+                if (hasLoadError.get()) {
+                    // console.warn('hasLoadError.get() is ', hasLoadError.get());
+                    return (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.error) !== null && _b !== void 0 ? _b : 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,
+                else {
+                    return [
+                        new framework_1.Img({
+                            vIf: imageSrc.get(),
+                            class: imageKls,
                             attrObj: {
-                                zIndex: props.zIndex,
+                                loading: props.loading, // todo
+                                // ...imgAttrs.get(), // v-bind imgAttrs
+                                src: (_c = imageSrc.get()) !== null && _c !== void 0 ? _c : '', // must has src. other then trigger events ,eg. load error
                                 crossorigin: props.crossorigin,
+                                alt: (_d = props.name) !== null && _d !== void 0 ? _d : 'image'
                             },
-                            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,
-                        }));
-                    }
+                            styleObj: imageStyle,
+                            events: {
+                                click: clickHandler,
+                                load: handleLoad,
+                                error: handleError,
+                            }
+                        }),
+                        new framework_1.Div({
+                            vIf: isLoading.get(),
+                            class: ns.e('wrapper'),
+                            slot: (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.placeholder) !== null && _f !== void 0 ? _f : new framework_1.Div({
+                                class: ns.e('placeholder'),
+                            })
+                        }),
+                    ];
                 }
-            }
-            return els;
-        });
-        // todo 与上面的 slotChildren 方法重叠了。 响应式会清空所有子节点。
-        // console.warn('then slotChildren slot, slot is ', slot);
-        this.slotChildren(slot); // todo slotChildren方法待完善 会清空加载的图片
+            })
+        }));
+        this.addChild(new framework_1.Fragment({
+            vIf: preview,
+            slot: new td_image_viewer_class_1.TdImageViewer({
+                vIf: showViewer,
+                initialIndex: imageIndex.get(),
+                zoomRate: props.zoomRate,
+                infinite: props.infinite,
+                minScale: props.minScale,
+                maxScale: props.maxScale,
+                showProgress: props.showProgress,
+                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: ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.viewer)
+                    ? new framework_1.Div({
+                        slot: props.slots.viewer,
+                    })
+                    : undefined,
+                slots: {
+                    progress: (progress) => {
+                        var _a, _b;
+                        return (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.progress)
+                            ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.progress(progress)
+                            : undefined;
+                    },
+                    toolbar: ({ actions, prev, next, reset, activeIndex }) => {
+                        var _a, _b;
+                        return (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.toolbar)
+                            ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.toolbar({ actions, prev, next, reset, activeIndex })
+                            : undefined;
+                    },
+                }
+            })
+        }));
     }
 }
 exports.TdImage = TdImage;

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

@@ -3,14 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageEmits = exports.imageProps = void 0;
 const utils_1 = require("@type-dom/utils");
 exports.imageProps = {
-    // src: '',
-    // fit: '',
+    src: '',
+    fit: '',
+    previewSrcList: [],
     initialIndex: 0,
     infinite: true,
     closeOnPressEscape: true,
     zoomRate: 1.2,
     minScale: 0.2,
     maxScale: 7,
+    showProgress: false,
 };
 exports.imageEmits = {
     load: (evt) => evt instanceof Event,

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

@@ -71,6 +71,11 @@ export interface ImageProps extends TypeDivProps {
      *     default: 7,
      */
     maxScale?: number;
+    /**
+     * @description show preview image progress content.
+     *    default: false,
+     */
+    showProgress?: boolean;
     /**
      * @description set HTML attribute: crossorigin.
      */

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

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

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

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

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

@@ -25,7 +25,7 @@ class TdImageViewer extends framework_1.TypeFragment {
     }
     setup() {
         var _a;
-        console.warn('TdImageViewer setup . ');
+        // console.warn('TdImageViewer setup . ');
         const modes = {
             CONTAIN: {
                 name: 'contain',
@@ -38,12 +38,15 @@ class TdImageViewer extends framework_1.TypeFragment {
         };
         const props = this.props;
         const emit = this.emit;
+        let stopWheelListener;
+        let prevOverflow = '';
         const { t } = (0, use_locale_1.useLocale)();
         const ns = (0, use_namespace_1.useNamespace)('image-viewer');
         const { nextZIndex } = (0, use_z_index_1.useZIndex)();
         const wrapper = (0, signals_1.signal)();
         const imgRefs = (0, signals_1.signal)([]);
-        const scopeEventListener = (0, signals_1.effectScope)();
+        // const scopeEventListener = new EffectScope();
+        let scopeEventListener;
         const loading = (0, signals_1.signal)(true);
         const activeIndex = (0, signals_1.signal)(props.initialIndex);
         const mode = (0, signals_1.signal)(modes.CONTAIN);
@@ -67,7 +70,7 @@ class TdImageViewer extends framework_1.TypeFragment {
             return activeIndex.get() === props.urlList.length - 1;
         });
         const currentImg = (0, signals_1.computed)(() => {
-            console.warn('currentImg . ');
+            // console.warn('currentImg . ');
             return props.urlList && props.urlList[activeIndex.get() || 0];
         });
         const arrowPrevKls = (0, signals_1.computed)(() => [
@@ -82,8 +85,8 @@ class TdImageViewer extends framework_1.TypeFragment {
         ]);
         // only when set transform, imgStyle will change; it is different from vue's reactivity.
         const imgStyle = (0, signals_1.computed)(() => {
-            console.warn('imgStyle . ');
-            console.warn('imgStyle transform.get() is ', transform.get());
+            // console.warn('imgStyle . ');
+            // console.warn('imgStyle transform.get() is ', transform.get());
             const { scale, deg, offsetX, offsetY, enableTransition } = transform.get();
             let translateX = offsetX / scale;
             let translateY = offsetY / scale;
@@ -101,17 +104,22 @@ class TdImageViewer extends framework_1.TypeFragment {
             }
             return style;
         });
+        const progress = (0, signals_1.computed)(() => `${activeIndex.get() + 1} / ${props.urlList.length}`);
         function hide() {
-            console.warn('hide . ');
+            // console.warn('hide . ');
             unregisterEventListener();
+            stopWheelListener === null || stopWheelListener === void 0 ? void 0 : stopWheelListener();
+            document.body.style.overflow = prevOverflow;
             emit('close');
         }
         function registerEventListener() {
+            console.error('registerEventListener . ');
             const keydownHandler = (0, lodash_1.throttle)((e) => {
                 switch (e.code) {
                     // ESC
                     case aria_1.EVENT_CODE.esc:
-                        props.closeOnPressEscape && hide();
+                        if (props.closeOnPressEscape)
+                            hide();
                         break;
                     // SPACE
                     case aria_1.EVENT_CODE.space:
@@ -136,26 +144,33 @@ class TdImageViewer extends framework_1.TypeFragment {
                 }
             });
             const mousewheelHandler = (0, lodash_1.throttle)((e) => {
+                if (!e)
+                    return;
                 const delta = e.deltaY || e.deltaX;
                 handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {
                     zoomRate: props.zoomRate,
                     enableTransition: false,
                 });
             });
-            scopeEventListener.run(() => {
+            // scopeEventListener.run(() => {
+            //   useEventListener(document, 'keydown', keydownHandler)
+            //   useEventListener(document, 'wheel', mousewheelHandler)
+            // })
+            scopeEventListener = (0, signals_1.effectScope)(() => {
                 (0, framework_1.useEventListener)(document, 'keydown', keydownHandler);
                 (0, framework_1.useEventListener)(document, 'wheel', mousewheelHandler);
             });
         }
         function unregisterEventListener() {
-            scopeEventListener.stop();
+            scopeEventListener === null || scopeEventListener === void 0 ? void 0 : scopeEventListener();
+            // scopeEventListener.stop()
         }
         function handleImgLoad() {
-            console.warn('handleImgLoad . ');
+            // console.warn('handleImgLoad . ');
             loading.set(false);
         }
         function handleImgError(e) {
-            console.warn('handleImgError . ');
+            // console.warn('handleImgError . ');
             loading.set(false);
             e.target.alt = t('el.image.error');
         }
@@ -185,8 +200,8 @@ class TdImageViewer extends framework_1.TypeFragment {
             });
         }
         function toggleMode() {
-            if (loading.get())
-                return;
+            // console.error('toggleMode . ');
+            // if (loading.get()) return; // todo edit by me
             const modeNames = (0, utils_1.keysOf)(modes);
             const modeValues = Object.values(modes);
             const currentMode = mode.get().name;
@@ -196,7 +211,7 @@ class TdImageViewer extends framework_1.TypeFragment {
             reset();
         }
         function setActiveItem(index) {
-            console.error('setActiveItem . index is ', index);
+            // console.error('setActiveItem . index is ', index);
             const len = props.urlList.length;
             activeIndex.set((index + len) % len);
         }
@@ -206,15 +221,14 @@ class TdImageViewer extends framework_1.TypeFragment {
             setActiveItem(activeIndex.get() - 1);
         }
         function next() {
-            console.error('next . ');
+            // console.error('next . ');
             if (isLast.get() && !props.infinite)
                 return;
             setActiveItem(activeIndex.get() + 1);
         }
         function handleActions(action, options = {}) {
-            console.error('handleActions . action is ', action);
-            if (loading.get())
-                return;
+            // console.error('handleActions . action is ', action);
+            // if (loading.get()) return; // todo
             const { minScale, maxScale } = props;
             const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: props.zoomRate, rotateDeg: 90, enableTransition: true }, options);
             switch (action) {
@@ -254,13 +268,26 @@ class TdImageViewer extends framework_1.TypeFragment {
                 hide();
             }
         }
+        function wheelHandler(e) {
+            if (!e.ctrlKey)
+                return undefined;
+            if (e.deltaY < 0) {
+                e.preventDefault();
+                return false;
+            }
+            else if (e.deltaY > 0) {
+                e.preventDefault();
+                return false;
+            }
+            return undefined;
+        }
         (0, signals_1.watch)(currentImg, () => {
             (0, framework_1.nextTick)(() => {
                 // todo imgRefs.get()[0] has error , can not get nothing ;
                 //      then loading always is true;
                 const $img = imgRefs.get()[0];
                 if (!($img === null || $img === void 0 ? void 0 : $img.complete)) {
-                    // loading.set(true) // todo reopen
+                    loading.set(true); // todo reopen
                 }
             });
         });
@@ -269,10 +296,23 @@ class TdImageViewer extends framework_1.TypeFragment {
             emit('switch', val);
         });
         (0, framework_1.onMounted)(() => {
-            registerEventListener();
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.vIf), (val) => {
+                if (val !== false) { // add by me
+                    registerEventListener();
+                    stopWheelListener = (0, framework_1.useEventListener)('wheel', wheelHandler, {
+                        passive: false,
+                    });
+                    // prevent body scroll
+                    prevOverflow = document.body.style.overflow;
+                    document.body.style.overflow = 'hidden';
+                }
+            });
         });
+        /**
+         * @description manually switch image
+         */
         this.setActiveItem = setActiveItem;
-        console.error('then image-viewer add TdTeleport');
+        // console.error('then image-viewer add TdTeleport');
         this.addChild(new td_teleport_class_1.TdTeleport({
             to: 'body',
             disabled: !props.teleported,
@@ -299,14 +339,15 @@ class TdImageViewer extends framework_1.TypeFragment {
                             releaseRequested: onCloseRequested,
                         },
                         slot: () => {
-                            var _a;
+                            var _a, _b, _c, _d, _e, _f, _g, _h;
                             return [
                                 new framework_1.Div({
                                     class: ns.e('mask'),
                                     events: {
                                         click: (evt, ele) => {
                                             if ((evt === null || evt === void 0 ? void 0 : evt.target) === (ele === null || ele === void 0 ? void 0 : ele.dom)) {
-                                                props.hideOnClickModal && hide();
+                                                if (props.hideOnClickModal)
+                                                    hide();
                                             }
                                         },
                                     },
@@ -323,7 +364,7 @@ class TdImageViewer extends framework_1.TypeFragment {
                                 }),
                                 // <!-- ARROW -->
                                 new framework_1.Fragment({
-                                    // vIf: isSingle,
+                                    vIf: (0, signals_1.computed)(() => !isSingle.get()),
                                     slot: [
                                         new framework_1.Span({
                                             class: arrowPrevKls,
@@ -345,12 +386,24 @@ class TdImageViewer extends framework_1.TypeFragment {
                                         }),
                                     ],
                                 }),
+                                new framework_1.Div({
+                                    vIf: props.showProgress,
+                                    class: [ns.e('btn'), ns.e('progress')],
+                                    slot: (_d = (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.progress) === null || _b === void 0 ? void 0 : _b.call(_a, activeIndex, (_c = props.urlList) === null || _c === void 0 ? void 0 : _c.length)) !== null && _d !== void 0 ? _d : progress,
+                                }),
                                 // <!-- ACTIONS -->
                                 new framework_1.Div({
                                     class: [ns.e('btn'), ns.e('actions')],
                                     slot: new framework_1.Div({
                                         class: ns.e('actions__inner'),
-                                        slot: [
+                                        slot: (_g = (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.toolbar) === null || _f === void 0 ? void 0 : _f.call(_e, {
+                                            actions: handleActions,
+                                            prev: prev,
+                                            next: next,
+                                            reset: toggleMode,
+                                            activeIndex: activeIndex,
+                                            setActiveItem: setActiveItem
+                                        })) !== null && _g !== void 0 ? _g : [
                                             new td_icon_class_1.TdIcon({
                                                 events: {
                                                     click: () => handleActions('zoomOut'),
@@ -393,7 +446,7 @@ class TdImageViewer extends framework_1.TypeFragment {
                                 // <!-- CANVAS -->
                                 new framework_1.Div({
                                     class: ns.e('canvas'),
-                                    slot: (_a = props.urlList) === null || _a === void 0 ? void 0 : _a.map((url, i) => new framework_1.Img({
+                                    slot: (_h = props.urlList) === null || _h === void 0 ? void 0 : _h.map((url, i) => new framework_1.Img({
                                         vShow: (0, signals_1.computed)(() => i === activeIndex.get()),
                                         // refDom: ((el) => (imgRefs.get()[i] = el as HTMLImageElement)), // todo ??? how todo
                                         attrObj: {
@@ -411,8 +464,7 @@ class TdImageViewer extends framework_1.TypeFragment {
                                 }),
                                 new framework_1.Fragment({
                                     slot: props.slot,
-                                }),
-                                // ...arraySlot(props.slot),
+                                })
                             ];
                         },
                     }),

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

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageViewerEmits = exports.imageViewerProps = void 0;
 const utils_1 = require("@type-dom/utils");
 exports.imageViewerProps = {
+    urlList: [],
     initialIndex: 0,
     infinite: true,
     closeOnPressEscape: true,
     zoomRate: 1.2,
     minScale: 0.2,
     maxScale: 7,
+    showProgress: false,
 };
 exports.imageViewerEmits = {
     close: () => true,