@uzum-tech/ui 1.12.2 → 1.12.4

package/es/header/src/HeaderNavigation.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,10 +18,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { h, defineComponent, computed } from 'vue';
+import { h, defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import { call } from '../../_utils';
-import { UTabs, UTabPane } from '../../tabs';
-import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull, resolvePlacement } from './utils';
+import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull } from './utils';
 export const headerNavigationProps = {
     menuOptions: {
         type: Array,
@@ -60,7 +68,47 @@ export default defineComponent({
                 key: getMenuItemKey(option, index)
             }));
         });
-        const resolvedMenuPlacementRef = computed(() => resolvePlacement(props.menuPlacement));
+        const navRef = ref(null);
+        const setNavRef = (el) => {
+            navRef.value = el;
+        };
+        const hoveredKeyRef = ref(null);
+        const tabRefs = ref({});
+        const indicatorStyleRef = ref({
+            width: '0px',
+            transform: 'translateX(0)'
+        });
+        function updateIndicator() {
+            var _a, _b;
+            const navEl = navRef.value;
+            if (!navEl)
+                return;
+            const isHoverTrigger = props.menuTrigger === 'hover';
+            const activeKey = isHoverTrigger
+                ? (_a = hoveredKeyRef.value) !== null && _a !== void 0 ? _a : null
+                : (_b = props.menuValue) !== null && _b !== void 0 ? _b : null;
+            if (activeKey === null) {
+                indicatorStyleRef.value = {
+                    width: '0px',
+                    transform: 'translateX(0)'
+                };
+                return;
+            }
+            const tabEl = tabRefs.value[activeKey];
+            if (!tabEl)
+                return;
+            const navRect = navEl.getBoundingClientRect();
+            const tabRect = tabEl.getBoundingClientRect();
+            indicatorStyleRef.value = {
+                width: `${tabRect.width}px`,
+                transform: `translateX(${tabRect.left - navRect.left}px)`
+            };
+        }
+        function setTabRef(key) {
+            return (el) => {
+                tabRefs.value[key] = el;
+            };
+        }
         function handleMenuValueUpdate(value) {
             const { onUpdateMenuValue } = props;
             const { 'onUpdate:menuValue': _onUpdateMenuValue } = props;
@@ -69,14 +117,42 @@ export default defineComponent({
             if (_onUpdateMenuValue)
                 call(_onUpdateMenuValue, value);
         }
+        onMounted(() => __awaiter(this, void 0, void 0, function* () {
+            yield nextTick(updateIndicator);
+            window.addEventListener('resize', updateIndicator);
+        }));
+        onBeforeUnmount(() => {
+            window.removeEventListener('resize', updateIndicator);
+        });
+        watch(() => props.menuValue, () => __awaiter(this, void 0, void 0, function* () {
+            yield nextTick(updateIndicator);
+        }));
+        watch(() => props.menuTrigger, () => __awaiter(this, void 0, void 0, function* () {
+            yield nextTick(updateIndicator);
+        }));
+        watch(hoveredKeyRef, (value, prevValue) => __awaiter(this, void 0, void 0, function* () {
+            yield nextTick(updateIndicator);
+            if (props.menuTrigger === 'hover' &&
+                prevValue !== null &&
+                value === null) {
+                handleMenuValueUpdate(null);
+            }
+        }));
+        watch(normalizedMenuItemsRef, () => __awaiter(this, void 0, void 0, function* () {
+            yield nextTick(updateIndicator);
+        }), { deep: true });
         return {
             normalizedMenuItems: normalizedMenuItemsRef,
-            resolvedMenuPlacement: resolvedMenuPlacementRef,
-            handleMenuValueUpdate
+            handleMenuValueUpdate,
+            setNavRef,
+            navRef,
+            setTabRef,
+            indicatorStyle: indicatorStyleRef,
+            hoveredKey: hoveredKeyRef
         };
     },
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         const mergedClsPrefix = this.mergedClsPrefix;
         const blockClass = `${mergedClsPrefix}-header`;
         const { $props } = this;
@@ -130,7 +206,7 @@ export default defineComponent({
                 ] },
                 h("div", { class: `${blockClass}__menu-column-list` }, renderMenuItem(option, `${key}-single`))));
         };
-        const renderMenuCard = (item) => {
+        const renderMenuCard = (item, onClose) => {
             var _a, _b, _c;
             const option = item.option;
             if (!((_a = option.children) === null || _a === void 0 ? void 0 : _a.length))
@@ -138,35 +214,119 @@ export default defineComponent({
             const columns = (_c = (_b = option.children) === null || _b === void 0 ? void 0 : _b.map((child, index) => renderMenuColumn(child, `${item.key}-column-${index}`)).filter(isNotNull)) !== null && _c !== void 0 ? _c : [];
             if (!columns.length)
                 return null;
-            // Подсчитываем количество колонок (children с type: 'column')
             const columnCount = option.children.filter((child) => isColumnOption(child) || !isDividerOption(child)).length;
-            return (h("div", { class: `${blockClass}__menu-card` },
+            const handleSafeLeave = (event) => {
+                const currentTarget = event.currentTarget;
+                const related = event.relatedTarget;
+                if (!currentTarget)
+                    return;
+                if (related && currentTarget.contains(related))
+                    return;
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            };
+            return (h("div", { class: `${blockClass}__menu-card`, onMouseleave: onClose, onPointerleave: onClose, onMouseout: handleSafeLeave, onPointerout: handleSafeLeave },
                 h("div", { class: `${blockClass}__menu-grid`, style: {
                         gridTemplateColumns: `repeat(${columnCount}, minmax(var(--u-header-card-min-col-width), 1fr))`
                     } }, columns)));
         };
-        const menuItems = this.normalizedMenuItems;
-        const activeValue = (_a = this.menuValue) !== null && _a !== void 0 ? _a : undefined;
         const menuTabsProps = this.menuTabsProps;
-        const _h = menuTabsProps || {}, { class: tabsClass, paneClass, paneWrapperClass, 'onUpdate:value': userOnUpdateValue, onUpdateValue: userOnUpdateValueCompat } = _h, restTabsProps = __rest(_h, ["class", "paneClass", "paneWrapperClass", 'onUpdate:value', "onUpdateValue"]);
-        const tabsNode = menuItems.length > 0 ? (h(UTabs, Object.assign({}, restTabsProps, { value: activeValue !== null && activeValue !== void 0 ? activeValue : undefined, type: (_b = restTabsProps.type) !== null && _b !== void 0 ? _b : 'bar', animated: (_c = restTabsProps.animated) !== null && _c !== void 0 ? _c : true, trigger: (_d = restTabsProps.trigger) !== null && _d !== void 0 ? _d : this.menuTrigger, placement: (_e = restTabsProps.placement) !== null && _e !== void 0 ? _e : this.resolvedMenuPlacement, tabsPadding: (_f = restTabsProps.tabsPadding) !== null && _f !== void 0 ? _f : 0, justifyContent: (_g = restTabsProps.justifyContent) !== null && _g !== void 0 ? _g : 'center', paneClass: [this.menuPaneClass, paneClass].filter(Boolean).join(' ') ||
-                undefined, paneWrapperClass: [this.menuPaneWrapperClass, paneWrapperClass]
-                .filter(Boolean)
-                .join(' ') || undefined, class: [`${blockClass}__tabs`, tabsClass], "onUpdate:value": (value) => {
-                this.handleMenuValueUpdate(value);
-                if (userOnUpdateValue)
-                    call(userOnUpdateValue, value);
-                if (userOnUpdateValueCompat) {
-                    call(userOnUpdateValueCompat, value);
-                }
-            } }), {
-            default: () => menuItems.map((item) => (h(UTabPane, { key: item.key, name: item.key, disabled: !!item.option.disabled, "display-directive": "show", tab: h("div", { class: `${blockClass}__tab` },
-                    item.option.icon ? (h("span", { class: `${blockClass}__tab-icon` }, typeof item.option.icon === 'function'
-                        ? item.option.icon()
-                        : item.option.icon)) : null,
-                    h("span", { class: `${blockClass}__tab-label` }, renderOptionLabel(item.option)),
-                    renderBadge(item.option, `${blockClass}__badge`)) }, { default: () => renderMenuCard(item) })))
-        })) : null;
+        const _d = menuTabsProps || {}, { class: tabsClass, paneClass, paneWrapperClass, 'onUpdate:value': userOnUpdateValue, onUpdateValue: userOnUpdateValueCompat } = _d, restTabsProps = __rest(_d, ["class", "paneClass", "paneWrapperClass", 'onUpdate:value', "onUpdateValue"]);
+        const isHoverTrigger = ((_a = restTabsProps.trigger) !== null && _a !== void 0 ? _a : this.menuTrigger) === 'hover';
+        const menuItems = this.normalizedMenuItems;
+        const activeValue = isHoverTrigger
+            ? (_b = this.hoveredKey) !== null && _b !== void 0 ? _b : undefined
+            : (_c = this.menuValue) !== null && _c !== void 0 ? _c : undefined;
+        const emitUpdate = (value) => {
+            if (isHoverTrigger && value === null) {
+                this.hoveredKey = null;
+            }
+            this.handleMenuValueUpdate(value);
+            if (userOnUpdateValue) {
+                call(userOnUpdateValue, value);
+            }
+            if (userOnUpdateValueCompat) {
+                call(userOnUpdateValueCompat, value);
+            }
+        };
+        const justifyContent = restTabsProps.justifyContent !== undefined
+            ? restTabsProps.justifyContent
+            : 'center';
+        const tabsPadding = restTabsProps.tabsPadding !== undefined ? restTabsProps.tabsPadding : 0;
+        const tabsPaddingValue = typeof tabsPadding === 'number' ? `${tabsPadding}px` : String(tabsPadding);
+        const closeMenu = isHoverTrigger
+            ? () => {
+                this.hoveredKey = null;
+                emitUpdate(null);
+            }
+            : undefined;
+        const tabsNode = menuItems.length > 0 ? (h("div", { class: `${blockClass}__tabs-wrapper`, onMouseleave: closeMenu, onPointerleave: closeMenu },
+            h("div", { class: [`${blockClass}__tabs`, 'u-tabs', tabsClass].filter(Boolean) },
+                h("div", { class: "u-tabs-nav-scroll-wrapper" },
+                    h("div", { class: "u-tabs-nav-scroll-content", style: {
+                            paddingLeft: tabsPaddingValue,
+                            paddingRight: tabsPaddingValue
+                        } },
+                        h("div", { class: "u-tabs-nav", style: { justifyContent }, role: "tablist", "aria-orientation": "horizontal", ref: this.setNavRef },
+                            h("div", { class: "u-tabs-pad", style: { width: tabsPaddingValue } }),
+                            menuItems.map((item, index) => {
+                                const isActive = activeValue === item.key;
+                                const isOpen = isHoverTrigger
+                                    ? this.hoveredKey === item.key
+                                    : isActive;
+                                const isDisabled = !!item.option.disabled;
+                                const icon = typeof item.option.icon === 'function'
+                                    ? item.option.icon()
+                                    : item.option.icon;
+                                const content = renderMenuCard(item, closeMenu);
+                                return (h("div", { key: item.key, class: [
+                                        'u-tabs-tab',
+                                        `${blockClass}__tab`,
+                                        isActive && 'u-tabs-tab--active',
+                                        isDisabled && 'u-tabs-tab--disabled'
+                                    ], ref: this.setTabRef(item.key), role: "tab", "aria-selected": isActive, "aria-disabled": isDisabled, tabindex: isDisabled ? -1 : isActive ? 0 : -1, onKeydown: (event) => {
+                                        if (!isDisabled &&
+                                            !isHoverTrigger &&
+                                            (event.key === 'Enter' || event.key === ' ')) {
+                                            event.preventDefault();
+                                            emitUpdate(item.key);
+                                        }
+                                    }, onMouseenter: isHoverTrigger && !isDisabled
+                                        ? () => {
+                                            this.hoveredKey = item.key;
+                                            emitUpdate(item.key);
+                                        }
+                                        : undefined, onClick: !isDisabled
+                                        ? () => {
+                                            if (!isHoverTrigger) {
+                                                emitUpdate(item.key);
+                                            }
+                                            if (item.option.onClick) {
+                                                item.option.onClick();
+                                            }
+                                        }
+                                        : undefined },
+                                    icon ? (h("span", { class: `${blockClass}__tab-icon` }, icon)) : null,
+                                    h("span", { class: `${blockClass}__tab-label` }, renderOptionLabel(item.option)),
+                                    renderBadge(item.option, `${blockClass}__badge`),
+                                    content ? (h("div", { class: [
+                                            'u-tabs-pane-wrapper',
+                                            this.menuPaneWrapperClass,
+                                            paneWrapperClass,
+                                            `${blockClass}__tab-pane-wrapper`
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ') || undefined, style: isOpen ? undefined : { display: 'none' }, "aria-hidden": !isOpen, onMouseleave: closeMenu, onPointerleave: closeMenu },
+                                        h("div", { class: [
+                                                'u-tabs-pane',
+                                                this.menuPaneClass,
+                                                paneClass,
+                                                `${blockClass}__tab-pane`
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' ') || undefined }, content))) : null));
+                            }),
+                            h("div", { class: "u-tabs-bar", style: this.indicatorStyle, "aria-hidden": "true" }),
+                            h("div", { class: "u-tabs-pad", style: { width: tabsPaddingValue } }))))))) : null;
         return tabsNode;
     }
 });

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

@@ -56,12 +56,19 @@ export default cB('header', `
  display: block;
  max-height: 32px;
  width: auto;
- `)]), cE('navigation', `
+ `)]), c('&__logo--clickable', `
+ cursor: pointer;
+ `), cE('navigation', `
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  height: 100%;
+ `), cE('tabs-wrapper', `
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: flex;
  `), cE('actions', `
  position: relative;
  display: inline-flex;
@@ -83,28 +90,52 @@ export default cB('header', `
  `)])]), cE('tabs', `
  width: 100%;
  height: 100%;
- `, [c('& .u-tabs-nav-scroll-content', `
- gap: 40px;
- height: 100%;
- `), c('& .u-tabs-nav-scroll-wrapper', `
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ `, [c('& .u-tabs-nav-scroll-wrapper', `
  flex: unset;
  align-items: center;
+ display: flex;
+ height: 100%;
+ `), c('& .u-tabs-nav-scroll-content', `
+ height: 100%;
+ display: flex;
+ align-items: center;
+ width: 100%;
  `), c('& .u-tabs-nav', `
  height: 100%;
+ display: flex;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ gap: 40px;
  `), c('& .u-tabs-tab', `
  padding: 0;
  color: var(--u-header-tab-text-color);
+ display: inline-flex;
+ align-items: center;
+ height: 100%;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
  `), c('& .u-tabs-tab--active', `
  color: var(--u-header-tab-text-color-active);
+ border-color: var(--u-header-tab-indicator-color);
+ `), c('& .u-tabs-tab--disabled', `
+ cursor: not-allowed;
+ pointer-events: none;
+ opacity: .5;
  `), c('& .u-tabs-tab:hover', `
  color: var(--u-header-tab-text-color-hover);
  `), c('& .u-tabs-bar', `
  background-color: var(--u-header-tab-indicator-color);
- `), c('& .u-tabs-pane-wrapper', `
  position: absolute;
- z-index: 1000;
- width: max-content;
- top: 100%;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ `), c('& .u-tabs-pad', `
+ flex: 0 0 auto;
+ height: 100%;
  `), c('& .v-x-scroll', `
  height: 100%;
  `)]), cE('tab', `
@@ -113,6 +144,8 @@ export default cB('header', `
  gap: 8px;
  font-size: var(--u-font-size);
  font-weight: 500;
+ position: relative;
+ height: 100%;
  `), cE('tab-icon', `
  display: inline-flex;
  font-size: 20px;
@@ -134,6 +167,11 @@ export default cB('header', `
  color: var(--u-header-badge-text-color);
  `), cE('tab-pane-wrapper', `
  overflow: visible;
+ position: absolute;
+ top: calc(100% + 2px);
+ left: 40%;
+ transform: translateX(-40%);
+ z-index: 1000;
  `), cE('tab-pane', `
  padding: 0;
  `), cE('menu-card', `
@@ -254,7 +292,6 @@ export const headerMobileMenuStyle = cB('header-mobile-menu', `
  position: absolute;
  right: 24px;
  top: 50%;
- transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;

package/es/locales/index.d.ts

@@ -1,53 +1,5 @@
-export { default as zhCN } from './common/zhCN';
-export { default as zhTW } from './common/zhTW';
 export { default as enUS } from './common/enUS';
-export { default as ruRU } from './common/ruRU';
-export { default as ukUA } from './common/ukUA';
-export { default as jaJP } from './common/jaJP';
-export { default as koKR } from './common/koKR';
-export { default as idID } from './common/idID';
-export { default as deDE } from './common/deDE';
-export { default as nbNO } from './common/nbNO';
-export { default as nlNL } from './common/nlNL';
-export { default as frFR } from './common/frFR';
-export { default as esAR } from './common/esAR';
-export { default as itIT } from './common/itIT';
-export { default as skSK } from './common/skSK';
-export { default as enGB } from './common/enGB';
-export { default as plPL } from './common/plPL';
-export { default as ptBR } from './common/ptBR';
-export { default as thTH } from './common/thTH';
-export { default as arDZ } from './common/arDZ';
-export { default as trTR } from './common/trTR';
-export { default as eo } from './common/eo';
-export { default as viVN } from './common/viVN';
-export { default as faIR } from './common/faIR';
-export { default as svSE } from './common/svSE';
-export { default as dateZhCN } from './date/zhCN';
-export { default as dateZhTW } from './date/zhTW';
 export { default as dateEnUS } from './date/enUS';
-export { default as dateRuRU } from './date/ruRU';
-export { default as dateUkUA } from './date/ukUA';
-export { default as dateJaJP } from './date/jaJP';
-export { default as dateKoKR } from './date/koKR';
-export { default as dateIdID } from './date/idID';
-export { default as dateDeDE } from './date/deDE';
-export { default as dateNbNO } from './date/nbNO';
-export { default as dateNlNL } from './date/nlNL';
-export { default as dateFrFR } from './date/frFR';
-export { default as dateEsAR } from './date/esAR';
-export { default as dateItIT } from './date/itIT';
-export { default as dateSkSK } from './date/skSK';
-export { default as dateEnGB } from './date/enGB';
-export { default as datePlPL } from './date/plPL';
-export { default as datePtBR } from './date/ptBR';
-export { default as dateThTH } from './date/thTH';
-export { default as dateArDZ } from './date/arDZ';
-export { default as dateTrTR } from './date/trTR';
-export { default as dateEo } from './date/eo';
-export { default as dateViVN } from './date/viVN';
-export { default as dateFaIR } from './date/faIR';
-export { default as dateSvSE } from './date/svSE';
 export type { ULocale } from './common/enUS';
 export type { UDateLocale } from './date/enUS';
 export type { UPartialLocale } from './utils/index';

package/es/locales/index.js

@@ -1,51 +1,3 @@
-export { default as zhCN } from './common/zhCN';
-export { default as zhTW } from './common/zhTW';
 export { default as enUS } from './common/enUS';
-export { default as ruRU } from './common/ruRU';
-export { default as ukUA } from './common/ukUA';
-export { default as jaJP } from './common/jaJP';
-export { default as koKR } from './common/koKR';
-export { default as idID } from './common/idID';
-export { default as deDE } from './common/deDE';
-export { default as nbNO } from './common/nbNO';
-export { default as nlNL } from './common/nlNL';
-export { default as frFR } from './common/frFR';
-export { default as esAR } from './common/esAR';
-export { default as itIT } from './common/itIT';
-export { default as skSK } from './common/skSK';
-export { default as enGB } from './common/enGB';
-export { default as plPL } from './common/plPL';
-export { default as ptBR } from './common/ptBR';
-export { default as thTH } from './common/thTH';
-export { default as arDZ } from './common/arDZ';
-export { default as trTR } from './common/trTR';
-export { default as eo } from './common/eo';
-export { default as viVN } from './common/viVN';
-export { default as faIR } from './common/faIR';
-export { default as svSE } from './common/svSE';
-export { default as dateZhCN } from './date/zhCN';
-export { default as dateZhTW } from './date/zhTW';
 export { default as dateEnUS } from './date/enUS';
-export { default as dateRuRU } from './date/ruRU';
-export { default as dateUkUA } from './date/ukUA';
-export { default as dateJaJP } from './date/jaJP';
-export { default as dateKoKR } from './date/koKR';
-export { default as dateIdID } from './date/idID';
-export { default as dateDeDE } from './date/deDE';
-export { default as dateNbNO } from './date/nbNO';
-export { default as dateNlNL } from './date/nlNL';
-export { default as dateFrFR } from './date/frFR';
-export { default as dateEsAR } from './date/esAR';
-export { default as dateItIT } from './date/itIT';
-export { default as dateSkSK } from './date/skSK';
-export { default as dateEnGB } from './date/enGB';
-export { default as datePlPL } from './date/plPL';
-export { default as datePtBR } from './date/ptBR';
-export { default as dateThTH } from './date/thTH';
-export { default as dateArDZ } from './date/arDZ';
-export { default as dateTrTR } from './date/trTR';
-export { default as dateEo } from './date/eo';
-export { default as dateViVN } from './date/viVN';
-export { default as dateFaIR } from './date/faIR';
-export { default as dateSvSE } from './date/svSE';
 export { createLocale } from './utils/index';

package/es/menu/src/utils.js

@@ -29,7 +29,9 @@ export function itemRenderer(tmNode, menuProps) {
     }
     const { labelField } = menuProps;
     const { key, level, isGroup } = tmNode;
-    const props = Object.assign(Object.assign({}, rawNode), { title: (rawNode.title || rawNode[labelField]), extra: rawNode.titleExtra || rawNode.extra, key, internalKey: key, // since key can't be used as a prop
+    const props = Object.assign(Object.assign({}, rawNode), { title: (rawNode.title || rawNode[labelField]), extra: rawNode.titleExtra || rawNode[labelField] !== rawNode.extra
+            ? rawNode.extra
+            : '', key, internalKey: key, // since key can't be used as a prop
         level, root: level === 0, isGroup });
     if (tmNode.children) {
         if (tmNode.isGroup) {

package/es/message/src/use-message.js

@@ -4,7 +4,7 @@ import { messageApiInjectionKey } from './context';
 export function useMessage() {
     const api = inject(messageApiInjectionKey, null);
     if (api === null) {
-        throwError('use-message', 'No outer <u-message-provider /> founded. See prerequisite in https://www.naiveui.com/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://www.naiveui.com/zh-CN/os-theme/components/message#Q-&-A.');
+        throwError('use-message', 'No outer <u-message-provider /> founded. See prerequisite in https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/message#Q-&-A.');
     }
     return api;
 }

package/es/slider/src/Slider.js

@@ -7,7 +7,6 @@ import { call, useAdjustedTo, resolveSlot } from '../../_utils';
 import { sliderLight } from '../styles';
 import { isTouchEvent, useRefs } from './utils';
 import style from './styles/index.cssr';
-// ref: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button
 const eventButtonLeft = 0;
 export const sliderProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, defaultValue: {
         type: [Number, Array],

package/es/tabs/src/Tabs.js

@@ -491,12 +491,12 @@ export default defineComponent({
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const tabPaneChildren = defaultSlot
             ? flatten(defaultSlot()).filter((v) => {
-                return v.type.__TAB_PANE__ === true;
+                return v.type.name === 'TabPane';
             })
             : [];
         const tabChildren = defaultSlot
             ? flatten(defaultSlot()).filter((v) => {
-                return v.type.__TAB__ === true;
+                return v.type.name === 'Tab';
             })
             : [];
         const showPane = !tabChildren.length;

package/es/upload/src/interface.d.ts

@@ -19,11 +19,12 @@ export type ShouldUseThumbnailUrl = (file: SettledFileInfo) => boolean;
 export type FuncOrRecordOrUndef<T = string> = Record<string, T> | (({ file }: {
     file: SettledFileInfo;
 }) => Record<string, T>) | undefined;
-export type OnChange = (data: {
+export interface OnChangePayload {
     file: SettledFileInfo;
     fileList: SettledFileInfo[];
     event: ProgressEvent | Event | undefined;
-}) => void;
+}
+export type OnChange = (data: OnChangePayload) => void;
 export type OnFinish = ({ file, event }: {
     file: SettledFileInfo;
     event?: ProgressEvent;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.2";
+declare const _default: "1.12.4";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.2';
+export default '1.12.4';

package/lib/_utils/composable/composables.js

@@ -32,8 +32,9 @@ const i18n = function (data) {
     return {
         locale: (0, vue_1.toRef)(localeReactive, 'locale'),
         t(key) {
+            var _a;
             const { locale } = localeReactive;
-            return data[locale][key];
+            return (_a = data[locale]) === null || _a === void 0 ? void 0 : _a[key];
         }
     };
 };

package/lib/chat/index.d.ts

@@ -1,7 +1,7 @@
 export { default as UChat } from './src/Chat';
 export { default as UChatListItems } from './src/ChatListItems';
 export { default as UChatMessages } from './src/ChatMessages';
-export type { ChatId, ChatProps, ChatListItemProps, ChatMessageProps, ChatMarkProps, ChatHeaderProps, ChatFooterProps, ChatListHeaderProps, ChatSlots, ChatListItemSlots, ChatMessageSlots, ChatMarkSlots, ChatHeaderSlots, ChatFooterSlots, ChatListItemData, ChatMessageData, ChatAttachment, OnChatSelect, OnMessageSend, OnAttachmentUpload, OnFilterChange, OnNetworkError, OnUploadError, OnSendError, ChatInst, ChatListInst, chatInjectionKey } from './src/interface';
+export type { ChatId, ChatProps, ChatListItemProps, ChatMessageProps, ChatMarkProps, ChatHeaderProps, ChatFooterProps, ChatListHeaderProps, ChatSlots, ChatListItemSlots, ChatMessageSlots, ChatMarkSlots, ChatHeaderSlots, ChatFooterSlots, ChatListItemData, ChatMessageData, ChatAttachment, OnChatSelect, OnMessageSend, OnAttachmentUpload, OnFilterChange, OnNetworkError, OnUploadError, OnSendError, ChatInst, ChatListInst, ChatAttachmentStatus, chatInjectionKey } from './src/interface';
 export { MessageStatus, ChatMessageType, ChatMarkType } from './src/interface';
 export type { ChatListItemsProps } from './src/ChatListItems';
 export type { ChatMessagesProps } from './src/ChatMessages';

package/lib/chat/src/ChatParts/ChatAttachment.d.ts

@@ -1,5 +1,5 @@
 import { type PropType } from 'vue';
-import type { ChatAttachment as ChatAttachmentType, ChatMessageData } from '../interface';
+import { ChatAttachment as ChatAttachmentType, ChatMessageData } from '../interface';
 declare const _default: import("vue").DefineComponent<{
     message: {
         type: PropType<ChatMessageData>;

package/lib/chat/src/ChatParts/ChatAttachment.js

@@ -61,7 +61,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return ({
                     id: `${String(props.message.id)}-attachment-${index}`,
                     name: attachment.name,
-                    status: attachment.status || 'finished',
+                    status: attachment.status || interface_1.ChatAttachmentStatus.FINISHED,
                     percentage: (_a = attachment.percentage) !== null && _a !== void 0 ? _a : null,
                     url: (_b = attachment.url) !== null && _b !== void 0 ? _b : null,
                     thumbnailUrl: getThumbnailUrl(attachment),
@@ -77,9 +77,9 @@ exports.default = (0, vue_1.defineComponent)({
                         gap: '2px',
                         marginTop: '0'
                     }
-                    : undefined, showRemoveButton: false, showDownloadButton: props.attachments.some((attachment) => attachment.status === 'finished' &&
+                    : undefined, showRemoveButton: false, showDownloadButton: props.attachments.some((attachment) => attachment.status === interface_1.ChatAttachmentStatus.FINISHED &&
                     attachment.url &&
-                    attachment.url !== '#'), showRetryButton: props.attachments.some((attachment) => attachment.status === 'error'), onDownload: handleDownload }), {
+                    attachment.url !== '#'), showRetryButton: props.attachments.some((attachment) => attachment.status === interface_1.ChatAttachmentStatus.ERROR), onDownload: handleDownload }), {
                 default: () => ((0, vue_1.h)(upload_1.UUploadFileList, null, {
                     'upload-file-title': slots['upload-file-title']
                         ? ({ file }) => { var _a; return (_a = slots['upload-file-title']) === null || _a === void 0 ? void 0 : _a.call(slots, file); }

package/lib/chat/src/ChatParts/MainArea.js

@@ -360,6 +360,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }))();
             }
         };
+        const handleOnChange = () => {
+            var _a;
+            const outerOnChange = (_a = footerUploadPropsRef.value) === null || _a === void 0 ? void 0 : _a.onChange;
+            if (outerOnChange) {
+                return (data) => {
+                    outerOnChange(data);
+                    attachmentFileList.value = [];
+                };
+            }
+        };
         const renderEditingBlock = () => {
             if (!(editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value) || !editingMessage.value)
                 return null;
@@ -379,7 +389,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderFooter = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__footer` },
-                (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value), {
+                (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value, { onChange: handleOnChange() }), {
                     default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "end", size: "small", wrap: false, class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => ((0, vue_1.h)(vue_1.Fragment, null,
                             (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {