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

package/dist/index.js

@@ -5792,7 +5792,7 @@
     });
     wrapped.__wrapped__ = true;
     for (const key of Object.keys(component)) {
-      if (/^__.*__$/.test(key) || key.endsWith("_FLAG")) {
+      if (/^__.*__$/.test(key) || key.endsWith("_FLAG") || key === "alias") {
         wrapped[key] = component[key];
       }
     }
@@ -18427,27 +18427,31 @@
       } = vue.inject(internalSelectionMenuInjectionKey);
       const isPendingRef = useMemo(() => {
         const { value: pendingTmNode } = pendingTmNodeRef;
-        if (!pendingTmNode)
+        if (!pendingTmNode) {
           return false;
+        }
         return props.tmNode.key === pendingTmNode.key;
       });
       function handleClick(e) {
         const { tmNode } = props;
-        if (tmNode.disabled)
+        if (tmNode.disabled) {
           return;
+        }
         handleOptionClick(e, tmNode);
       }
       function handleMouseEnter(e) {
         const { tmNode } = props;
-        if (tmNode.disabled)
+        if (tmNode.disabled) {
           return;
+        }
         handleOptionMouseEnter(e, tmNode);
       }
       function handleMouseMove(e) {
         const { tmNode } = props;
         const { value: isPending } = isPendingRef;
-        if (tmNode.disabled || isPending)
+        if (tmNode.disabled || isPending) {
           return;
+        }
         handleOptionMouseEnter(e, tmNode);
       }
       return {
@@ -25753,6 +25757,7 @@
       containerPrimary,
       elementsQuaternary,
       elementsPrimary,
+      staticGreen,
       staticOrange,
       staticRed,
       elementsQuinary,
@@ -25806,6 +25811,16 @@
       alpha: 0.1
     })}`,
       loadingColor: elementsPrimary,
+      // success
+      loadingColorSuccess: staticGreen,
+      borderSuccess: `2px solid ${staticGreen}`,
+      borderHoverSuccess: `2px solid ${staticGreen}`,
+      colorFocusSuccess: containerPrimary,
+      borderFocusSuccess: `2px solid ${staticGreen}`,
+      boxShadowFocusSuccess: `0 0 0 4px ${changeColor(staticGreen, {
+      alpha: 0.1
+    })}`,
+      caretColorSuccess: elementsPrimary,
       // warning
       loadingColorWarning: staticOrange,
       borderWarning: `2px solid ${staticOrange}`,
@@ -26108,7 +26123,7 @@
     transition: color .3s var(--u-bezier);
     margin-left: 4px;
     font-variant: tabular-nums;
-  `), ["warning", "error"].map(status => cM(`${status}-status`, [cNotM("disabled", [cB("base-loading", `
+  `), ["warning", "error", "success"].map(status => cM(`${status}-status`, [cNotM("disabled", [cB("base-loading", `
         color: var(--u-loading-color-${status})
       `), cE("input-el, textarea-el", `
         caret-color: var(--u-caret-color-${status});
@@ -28997,6 +29012,7 @@
             borderRadius,
             textColor,
             caretColor,
+            caretColorSuccess,
             caretColorError,
             caretColorWarning,
             textDecorationColor,
@@ -29012,6 +29028,11 @@
             textColorDisabled,
             boxShadowFocus,
             iconSize,
+            colorFocusSuccess,
+            boxShadowFocusSuccess,
+            borderSuccess,
+            borderFocusSuccess,
+            borderHoverSuccess,
             colorFocusWarning,
             boxShadowFocusWarning,
             borderWarning,
@@ -29034,6 +29055,7 @@
             iconColorHover,
             iconColorPressed,
             loadingColor,
+            loadingColorSuccess,
             loadingColorError,
             loadingColorWarning,
             selectionColor,
@@ -29072,6 +29094,14 @@
           "--u-text-color-disabled": textColorDisabled,
           "--u-box-shadow-focus": boxShadowFocus,
           "--u-loading-color": loadingColor,
+          // form success
+          "--u-caret-color-success": caretColorSuccess,
+          "--u-color-focus-success": colorFocusSuccess,
+          "--u-box-shadow-focus-success": boxShadowFocusSuccess,
+          "--u-border-success": borderSuccess,
+          "--u-border-focus-success": borderFocusSuccess,
+          "--u-border-hover-success": borderHoverSuccess,
+          "--u-loading-color-success": loadingColorSuccess,
           // form warning
           "--u-caret-color-warning": caretColorWarning,
           "--u-color-focus-warning": colorFocusWarning,
@@ -40288,8 +40318,9 @@
       const slideSizesTrigger = vue.ref(0);
       const slideSizesRef = vue.computed(() => {
         const { value: slidesEls } = slideElsRef;
-        if (!slidesEls.length)
+        if (!slidesEls.length) {
           return [];
+        }
         slideSizesTrigger.value;
         const { value: autoSlideSize } = autoSlideSizeRef;
         if (autoSlideSize) {
@@ -40310,8 +40341,9 @@
       });
       const slideTranlatesRef = vue.computed(() => {
         const { value: slideSizes } = slideSizesRef;
-        if (!slideSizes.length)
+        if (!slideSizes.length) {
           return [];
+        }
         const { centeredSlides, spaceBetween } = props;
         const { value: axis } = sizeAxisRef;
         const { [axis]: perViewSize } = perViewSizeRef.value;
@@ -40335,8 +40367,9 @@
       );
       const slideStylesRef = vue.computed(() => {
         const { value: slidesEls } = slideElsRef;
-        if (!slidesEls.length)
+        if (!slidesEls.length) {
           return [];
+        }
         const useComputedSize = !(autoSlideSizeRef.value || realSlidesPerViewRef.value === 1);
         const getSlideSize = (index) => {
           if (useComputedSize) {
@@ -40371,8 +40404,9 @@
         } else {
           const { value: slideSizes } = slideSizesRef;
           const { length } = slideSizes;
-          if (!length)
+          if (!length) {
             return totalSlides;
+          }
           const { value: translates } = slideTranlatesRef;
           const { value: axis } = sizeAxisRef;
           const perViewSize = perViewSizeRef.value[axis];
@@ -40461,21 +40495,25 @@
       }
       function prev() {
         const prevIndex = getRealPrevIndex();
-        if (prevIndex !== null)
+        if (prevIndex !== null) {
           toRealIndex(prevIndex);
+        }
       }
       function next() {
         const nextIndex = getRealNextIndex();
-        if (nextIndex !== null)
+        if (nextIndex !== null) {
           toRealIndex(nextIndex);
+        }
       }
       function prevIfSlideTransitionEnd() {
-        if (!inTransition || !duplicatedableRef.value)
+        if (!inTransition || !duplicatedableRef.value) {
           prev();
+        }
       }
       function nextIfSlideTransitionEnd() {
-        if (!inTransition || !duplicatedableRef.value)
+        if (!inTransition || !duplicatedableRef.value) {
           next();
+        }
       }
       let previousTranslate = 0;
       const translateStyleRef = vue.ref({});
@@ -40551,13 +40589,15 @@
       };
       provideCarouselContext(carouselContext);
       function addSlide(slide) {
-        if (!slide)
+        if (!slide) {
           return;
+        }
         slideElsRef.value.push(slide);
       }
       function removeSlide(slide) {
-        if (!slide)
+        if (!slide) {
           return;
+        }
         const index = getSlideIndex(slide);
         if (index !== -1) {
           slideElsRef.value.splice(index, 1);
@@ -40611,8 +40651,9 @@
       let dragOffset = 0;
       let dragStartTime = 0;
       function handleTouchstart(event) {
-        if (globalDragging)
+        if (globalDragging) {
           return;
+        }
         if (!slidesElRef.value?.contains(
           getPreciseEventTarget(event)
         )) {
@@ -40728,8 +40769,9 @@
       }
       function handleMousewheel(event) {
         event.preventDefault();
-        if (inTransition)
+        if (inTransition) {
           return;
+        }
         let { deltaX, deltaY } = event;
         if (event.shiftKey && !deltaX) {
           deltaX = deltaY;
@@ -40800,8 +40842,9 @@
       vue.watch(
         realIndexRef,
         (realIndex, lastRealIndex) => {
-          if (realIndex === lastRealIndex)
+          if (realIndex === lastRealIndex) {
             return;
+          }
           resetAutoplay();
           if (sequenceLayoutRef.value) {
             if (duplicatedableRef.value && displayTotalViewRef.value > 2) {
@@ -43991,6 +44034,7 @@
         ...originalInputSelf,
         color: elementsTertiary,
         colorFocus: elementsTertiary,
+        heightMedium: "45px",
         border: "none",
         borderFocus: "none",
         borderHover: "none",
@@ -53490,23 +53534,28 @@
             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;
@@ -53609,6 +53658,7 @@
               height: 44px;
             `)]), cE("message-text", `
             padding: 12px 16px;
+            white-space: pre-wrap;
           `), cE("message-attachment", `
             display: flex;
             align-items: center;
@@ -53685,6 +53735,7 @@
           `, [c$1(".u-input-wrapper", `
               flex-wrap: wrap;
               padding: 0 4px;
+              height: 100%;
             `, [c$1(".u-input__prefix", `
                 width: 100%;
                 margin: 0;
@@ -53695,13 +53746,20 @@
                   border-top-right-radius: 12px;
                 `), c$1("li", `
                   padding: 12px;
-                `)]), c$1(".u-input__input-el", `
-                padding: 8px;
+                `)]), c$1(".u-input__textarea-el", `
+                padding-top: 12px;
+                padding-left: 12px;
+                padding-right: 48px;
               `), c$1(".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;
@@ -54522,152 +54580,153 @@
         return value != null ? String(value) : "";
       };
       const renderHeader = () => {
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(_UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-          default: () => {
-            const chat = selectedChatRef.value;
-            const keyId = toKeyString(chat?.id);
-            const keyTitle = toKeyString(chat?.title);
-            return /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(_UFlex, { vertical: true, size: [0, 0], justify: "flex-start" }, {
-              default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.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: () => selectedChatRef.value?.title ?? ""
-                }
-              ), isTyping.value && /* @__PURE__ */ vue.h(
-                _UText,
-                {
-                  class: [
-                    `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
-                    "typing"
-                  ],
-                  variant: "body-m-medium"
-                },
-                {
-                  default: () => typingTextRef.value ?? ""
-                }
-              ))
-            }), /* @__PURE__ */ vue.h(
-              _UFlex,
-              {
-                align: "center",
-                size: "small",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
-              },
-              {
-                default: () => resolveSlot(slots.headerActions, () => {
-                  const shareButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerShareButtonPropsRef.value
-                  };
-                  const profileButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerProfileButtonPropsRef.value
-                  };
-                  const closeButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerCloseButtonPropsRef.value
-                  };
-                  const shareIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerShareIconPropsRef.value
-                  };
-                  const profileIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerProfileIconPropsRef.value
-                  };
-                  const buttons = [];
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(_UTooltip, null, {
-                      trigger: () => /* @__PURE__ */ vue.h(
-                        Button,
+        const chat = selectedChatRef.value;
+        const keyId = toKeyString(chat?.id);
+        const keyTitle = toKeyString(chat?.title);
+        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap`
+          },
+          /* @__PURE__ */ vue.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: () => selectedChatRef.value?.title ?? ""
+            }
+          ),
+          isTyping.value && /* @__PURE__ */ vue.h(
+            _UText,
+            {
+              class: [
+                `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                "typing"
+              ],
+              variant: "body-m-medium"
+            },
+            {
+              default: () => typingTextRef.value ?? ""
+            }
+          )
+        ), /* @__PURE__ */ vue.h(
+          _UFlex,
+          {
+            align: "center",
+            size: "small",
+            class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
+          },
+          {
+            default: () => resolveSlot(slots.headerActions, () => {
+              const shareButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerShareButtonPropsRef.value
+              };
+              const profileButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerProfileButtonPropsRef.value
+              };
+              const closeButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerCloseButtonPropsRef.value
+              };
+              const shareIconProps = {
+                ...headerIconPropsRef.value,
+                ...headerShareIconPropsRef.value
+              };
+              const profileIconProps = {
+                ...headerIconPropsRef.value,
+                ...headerProfileIconPropsRef.value
+              };
+              const buttons = [];
+              buttons.push(
+                /* @__PURE__ */ vue.h(_UTooltip, null, {
+                  trigger: () => /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...shareButtonProps,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                      onClick: () => onChatShare?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon$1,
                         {
-                          secondary: true,
-                          circle: true,
-                          size: "large",
-                          ...shareButtonProps,
-                          theme: mergedThemeRef.value.peers.Button,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                          onClick: () => onChatShare?.value?.()
+                          size: 20,
+                          ...shareIconProps,
+                          theme: mergedThemeRef.value.peers.HeaderShareIcon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(
-                            UIcon$1,
-                            {
-                              size: 20,
-                              ...shareIconProps,
-                              theme: mergedThemeRef.value.peers.HeaderShareIcon,
-                              themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
-                            },
-                            {
-                              default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
-                            }
-                          )
+                          default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
                         }
-                      ),
-                      default: () => shareButtonTooltipRef.value
-                    })
-                  );
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(_UTooltip, null, {
-                      trigger: () => /* @__PURE__ */ vue.h(
-                        Button,
+                      )
+                    }
+                  ),
+                  default: () => shareButtonTooltipRef.value
+                })
+              );
+              buttons.push(
+                /* @__PURE__ */ vue.h(_UTooltip, null, {
+                  trigger: () => /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...profileButtonProps,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                      onClick: () => onUserProfile?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon$1,
                         {
-                          secondary: true,
-                          circle: true,
-                          size: "large",
-                          ...profileButtonProps,
-                          theme: mergedThemeRef.value.peers.Button,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                          onClick: () => onUserProfile?.value?.()
+                          size: 20,
+                          ...profileIconProps,
+                          theme: mergedThemeRef.value.peers.HeaderProfileIcon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(
-                            UIcon$1,
-                            {
-                              size: 20,
-                              ...profileIconProps,
-                              theme: mergedThemeRef.value.peers.HeaderProfileIcon,
-                              themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
-                            },
-                            {
-                              default: () => /* @__PURE__ */ vue.h(PersonNote, null)
-                            }
-                          )
+                          default: () => /* @__PURE__ */ vue.h(PersonNote, null)
                         }
-                      ),
-                      default: () => profileButtonTooltipRef.value
-                    })
-                  );
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(
-                      Button,
-                      {
-                        type: "primary",
-                        size: "large",
-                        round: true,
-                        ...closeButtonProps,
-                        theme: mergedThemeRef.value.peers.Button,
-                        themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                        onClick: () => onChatClose?.value?.()
-                      },
-                      {
-                        default: () => closeButtonTextRef.value
-                      }
-                    )
-                  );
-                  return buttons;
+                      )
+                    }
+                  ),
+                  default: () => profileButtonTooltipRef.value
                 })
-              }
-            ));
+              );
+              buttons.push(
+                /* @__PURE__ */ vue.h(
+                  Button,
+                  {
+                    type: "primary",
+                    size: "large",
+                    round: true,
+                    ...closeButtonProps,
+                    theme: mergedThemeRef.value.peers.Button,
+                    themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                    onClick: () => onChatClose?.value?.()
+                  },
+                  {
+                    default: () => closeButtonTextRef.value
+                  }
+                )
+              );
+              return buttons;
+            })
           }
-        }));
+        ));
       };
       const renderMessages = () => {
         return /* @__PURE__ */ vue.h(
@@ -54722,7 +54781,7 @@
         if (isSending.value) {
           return;
         }
-        const hasContent = inputValue.value.trim();
+        const hasContent = inputValue.value;
         const hasAttachments = attachmentFileList.value.length > 0;
         if (editMessageIdRef?.value && hasContent) {
           isSending.value = true;
@@ -54731,7 +54790,7 @@
             if (messageToEdit) {
               const updatedMessage = {
                 ...messageToEdit,
-                content: inputValue.value.trim()
+                content: inputValue.value
               };
               const bubbleActions = bubbleActionsRef?.value;
               if (bubbleActions) {
@@ -54784,7 +54843,7 @@
               }
               return result;
             })() : void 0;
-            handleMessageSend(inputValue.value.trim(), attachments);
+            handleMessageSend(inputValue.value, attachments);
             inputValue.value = "";
             attachmentFileList.value = [];
             chatInputs.value[selectedChatRef.value.id] = "";
@@ -54925,9 +54984,13 @@
                     value: inputValue.value,
                     placeholder: inputPlaceholderRef.value,
                     class: `${mergedClsPrefixRef.value}-chat-main__input`,
-                    ...footerInputPropsRef.value,
                     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) {
@@ -54940,7 +55003,8 @@
                         e.stopPropagation();
                         void handleSendMessage();
                       }
-                    }
+                    },
+                    ...footerInputPropsRef.value
                   },
                   {
                     prefix: () => renderEditingBlock(),
@@ -80823,7 +80887,6 @@
   const presetProps = {
     // put dialog props after since I want the card to unbordered by default
     ...dialogProps,
-    presetDisabled: Boolean,
     size: {
       type: String,
       default: "medium"
@@ -81194,7 +81257,10 @@
       type: Boolean,
       default: true
     },
-    preset: String,
+    preset: {
+      type: String,
+      default: "dialog"
+    },
     to: [String, Object],
     displayDirective: {
       type: String,
@@ -81456,7 +81522,7 @@
                   ref: "bodyWrapper",
                   displayDirective: this.displayDirective,
                   show: this.show,
-                  preset: this.preset,
+                  preset: this.internalDialog ? void 0 : this.preset,
                   autoFocus: this.autoFocus,
                   trapFocus: this.trapFocus,
                   draggable: this.draggable,
@@ -81654,8 +81720,7 @@
           transformOrigin: this.transformOrigin,
           draggable: this.draggable,
           internalAppear: true,
-          internalDialog: true,
-          presetDisabled: true
+          internalDialog: true
         },
         {
           default: () => /* @__PURE__ */ vue.h(
@@ -95109,6 +95174,10 @@
       type: Boolean,
       default: false
     },
+    hideHeaderActions: {
+      type: Boolean,
+      default: false
+    },
     copyButtonProps: Object,
     copyIconProps: Object,
     headerEditButtonProps: Object,
@@ -95742,7 +95811,7 @@
             default: () => locale.copyTooltip
           }))
         }
-      ), /* @__PURE__ */ vue.h(_UFlex, { align: "center", size: "small" }, {
+      ), !props.hideHeaderActions && /* @__PURE__ */ vue.h(_UFlex, { align: "center", size: "small" }, {
         default: () => resolveSlot(slots.headerActions, () => {
           const buttons = [];
           buttons.push(
@@ -112286,7 +112355,7 @@
     });
   }
 
-  var version = "2.0.0-beta.8";
+  var version = "2.0.0-beta.9";
 
   function create({
     componentPrefix = "U",