@uzum-tech/ui 1.11.2 → 1.12.1

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

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

package/es/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/es/chat/styles/dark.js

@@ -20,9 +20,13 @@ const chatDark = createTheme({
         Avatar: avatarDark,
         Badge: badgeDark,
         Button: buttonDark,
-        Icon: iconDark,
         List: listDark,
-        Typography: typographyDark
+        Typography: typographyDark,
+        StatusIcon: iconDark,
+        FooterAttachIcon: iconDark,
+        FooterSuffixIcon: iconDark,
+        HeaderShareIcon: iconDark,
+        HeaderProfileIcon: iconDark
     },
     self: (vars) => {
         const lightVars = self(vars);

package/es/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/es/chat/styles/light.js

@@ -51,6 +51,7 @@ export const self = (vars) => {
         footerBorderColor: elementsQuaternary,
         inputBackgroundColor: surfacePrimary,
         inputBorderColor: elementsQuaternary,
+        inputSuffixColor: brandPrimary400,
         unreadNotificationBackgroundColor: brandPrimary400,
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
@@ -70,9 +71,13 @@ const chatLight = createTheme({
         Avatar: avatarLight,
         Badge: chatBadgeLight,
         Button: buttonLight,
-        Icon: iconLight,
         List: listLight,
-        Typography: typographyLight
+        Typography: typographyLight,
+        StatusIcon: iconLight,
+        FooterAttachIcon: iconLight,
+        FooterSuffixIcon: iconLight,
+        HeaderShareIcon: iconLight,
+        HeaderProfileIcon: iconLight
     },
     self
 });

package/es/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/es/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/es/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/es/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/es/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/es/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/es/components.js

@@ -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/es/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/es/config-provider/src/ConfigProvider.js

@@ -1,8 +1,8 @@
-import { h, inject, computed, defineComponent, provide, markRaw } from 'vue';
+import { h, inject, computed, defineComponent, provide, markRaw, ref, onMounted, onBeforeUnmount } from 'vue';
 import { useMemo } from 'vooks';
 import { merge } from 'lodash';
 import { hash } from 'css-render';
-import { warn } from '../../_utils';
+import { warn, isBrowser } from '../../_utils';
 import { defaultClsPrefix } from '../../_mixins';
 import { configProviderInjectionKey } from './context';
 export const configProviderProps = {
@@ -27,6 +27,8 @@ export const configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
+    breakpointProps: Object,
+    breakpointThemeOverrides: Object,
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -59,26 +61,51 @@ export default defineComponent({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
+        const getActiveBreakpointValue = (breakpointMap) => {
+            if (!breakpointMap || !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 = 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 = 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 merge({}, inheritedThemeOverrides, themeOverrides);
+                    baseThemeOverrides = merge({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
+            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
+            if (!activeBreakPointThemeOverrides) {
+                return baseThemeOverrides;
+            }
+            if (!baseThemeOverrides) {
+                return activeBreakPointThemeOverrides;
+            }
+            return merge({}, baseThemeOverrides, activeBreakPointThemeOverrides);
         });
         const mergedNamespaceRef = useMemo(() => {
             const { namespace } = props;
@@ -96,11 +123,41 @@ export default defineComponent({
             const { icons } = props;
             return icons === undefined ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconsRef.value : icons;
         });
+        const windowWidthRef = ref(isBrowser ? window.innerWidth : 1920);
+        const updateWindowWidth = () => {
+            if (isBrowser) {
+                windowWidthRef.value = window.innerWidth;
+            }
+        };
+        onMounted(() => {
+            if (isBrowser) {
+                windowWidthRef.value = window.innerWidth;
+                window.addEventListener('resize', updateWindowWidth);
+            }
+        });
+        onBeforeUnmount(() => {
+            if (isBrowser) {
+                window.removeEventListener('resize', updateWindowWidth);
+            }
+        });
+        const activeBreakPointPropsRef = 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 = 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 merge({}, baseComponentOptions, activeBreakPointProps);
         });
         const mergedClsPrefixRef = computed(() => {
             const { clsPrefix } = props;
@@ -130,6 +187,18 @@ export default defineComponent({
         const mergedBreakpointsRef = computed(() => {
             return props.breakpoints || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointsRef.value);
         });
+        const mergedBreakpointPropsRef = computed(() => {
+            const { breakpointProps } = props;
+            return breakpointProps !== undefined
+                ? breakpointProps
+                : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
+        });
+        const mergedBreakpointThemeOverridesRef = 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 = computed(() => {
@@ -156,6 +225,8 @@ export default defineComponent({
             mergedRtlRef,
             mergedIconsRef,
             mergedComponentPropsRef,
+            mergedBreakpointPropsRef,
+            mergedBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,

package/es/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';