@uzum-tech/ui 1.12.21 → 1.13.0

package/es/header/src/HeaderSearchMobile.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { h, defineComponent, ref, watch, computed } from 'vue';
+import { h, defineComponent, ref, watch, computed, onMounted } from 'vue';
 import { UDrawer } from '../../drawer';
 import { UButton } from '../../button';
 import { UIcon } from '../../icon';
@@ -41,6 +41,7 @@ export default defineComponent({
         const searchValue = ref('');
         const searchResults = ref([]);
         const searchLoading = ref(false);
+        const inputInstRef = ref(null);
         const placeholder = computed(() => localeRef.value.searchPlaceholder);
         const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
             const query = searchValue.value.trim();
@@ -84,11 +85,16 @@ export default defineComponent({
                 void handleSearch();
             }, SEARCH_DEBOUNCE_MS);
         });
+        onMounted(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             placeholder,
             searchValue,
             searchResults,
             searchLoading,
+            inputInstRef,
             handleSearchInput,
             handleSearch,
             handleClose,
@@ -106,7 +112,7 @@ export default defineComponent({
                 h(UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => h(UIcon, { size: 24 }, () => h(ChevronLeftIcon, null))),
                 h("div", { class: `${blockClass}__input-wrapper` },
                     h(UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => h(SearchIcon, null)),
-                    h(UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
+                    h(UInput, { ref: "inputInstRef", value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
                             if (e.key === 'Enter') {
                                 void this.handleSearch();
                             }

package/es/header/src/mobile/HeaderMobile.js

@@ -197,6 +197,21 @@ export default defineComponent({
                     renderBadge(option, `${blockClass}__badge`)),
                 isExpandable && isExpanded && option.children && (h("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
         };
+        const renderSearchAction = () => {
+            if (this.$slots.search)
+                return this.$slots.search();
+            return (h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))));
+        };
+        const renderPreviewAction = () => {
+            if (this.$slots.preview)
+                return this.$slots.preview();
+            return (h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))));
+        };
+        const renderLogoutAction = () => {
+            if (this.$slots.logout)
+                return this.$slots.logout();
+            return (h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null))));
+        };
         const mobileMenuContent = (h("div", { class: mobileMenuClass, style: this.cssVars },
             h("div", { class: `${mobileMenuClass}__header` },
                 this.$slots.actions ? (h("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? (h("div", { class: `${mobileMenuClass}__actions` },
@@ -216,9 +231,9 @@ export default defineComponent({
                     }),
                     h(UFlex, { size: 24 }, {
                         default: () => (h(Fragment, null,
-                            h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))),
-                            h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))),
-                            h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null)))))
+                            renderSearchAction(),
+                            renderPreviewAction(),
+                            renderLogoutAction()))
                     }))) : null,
                 h(UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => h(UIcon, { size: 24 }, () => h(CloseIcon, null)))),
             h("div", { class: `${mobileMenuClass}__body` },

package/es/locales/common/enUS.js

@@ -21,7 +21,7 @@ const enUS = {
     },
     DatePicker: {
         yearFormat: 'yyyy',
-        monthFormat: 'MMM',
+        monthFormat: 'MMMM',
         dayFormat: 'eeeeee',
         yearTypeFormat: 'yyyy',
         monthTypeFormat: 'yyyy-MM',

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brand150: string;
         brand350: string;
         brand550: string;
+        brandPrimary10: string;
         brandPrimary50: string;
         brandPrimary100: string;
         brandPrimary200: string;

package/es/themes/dark.js

@@ -94,6 +94,7 @@ import safeTopScrollbarDark from '../_internal/safe-top-scrollbar/styles/dark';
 import { headerDark } from '../header/styles';
 import { iconBarDark } from '../icon-bar/styles';
 import { qrcodeDark } from '../qr-code/styles';
+import { datePickerV2Dark } from '../components';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -121,6 +122,7 @@ export const darkTheme = {
     ColorPicker: colorPickerDark,
     DataTable: dataTableDark,
     DatePicker: datePickerDark,
+    DatePickerV2: datePickerV2Dark,
     Descriptions: descriptionsDark,
     Dialog: dialogDark,
     Divider: dividerDark,

package/es/themes/light.js

@@ -96,6 +96,7 @@ import { qrcodeLight } from '../qr-code/styles';
 import safeTopScrollbarLight from '../_internal/safe-top-scrollbar/styles/light';
 import { headerLight } from '../header/styles';
 import { iconBarLight } from '../icon-bar/styles';
+import { datePickerV2Light } from '../components';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -123,6 +124,7 @@ export const lightTheme = {
     ColorPicker: colorPickerLight,
     DataTable: dataTableLight,
     DatePicker: datePickerLight,
+    DatePickerV2: datePickerV2Light,
     Descriptions: descriptionsLight,
     Dialog: dialogLight,
     Divider: dividerLight,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.21";
+declare const _default: "1.13.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.21';
+export default '1.13.0';

package/lib/_styles/common/dark.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -8,6 +8,7 @@ declare const derived: {
     brand150: string;
     brand350: string;
     brand550: string;
+    brandPrimary10: string;
     brandPrimary50: string;
     brandPrimary100: string;
     brandPrimary200: string;

package/lib/_styles/common/light.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 exports.default = derived;

package/lib/chat/src/ChatMessages.js

@@ -214,7 +214,12 @@ exports.default = (0, vue_1.defineComponent)({
                         ? `${mergedClsPrefixRef.value}-chat-main__message--own`
                         : `${mergedClsPrefixRef.value}-chat-main__message--other`
                 ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefixRef.value}-chat-main__message-wrapper`,
+                        isOwn
+                            ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own`
+                            : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`
+                    ] },
                     hasBubbleActionsSlot ? ((0, vue_1.h)("div", { onContextmenu: (e) => {
                             e.preventDefault();
                             contextMenuShow.value = false;

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

@@ -229,7 +229,11 @@ exports.default = (0, cssr_1.cB)('chat', `
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
- `), (0, cssr_1.cE)('message-bubble', `
+ `, [(0, cssr_1.cM)('own', `
+ align-items: flex-end;
+ `), (0, cssr_1.cM)('other', `
+ align-items: flex-start;
+ `)]), (0, cssr_1.cE)('message-bubble', `
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;

package/lib/components.d.ts

@@ -26,6 +26,7 @@ export * from './countdown';
 export * from './number-animation';
 export * from './data-table';
 export * from './date-picker';
+export * from './date-picker-v2';
 export * from './descriptions';
 export * from './dialog';
 export * from './divider';

package/lib/components.js

@@ -42,6 +42,7 @@ __exportStar(require("./countdown"), exports);
 __exportStar(require("./number-animation"), exports);
 __exportStar(require("./data-table"), exports);
 __exportStar(require("./date-picker"), exports);
+__exportStar(require("./date-picker-v2"), exports);
 __exportStar(require("./descriptions"), exports);
 __exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);

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

@@ -189,6 +189,7 @@ import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles
 import { HeaderTheme } from '../../header/styles';
 import { QrCodeTheme } from '../../qr-code/styles';
 import { HeaderProps } from '../../header';
+import { DatePickerV2Props, DatePickerV2Theme } from '../../components';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -212,6 +213,7 @@ export interface GlobalThemeWithoutCommon {
     ColorPicker?: ColorPickerTheme;
     DataTable?: DataTableTheme;
     DatePicker?: DatePickerTheme;
+    DatePickerV2?: DatePickerV2Theme;
     Descriptions?: DescriptionsTheme;
     Dialog?: DialogTheme;
     Divider?: DividerTheme;
@@ -319,6 +321,7 @@ export interface GlobalComponentConfig {
     DatePicker?: DatePickerProps & {
         timePickerSize?: TimePickerSize;
     };
+    DatePickerV2?: DatePickerV2Props;
     Descriptions?: DescriptionsProps;
     Dialog?: DialogProps & {
         iconPlacement?: IconPlacement;

package/lib/date-picker-v2/index.d.ts

@@ -0,0 +1,5 @@
+export { default as UDatePickerV2 } from './src/DatePickerV2';
+export type { DatePickerV2Props } from './src/DatePickerV2';
+export type { Value as DatePickerV2Value, RangeValue as DatePickerV2RangeValue, TriggerPreset as DatePickerV2TriggerPreset } from './src/interface';
+export { datePickerV2Light, datePickerV2Dark } from './styles';
+export type { DatePickerV2Theme, DatePickerV2ThemeVars } from './styles';

package/lib/date-picker-v2/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerV2Dark = exports.datePickerV2Light = exports.UDatePickerV2 = void 0;
+var DatePickerV2_1 = require("./src/DatePickerV2");
+Object.defineProperty(exports, "UDatePickerV2", { enumerable: true, get: function () { return __importDefault(DatePickerV2_1).default; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "datePickerV2Light", { enumerable: true, get: function () { return styles_1.datePickerV2Light; } });
+Object.defineProperty(exports, "datePickerV2Dark", { enumerable: true, get: function () { return styles_1.datePickerV2Dark; } });