@uzum-tech/ui 2.0.0-beta.8 → 2.0.0

package/es/chat/src/ChatParts/MainArea.mjs

@@ -242,120 +242,108 @@ export default defineComponent({
       return value != null ? String(value) : '';
     };
     const renderHeader = () => {
+      const chat = selectedChatRef.value;
+      const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
+      const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
       return h("div", {
-        class: `${mergedClsPrefixRef.value}-chat-main__header`
-      }, h(UFlex, {
-        justify: "space-between",
-        align: "flex-start",
-        wrap: false
+        class: `${mergedClsPrefixRef.value}-chat-main__header-inner`
+      }, h("div", {
+        class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap`
+      }, h(UText, {
+        key: `${keyId}-${keyTitle}`,
+        variant: "heading-s-bold",
+        class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
+        theme: mergedThemeRef.value.peers.Typography,
+        themeOverrides: mergedThemeRef.value.peerOverrides.Typography
       }, {
         default: () => {
-          const chat = selectedChatRef.value;
-          const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
-          const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
-          return h(Fragment, null, h(UFlex, {
-            vertical: true,
-            size: [0, 0],
-            justify: "flex-start"
-          }, {
-            default: () => h(Fragment, null, h(UText, {
-              key: `${keyId}-${keyTitle}`,
-              variant: "heading-s-bold",
-              class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
-              theme: mergedThemeRef.value.peers.Typography,
-              themeOverrides: mergedThemeRef.value.peerOverrides.Typography
-            }, {
-              default: () => {
-                var _a, _b;
-                return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
+          var _a, _b;
+          return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
+        }
+      }), isTyping.value && h(UText, {
+        class: [`${mergedClsPrefixRef.value}-chat-main__header-subtitle`, 'typing'],
+        variant: "body-m-medium"
+      }, {
+        default: () => {
+          var _a;
+          return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : '';
+        }
+      })), h(UFlex, {
+        align: "center",
+        size: "small",
+        class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
+      }, {
+        default: () => resolveSlot(slots.headerActions, () => {
+          const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
+          const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
+          const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
+          const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
+          const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
+          const buttons = [];
+          buttons.push(h(UTooltip, null, {
+            trigger: () => h(UButton, Object.assign({
+              secondary: true,
+              circle: true,
+              size: "large"
+            }, shareButtonProps, {
+              theme: mergedThemeRef.value.peers.Button,
+              themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+              onClick: () => {
+                var _a;
+                return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare);
               }
-            }), isTyping.value && h(UText, {
-              class: [`${mergedClsPrefixRef.value}-chat-main__header-subtitle`, 'typing'],
-              variant: "body-m-medium"
-            }, {
-              default: () => {
+            }), {
+              default: () => h(UIcon, Object.assign({
+                size: 20
+              }, shareIconProps, {
+                theme: mergedThemeRef.value.peers.HeaderShareIcon,
+                themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
+              }), {
+                default: () => h(ArrowHookUpRight, null)
+              })
+            }),
+            default: () => shareButtonTooltipRef.value
+          }));
+          buttons.push(h(UTooltip, null, {
+            trigger: () => h(UButton, Object.assign({
+              secondary: true,
+              circle: true,
+              size: "large"
+            }, profileButtonProps, {
+              theme: mergedThemeRef.value.peers.Button,
+              themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+              onClick: () => {
                 var _a;
-                return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : '';
+                return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile);
               }
-            }))
-          }), h(UFlex, {
-            align: "center",
-            size: "small",
-            class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
-          }, {
-            default: () => resolveSlot(slots.headerActions, () => {
-              const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
-              const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
-              const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
-              const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
-              const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
-              const buttons = [];
-              buttons.push(h(UTooltip, null, {
-                trigger: () => h(UButton, Object.assign({
-                  secondary: true,
-                  circle: true,
-                  size: "large"
-                }, shareButtonProps, {
-                  theme: mergedThemeRef.value.peers.Button,
-                  themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                  onClick: () => {
-                    var _a;
-                    return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare);
-                  }
-                }), {
-                  default: () => h(UIcon, Object.assign({
-                    size: 20
-                  }, shareIconProps, {
-                    theme: mergedThemeRef.value.peers.HeaderShareIcon,
-                    themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
-                  }), {
-                    default: () => h(ArrowHookUpRight, null)
-                  })
-                }),
-                default: () => shareButtonTooltipRef.value
-              }));
-              buttons.push(h(UTooltip, null, {
-                trigger: () => h(UButton, Object.assign({
-                  secondary: true,
-                  circle: true,
-                  size: "large"
-                }, profileButtonProps, {
-                  theme: mergedThemeRef.value.peers.Button,
-                  themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                  onClick: () => {
-                    var _a;
-                    return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile);
-                  }
-                }), {
-                  default: () => h(UIcon, Object.assign({
-                    size: 20
-                  }, profileIconProps, {
-                    theme: mergedThemeRef.value.peers.HeaderProfileIcon,
-                    themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
-                  }), {
-                    default: () => h(PersonNote, null)
-                  })
-                }),
-                default: () => profileButtonTooltipRef.value
-              }));
-              buttons.push(h(UButton, Object.assign({
-                type: "primary",
-                size: "large",
-                round: true
-              }, closeButtonProps, {
-                theme: mergedThemeRef.value.peers.Button,
-                themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                onClick: () => {
-                  var _a;
-                  return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose);
-                }
+            }), {
+              default: () => h(UIcon, Object.assign({
+                size: 20
+              }, profileIconProps, {
+                theme: mergedThemeRef.value.peers.HeaderProfileIcon,
+                themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
               }), {
-                default: () => closeButtonTextRef.value
-              }));
-              return buttons;
-            })
+                default: () => h(PersonNote, null)
+              })
+            }),
+            default: () => profileButtonTooltipRef.value
           }));
-        }
+          buttons.push(h(UButton, Object.assign({
+            type: "primary",
+            size: "large",
+            round: true
+          }, closeButtonProps, {
+            theme: mergedThemeRef.value.peers.Button,
+            themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+            onClick: () => {
+              var _a;
+              return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose);
+            }
+          }), {
+            default: () => closeButtonTextRef.value
+          }));
+          return buttons;
+        })
       }));
     };
     const renderMessages = () => {
@@ -408,7 +396,7 @@ export default defineComponent({
       if (isSending.value) {
         return;
       }
-      const hasContent = inputValue.value.trim();
+      const hasContent = inputValue.value;
       const hasAttachments = attachmentFileList.value.length > 0;
       if ((editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value) && hasContent) {
         isSending.value = true;
@@ -416,7 +404,7 @@ export default defineComponent({
           const messageToEdit = editingMessage.value;
           if (messageToEdit) {
             const updatedMessage = Object.assign(Object.assign({}, messageToEdit), {
-              content: inputValue.value.trim()
+              content: inputValue.value
             });
             const bubbleActions = bubbleActionsRef === null || bubbleActionsRef === void 0 ? void 0 : bubbleActionsRef.value;
             if (bubbleActions) {
@@ -466,7 +454,7 @@ export default defineComponent({
             }
             return result;
           })() : undefined;
-          handleMessageSend(inputValue.value.trim(), attachments);
+          handleMessageSend(inputValue.value, attachments);
           inputValue.value = '';
           attachmentFileList.value = [];
           chatInputs.value[selectedChatRef.value.id] = '';
@@ -597,10 +585,14 @@ export default defineComponent({
             ref: "inputRef",
             value: inputValue.value,
             placeholder: inputPlaceholderRef.value,
-            class: `${mergedClsPrefixRef.value}-chat-main__input`
-          }, footerInputPropsRef.value, {
+            class: `${mergedClsPrefixRef.value}-chat-main__input`,
             theme: mergedThemeRef.value.peers.Input,
             themeOverrides: mergedThemeRef.value.peerOverrides.Input,
+            type: "textarea",
+            autosize: {
+              minRows: 1,
+              maxRows: 5
+            },
             onUpdateValue: value => {
               inputValue.value = value;
               if (selectedChatRef.value) {
@@ -614,7 +606,7 @@ export default defineComponent({
                 void handleSendMessage();
               }
             }
-          }), {
+          }, footerInputPropsRef.value), {
             prefix: () => renderEditingBlock(),
             suffix: () => h(UIcon, Object.assign({
               size: 24,

package/es/chat/src/ChatParts/Sidebar.d.ts

@@ -90,6 +90,13 @@ declare const _default: import("vue").DefineComponent<{}, {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -1045,6 +1052,13 @@ declare const _default: import("vue").DefineComponent<{}, {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;

package/es/chat/src/styles/index.cssr.mjs

@@ -134,23 +134,28 @@ export default cB('chat', `
  width: 100%;
  padding: 24px 20px 10px 24px;
  flex-shrink: 0;
+ `), cE('header-inner', `
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: flex-start;
+ gap: 8px;
+ `), cE('header-title-wrap', `
+ min-width: 0;
+ overflow: hidden;
  `), cE('header-title', `
  color: var(--u-header-title-color);
- flex: 1;
- min-width: 0;
+ display: block;
  overflow: hidden;
- text-overflow: ellipsis;
  white-space: nowrap;
- display: block;
- margin-right: 16px;
+ text-overflow: ellipsis;
+ width: 100%;
  `), cE('header-subtitle', `
  display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- minWidth: 0;
- maxWidth: 100%;
+ width: 100%;
  `), cE('header-actions', `
  padding: 4px;
  flex-shrink: 0;
@@ -253,6 +258,7 @@ export default cB('chat', `
  height: 44px;
  `)]), cE('message-text', `
  padding: 12px 16px;
+ white-space: pre-wrap;
  `), cE('message-attachment', `
  display: flex;
  align-items: center;
@@ -329,6 +335,7 @@ export default cB('chat', `
  `, [c('.u-input-wrapper', `
  flex-wrap: wrap;
  padding: 0 4px;
+ height: 100%;
  `, [c('.u-input__prefix', `
  width: 100%;
  margin: 0;
@@ -339,13 +346,20 @@ export default cB('chat', `
  border-top-right-radius: 12px;
  `), c('li', `
  padding: 12px;
- `)]), c('.u-input__input-el', `
- padding: 8px;
+ `)]), c('.u-input__textarea-el', `
+ padding-top: 12px;
+ padding-left: 12px;
+ padding-right: 48px;
  `), c('.u-input__placeholder', `
- margin: 8px;
+ padding-top: 12px;
+ padding-left: 12px;
+ padding-right: 48px;
  `)])]), cE('editing-block', `
  width: 100%;
  `), cE('input-suffix', `
+ position: absolute;
+ right: 12px;
+ bottom: 12px;
  color: var(--u-input-suffix-color) !important;
  cursor: pointer;
  margin-right: 4px;

package/es/chat/styles/dark.d.ts

@@ -75,6 +75,13 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         borderFocus: string;
         boxShadowFocus: string;
         loadingColor: string;
+        loadingColorSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        colorFocusSuccess: string;
+        borderFocusSuccess: string;
+        boxShadowFocusSuccess: string;
+        caretColorSuccess: string;
         loadingColorWarning: string;
         borderWarning: string;
         borderHoverWarning: string;

package/es/chat/styles/light.d.ts

@@ -113,6 +113,13 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         borderFocus: string;
         boxShadowFocus: string;
         loadingColor: string;
+        loadingColorSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        colorFocusSuccess: string;
+        borderFocusSuccess: string;
+        boxShadowFocusSuccess: string;
+        caretColorSuccess: string;
         loadingColorWarning: string;
         borderWarning: string;
         borderHoverWarning: string;

package/es/chat/styles/light.mjs

@@ -20,6 +20,7 @@ const chatInputLight = Object.assign(Object.assign({}, inputLight), {
     return Object.assign(Object.assign({}, originalInputSelf), {
       color: elementsTertiary,
       colorFocus: elementsTertiary,
+      heightMedium: '45px',
       border: 'none',
       borderFocus: 'none',
       borderHover: 'none',

package/es/color-picker/src/ColorInputUnit.d.ts

@@ -77,6 +77,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;

package/es/color-picker/src/ColorPicker.d.ts

@@ -109,6 +109,13 @@ export declare const colorPickerProps: {
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -413,6 +420,13 @@ export declare const colorPickerProps: {
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -717,6 +731,13 @@ export declare const colorPickerProps: {
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -1077,6 +1098,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -1381,6 +1409,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -1685,6 +1720,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -2065,6 +2107,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -2369,6 +2418,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;
@@ -2673,6 +2729,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;

package/es/color-picker/styles/light.d.ts

@@ -80,6 +80,13 @@ declare const colorPickerLight: import("../../_mixins").Theme<"ColorPicker", {
         borderFocus: string;
         boxShadowFocus: string;
         loadingColor: string;
+        loadingColorSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        colorFocusSuccess: string;
+        borderFocusSuccess: string;
+        boxShadowFocusSuccess: string;
+        caretColorSuccess: string;
         loadingColorWarning: string;
         borderWarning: string;
         borderHoverWarning: string;