@uzum-tech/ui 2.3.4 → 2.3.5

package/lib/image/src/ImagePreview.d.ts

@@ -1,168 +1,34 @@
-import type { PropType, VNode } from 'vue';
-import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-export declare const imagePreviewProps: {
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+import type { SlotsType, VNode } from 'vue';
+import type { ImagePreviewSlots } from './public-types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>>;
-};
-export type ImagePreviewProps = ExtractPublicPropTypes<typeof imagePreviewProps>;
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("../../spin").SpinProps>>;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
+    readonly onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("../../_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./public-types").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -202,7 +68,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -242,7 +108,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -320,26 +186,34 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     doUpdateShow: (value: boolean) => void;
     close: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("../../spin").SpinProps>>;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
+    readonly onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("../../_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./public-types").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -379,7 +253,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -419,7 +293,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -460,9 +334,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
     }>>>;
 }>> & Readonly<{}>, {
-    show: boolean;
-    defaultShow: boolean;
-    showToolbar: boolean;
-    showToolbarTooltip: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly loading: boolean;
+    readonly show: boolean;
+    readonly spinProps: Partial<import("../../spin").SpinProps>;
+    readonly defaultShow: boolean;
+    readonly showToolbar: boolean;
+    readonly showToolbarTooltip: boolean;
+}, SlotsType<ImagePreviewSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/image/src/ImagePreview.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.imagePreviewProps = void 0;
 const evtd_1 = require("evtd");
 const lodash_es_1 = require("lodash-es");
 const seemly_1 = require("seemly");
@@ -15,19 +14,16 @@ const _internal_1 = require("../../_internal");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const spin_1 = require("../../spin");
 const tooltip_1 = require("../../tooltip");
 const styles_1 = require("../styles");
 const icons_2 = require("./icons");
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const BLEEDING = 32;
-exports.imagePreviewProps = Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { src: String, show: {
-        type: Boolean,
-        default: undefined
-    }, defaultShow: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onNext: Function, onPrev: Function, onClose: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImagePreview',
-    props: exports.imagePreviewProps,
+    props: interface_1.imagePreviewProps,
+    slots: Object,
     setup(props) {
         const { src } = (0, vue_1.toRefs)(props);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
@@ -243,8 +239,8 @@ exports.default = (0, vue_1.defineComponent)({
             if (!preview)
                 return 1;
             const { innerWidth, innerHeight } = window;
-            const heightMaxScale = Math.max(1, preview.naturalHeight / (innerHeight - BLEEDING));
-            const widthMaxScale = Math.max(1, preview.naturalWidth / (innerWidth - BLEEDING));
+            const heightMaxScale = Math.max(1, preview.naturalHeight / (innerHeight - interface_1.BLEEDING));
+            const widthMaxScale = Math.max(1, preview.naturalWidth / (innerWidth - interface_1.BLEEDING));
             return Math.max(3, heightMaxScale * 2, widthMaxScale * 2);
         }
         function getOrignalImageSizeScale() {
@@ -252,8 +248,8 @@ exports.default = (0, vue_1.defineComponent)({
             if (!preview)
                 return 1;
             const { innerWidth, innerHeight } = window;
-            const heightScale = preview.naturalHeight / (innerHeight - BLEEDING);
-            const widthScale = preview.naturalWidth / (innerWidth - BLEEDING);
+            const heightScale = preview.naturalHeight / (innerHeight - interface_1.BLEEDING);
+            const widthScale = preview.naturalWidth / (innerWidth - interface_1.BLEEDING);
             if (heightScale < 1 && widthScale < 1) {
                 return 1;
             }
@@ -447,13 +443,18 @@ exports.default = (0, vue_1.defineComponent)({
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
                             default: () => {
                                 const { previewedImgProps = {} } = this;
-                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
-                                    (0, vue_1.h)("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
-                                            `${clsPrefix}-image-preview`,
-                                            previewedImgProps.class
-                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vue_1.vShow, this.mergedShow]]);
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" }, !this.loading ? ((0, vue_1.h)("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
+                                        `${clsPrefix}-image-preview`,
+                                        previewedImgProps.class
+                                    ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))) : null), [[vue_1.vShow, this.mergedShow]]);
                             }
-                        })), [[vdirs_1.zindexable, { enabled: this.mergedShow }]]);
+                        }),
+                        this.mergedShow && this.loading && ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-loading` },
+                            (0, vue_1.h)(spin_1.USpin, Object.assign({}, this.spinProps), {
+                                default: this.$slots['spin-default'],
+                                icon: this.$slots['spin-icon'],
+                                description: this.$slots['spin-description']
+                            })))), [[vdirs_1.zindexable, { enabled: this.mergedShow }]]);
                 }
             })));
     }

package/lib/image/src/interface.d.ts

@@ -1,4 +1,6 @@
 import type { ImgHTMLAttributes, PropType, Ref } from 'vue';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { SpinProps } from '../../spin';
 import type { ImageRenderToolbar } from './public-types';
 export interface MoveStrategy {
     moveVerticalDirection: 'verticalTop' | 'verticalBottom';
@@ -6,6 +8,10 @@ export interface MoveStrategy {
     deltaHorizontal: number;
     deltaVertical: number;
 }
+export interface ImageContext {
+    previewedImgPropsRef: Ref<ImgHTMLAttributes | undefined>;
+}
+export type ImagePreviewProps = ExtractPublicPropTypes<typeof imagePreviewProps>;
 export declare const imagePreviewSharedProps: {
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -136,7 +142,154 @@ export declare const imagePreviewSharedProps: {
         }>;
     }>>>;
 };
-export interface ImageContext {
-    previewedImgPropsRef: Ref<ImgHTMLAttributes | undefined>;
-}
 export declare const imageContextKey: import("vue").InjectionKey<ImageContext>;
+export declare const BLEEDING = 32;
+export declare const imagePreviewProps: {
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly spinProps: {
+        readonly type: PropType<Partial<SpinProps>>;
+        readonly default: undefined;
+    };
+    readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    readonly onNext: PropType<() => void>;
+    readonly onPrev: PropType<() => void>;
+    readonly onClose: PropType<MaybeArray<() => void>>;
+    readonly onPreviewPrev: PropType<() => void>;
+    readonly onPreviewNext: PropType<() => void>;
+    readonly showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: PropType<ImageRenderToolbar>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+        overlayColor: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+            borderRadius: string;
+            color: string;
+            textColor: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+            }, any>;
+        }>;
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+        overlayColor: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+            borderRadius: string;
+            color: string;
+            textColor: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+            }, any>;
+        }>;
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+        overlayColor: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+            borderRadius: string;
+            color: string;
+            textColor: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+            }, any>;
+        }>;
+    }>>>;
+};

package/lib/image/src/interface.js

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageContextKey = exports.imagePreviewSharedProps = void 0;
+exports.imagePreviewProps = exports.BLEEDING = exports.imageContextKey = exports.imagePreviewSharedProps = void 0;
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 exports.imagePreviewSharedProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { onPreviewPrev: Function, onPreviewNext: Function, showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean, renderToolbar: Function });
 exports.imageContextKey = (0, _utils_1.createInjectionKey)('u-image');
+exports.BLEEDING = 32;
+exports.imagePreviewProps = Object.assign(Object.assign({}, exports.imagePreviewSharedProps), { src: String, show: {
+        type: Boolean,
+        default: undefined
+    }, defaultShow: Boolean, 'onUpdate:show': [Function, Array], loading: {
+        type: Boolean,
+        default: false
+    }, spinProps: {
+        type: Object,
+        default: undefined
+    }, onUpdateShow: [Function, Array], onNext: Function, onPrev: Function, onClose: [Function, Array] });

package/lib/image/src/public-types.d.ts

@@ -12,9 +12,6 @@ export interface ImageRenderToolbarProps {
         close: VNode;
     };
 }
-export type ImageRenderToolbar = (props: ImageRenderToolbarProps) => VNodeChild;
-export type ImageGroupRenderToolbarProps = ImageRenderToolbarProps;
-export type ImageGroupRenderToolbar = ImageRenderToolbar;
 export interface ImageInst {
     /** @deprecated Use `showPreview` instead */
     click: () => void;
@@ -24,8 +21,17 @@ export interface ImageSlots {
     placeholder?: ImagePlaceholderSlot;
     error?: ImageErrorSlot;
 }
-export type ImagePlaceholderSlot = () => VNode[];
-export type ImageErrorSlot = () => VNode[];
 export interface ImagePreviewInst {
     setThumbnailEl: (e: HTMLImageElement | null) => void;
 }
+export interface ImagePreviewSlots {
+    default?: () => VNode[];
+    'spin-default'?: () => VNode[];
+    'spin-icon'?: () => VNode[];
+    'spin-description'?: () => VNode[];
+}
+export type ImageRenderToolbar = (props: ImageRenderToolbarProps) => VNodeChild;
+export type ImageGroupRenderToolbarProps = ImageRenderToolbarProps;
+export type ImageGroupRenderToolbar = ImageRenderToolbar;
+export type ImagePlaceholderSlot = () => VNode[];
+export type ImageErrorSlot = () => VNode[];

package/lib/image/src/styles/index.cssr.js

@@ -46,7 +46,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  padding: 0 8px;
  font-size: 28px;
  cursor: pointer;
- `), (0, fade_in_cssr_1.fadeInTransition)()]), (0, cssr_1.cB)('image-preview-wrapper', `
+ `), (0, fade_in_cssr_1.fadeInTransition)()]), (0, cssr_1.cB)('image-preview-loading', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ `), (0, cssr_1.cB)('image-preview-wrapper', `
  position: absolute;
  left: 0;
  right: 0;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.3.4";
+declare const _default: "2.3.5";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.3.4';
+exports.default = '2.3.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "packageManager": "pnpm@10.33.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {