@uzum-tech/ui 1.3.0 → 1.4.0

package/es/mention/src/Mention.d.ts

@@ -9,19 +9,19 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { MentionOption } from './interface';
 export declare const mentionProps: {
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly autosize: PropType<boolean | {
-        maxRows?: number | undefined;
-        minRows?: number | undefined;
+        maxRows?: number;
+        minRows?: number;
     }>;
     readonly options: {
         readonly type: PropType<MentionOption[]>;
         readonly default: readonly [];
     };
     readonly type: {
-        readonly type: PropType<"textarea" | "text">;
+        readonly type: PropType<"text" | "textarea">;
         readonly default: "text";
     };
     readonly separator: {
@@ -109,12 +109,18 @@ export declare const mentionProps: {
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -228,12 +234,18 @@ export declare const mentionProps: {
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -347,12 +359,18 @@ export declare const mentionProps: {
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -425,19 +443,19 @@ export declare const mentionProps: {
 export type MentionProps = ExtractPublicPropTypes<typeof mentionProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly autosize: PropType<boolean | {
-        maxRows?: number | undefined;
-        minRows?: number | undefined;
+        maxRows?: number;
+        minRows?: number;
     }>;
     readonly options: {
         readonly type: PropType<MentionOption[]>;
         readonly default: readonly [];
     };
     readonly type: {
-        readonly type: PropType<"textarea" | "text">;
+        readonly type: PropType<"text" | "textarea">;
         readonly default: "text";
     };
     readonly separator: {
@@ -525,12 +543,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -644,12 +668,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -763,12 +793,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -841,121 +877,10 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedClsPrefix: import("vue").Ref<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large" | "tiny" | "huge">;
+    mergedSize: import("vue").ComputedRef<"small" | "tiny" | "medium" | "large" | "huge">;
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
     mergedTheme: import("vue").ComputedRef<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: string;
-            brandPrimary50: string;
-            brandPrimary100: string;
-            brandPrimary200: string;
-            brandPrimary300: string;
-            brandPrimary400: string;
-            brandPrimary500: string;
-            brandPrimary550: string;
-            brandPrimary600: string;
-            brandSecondary500: string;
-            brandSecondary300: string;
-            brandSecondary600: string;
-            brandTertiary500: string;
-            brandTertiary300: string;
-            brandTertiary600: string;
-            brandQuaternary500: string;
-            brandQuaternary300: string;
-            brandQuaternary600: string;
-            brandQuinary500: string;
-            brandQuinary300: string;
-            brandQuinary600: string;
-            brandQuinary100: string;
-            surfacePrimary: string;
-            surfaceSecondary: string;
-            containerPrimary: string;
-            containerSecondary: string;
-            textPrimary: string;
-            textSecondary: string;
-            textTertiary: string;
-            textQuaternary: string;
-            textBrand: string;
-            elementsPrimary: string;
-            elementsSecondary: string;
-            elementsTertiary: string;
-            elementsQuaternary: string;
-            elementsQuinary: string;
-            elementsDarkQuinary: string;
-            elementsSenary: string;
-            elementsOnContainer: string;
-            transparencyPrimary: string;
-            transparencySecondary: string;
-            transparencyTertiary: string;
-            transparencyQuinary: string;
-            transparencyModal: string;
-            staticBlack: string;
-            staticDarkGrey: string;
-            staticWhite: string;
-            staticRed: string;
-            staticOrange: string;
-            staticGreen: string;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: string;
-            borderRadiusTiny: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            fontDisplayLarge: string;
-            fontDisplaySmall: string;
-            fontHeadingLarge: string;
-            fontHeadingMedium: string;
-            fontHeadingSmall: string;
-            fontTitleLarge: string;
-            fontTitleMedium: string;
-            fontTitleSmall: string;
-            fontBodyLarge: string;
-            fontBodyMedium: string;
-            fontBodySmall: string;
-            lineHeightDisplayLarge: string;
-            lineHeightDisplaySmall: string;
-            lineHeightHeadingLarge: string;
-            lineHeightHeadingMedium: string;
-            lineHeightHeadingSmall: string;
-            lineHeightTitleLarge: string;
-            lineHeightTitleMedium: string;
-            lineHeightTitleSmall: string;
-            lineHeightBodyLarge: string;
-            lineHeightBodyMedium: string;
-            lineHeightBodySmall: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            fontWeightBold: string;
-            iconSmall: string;
-            iconMedium: string;
-            iconLarge: string;
-            iconHuge: string;
-            closeSmall: string;
-            closeMedium: string;
-            closeLarge: string;
-            closeHuge: string;
-            closeBorderRadius: string;
-            name: "common";
-        };
+        common: import("../..").ThemeCommonVars;
         self: {
             menuBoxShadow: string;
         };
@@ -1002,12 +927,18 @@ declare const _default: import("vue").DefineComponent<{
                     iconSizeMedium: string;
                     iconSizeLarge: string;
                     iconSizeHuge: string;
-                    fontSizeSmall: string;
-                    fontSizeMedium: string;
-                    fontSizeLarge: string;
-                    fontSizeHuge: string;
-                    textColor: string;
+                    titleFontSizeSmall: string;
+                    titleFontSizeMedium: string;
+                    titleFontSizeLarge: string;
+                    titleFontSizeHuge: string;
+                    descriptionFontSizeSmall: string;
+                    descriptionFontSizeMedium: string;
+                    descriptionFontSizeLarge: string;
+                    descriptionFontSizeHuge: string;
+                    titleColor: string;
+                    descriptionColor: string;
                     iconColor: string;
+                    iconBgColor: string;
                     extraTextColor: string;
                 }, any>;
             }>;
@@ -1088,12 +1019,18 @@ declare const _default: import("vue").DefineComponent<{
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>> | undefined;
                 } | undefined;
@@ -1108,7 +1045,7 @@ declare const _default: import("vue").DefineComponent<{
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     selectMenuInstRef: import("vue").Ref<{
         selfRef: HTMLElement | null;
-        getPendingTmNode: () => TreeNode<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
+        getPendingTmNode: () => TreeNode<SelectBaseOption> | null;
         prev: () => void;
         next: () => void;
     } | null>;
@@ -1147,19 +1084,19 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly autosize: PropType<boolean | {
-        maxRows?: number | undefined;
-        minRows?: number | undefined;
+        maxRows?: number;
+        minRows?: number;
     }>;
     readonly options: {
         readonly type: PropType<MentionOption[]>;
         readonly default: readonly [];
     };
     readonly type: {
-        readonly type: PropType<"textarea" | "text">;
+        readonly type: PropType<"text" | "textarea">;
         readonly default: "text";
     };
     readonly separator: {
@@ -1247,12 +1184,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -1366,12 +1309,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -1485,12 +1434,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
         }>;
@@ -1561,16 +1516,16 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     readonly type: "textarea" | "text";
-    readonly prefix: string | string[];
-    readonly options: MentionOption[];
-    readonly separator: string;
     readonly disabled: boolean;
     readonly placeholder: string;
-    readonly to: string | boolean | HTMLElement;
     readonly loading: boolean;
     readonly bordered: boolean | undefined;
+    readonly prefix: string | string[];
+    readonly to: string | boolean | HTMLElement;
+    readonly separator: string;
     readonly placement: FollowerPlacement;
     readonly defaultValue: string;
+    readonly options: MentionOption[];
     readonly internalDebug: boolean;
 }, {}>;
 export default _default;

package/es/mention/src/utils.js

@@ -35,12 +35,12 @@ export function getRelativePosition(element, options = {
     // into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
     // so we have to list every single property explicitly.
     const properties = [
-        'direction',
+        'direction', // RTL support
         'boxSizing',
-        'width',
+        'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
         'height',
         'overflowX',
-        'overflowY',
+        'overflowY', // copy the scrollbar for IE
         'borderTopWidth',
         'borderRightWidth',
         'borderBottomWidth',
@@ -62,7 +62,7 @@ export function getRelativePosition(element, options = {
         'textAlign',
         'textTransform',
         'textIndent',
-        'textDecoration',
+        'textDecoration', // might not make a difference, but better be safe
         'letterSpacing',
         'wordSpacing',
         'tabSize',

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

@@ -47,12 +47,18 @@ declare const mentionLight: import("../../_mixins").Theme<"Mention", {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
     }>;