@uzum-tech/ui 2.3.5 → 2.3.7

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -3794,7 +3794,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showPopover: import("vue").Ref<boolean, boolean>;
     mergedRenderFilter: import("vue").ComputedRef<import("../interface").RenderFilter | undefined>;
     filterMultiple: import("vue").ComputedRef<boolean>;
-    mergedFilterValue: import("vue").ComputedRef<FilterOptionValue | FilterOptionValue[] | null>;
+    mergedFilterValue: import("vue").ComputedRef<FilterOptionValue[] | FilterOptionValue | null>;
     filterMenuCssVars: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;
     handleFilterChange: (mergedFilterValue: FilterOptionValue | FilterOptionValue[] | null) => void;
     handleFilterMenuConfirm: () => void;

package/lib/data-table/src/TableParts/Header.js

@@ -208,7 +208,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { handleTableHeaderScroll, scrollX } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-base-table-header`, onScroll: handleTableHeaderScroll },
             (0, vue_1.h)("table", { ref: "body", class: `${mergedClsPrefix}-data-table-table`, style: {
-                    minWidth: (0, _utils_1.formatLength)(scrollX),
+                    minWidth: fixedResizableTableWidth || (0, _utils_1.formatLength)(scrollX),
                     width: fixedResizableTableWidth,
                     tableLayout: mergedTableLayout
                 } },

package/lib/data-table/src/use-sorter.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TmNode, UseSorterDeps } from './interface';
+import type { ColumnKey, DataTableSetupProps, InternalRowData, SortOrder, SortState, TmNode, UseSorterDeps } from './interface';
 export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: UseSorterDeps): {
     clearSorter: () => void;
     sort: (columnKey: ColumnKey, order?: SortOrder) => void;
@@ -6,10 +6,7 @@ export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsR
     mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: SortOrder;
-        sorter: boolean | "default" | CompareFn<InternalRowData> | {
-            multiple: number;
-            compare?: "default" | CompareFn<InternalRowData> | undefined;
-        };
+        sorter: boolean | "default" | import("./interface").Sorter<InternalRowData>;
     }[]>;
     deriveNextSorter: (sortState: SortState | null) => void;
     doUpdateSorter: (sortState: SortState | SortState[] | null) => void;

package/lib/data-table/src/use-table-data.d.ts

@@ -10,10 +10,7 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
     mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: import("./interface").SortOrder;
-        sorter: boolean | "default" | import("./interface").CompareFn<InternalRowData> | {
-            multiple: number;
-            compare?: "default" | import("./interface").CompareFn<InternalRowData> | undefined;
-        };
+        sorter: boolean | "default" | import("./interface").Sorter<InternalRowData>;
     }[]>;
     hoverKeyRef: import("vue").Ref<RowKey | null, RowKey | null>;
     selectionColumnRef: import("vue").ComputedRef<TableSelectionColumn | null>;

package/lib/layout/src/LayoutSider.d.ts

@@ -506,7 +506,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     nativeScrollbar: boolean;
     inverted: boolean;
     collapsedWidth: number;
-    showTrigger: boolean | "bar" | "sidebar" | "arrow-circle";
+    showTrigger: boolean | "bar" | "arrow-circle" | "sidebar";
     collapseMode: "width" | "transform";
     defaultCollapsed: boolean;
     showCollapsedContent: boolean;

package/lib/message-bubble/index.d.ts

@@ -1,3 +1,4 @@
+export type { MarkdownFeature, MarkdownOptions } from '../_utils/markdown';
 export type { MessageBubbleAction, MessageBubbleAttachment, MessageBubbleId, MessageBubbleMessagePayload, MessageBubbleProps, MessageBubbleRenderContent, MessageBubbleSlots } from './src/interface';
 export { MessageBubbleAttachmentStatus, messageBubbleProps, MessageBubbleServiceVariant, MessageBubbleStatus, MessageBubbleType } from './src/interface';
 export { default as UMessageBubble } from './src/MessageBubble';

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

@@ -1,14 +1,14 @@
 import type { SlotsType, VNodeChild } from 'vue';
 import type { MessageBubbleAttachment, MessageBubbleMessagePayload, MessageBubbleRenderContent, MessageBubbleSlots } from './interface';
-import { MessageBubbleStatus, MessageBubbleType } from './interface';
+import { MessageBubbleServiceVariant, MessageBubbleStatus, MessageBubbleType } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly type: {
         readonly type: import("vue").PropType<MessageBubbleType>;
         readonly default: MessageBubbleType.MESSAGE;
     };
     readonly serviceVariant: {
-        readonly type: import("vue").PropType<import("./interface").MessageBubbleServiceVariant>;
-        readonly default: import("./interface").MessageBubbleServiceVariant.SYSTEM;
+        readonly type: import("vue").PropType<MessageBubbleServiceVariant>;
+        readonly default: MessageBubbleServiceVariant.SYSTEM;
     };
     readonly id: {
         readonly type: import("vue").PropType<import("./interface").MessageBubbleId>;
@@ -26,6 +26,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: import("vue").PropType<MessageBubbleRenderContent>;
         readonly default: undefined;
     };
+    readonly markdown: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly markdownOptions: {
+        readonly type: import("vue").PropType<import("../../_utils/markdown").MarkdownOptions>;
+        readonly default: undefined;
+    };
     readonly timestamp: {
         readonly type: import("vue").PropType<string | number | Date | (() => VNodeChild)>;
         readonly default: undefined;
@@ -75,6 +83,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -102,6 +121,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -129,6 +159,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -153,8 +194,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: MessageBubbleType.MESSAGE;
     };
     readonly serviceVariant: {
-        readonly type: import("vue").PropType<import("./interface").MessageBubbleServiceVariant>;
-        readonly default: import("./interface").MessageBubbleServiceVariant.SYSTEM;
+        readonly type: import("vue").PropType<MessageBubbleServiceVariant>;
+        readonly default: MessageBubbleServiceVariant.SYSTEM;
     };
     readonly id: {
         readonly type: import("vue").PropType<import("./interface").MessageBubbleId>;
@@ -172,6 +213,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: import("vue").PropType<MessageBubbleRenderContent>;
         readonly default: undefined;
     };
+    readonly markdown: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly markdownOptions: {
+        readonly type: import("vue").PropType<import("../../_utils/markdown").MarkdownOptions>;
+        readonly default: undefined;
+    };
     readonly timestamp: {
         readonly type: import("vue").PropType<string | number | Date | (() => VNodeChild)>;
         readonly default: undefined;
@@ -221,6 +270,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -248,6 +308,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -275,6 +346,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -293,9 +375,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly status: MessageBubbleStatus;
     readonly actions: import("./interface").MessageBubbleAction[];
     readonly onRetry: (message: MessageBubbleMessagePayload) => void;
-    readonly serviceVariant: import("./interface").MessageBubbleServiceVariant;
+    readonly serviceVariant: MessageBubbleServiceVariant;
     readonly id: import("./interface").MessageBubbleId;
     readonly isOwn: boolean;
+    readonly markdown: boolean;
+    readonly markdownOptions: import("../../_utils/markdown").MarkdownOptions;
     readonly timestamp: string | number | Date | (() => VNodeChild);
     readonly attachments: MessageBubbleAttachment | MessageBubbleAttachment[];
     readonly uploadProps: Partial<import("../../upload").UploadProps>;

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

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
+const markdown_1 = require("../../_utils/markdown");
 const dropdown_1 = require("../../dropdown");
 const icon_1 = require("../../icon");
 const typography_1 = require("../../typography");
@@ -46,8 +47,20 @@ exports.default = (0, vue_1.defineComponent)({
             status: props.status,
             attachments: normalizedAttachmentsRef.value
         }));
+        const markdownContent = (0, vue_1.computed)(() => {
+            const content = props.content;
+            return props.markdown && typeof content === 'string' ? content : null;
+        });
+        const markdownActive = (0, vue_1.computed)(() => markdownContent.value !== null);
+        const markdownHtmlRef = (0, vue_1.computed)(() => {
+            if (!markdownContent.value) {
+                return null;
+            }
+            const html = (0, markdown_1.renderMarkdown)(markdownContent.value, props.markdownOptions);
+            return html.length > 0 ? html : null;
+        });
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusReadColor, messageStatusSuccessColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, messageErrorColor, messageBorderRadius, unreadNotificationBackgroundColor, unreadNotificationTextColor, serviceMessageTextColor, serviceMessageBackgroundColor, messageTitleColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusReadColor, messageStatusSuccessColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, messageErrorColor, messageBorderRadius, unreadNotificationBackgroundColor, unreadNotificationTextColor, serviceMessageTextColor, serviceMessageBackgroundColor, messageTitleColor, markdownQuoteBorderColorOwn, markdownQuoteBorderColorOther, markdownQuoteTextColor, markdownQuoteBackgroundColor, markdownQuoteMarkerColor, markdownDividerColorOwn, markdownDividerColorOther, markdownH1FontSize, markdownH2FontSize, markdownH3FontSize, markdownTextFontSize } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-message-bubble-background-color-own': messageBubbleBackgroundColorOwn,
@@ -65,7 +78,18 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-message-bubble-unread-text-color': unreadNotificationTextColor,
                 '--u-message-bubble-service-text-color': serviceMessageTextColor,
                 '--u-message-bubble-service-background-color': serviceMessageBackgroundColor,
-                '--u-message-bubble-title-color': messageTitleColor
+                '--u-message-bubble-title-color': messageTitleColor,
+                '--u-message-bubble-markdown-quote-border-color-own': markdownQuoteBorderColorOwn,
+                '--u-message-bubble-markdown-quote-border-color-other': markdownQuoteBorderColorOther,
+                '--u-message-bubble-markdown-quote-text-color': markdownQuoteTextColor,
+                '--u-message-bubble-markdown-quote-background-color': markdownQuoteBackgroundColor,
+                '--u-message-bubble-markdown-quote-marker-color': markdownQuoteMarkerColor,
+                '--u-message-bubble-markdown-divider-color-own': markdownDividerColorOwn,
+                '--u-message-bubble-markdown-divider-color-other': markdownDividerColorOther,
+                '--u-message-bubble-markdown-h1-font-size': markdownH1FontSize,
+                '--u-message-bubble-markdown-h2-font-size': markdownH2FontSize,
+                '--u-message-bubble-markdown-h3-font-size': markdownH3FontSize,
+                '--u-message-bubble-markdown-text-font-size': markdownTextFontSize
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -189,7 +213,10 @@ exports.default = (0, vue_1.defineComponent)({
             const hasTitle = Boolean(props.title || slots.title);
             const afterContentSlot = slots.afterContent || slots['after-content'];
             const hasAfterContent = Boolean(afterContentSlot);
-            const hasContentInsideBubble = Boolean(props.content
+            const hasVisibleTextContent = markdownActive.value
+                ? markdownHtmlRef.value !== null
+                : Boolean(props.content);
+            const hasContentInsideBubble = Boolean(hasVisibleTextContent
                 || slots.default
                 || hasAfterContent
                 || hasTitle
@@ -204,9 +231,11 @@ exports.default = (0, vue_1.defineComponent)({
                     ? slots.title(messagePayloadRef.value)
                     : resolveRenderContent(props.title))),
                 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))),
+                (hasVisibleTextContent || slots.default)
+                    && (slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default(messagePayloadRef.value))) : markdownHtmlRef.value !== null ? ((0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefixRef.value}-message-bubble__text`,
+                            `${mergedClsPrefixRef.value}-message-bubble__markdown`
+                        ], innerHTML: markdownHtmlRef.value })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, 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`,
@@ -261,10 +290,15 @@ exports.default = (0, vue_1.defineComponent)({
             if (slots.service) {
                 return slots.service(props.serviceVariant);
             }
+            const isMarkdownEligibleVariant = props.serviceVariant === interface_1.MessageBubbleServiceVariant.SYSTEM
+                || props.serviceVariant === interface_1.MessageBubbleServiceVariant.EVENT;
+            const displayMarkdown = markdownActive.value && isMarkdownEligibleVariant;
             return ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefixRef.value}-message-bubble__service`,
                     `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`
-                ] }, props.content && (0, vue_1.h)("span", null, resolveRenderContent(props.content))));
+                ] }, displayMarkdown
+                ? markdownHtmlRef.value && ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-message-bubble__markdown`, innerHTML: markdownHtmlRef.value }))
+                : props.content && ((0, vue_1.h)("span", null, resolveRenderContent(props.content)))));
         };
         return {
             mergedClsPrefixRef,

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

@@ -1,5 +1,6 @@
 import type { Component, PropType, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
+import type { MarkdownOptions } from '../../_utils/markdown';
 import type { UploadFileInfo, UploadProps } from '../../upload';
 export declare enum MessageBubbleType {
     MESSAGE = "message",
@@ -90,6 +91,14 @@ export declare const messageBubbleProps: {
         readonly type: PropType<MessageBubbleRenderContent>;
         readonly default: undefined;
     };
+    readonly markdown: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly markdownOptions: {
+        readonly type: PropType<MarkdownOptions>;
+        readonly default: undefined;
+    };
     readonly timestamp: {
         readonly type: PropType<string | number | Date | (() => VNodeChild)>;
         readonly default: undefined;
@@ -139,6 +148,17 @@ export declare const messageBubbleProps: {
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -166,6 +186,17 @@ export declare const messageBubbleProps: {
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;
@@ -193,6 +224,17 @@ export declare const messageBubbleProps: {
         serviceMessageTextColor: string;
         serviceMessageBackgroundColor: string;
         messageTitleColor: string;
+        markdownQuoteBorderColorOwn: string;
+        markdownQuoteBorderColorOther: string;
+        markdownQuoteTextColor: string;
+        markdownQuoteBackgroundColor: string;
+        markdownQuoteMarkerColor: string;
+        markdownDividerColorOwn: string;
+        markdownDividerColorOther: string;
+        markdownH1FontSize: string;
+        markdownH2FontSize: string;
+        markdownH3FontSize: string;
+        markdownTextFontSize: string;
     }, {
         StatusIcon: import("../../_mixins").Theme<"Icon", {
             color: string;

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

@@ -53,6 +53,12 @@ exports.messageBubbleProps = Object.assign(Object.assign({}, _mixins_1.useTheme.
     }, content: {
         type: [String, Function],
         default: undefined
+    }, markdown: {
+        type: Boolean,
+        default: false
+    }, markdownOptions: {
+        type: Object,
+        default: undefined
     }, timestamp: {
         type: [String, Number, Date, Function],
         default: undefined

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

@@ -22,6 +22,17 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-message-bubble-service-text-color
 // --u-message-bubble-service-background-color
 // --u-message-bubble-title-color
+// --u-message-bubble-markdown-quote-border-color-own
+// --u-message-bubble-markdown-quote-border-color-other
+// --u-message-bubble-markdown-quote-text-color
+// --u-message-bubble-markdown-quote-background-color
+// --u-message-bubble-markdown-quote-marker-color
+// --u-message-bubble-markdown-divider-color-own
+// --u-message-bubble-markdown-divider-color-other
+// --u-message-bubble-markdown-h1-font-size
+// --u-message-bubble-markdown-h2-font-size
+// --u-message-bubble-markdown-h3-font-size
+// --u-message-bubble-markdown-text-font-size
 exports.default = (0, cssr_1.cB)('message-bubble', `
  box-sizing: border-box;
  width: 100%;
@@ -57,17 +68,40 @@ exports.default = (0, cssr_1.cB)('message-bubble', `
  flex-direction: column;
  padding: 12px;
  gap: 12px;
+ --u-message-bubble-markdown-quote-border-color: var(--u-message-bubble-markdown-quote-border-color-other);
+ --u-message-bubble-markdown-divider-color: var(--u-message-bubble-markdown-divider-color-other);
  `, [(0, cssr_1.cM)('own', `
  background-color: var(--u-message-bubble-background-color-own);
  color: var(--u-message-bubble-text-color-own);
  border-bottom-left-radius: var(--u-message-bubble-border-radius);
  border-bottom-right-radius: 6px;
+ --u-message-bubble-markdown-quote-border-color: var(--u-message-bubble-markdown-quote-border-color-own);
+ --u-message-bubble-markdown-divider-color: var(--u-message-bubble-markdown-divider-color-own);
  `)]), (0, cssr_1.cE)('title', `
  color: var(--u-message-bubble-title-color);
  white-space: pre-wrap;
  `), (0, cssr_1.cE)('text', `
  white-space: pre-wrap;
- `), (0, cssr_1.cE)('after-content', `
+ `), (0, cssr_1.cE)('markdown', `
+ white-space: normal;
+ font-size: var(--u-message-bubble-markdown-text-font-size);
+ `, [(0, cssr_1.c)('h1', 'font-size: var(--u-message-bubble-markdown-h1-font-size);'), (0, cssr_1.c)('h2', 'font-size: var(--u-message-bubble-markdown-h2-font-size);'), (0, cssr_1.c)('h3', 'font-size: var(--u-message-bubble-markdown-h3-font-size);'), (0, cssr_1.c)('ul, ol', 'list-style-position: inside;'), (0, cssr_1.c)('blockquote', `
+ position: relative;
+ border-radius: 4px;
+ padding: 0 8px;
+ margin: 0;
+ background-color: var(--u-message-bubble-markdown-quote-background-color);
+ color: var(--u-message-bubble-markdown-quote-text-color);
+ `, [(0, cssr_1.c)('&::before', `
+ content: "";
+ width: 2px;
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ bottom: 2px;
+ border-radius: 30px;
+ background-color: var(--u-message-bubble-markdown-quote-marker-color);
+ `)]), (0, cssr_1.c)('& > *:first-child', 'margin-top: 0;'), (0, cssr_1.c)('& > *:last-child', 'margin-bottom: 0;')]), (0, cssr_1.cE)('after-content', `
  white-space: normal;
  `), (0, cssr_1.cE)('meta', `
  display: flex;

package/lib/message-bubble/styles/dark.d.ts

@@ -15,6 +15,17 @@ declare const messageBubbleDark: import("../../_mixins").Theme<"MessageBubble",
     serviceMessageTextColor: string;
     serviceMessageBackgroundColor: string;
     messageTitleColor: string;
+    markdownQuoteBorderColorOwn: string;
+    markdownQuoteBorderColorOther: string;
+    markdownQuoteTextColor: string;
+    markdownQuoteBackgroundColor: string;
+    markdownQuoteMarkerColor: string;
+    markdownDividerColorOwn: string;
+    markdownDividerColorOther: string;
+    markdownH1FontSize: string;
+    markdownH2FontSize: string;
+    markdownH3FontSize: string;
+    markdownTextFontSize: string;
 }, {
     StatusIcon: import("../../_mixins").Theme<"Icon", {
         color: string;

package/lib/message-bubble/styles/light.d.ts

@@ -16,6 +16,17 @@ export declare function self(vars: ThemeCommonVars): {
     serviceMessageTextColor: string;
     serviceMessageBackgroundColor: string;
     messageTitleColor: string;
+    markdownQuoteBorderColorOwn: string;
+    markdownQuoteBorderColorOther: string;
+    markdownQuoteTextColor: string;
+    markdownQuoteBackgroundColor: string;
+    markdownQuoteMarkerColor: string;
+    markdownDividerColorOwn: string;
+    markdownDividerColorOther: string;
+    markdownH1FontSize: string;
+    markdownH2FontSize: string;
+    markdownH3FontSize: string;
+    markdownTextFontSize: string;
 };
 declare const messageBubbleLight: import("../../_mixins").Theme<"MessageBubble", {
     messageBubbleBackgroundColorOwn: string;
@@ -34,6 +45,17 @@ declare const messageBubbleLight: import("../../_mixins").Theme<"MessageBubble",
     serviceMessageTextColor: string;
     serviceMessageBackgroundColor: string;
     messageTitleColor: string;
+    markdownQuoteBorderColorOwn: string;
+    markdownQuoteBorderColorOther: string;
+    markdownQuoteTextColor: string;
+    markdownQuoteBackgroundColor: string;
+    markdownQuoteMarkerColor: string;
+    markdownDividerColorOwn: string;
+    markdownDividerColorOther: string;
+    markdownH1FontSize: string;
+    markdownH2FontSize: string;
+    markdownH3FontSize: string;
+    markdownTextFontSize: string;
 }, {
     StatusIcon: import("../../_mixins").Theme<"Icon", {
         color: string;

package/lib/message-bubble/styles/light.js

@@ -5,7 +5,7 @@ const _mixins_1 = require("../../_mixins");
 const common_1 = require("../../_styles/common");
 const styles_1 = require("../../icon/styles");
 function self(vars) {
-    const { borderRadiusLarge, elementsSecondary, elementsTertiary, textPrimary, textSecondary, textTertiary, brandPrimary400, staticGreen, staticRed, staticWhite } = vars;
+    const { borderRadiusLarge, elementsSecondary, elementsTertiary, textPrimary, textSecondary, textTertiary, brandPrimary100, brandPrimary400, brandPrimary500, staticGreen, staticRed, staticWhite } = vars;
     return {
         messageBubbleBackgroundColorOwn: elementsTertiary,
         messageBubbleBackgroundColorOther: elementsTertiary,
@@ -22,7 +22,18 @@ function self(vars) {
         unreadNotificationTextColor: elementsSecondary,
         serviceMessageTextColor: textSecondary,
         serviceMessageBackgroundColor: 'transparent',
-        messageTitleColor: textPrimary
+        messageTitleColor: textPrimary,
+        markdownQuoteBorderColorOwn: textPrimary,
+        markdownQuoteBorderColorOther: textPrimary,
+        markdownQuoteTextColor: textPrimary,
+        markdownQuoteBackgroundColor: brandPrimary100,
+        markdownQuoteMarkerColor: brandPrimary500,
+        markdownDividerColorOwn: textPrimary,
+        markdownDividerColorOther: textPrimary,
+        markdownH1FontSize: '20px',
+        markdownH2FontSize: '18px',
+        markdownH3FontSize: '16px',
+        markdownTextFontSize: '14px'
     };
 }
 const messageBubbleLight = (0, _mixins_1.createTheme)({

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "packageManager": "pnpm@10.33.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {
@@ -116,6 +116,7 @@
     "highlight.js": "11.11.1",
     "lodash": "4.18.1",
     "lodash-es": "4.18.1",
+    "markdown-it": "15.0.0",
     "seemly": "0.3.10",
     "treemate": "0.3.11",
     "vdirs": "0.1.8",