@uzum-tech/ui 1.9.0 → 1.10.0

package/es/tag/src/TagGroup.js

@@ -0,0 +1,109 @@
+import { h, defineComponent, computed, ref, toRef, cloneVNode } from 'vue';
+import { useMergedState } from 'vooks';
+import { useTheme, useConfig, useThemeClass, useRtl } from '../../_mixins';
+import { getSlot, call, flatten, createKey, resolveSize } from '../../_utils';
+import { tagGroupStyle } from './styles/index.cssr';
+import { tagLight } from '../styles';
+function mapSlot(defaultSlot, value, size, disabled, doUpdateValue) {
+    var _a;
+    const children = [];
+    for (let i = 0; i < defaultSlot.length; i++) {
+        const wrappedInstance = defaultSlot[i];
+        const name = (_a = wrappedInstance.type) === null || _a === void 0 ? void 0 : _a.name;
+        if (name !== 'Tag') {
+            children.push(wrappedInstance);
+            continue;
+        }
+        const instanceProps = wrappedInstance.props;
+        const instanceValue = instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.value;
+        if (instanceValue !== undefined) {
+            const isChecked = value === instanceValue;
+            const mergedDisabled = disabled || (instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.disabled) !== undefined || false;
+            const mergedSize = (instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.size) || size;
+            children.push(cloneVNode(wrappedInstance, {
+                size: mergedSize,
+                disabled: mergedDisabled,
+                checkable: true,
+                checked: isChecked,
+                onUpdateChecked: () => {
+                    doUpdateValue(instanceValue);
+                }
+            }));
+        }
+        else {
+            children.push(wrappedInstance);
+        }
+    }
+    return children;
+}
+export const tagGroupProps = Object.assign(Object.assign({}, useTheme.props), { value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    }, defaultValue: {
+        type: [String, Number, Boolean],
+        default: null
+    }, size: {
+        type: String,
+        default: 'medium'
+    }, gap: [String, Number], disabled: {
+        type: Boolean,
+        default: undefined
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+export default defineComponent({
+    name: 'TagGroup',
+    props: tagGroupProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const themeRef = useTheme('Tag', '-tag-group', tagGroupStyle, tagLight, props, mergedClsPrefixRef);
+        const mergedSizeRef = computed(() => props.size);
+        const mergedDisabledRef = computed(() => { var _a; return (_a = props.disabled) !== null && _a !== void 0 ? _a : false; });
+        const uncontrolledValueRef = ref(props.defaultValue);
+        const controlledValueRef = toRef(props, 'value');
+        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        function doUpdateValue(value) {
+            const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
+            if (onUpdateValue) {
+                call(onUpdateValue, value);
+            }
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value);
+            }
+            uncontrolledValueRef.value = value;
+        }
+        const rtlEnabledRef = useRtl('Tag', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { gap } = props;
+            const { common: { cubicBezierEaseInOut }, self: { [createKey('gap', mergedSizeRef.value)]: themeGap } } = themeRef.value;
+            const mergedGap = resolveSize(gap, themeGap);
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-gap': mergedGap
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('tag-group', computed(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
+        return {
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedValue: mergedValueRef,
+            mergedSize: mergedSizeRef,
+            mergedDisabled: mergedDisabledRef,
+            doUpdateValue,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, mergedValue, mergedSize, mergedDisabled } = this;
+        const children = mapSlot(flatten(getSlot(this)), mergedValue, mergedSize, mergedDisabled, this.doUpdateValue);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: [
+                `${mergedClsPrefix}-tag-group`,
+                this.rtlEnabled && `${mergedClsPrefix}-tag-group--rtl`,
+                this.themeClass
+            ], style: this.cssVars }, children));
+    }
+});

package/es/tag/src/styles/index.cssr.d.ts

@@ -1,2 +1,3 @@
 declare const _default: import("css-render").CNode;
 export default _default;
+export declare const tagGroupStyle: import("css-render").CNode;

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

@@ -115,4 +115,11 @@ export default cB('tag', `
  background-color: var(--u-color-checkable-outline);
  `, [cE('border', `
  border: var(--u-border);
- `)])]);
+ `)])]);
+// vars:
+// --u-gap
+export const tagGroupStyle = cB('tag-group', `
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: var(--u-gap);
+`);

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

@@ -1,6 +1,9 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
     closeIconSizeTiny: string;
     closeIconSizeSmall: string;
     closeIconSizeMedium: string;

package/es/tag/styles/light.js

@@ -4,6 +4,11 @@ export const self = (vars) => {
     const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSecondary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, staticBlack } = vars;
     const borderTagWidth = 2;
     return {
+        // tag-group
+        gapSmall: '4px',
+        gapMedium: '8px',
+        gapLarge: '12px',
+        // tag
         closeIconSizeTiny: '16px',
         closeIconSizeSmall: '16px',
         closeIconSizeMedium: '16px',

package/es/themes/dark.js

@@ -88,6 +88,8 @@ import { flexDark } from '../flex/styles';
 import { actionCardDark } from '../action-card/styles';
 import { inputOtpDark } from '../styles';
 import { chatDark } from '../chat/styles';
+import { modalFullscreenDark } from '../modal-fullscreen/styles';
+import { cropDark } from '../crop/styles';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -179,5 +181,7 @@ export const darkTheme = {
     Watermark: watermarkDark,
     ToggleButton: toggleButtonDark,
     Flex: flexDark,
-    Chat: chatDark
+    Chat: chatDark,
+    ModalFullscreen: modalFullscreenDark,
+    Crop: cropDark
 };

package/es/themes/light.js

@@ -90,6 +90,8 @@ import { flexLight } from '../flex/styles';
 import { actionCardLight } from '../action-card/styles';
 import { inputOtpLight } from '../input-otp/styles';
 import { chatLight } from '../chat/styles';
+import { modalFullscreenLight } from '../modal-fullscreen/styles';
+import { cropLight } from '../crop/styles';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -181,5 +183,7 @@ export const lightTheme = {
     Watermark: watermarkLight,
     ToggleButton: toggleButtonLight,
     Flex: flexLight,
-    Chat: chatLight
+    Chat: chatLight,
+    ModalFullscreen: modalFullscreenLight,
+    Crop: cropLight
 };

package/es/time-picker/src/TimePicker.d.ts

@@ -3538,8 +3538,8 @@ declare const _default: import("vue").DefineComponent<{
     to: string | boolean | HTMLElement;
     show: boolean | undefined;
     placement: FollowerPlacement;
-    clearable: boolean;
     defaultValue: number | null;
+    clearable: boolean;
     stateful: boolean;
     use12Hours: boolean;
     format: string;

package/es/transfer/src/Transfer.d.ts

@@ -4252,8 +4252,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly filter: Filter;
     readonly disabled: boolean | undefined;
     readonly virtualScroll: boolean;
-    readonly filterable: boolean;
     readonly defaultValue: OptionValue[] | null;
+    readonly filterable: boolean;
     readonly options: Option[];
     readonly showSelected: boolean;
     readonly sourceFilterable: boolean;

package/es/tree-select/src/TreeSelect.d.ts

@@ -3077,9 +3077,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly checkable: boolean;
     readonly placement: FollowerPlacement;
     readonly defaultShow: boolean;
+    readonly defaultValue: string | number | (string | number)[] | null;
     readonly filterable: boolean;
     readonly clearable: boolean;
-    readonly defaultValue: string | number | (string | number)[] | null;
     readonly options: TreeSelectOption[];
     readonly clearFilterAfterSelect: boolean;
     readonly consistentMenuWidth: boolean;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.0";
+declare const _default: "1.10.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.9.0';
+export default '1.10.0';

package/es/virtual-list/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NVirtualList, virtualListProps } from './src/VirtualList';
+export { default as UVirtualList, virtualListProps } from './src/VirtualList';
 export type { VirtualListInst, VirtualListProps } from './src/VirtualList';

package/es/virtual-list/index.js

@@ -1 +1 @@
-export { default as NVirtualList, virtualListProps } from './src/VirtualList';
+export { default as UVirtualList, virtualListProps } from './src/VirtualList';

package/lib/_internal/scrollbar/src/Scrollbar.js

@@ -111,9 +111,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const heightDiff = contentHeight - containerHeight;
-                if (!heightDiff) {
+                if (!heightDiff)
                     return 0;
-                }
                 return ((containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value));
             }
         });
@@ -132,9 +131,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const widthDiff = contentWidth - containerWidth;
-                if (!widthDiff) {
+                if (!widthDiff)
                     return 0;
-                }
                 return ((containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value));
             }
         });
@@ -165,22 +163,19 @@ const Scrollbar = (0, vue_1.defineComponent)({
         });
         const mergedContainerRef = (0, vue_1.computed)(() => {
             const { container } = props;
-            if (container) {
+            if (container)
                 return container();
-            }
             return containerRef.value;
         });
         const mergedContentRef = (0, vue_1.computed)(() => {
             const { content } = props;
-            if (content) {
+            if (content)
                 return content();
-            }
             return contentRef.value;
         });
         const scrollTo = (options, y) => {
-            if (!props.scrollable) {
+            if (!props.scrollable)
                 return;
-            }
             if (typeof options === 'number') {
                 scrollToPosition(options, y !== null && y !== void 0 ? y : 0, 0, false, 'auto');
                 return;
@@ -214,15 +209,13 @@ const Scrollbar = (0, vue_1.defineComponent)({
         });
         // methods
         const handleContentResize = () => {
-            if (activateState.isDeactivated) {
+            if (activateState.isDeactivated)
                 return;
-            }
             sync();
         };
         const handleContainerResize = (e) => {
-            if (activateState.isDeactivated) {
+            if (activateState.isDeactivated)
                 return;
-            }
             const { onResize } = props;
             if (onResize) {
                 onResize(e);
@@ -230,13 +223,11 @@ const Scrollbar = (0, vue_1.defineComponent)({
             sync();
         };
         const scrollBy = (options, y) => {
-            if (!props.scrollable) {
+            if (!props.scrollable)
                 return;
-            }
             const { value: container } = mergedContainerRef;
-            if (!container) {
+            if (!container)
                 return;
-            }
             if (typeof options === 'object') {
                 container.scrollBy(options);
             }
@@ -246,9 +237,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
         };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
             const { value: container } = mergedContainerRef;
-            if (!container) {
+            if (!container)
                 return;
-            }
             if (debounce) {
                 const { scrollTop, offsetHeight } = container;
                 if (top > scrollTop) {
@@ -313,9 +303,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
         }
         function handleScroll(e) {
             const { onScroll } = props;
-            if (onScroll) {
+            if (onScroll)
                 onScroll(e);
-            }
             syncScrollState();
         }
         function syncScrollState() {
@@ -374,9 +363,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
         }
         function sync() {
-            if (!props.scrollable) {
+            if (!props.scrollable)
                 return;
-            }
             if (props.useUnifiedContainer) {
                 syncUnifiedContainer();
             }
@@ -401,9 +389,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-            if (!xBarPressed) {
+            if (!xBarPressed)
                 return;
-            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -413,9 +400,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerWidth } = containerWidthRef;
             const { value: contentWidth } = contentWidthRef;
             const { value: xBarSize } = xBarSizeRef;
-            if (containerWidth === null || contentWidth === null) {
+            if (containerWidth === null || contentWidth === null)
                 return;
-            }
             const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
                 ? window.innerWidth - e.clientX - memoMouseX
                 : e.clientX - memoMouseX;
@@ -428,9 +414,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             if (container) {
                 container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 const { internalOnUpdateScrollLeft } = props;
-                if (internalOnUpdateScrollLeft) {
+                if (internalOnUpdateScrollLeft)
                     internalOnUpdateScrollLeft(toScrollLeft);
-                }
             }
         }
         function handleXScrollMouseUp(e) {
@@ -454,9 +439,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-            if (!yBarPressed) {
+            if (!yBarPressed)
                 return;
-            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -466,9 +450,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
             const { value: yBarSize } = yBarSizeRef;
-            if (containerHeight === null || contentHeight === null) {
+            if (containerHeight === null || contentHeight === null)
                 return;
-            }
             const dY = e.clientY - memoMouseY;
             const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize);
             const toScrollTopUpperBound = contentHeight - containerHeight;
@@ -523,9 +506,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             // if you pass inner to scrollbar, you may use a ref inside component
             // however, when scrollbar is mounted, ref is not ready at component
             // you need to init by yourself
-            if (props.container) {
+            if (props.container)
                 return;
-            }
             sync();
         });
         (0, vue_1.onBeforeUnmount)(() => {
@@ -599,9 +581,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
     render() {
         var _a;
         const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail, yPlacement, xPlacement, xScrollable } = this;
-        if (!this.scrollable) {
+        if (!this.scrollable)
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
-        }
         const triggerIsNone = this.trigger === 'none';
         const createYRail = (className, style) => {
             return ((0, vue_1.h)("div", { ref: "yRailRef", class: [

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1610,8 +1610,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly to: string | boolean | HTMLElement;
     readonly resetMenuOnOptionsChange: boolean;
     readonly placement: FollowerPlacement;
-    readonly clearable: boolean;
     readonly defaultValue: string | null;
+    readonly clearable: boolean;
     readonly options: AutoCompleteOptions;
     readonly blurAfterSelect: boolean;
     readonly clearAfterSelect: boolean;

package/lib/cascader/src/Cascader.d.ts

@@ -3364,9 +3364,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: boolean;
     readonly valueField: string;
     readonly placement: FollowerPlacement;
+    readonly defaultValue: Value | null;
     readonly filterable: boolean;
     readonly clearable: boolean;
-    readonly defaultValue: Value | null;
     readonly options: CascaderOption[];
     readonly clearFilterAfterSelect: boolean;
     readonly remote: boolean;

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, OnLoadMoreChats, 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, chatInjectionKey } from './src/interface';
 export { MessageStatus, ChatMessageType, ChatMarkType } from './src/interface';
 export type { ChatListItemsProps } from './src/ChatListItems';
 export type { ChatMessagesProps } from './src/ChatMessages';