@uzum-tech/ui 2.3.0 → 2.3.2

package/es/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/es/image/src/ImagePreview.mjs

@@ -6,12 +6,12 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { computed, defineComponent, Fragment, h, inject, normalizeStyle, onBeforeUnmount, ref, toRef, toRefs, Transition, vShow, watch, withDirectives } from 'vue';
 import { LazyTeleport } from 'vueuc';
 import { UBaseIcon } from "../../_internal/index.mjs";
-import { ResizeSmallIcon, RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from "../../_internal/icons/index.mjs";
+import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from "../../_internal/icons/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call, download } from "../../_utils/index.mjs";
 import { UTooltip } from "../../tooltip/index.mjs";
 import { imageLight } from "../styles/index.mjs";
-import { closeIcon, downloadIcon, nextIcon, prevIcon } from "./icons.mjs";
+import { closeIcon } from "./icons.mjs";
 import { imageContextKey, imagePreviewSharedProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
 const BLEEDING = 32;
@@ -404,7 +404,8 @@ export default defineComponent({
           toolbarIconColor,
           toolbarBorderRadius,
           toolbarBoxShadow,
-          toolbarColor
+          toolbarColor,
+          overlayColor
         }
       } = themeRef.value;
       return {
@@ -412,7 +413,8 @@ export default defineComponent({
         '--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 {
@@ -468,18 +470,6 @@ export default defineComponent({
       renderToolbar,
       withTooltip
     } = this;
-    const prevNode = withTooltip(h(UBaseIcon, {
-      clsPrefix: clsPrefix,
-      onClick: this.handleSwitchPrev
-    }, {
-      default: () => prevIcon
-    }), 'tipPrevious');
-    const nextNode = withTooltip(h(UBaseIcon, {
-      clsPrefix: clsPrefix,
-      onClick: this.handleSwitchNext
-    }, {
-      default: () => nextIcon
-    }), 'tipNext');
     const rotateCounterclockwiseNode = withTooltip(h(UBaseIcon, {
       clsPrefix: clsPrefix,
       onClick: this.rotateCounterclockwise
@@ -492,26 +482,12 @@ export default defineComponent({
     }, {
       default: () => h(RotateClockwiseIcon, null)
     }), 'tipClockwise');
-    const originalSizeNode = withTooltip(h(UBaseIcon, {
-      clsPrefix: clsPrefix,
-      onClick: this.resizeToOrignalImageSize
-    }, {
-      default: () => {
-        return h(ResizeSmallIcon, null);
-      }
-    }), 'tipOriginalSize');
     const zoomOutNode = withTooltip(h(UBaseIcon, {
       clsPrefix: clsPrefix,
       onClick: this.zoomOut
     }, {
       default: () => h(ZoomOutIcon, null)
     }), 'tipZoomOut');
-    const downloadNode = withTooltip(h(UBaseIcon, {
-      clsPrefix: clsPrefix,
-      onClick: this.handleDownloadClick
-    }, {
-      default: () => downloadIcon
-    }), 'tipDownload');
     const closeNode = withTooltip(h(UBaseIcon, {
       clsPrefix: clsPrefix,
       onClick: () => this.close()
@@ -556,17 +532,13 @@ export default defineComponent({
               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
               }
-            }) : h(Fragment, null, this.onPrev ? h(Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
+            }) : h(Fragment, null, rotateCounterclockwiseNode, rotateClockwiseNode, zoomOutNode, zoomInNode, closeNode));
           }
         }) : null, h(Transition, {
           name: "fade-in-scale-up-transition",

package/es/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/es/message-bubble/src/MessageBubble.mjs

@@ -138,6 +138,11 @@ export default 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);
@@ -172,21 +177,23 @@ export default 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 || 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 = h(UUpload, Object.assign({
         abstract: true,
+        listType: "preview-list",
+        shouldUseThumbnailUrl: isAttachmentPreviewable,
         fileList: fileList,
         fileListStyle: withPadding ? {
           display: 'flex',
@@ -239,7 +246,9 @@ export default defineComponent({
       const hasBubbleActionsSlot = slots.bubbleActions !== undefined;
       const hasBubbleActionsConfig = Boolean(props.actions && props.actions.length > 0);
       const hasTitle = Boolean(props.title || slots.title);
-      const hasContentInsideBubble = Boolean(props.content || slots.default || hasTitle || normalizedAttachmentsRef.value.length > 1);
+      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 ? h("div", {
         class: [`${mergedClsPrefixRef.value}-message-bubble__bubble`, props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own` : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`]
       }, hasTitle && h(UText, {
@@ -247,7 +256,9 @@ export default defineComponent({
         variant: "body-l-semi-bold"
       }, slots.title ? slots.title(messagePayloadRef.value) : resolveRenderContent(props.title)), normalizedAttachmentsRef.value.length > 0 && renderAttachment(true), (props.content || slots.default) && h("div", {
         class: `${mergedClsPrefixRef.value}-message-bubble__text`
-      }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content))) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
+      }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content)), hasAfterContent && 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 h("div", {
         class: [`${mergedClsPrefixRef.value}-message-bubble__message`, props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message--own` : `${mergedClsPrefixRef.value}-message-bubble__message--other`]
       }, h("div", {

package/es/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/es/message-bubble/src/styles/index.cssr.mjs

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

package/es/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/es/upload/index.mjs

@@ -1,5 +1,6 @@
 export { publicDownload as uploadDownload } from "../_utils/dom/download.mjs";
-export { uploadProps, default as UUpload } from "./src/Upload.mjs";
+export { uploadProps } from "./src/interface.mjs";
+export { default as UUpload } from "./src/Upload.mjs";
 export { default as UUploadDragger } from "./src/UploadDragger.mjs";
 export { default as UUploadFileList } from "./src/UploadFileList.mjs";
 export { default as UUploadTrigger } from "./src/UploadTrigger.mjs";