@uzum-tech/ui 1.11.2 → 1.12.1

package/lib/chat/src/styles/index.cssr.js

@@ -338,7 +338,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  justify-content: flex-start;
  margin-bottom: 8px;
  `), (0, cssr_1.cE)('footer', `
- border-top: 1px solid var(--u-border-color);
  padding: 0px 20px;
  flex-shrink: 0;
  `), (0, cssr_1.cE)('input-container', `
@@ -346,6 +345,28 @@ exports.default = (0, cssr_1.cB)('chat', `
  padding: 16px 0px;
  `), (0, cssr_1.cE)('input', `
  flex: 1;
+ `, [(0, cssr_1.c)('.u-input-wrapper', `
+ flex-wrap: wrap;
+ padding: 0 4px;
+ `, [(0, cssr_1.c)('.u-input__prefix', `
+ width: 100%;
+ margin: 0;
+ margin-top: 4px;
+ white-space: wrap;
+ `, [(0, cssr_1.c)('ul', `
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ `), (0, cssr_1.c)('li', `
+ padding: 12px;
+ `)]), (0, cssr_1.c)('.u-input__input-el', `
+ padding: 8px;
+ `), (0, cssr_1.c)('.u-input__placeholder', `
+ margin: 8px;
+ `)])]), (0, cssr_1.cE)('editing-block', `
+ width: 100%;
+ `), (0, cssr_1.cE)('input-suffix', `
+ color: var(--u-input-suffix-color) !important;
+ cursor: pointer;
  margin-right: 4px;
  `), (0, cssr_1.cE)('attach-btn', `
  margin-left: 4px;

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

@@ -26,6 +26,7 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
     footerBorderColor: string;
     inputBackgroundColor: string;
     inputBorderColor: string;
+    inputSuffixColor: string;
     unreadNotificationBackgroundColor: string;
     unreadNotificationTextColor: string;
     typingIndicatorColor: string;
@@ -559,14 +560,6 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         iconSizeLarge: string;
         rippleDuration: string;
     }, any>;
-    Icon: import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>;
     List: import("../../_mixins").Theme<"List", {
         iconSize: string;
         iconSpace: string;
@@ -662,6 +655,46 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         codeColor: string;
         codeBorder: string;
     }, any>;
+    StatusIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    FooterAttachIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    FooterSuffixIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    HeaderShareIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    HeaderProfileIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
 }>;
 export default chatDark;
 export type ChatTheme = typeof chatDark;

package/lib/chat/styles/dark.js

@@ -22,9 +22,13 @@ const chatDark = (0, _mixins_1.createTheme)({
         Avatar: styles_4.avatarDark,
         Badge: styles_5.badgeDark,
         Button: styles_6.buttonDark,
-        Icon: styles_7.iconDark,
         List: styles_8.listDark,
-        Typography: styles_9.typographyDark
+        Typography: styles_9.typographyDark,
+        StatusIcon: styles_7.iconDark,
+        FooterAttachIcon: styles_7.iconDark,
+        FooterSuffixIcon: styles_7.iconDark,
+        HeaderShareIcon: styles_7.iconDark,
+        HeaderProfileIcon: styles_7.iconDark
     },
     self: (vars) => {
         const lightVars = (0, light_1.self)(vars);

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

@@ -27,6 +27,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     footerBorderColor: string;
     inputBackgroundColor: string;
     inputBorderColor: string;
+    inputSuffixColor: string;
     unreadNotificationBackgroundColor: string;
     unreadNotificationTextColor: string;
     typingIndicatorColor: string;
@@ -63,6 +64,7 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
     footerBorderColor: string;
     inputBackgroundColor: string;
     inputBorderColor: string;
+    inputSuffixColor: string;
     unreadNotificationBackgroundColor: string;
     unreadNotificationTextColor: string;
     typingIndicatorColor: string;
@@ -596,14 +598,6 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         iconSizeLarge: string;
         rippleDuration: string;
     }, any>;
-    Icon: import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>;
     List: import("../../_mixins").Theme<"List", {
         iconSize: string;
         iconSpace: string;
@@ -699,6 +693,46 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         codeColor: string;
         codeBorder: string;
     }, any>;
+    StatusIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    FooterAttachIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    FooterSuffixIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    HeaderShareIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    HeaderProfileIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
 }>;
 export default chatLight;
 export type ChatThemeVars = ReturnType<typeof self>;

package/lib/chat/styles/light.js

@@ -54,6 +54,7 @@ const self = (vars) => {
         footerBorderColor: elementsQuaternary,
         inputBackgroundColor: surfacePrimary,
         inputBorderColor: elementsQuaternary,
+        inputSuffixColor: brandPrimary400,
         unreadNotificationBackgroundColor: brandPrimary400,
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
@@ -74,9 +75,13 @@ const chatLight = (0, _mixins_1.createTheme)({
         Avatar: styles_4.avatarLight,
         Badge: chatBadgeLight,
         Button: styles_6.buttonLight,
-        Icon: styles_7.iconLight,
         List: styles_8.listLight,
-        Typography: styles_9.typographyLight
+        Typography: styles_9.typographyLight,
+        StatusIcon: styles_7.iconLight,
+        FooterAttachIcon: styles_7.iconLight,
+        FooterSuffixIcon: styles_7.iconLight,
+        HeaderShareIcon: styles_7.iconLight,
+        HeaderProfileIcon: styles_7.iconLight
     },
     self: exports.self
 });

package/lib/checkbox/src/Checkbox.d.ts

@@ -711,14 +711,14 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     disabled: boolean | undefined;
-    checked: string | number | boolean | undefined;
-    focusable: boolean;
     position: "left" | "right";
-    defaultChecked: string | number | boolean;
-    checkedValue: string | number | boolean;
-    uncheckedValue: string | number | boolean;
+    focusable: boolean;
     indeterminate: boolean;
     ripple: boolean;
     privateInsideTable: boolean;
+    checked: string | number | boolean | undefined;
+    defaultChecked: string | number | boolean;
+    checkedValue: string | number | boolean;
+    uncheckedValue: string | number | boolean;
 }, {}>;
 export default _default;

package/lib/code/src/Code.d.ts

@@ -217,8 +217,8 @@ declare const _default: import("vue").DefineComponent<{
     inline: boolean;
     trim: boolean;
     code: string;
-    wordWrap: boolean;
     uri: boolean;
+    wordWrap: boolean;
     showLineNumbers: boolean;
     internalNoHighlight: boolean;
 }, {}>;

package/lib/collapse/src/Collapse.d.ts

@@ -312,10 +312,10 @@ declare const _default: import("vue").DefineComponent<{
         boxSizing: string;
     }, any>>>;
 }>>, {
-    readonly displayDirective: "show" | "if";
     readonly defaultExpandedNames: string | number | (string | number)[] | null;
     readonly arrowPlacement: ArrowPlacement;
     readonly accordion: boolean;
+    readonly displayDirective: "show" | "if";
     readonly onExpandedNamesChange: MaybeArray<OnUpdateExpandedNames> | undefined;
 }, {}>;
 export default _default;

package/lib/collapse-transition/src/CollapseTransition.d.ts

@@ -72,8 +72,8 @@ declare const _default: import("vue").DefineComponent<{
         bezier: string;
     }, any>>>;
 }>>, {
-    readonly appear: boolean;
     readonly show: boolean;
+    readonly appear: boolean;
     readonly collapsed: boolean | undefined;
 }, {}>;
 export default _default;

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

@@ -2905,12 +2905,12 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly disabled: boolean | undefined;
     readonly to: string | boolean | HTMLElement;
-    readonly show: boolean | undefined;
     readonly placement: FollowerPlacement;
+    readonly show: boolean | undefined;
     readonly defaultShow: boolean;
-    readonly actions: ActionType[];
-    readonly showAlpha: boolean;
     readonly modes: ColorPickerMode[];
+    readonly showAlpha: boolean;
     readonly showPreview: boolean;
+    readonly actions: ActionType[];
 }, {}>;
 export default _default;

package/lib/components.d.ts

@@ -99,3 +99,6 @@ export * from './equation';
 export * from './toggle-button';
 export * from './flex';
 export * from './crop';
+export * from './header';
+export * from './icon-bar';
+export * from './qr-code';

package/lib/components.js

@@ -115,3 +115,6 @@ __exportStar(require("./equation"), exports);
 __exportStar(require("./toggle-button"), exports);
 __exportStar(require("./flex"), exports);
 __exportStar(require("./crop"), exports);
+__exportStar(require("./header"), exports);
+__exportStar(require("./icon-bar"), exports);
+__exportStar(require("./qr-code"), exports);

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -2,7 +2,7 @@ import { type PropType, type ComputedRef, type ExtractPropTypes } from 'vue';
 import { type Hljs } from '../../_mixins';
 import type { UDateLocale, ULocale } from '../../locales';
 import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { RtlProp, Breakpoints } from './internal-interface';
+import type { RtlProp, Breakpoints, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
 import type { Katex } from './katex';
 export declare const configProviderProps: {
     readonly abstract: BooleanConstructor;
@@ -29,6 +29,8 @@ export declare const configProviderProps: {
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly breakpointProps: PropType<BreakpointProps>;
+    readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -66,6 +68,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly breakpointProps: PropType<BreakpointProps>;
+    readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -107,6 +111,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly breakpointProps: PropType<BreakpointProps>;
+    readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;

package/lib/config-provider/src/ConfigProvider.js

@@ -30,6 +30,8 @@ exports.configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
+    breakpointProps: Object,
+    breakpointThemeOverrides: Object,
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -62,26 +64,51 @@ exports.default = (0, vue_1.defineComponent)({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
+        const getActiveBreakpointValue = (breakpointMap) => {
+            if (!breakpointMap || !_utils_1.isBrowser) {
+                return undefined;
+            }
+            const currentWidth = windowWidthRef.value;
+            const breakpointWidths = Object.keys(breakpointMap)
+                .map(Number)
+                .filter((width) => width <= currentWidth)
+                .sort((a, b) => b - a);
+            if (breakpointWidths.length === 0) {
+                return undefined;
+            }
+            const activeBreakpoint = breakpointWidths[0];
+            return breakpointMap[activeBreakpoint];
+        };
+        const activeBreakPointThemeOverridesRef = (0, vue_1.computed)(() => {
+            const { breakpointThemeOverrides } = props;
+            const breakpointThemeOverridesToUse = breakpointThemeOverrides !== null && breakpointThemeOverrides !== void 0 ? breakpointThemeOverrides : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointThemeOverridesRef.value;
+            return getActiveBreakpointValue(breakpointThemeOverridesToUse);
+        });
         const mergedThemeOverridesRef = (0, vue_1.computed)(() => {
             const { themeOverrides } = props;
-            // stop inheriting themeOverrides
             if (themeOverrides === null)
                 return undefined;
-            // use inherited themeOverrides
+            let baseThemeOverrides;
             if (themeOverrides === undefined) {
-                return UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
+                baseThemeOverrides = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
             }
             else {
                 const inheritedThemeOverrides = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
                 if (inheritedThemeOverrides === undefined) {
-                    // no inherited, use self overrides
-                    return themeOverrides;
+                    baseThemeOverrides = themeOverrides;
                 }
                 else {
-                    // merge overrides
-                    return (0, lodash_1.merge)({}, inheritedThemeOverrides, themeOverrides);
+                    baseThemeOverrides = (0, lodash_1.merge)({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
+            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
+            if (!activeBreakPointThemeOverrides) {
+                return baseThemeOverrides;
+            }
+            if (!baseThemeOverrides) {
+                return activeBreakPointThemeOverrides;
+            }
+            return (0, lodash_1.merge)({}, baseThemeOverrides, activeBreakPointThemeOverrides);
         });
         const mergedNamespaceRef = (0, vooks_1.useMemo)(() => {
             const { namespace } = props;
@@ -99,11 +126,41 @@ exports.default = (0, vue_1.defineComponent)({
             const { icons } = props;
             return icons === undefined ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconsRef.value : icons;
         });
+        const windowWidthRef = (0, vue_1.ref)(_utils_1.isBrowser ? window.innerWidth : 1920);
+        const updateWindowWidth = () => {
+            if (_utils_1.isBrowser) {
+                windowWidthRef.value = window.innerWidth;
+            }
+        };
+        (0, vue_1.onMounted)(() => {
+            if (_utils_1.isBrowser) {
+                windowWidthRef.value = window.innerWidth;
+                window.addEventListener('resize', updateWindowWidth);
+            }
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            if (_utils_1.isBrowser) {
+                window.removeEventListener('resize', updateWindowWidth);
+            }
+        });
+        const activeBreakPointPropsRef = (0, vue_1.computed)(() => {
+            const { breakpointProps } = props;
+            const breakpointPropsToUse = breakpointProps !== null && breakpointProps !== void 0 ? breakpointProps : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
+            return getActiveBreakpointValue(breakpointPropsToUse);
+        });
         const mergedComponentPropsRef = (0, vue_1.computed)(() => {
             const { componentOptions } = props;
-            if (componentOptions !== undefined)
-                return componentOptions;
-            return UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value;
+            const baseComponentOptions = componentOptions !== undefined
+                ? componentOptions
+                : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value;
+            const activeBreakPointProps = activeBreakPointPropsRef.value;
+            if (!activeBreakPointProps) {
+                return baseComponentOptions;
+            }
+            if (!baseComponentOptions) {
+                return activeBreakPointProps;
+            }
+            return (0, lodash_1.merge)({}, baseComponentOptions, activeBreakPointProps);
         });
         const mergedClsPrefixRef = (0, vue_1.computed)(() => {
             const { clsPrefix } = props;
@@ -133,6 +190,18 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedBreakpointsRef = (0, vue_1.computed)(() => {
             return props.breakpoints || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointsRef.value);
         });
+        const mergedBreakpointPropsRef = (0, vue_1.computed)(() => {
+            const { breakpointProps } = props;
+            return breakpointProps !== undefined
+                ? breakpointProps
+                : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
+        });
+        const mergedBreakpointThemeOverridesRef = (0, vue_1.computed)(() => {
+            const { breakpointThemeOverrides } = props;
+            return breakpointThemeOverrides !== undefined
+                ? breakpointThemeOverrides
+                : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointThemeOverridesRef.value;
+        });
         const inlineThemeDisabled = props.inlineThemeDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.inlineThemeDisabled);
         const preflightStyleDisabled = props.preflightStyleDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.preflightStyleDisabled);
         const mergedThemeHashRef = (0, vue_1.computed)(() => {
@@ -159,6 +228,8 @@ exports.default = (0, vue_1.defineComponent)({
             mergedRtlRef,
             mergedIconsRef,
             mergedComponentPropsRef,
+            mergedBreakpointPropsRef,
+            mergedBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,

package/lib/config-provider/src/interface.d.ts

@@ -13,4 +13,4 @@ export type GlobalThemeOverrides = {
 } & {
     [key in keyof GlobalThemeWithoutCommon]?: ExtractThemeOverrides<GlobalThemeWithoutCommon[key]>;
 };
-export type { GlobalIconConfig, GlobalComponentConfig } from './internal-interface';
+export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';