@uzum-tech/ui 2.3.0 → 2.3.2

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

@@ -313,6 +313,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         '--u-toolbar-color': string;
         '--u-toolbar-border-radius': string;
         '--u-toolbar-box-shadow': string;
+        '--u-overlay-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;

package/lib/image/src/ImagePreview.js

@@ -352,13 +352,14 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor, overlayColor } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-toolbar-icon-color': toolbarIconColor,
                 '--u-toolbar-color': toolbarColor,
                 '--u-toolbar-border-radius': toolbarBorderRadius,
-                '--u-toolbar-box-shadow': toolbarBoxShadow
+                '--u-toolbar-box-shadow': toolbarBoxShadow,
+                '--u-overlay-color': overlayColor
             };
         });
         const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
@@ -394,21 +395,13 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         var _a, _b;
         const { clsPrefix, renderToolbar, withTooltip } = this;
-        const prevNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => icons_2.prevIcon }), 'tipPrevious');
-        const nextNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => icons_2.nextIcon }), 'tipNext');
         const rotateCounterclockwiseNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
             default: () => (0, vue_1.h)(icons_1.RotateCounterclockwiseIcon, null)
         }), 'tipCounterclockwise');
         const rotateClockwiseNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, {
             default: () => (0, vue_1.h)(icons_1.RotateClockwiseIcon, null)
         }), 'tipClockwise');
-        const originalSizeNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.resizeToOrignalImageSize }, {
-            default: () => {
-                return (0, vue_1.h)(icons_1.ResizeSmallIcon, null);
-            }
-        }), 'tipOriginalSize');
         const zoomOutNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => (0, vue_1.h)(icons_1.ZoomOutIcon, null) }), 'tipZoomOut');
-        const downloadNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleDownloadClick }, { default: () => icons_2.downloadIcon }), 'tipDownload');
         const closeNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: () => this.close() }, { default: () => icons_2.closeIcon }), 'tipClose');
         const zoomInNode = withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => (0, vue_1.h)(icons_1.ZoomInIcon, null) }), 'tipZoomIn');
         return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
@@ -433,26 +426,17 @@ exports.default = (0, vue_1.defineComponent)({
                                     return null;
                                 return ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-toolbar` }, renderToolbar ? (renderToolbar({
                                     nodes: {
-                                        prev: prevNode,
-                                        next: nextNode,
                                         rotateCounterclockwise: rotateCounterclockwiseNode,
                                         rotateClockwise: rotateClockwiseNode,
-                                        resizeToOriginalSize: originalSizeNode,
                                         zoomOut: zoomOutNode,
                                         zoomIn: zoomInNode,
-                                        download: downloadNode,
                                         close: closeNode
                                     }
                                 })) : ((0, vue_1.h)(vue_1.Fragment, null,
-                                    this.onPrev ? ((0, vue_1.h)(vue_1.Fragment, null,
-                                        prevNode,
-                                        nextNode)) : null,
                                     rotateCounterclockwiseNode,
                                     rotateClockwiseNode,
-                                    originalSizeNode,
                                     zoomOutNode,
                                     zoomInNode,
-                                    downloadNode,
                                     closeNode))));
                             }
                         })) : null,

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

@@ -1,14 +1,14 @@
 import type { VNode, VNodeChild } from 'vue';
 export interface ImageRenderToolbarProps {
     nodes: {
-        prev: VNode;
-        next: VNode;
+        prev?: VNode;
+        next?: VNode;
         rotateCounterclockwise: VNode;
         rotateClockwise: VNode;
-        resizeToOriginalSize: VNode;
+        resizeToOriginalSize?: VNode;
         zoomOut: VNode;
         zoomIn: VNode;
-        download: VNode;
+        download?: VNode;
         close: VNode;
     };
 }

package/lib/message-bubble/src/MessageBubble.js

@@ -100,6 +100,12 @@ exports.default = (0, vue_1.defineComponent)({
             const url = [attachment.preview, attachment.thumbnail].find(value => typeof value === 'string');
             return url !== null && url !== void 0 ? url : null;
         };
+        const getAttachmentUrl = (attachment) => {
+            if (!attachment.url || attachment.url === '#')
+                return null;
+            return attachment.url;
+        };
+        const isAttachmentPreviewable = (file) => Boolean(file.thumbnailUrl);
         const handleAttachmentDownload = (file) => __awaiter(this, void 0, void 0, function* () {
             if (props.onAttachmentDownload) {
                 const attachment = normalizedAttachmentsRef.value.find(item => item.name === file.name);
@@ -135,20 +141,20 @@ exports.default = (0, vue_1.defineComponent)({
                 return slots.messageAttachment(messagePayloadRef.value);
             }
             const fileList = normalizedAttachmentsRef.value.map(attachment => {
-                var _a, _b, _c;
+                var _a, _b;
                 return ({
                     id: String(attachment.id),
                     name: attachment.name,
                     status: attachment.status || interface_1.MessageBubbleAttachmentStatus.FINISHED,
                     percentage: (_a = attachment.percentage) !== null && _a !== void 0 ? _a : null,
-                    url: (_b = attachment.url) !== null && _b !== void 0 ? _b : null,
+                    url: getAttachmentUrl(attachment),
                     thumbnailUrl: getThumbnailUrl(attachment),
-                    type: (_c = attachment.type) !== null && _c !== void 0 ? _c : null,
+                    type: (_b = attachment.type) !== null && _b !== void 0 ? _b : null,
                     file: null,
                     batchId: null
                 });
             });
-            const uploadComponent = ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: withPadding
+            const uploadComponent = ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, listType: "preview-list", shouldUseThumbnailUrl: isAttachmentPreviewable, fileList: fileList, fileListStyle: withPadding
                     ? {
                         display: 'flex',
                         flexDirection: 'column',
@@ -181,8 +187,11 @@ exports.default = (0, vue_1.defineComponent)({
             const hasBubbleActionsSlot = slots.bubbleActions !== undefined;
             const hasBubbleActionsConfig = Boolean(props.actions && props.actions.length > 0);
             const hasTitle = Boolean(props.title || slots.title);
+            const afterContentSlot = slots.afterContent || slots['after-content'];
+            const hasAfterContent = Boolean(afterContentSlot);
             const hasContentInsideBubble = Boolean(props.content
                 || slots.default
+                || hasAfterContent
                 || hasTitle
                 || normalizedAttachmentsRef.value.length > 1);
             const messageBubbleContent = hasContentInsideBubble ? ((0, vue_1.h)("div", { class: [
@@ -197,7 +206,8 @@ exports.default = (0, vue_1.defineComponent)({
                 normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
                 (props.content || slots.default) && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default
                     ? slots.default(messagePayloadRef.value)
-                    : resolveRenderContent(props.content))))) : normalizedAttachmentsRef.value.length === 1 ? (renderAttachment()) : null;
+                    : resolveRenderContent(props.content))),
+                hasAfterContent && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__after-content` }, afterContentSlot === null || afterContentSlot === void 0 ? void 0 : afterContentSlot(messagePayloadRef.value))))) : normalizedAttachmentsRef.value.length === 1 ? (renderAttachment()) : null;
             return ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefixRef.value}-message-bubble__message`,
                     props.isOwn

package/lib/message-bubble/src/interface.d.ts

@@ -26,6 +26,8 @@ export declare enum MessageBubbleAttachmentStatus {
 export interface MessageBubbleSlots {
     default?: (message: MessageBubbleMessagePayload) => VNodeChild;
     title?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    afterContent?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    'after-content'?: (message: MessageBubbleMessagePayload) => VNodeChild;
     service?: (variant: MessageBubbleServiceVariant) => VNodeChild;
     messageStatus?: (message: MessageBubbleMessagePayload) => VNodeChild;
     bubbleActions?: (message: MessageBubbleMessagePayload) => VNodeChild;

package/lib/message-bubble/src/styles/index.cssr.js

@@ -55,6 +55,8 @@ exports.default = (0, cssr_1.cB)('message-bubble', `
  width: fit-content;
  display: flex;
  flex-direction: column;
+ padding: 12px;
+ gap: 12px;
  `, [(0, cssr_1.cM)('own', `
  background-color: var(--u-message-bubble-background-color-own);
  color: var(--u-message-bubble-text-color-own);
@@ -62,16 +64,12 @@ exports.default = (0, cssr_1.cB)('message-bubble', `
  border-bottom-right-radius: 6px;
  `)]), (0, cssr_1.cE)('title', `
  color: var(--u-message-bubble-title-color);
- padding: 12px 16px 0;
  white-space: pre-wrap;
  `), (0, cssr_1.cE)('text', `
- padding: 12px 16px;
  white-space: pre-wrap;
- `), (0, cssr_1.cE)('text', `
- padding-top: 8px;
- `, [(0, cssr_1.c)('&&:first-child', `
- padding-top: 12px;
- `)]), (0, cssr_1.cE)('meta', `
+ `), (0, cssr_1.cE)('after-content', `
+ white-space: normal;
+ `), (0, cssr_1.cE)('meta', `
  display: flex;
  align-items: center;
  gap: 4px;

package/lib/upload/index.d.ts

@@ -1,7 +1,8 @@
 export { publicDownload as uploadDownload } from '../_utils/dom/download';
 export type { CustomRequestOptions as UploadCustomRequestOptions, FileInfo as UploadFileInfo, UploadInst, SettledFileInfo as UploadSettledFileInfo } from './src/interface';
+export { uploadProps, type UploadProps } from './src/interface';
 export type * from './src/public-types';
-export { uploadProps, type UploadProps, default as UUpload } from './src/Upload';
+export { default as UUpload } from './src/Upload';
 export { default as UUploadDragger } from './src/UploadDragger';
 export { default as UUploadFileList } from './src/UploadFileList';
 export { default as UUploadTrigger } from './src/UploadTrigger';

package/lib/upload/index.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UUploadTrigger = exports.UUploadFileList = exports.UUploadDragger = exports.UUpload = exports.uploadProps = exports.uploadDownload = void 0;
 var download_1 = require("../_utils/dom/download");
 Object.defineProperty(exports, "uploadDownload", { enumerable: true, get: function () { return download_1.publicDownload; } });
+var interface_1 = require("./src/interface");
+Object.defineProperty(exports, "uploadProps", { enumerable: true, get: function () { return interface_1.uploadProps; } });
 var Upload_1 = require("./src/Upload");
-Object.defineProperty(exports, "uploadProps", { enumerable: true, get: function () { return Upload_1.uploadProps; } });
 Object.defineProperty(exports, "UUpload", { enumerable: true, get: function () { return __importDefault(Upload_1).default; } });
 var UploadDragger_1 = require("./src/UploadDragger");
 Object.defineProperty(exports, "UUploadDragger", { enumerable: true, get: function () { return __importDefault(UploadDragger_1).default; } });