@uzum-tech/ui 1.9.0 → 1.10.0

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

@@ -7,17 +7,46 @@ const vue_1 = require("vue");
 const interface_1 = require("../interface");
 const flex_1 = require("../../../flex");
 const select_1 = require("../../../select");
+const scrollbar_1 = require("../../../scrollbar");
 const ChatListItems_1 = __importDefault(require("../ChatListItems"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatSidebar',
     setup(props, { slots }) {
-        return { slots };
-    },
-    render() {
-        const { slots } = this;
-        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
+        const sidebarContentRef = (0, vue_1.ref)();
+        const lastScrollTop = (0, vue_1.ref)(0);
+        const scrollTopFired = (0, vue_1.ref)(false);
+        const scrollBottomFired = (0, vue_1.ref)(false);
+        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect, onChatItemsScrollToTop, onChatItemsScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
+        const handleSidebarScroll = (e) => {
+            var _a, _b;
+            const target = e.target;
+            if (!target)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = 5;
+            const scrollDirection = scrollTop > lastScrollTop.value ? 'down' : 'up';
+            const nearTop = scrollTop <= threshold;
+            const nearBottom = scrollHeight - (scrollTop + clientHeight) <= threshold;
+            if (scrollTop > threshold) {
+                scrollTopFired.value = false;
+            }
+            if (scrollHeight - (scrollTop + clientHeight) > threshold) {
+                scrollBottomFired.value = false;
+            }
+            if (nearTop && scrollDirection === 'up' && !scrollTopFired.value) {
+                scrollTopFired.value = true;
+                (_a = onChatItemsScrollToTop === null || onChatItemsScrollToTop === void 0 ? void 0 : onChatItemsScrollToTop.value) === null || _a === void 0 ? void 0 : _a.call(onChatItemsScrollToTop);
+            }
+            if (nearBottom &&
+                scrollDirection === 'down' &&
+                !scrollBottomFired.value) {
+                scrollBottomFired.value = true;
+                (_b = onChatItemsScrollToBottom === null || onChatItemsScrollToBottom === void 0 ? void 0 : onChatItemsScrollToBottom.value) === null || _b === void 0 ? void 0 : _b.call(onChatItemsScrollToBottom);
+            }
+            lastScrollTop.value = scrollTop;
+        };
         const renderListHeader = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
                 (0, vue_1.h)(flex_1.UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
@@ -29,11 +58,33 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                 })));
         };
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
-            renderListHeader(),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
-                (0, vue_1.h)(ChatListItems_1.default, { chatItems: chatItemsRef.value, selectedChatId: selectedChatIdRef.value, typingChatIds: typingChatIdsRef.value, typingText: typingTextRef.value, loading: chatItemsLoadingRef.value, loadingCount: chatItemsLoadingCountRef.value, emptyProps: listEmptyPropsRef.value, avatarProps: listItemAvatarPropsRef.value, badgeProps: listItemBadgePropsRef.value, notificationsShown: notificationsShownSetRef.value, onChatSelect: handleChatSelect }, {
-                    chatItemStatus: slots.chatItemStatus
-                }))));
+        return {
+            slots,
+            sidebarContentRef,
+            renderListHeader,
+            handleSidebarScroll,
+            mergedClsPrefixRef,
+            mergedThemeRef,
+            chatItemsRef,
+            chatItemsLoadingRef,
+            chatItemsLoadingCountRef,
+            listEmptyPropsRef,
+            selectedChatIdRef,
+            typingChatIdsRef,
+            typingTextRef,
+            listItemAvatarPropsRef,
+            listItemBadgePropsRef,
+            notificationsShownSetRef,
+            handleChatSelect
+        };
+    },
+    render() {
+        return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefixRef}-chat-sidebar` },
+            this.renderListHeader(),
+            (0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "sidebarContentRef", class: `${this.mergedClsPrefixRef}-chat-sidebar__content`, onScroll: this.handleSidebarScroll }, {
+                default: () => ((0, vue_1.h)(ChatListItems_1.default, { chatItems: this.chatItemsRef, selectedChatId: this.selectedChatIdRef, typingChatIds: this.typingChatIdsRef, typingText: this.typingTextRef, loading: this.chatItemsLoadingRef, loadingCount: this.chatItemsLoadingCountRef, emptyProps: this.listEmptyPropsRef, avatarProps: this.listItemAvatarPropsRef, badgeProps: this.listItemBadgePropsRef, notificationsShown: this.notificationsShownSetRef, onChatSelect: this.handleChatSelect }, {
+                    chatItemStatus: this.slots.chatItemStatus
+                }))
+            })));
     }
 });

package/lib/chat/src/interface.d.ts

@@ -137,6 +137,11 @@ export interface ChatProps {
     unreadCount?: number;
     headerButtonProps?: Partial<ButtonProps>;
     headerIconProps?: Partial<IconProps>;
+    headerShareButtonProps?: Partial<ButtonProps>;
+    headerProfileButtonProps?: Partial<ButtonProps>;
+    headerCloseButtonProps?: Partial<ButtonProps>;
+    headerShareIconProps?: Partial<IconProps>;
+    headerProfileIconProps?: Partial<IconProps>;
     messageSenderAvatarProps?: Partial<AvatarProps>;
     messageUploadProps?: Partial<UploadProps>;
     messageButtonProps?: Partial<ButtonProps>;
@@ -149,6 +154,8 @@ export interface ChatProps {
     retryText?: string;
     typingText?: string;
     closeButtonText?: string;
+    shareButtonTooltip?: string;
+    profileButtonTooltip?: string;
     unreadNotificationText?: string;
     chatItemsLoading?: boolean;
     chatItemsLoadingCount?: number;
@@ -159,10 +166,14 @@ export interface ChatProps {
     onMessageRetry?: (message: ChatMessageData) => void;
     onAttachmentUpload?: OnAttachmentUpload;
     onFilterChange?: OnFilterChange;
-    onLoadMoreChats?: OnLoadMoreChats;
+    onFooterInputChange?: (value: string, chatId: ChatId) => void;
     onNetworkError?: OnNetworkError;
     onUploadError?: OnUploadError;
     onSendError?: OnSendError;
+    onChatItemsScrollToTop?: () => void;
+    onChatItemsScrollToBottom?: () => void;
+    onMessagesScrollToTop?: () => void;
+    onMessagesScrollToBottom?: () => void;
 }
 export interface ChatSlots {
     header?: () => VNodeChild;
@@ -218,7 +229,6 @@ export type OnFilterChange = (filter: {
     type: string;
     value: any;
 }) => void;
-export type OnLoadMoreChats = (offset: number, limit: number) => void;
 export type OnNetworkError = (error: {
     code: string;
     message: string;
@@ -274,6 +284,8 @@ export declare const chatInjectionKey: InjectionKey<{
     retryTextRef: Ref<string>;
     typingTextRef: Ref<string>;
     closeButtonTextRef: Ref<string>;
+    shareButtonTooltipRef: Ref<string>;
+    profileButtonTooltipRef: Ref<string>;
     unreadNotificationTextRef: Ref<string>;
     notificationsShownSetRef: Ref<Set<ChatId>>;
     unreadCountsBeforeReadRef: Ref<Record<ChatId, number>>;
@@ -281,12 +293,12 @@ export declare const chatInjectionKey: InjectionKey<{
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;
+    handleFooterInputChange: (value: string, chatId: ChatId) => void;
     markMessagesAsRead?: (chatId: ChatId) => void;
     handleFilterChange: (filter: {
         type: string;
         value: string | number | boolean;
     }) => void;
-    handleLoadMoreChats: (offset: number, limit: number) => void;
     handleNetworkError: (error: {
         code: string;
         message: string;
@@ -302,4 +314,13 @@ export declare const chatInjectionKey: InjectionKey<{
     onChatClose?: Ref<(() => void) | undefined>;
     onChatShare?: Ref<(() => void) | undefined>;
     onUserProfile?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToTop?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToBottom?: Ref<(() => void) | undefined>;
+    onMessagesScrollToTop?: Ref<(() => void) | undefined>;
+    onMessagesScrollToBottom?: Ref<(() => void) | undefined>;
+    headerShareButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerProfileButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerCloseButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerShareIconPropsRef: Ref<Partial<IconProps> | undefined>;
+    headerProfileIconPropsRef: Ref<Partial<IconProps> | undefined>;
 }>;

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

@@ -41,11 +41,11 @@ exports.default = (0, cssr_1.cB)('chat', `
  gap: 8px;
  `), (0, cssr_1.cE)('content', `
  flex: 1;
- overflow-y: auto;
  min-height: 0;
+ `, [(0, cssr_1.c)('.u-scrollbar-content', `
  padding: 16px;
  padding-top: 8px;
- `), (0, cssr_1.cE)('item', `
+ `)]), (0, cssr_1.cE)('item', `
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
@@ -167,8 +167,19 @@ exports.default = (0, cssr_1.cB)('chat', `
  `), (0, cssr_1.cE)('header-title', `
  margin-top: 9px;
  color: var(--u-header-title-color);
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+ margin-right: 16px;
  `), (0, cssr_1.cE)('header-actions', `
  padding: 4px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
  `), (0, cssr_1.cE)('unread-notification', `
  background-color: var(--u-unread-notification-background-color);
  color: var(--u-unread-notification-text-color);

package/lib/components.d.ts

@@ -57,6 +57,7 @@ export * from './menu';
 export * from './mention';
 export * from './message';
 export * from './modal';
+export * from './modal-fullscreen';
 export * from './notification';
 export * from './page-header';
 export * from './pagination';
@@ -96,3 +97,4 @@ export * from './discrete';
 export * from './equation';
 export * from './toggle-button';
 export * from './flex';
+export * from './crop';

package/lib/components.js

@@ -73,6 +73,7 @@ __exportStar(require("./menu"), exports);
 __exportStar(require("./mention"), exports);
 __exportStar(require("./message"), exports);
 __exportStar(require("./modal"), exports);
+__exportStar(require("./modal-fullscreen"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./page-header"), exports);
 __exportStar(require("./pagination"), exports);
@@ -112,3 +113,4 @@ __exportStar(require("./discrete"), exports);
 __exportStar(require("./equation"), exports);
 __exportStar(require("./toggle-button"), exports);
 __exportStar(require("./flex"), exports);
+__exportStar(require("./crop"), exports);

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

@@ -102,6 +102,8 @@ import type { FlexTheme } from '../../flex/styles';
 import { CardListTheme } from '../../card-list/styles';
 import { ActionCardTheme } from '../../action-card';
 import { ChatTheme } from '../../chat/styles';
+import { ModalFullscreenTheme } from '../../modal-fullscreen/styles';
+import { CropTheme } from '../../crop/styles';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -190,6 +192,8 @@ export interface GlobalThemeWithoutCommon {
     Flex?: FlexTheme;
     CardList?: CardListTheme;
     Chat?: ChatTheme;
+    ModalFullscreen?: ModalFullscreenTheme;
+    Crop?: CropTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
     AccountOption?: AccountOptionTheme;

package/lib/crop/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UCrop, cropProps } from './src/Crop';
+export type { CropProps } from './src/Crop';
+export type { ViewMode } from './src/interface';

package/lib/crop/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropProps = exports.UCrop = void 0;
+var Crop_1 = require("./src/Crop");
+Object.defineProperty(exports, "UCrop", { enumerable: true, get: function () { return __importDefault(Crop_1).default; } });
+Object.defineProperty(exports, "cropProps", { enumerable: true, get: function () { return Crop_1.cropProps; } });

package/lib/crop/src/Crop.d.ts

@@ -0,0 +1,222 @@
+import { PropType } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+import { ViewMode } from './interface';
+export declare const cropProps: {
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+};
+export type CropProps = ExtractPublicPropTypes<typeof cropProps>;
+declare const _default: import("vue").DefineComponent<{
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+}, {
+    cropWrapperRef: import("vue").Ref<HTMLDivElement | undefined>;
+    cropImageRef: import("vue").Ref<HTMLImageElement | undefined>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-wrapper-border-radius': string;
+        '--u-wrapper-bg-color': string;
+        '--u-wrapper-width': string;
+        '--u-wrapper-height': string;
+        '--u-cropper-theme-color': string;
+        '--u-wrapper-margin': string;
+    }>;
+    confirmCrop: () => void;
+    cancelCrop: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => true;
+    confirm: (dataUrl: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+}>> & {
+    onConfirm?: ((dataUrl: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}, {
+    aspectRatio: number;
+    background: boolean;
+    wrapperWidth: string | number;
+    wrapperHeight: string | number;
+    viewMode: ViewMode;
+    dragMode: "none" | "move" | "crop";
+    circleShape: boolean;
+    zoomable: boolean;
+    cropperThemeColor: string;
+    cancelButtonText: string;
+    confirmButtonText: string;
+}, {}>;
+export default _default;

package/lib/crop/src/Crop.js

@@ -0,0 +1,163 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropProps = void 0;
+const vue_1 = require("vue");
+const cropperjs_1 = __importDefault(require("cropperjs"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const button_1 = require("../../button");
+const flex_1 = require("../../flex");
+exports.cropProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { src: String, wrapperWidth: {
+        type: [Number, String],
+        default: 'auto'
+    }, wrapperHeight: {
+        type: [Number, String],
+        default: 'auto'
+    }, viewMode: {
+        type: Number,
+        default: 0
+    }, dragMode: {
+        type: String,
+        default: 'none'
+    }, aspectRatio: {
+        type: Number,
+        default: NaN
+    }, background: {
+        type: Boolean,
+        default: true
+    }, circleShape: {
+        type: Boolean,
+        default: false
+    }, zoomable: {
+        type: Boolean,
+        default: false
+    }, cropperThemeColor: {
+        type: String,
+        default: '#fff'
+    }, cancelButtonText: {
+        type: String,
+        default: 'Cancel'
+    }, confirmButtonText: {
+        type: String,
+        default: 'Save'
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Crop',
+    inheritAttrs: false,
+    props: exports.cropProps,
+    emits: {
+        cancel: () => true,
+        confirm: (dataUrl) => true
+    },
+    setup(props, { emit }) {
+        const cropWrapperRef = (0, vue_1.ref)();
+        const cropImageRef = (0, vue_1.ref)();
+        const cropperInstance = (0, vue_1.ref)(null);
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Crop', '-crop', index_cssr_1.default, styles_1.cropLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const width = typeof props.wrapperWidth === 'string'
+                ? props.wrapperWidth.endsWith('px')
+                    ? props.wrapperWidth
+                    : `${props.wrapperWidth}px`
+                : `${props.wrapperWidth}px`;
+            const height = typeof props.wrapperHeight === 'string'
+                ? props.wrapperHeight.endsWith('px')
+                    ? props.wrapperHeight
+                    : `${props.wrapperHeight}px`
+                : `${props.wrapperHeight}px`;
+            const { self: { wrapperBorderRadius, wrapperBg, wrapperMargin } } = themeRef.value;
+            return {
+                '--u-wrapper-border-radius': wrapperBorderRadius,
+                '--u-wrapper-bg-color': wrapperBg,
+                '--u-wrapper-width': width,
+                '--u-wrapper-height': height,
+                '--u-cropper-theme-color': props.cropperThemeColor,
+                '--u-wrapper-margin': wrapperMargin
+            };
+        });
+        const initCrop = () => {
+            if (cropperInstance.value) {
+                destroyCrop();
+            }
+            if (props.src && cropWrapperRef.value && cropImageRef.value) {
+                cropperInstance.value = new cropperjs_1.default(cropImageRef.value, {
+                    viewMode: props.viewMode,
+                    dragMode: props.dragMode,
+                    aspectRatio: props.aspectRatio,
+                    background: props.background,
+                    guides: false,
+                    center: false,
+                    zoomable: props.zoomable
+                });
+            }
+        };
+        const destroyCrop = () => {
+            var _a;
+            (_a = cropperInstance.value) === null || _a === void 0 ? void 0 : _a.destroy();
+            cropperInstance.value = null;
+        };
+        const confirmCrop = () => {
+            var _a;
+            const sourceCanvas = (_a = cropperInstance.value) === null || _a === void 0 ? void 0 : _a.getCroppedCanvas();
+            if (sourceCanvas) {
+                if (props.circleShape) {
+                    const canvas = document.createElement('canvas');
+                    const context = canvas.getContext('2d');
+                    if (context) {
+                        const width = sourceCanvas.width;
+                        const height = sourceCanvas.height;
+                        canvas.width = width;
+                        canvas.height = height;
+                        context.imageSmoothingEnabled = true;
+                        context.drawImage(sourceCanvas, 0, 0, width, height);
+                        context.globalCompositeOperation = 'destination-in';
+                        context.beginPath();
+                        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+                        context.fill();
+                        emit('confirm', canvas.toDataURL());
+                    }
+                }
+                else {
+                    emit('confirm', sourceCanvas.toDataURL());
+                }
+            }
+        };
+        const cancelCrop = () => {
+            emit('cancel');
+        };
+        (0, vue_1.watch)(props, initCrop);
+        (0, vue_1.onMounted)(initCrop);
+        (0, vue_1.onBeforeUnmount)(destroyCrop);
+        return {
+            cropWrapperRef,
+            cropImageRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef,
+            confirmCrop,
+            cancelCrop
+        };
+    },
+    render() {
+        const { src, cssVars, circleShape, mergedClsPrefix, cancelButtonText, confirmButtonText, confirmCrop, cancelCrop } = this;
+        return ((0, vue_1.h)("div", { style: cssVars },
+            (0, vue_1.h)("div", { ref: "cropWrapperRef", class: [
+                    `${mergedClsPrefix}-crop-wrapper`,
+                    circleShape ? `${mergedClsPrefix}-crop-wrapper--circle` : null
+                ] },
+                (0, vue_1.h)("img", { ref: "cropImageRef", src: src, class: `${mergedClsPrefix}-crop-img` })),
+            (0, vue_1.h)(flex_1.UFlex, { justify: "end" }, {
+                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                    (0, vue_1.h)(button_1.UButton, { secondary: true, onClick: cancelCrop }, {
+                        default: () => cancelButtonText
+                    }),
+                    (0, vue_1.h)(button_1.UButton, { tertiary: true, onClick: confirmCrop }, {
+                        default: () => confirmButtonText
+                    })))
+            })));
+    }
+});

package/lib/crop/src/interface.d.ts

@@ -0,0 +1,6 @@
+export declare enum ViewMode {
+    v0 = 0,
+    v1 = 1,
+    v2 = 2,
+    v3 = 3
+}

package/lib/crop/src/interface.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewMode = void 0;
+var ViewMode;
+(function (ViewMode) {
+    ViewMode[ViewMode["v0"] = 0] = "v0";
+    ViewMode[ViewMode["v1"] = 1] = "v1";
+    ViewMode[ViewMode["v2"] = 2] = "v2";
+    ViewMode[ViewMode["v3"] = 3] = "v3";
+})(ViewMode || (exports.ViewMode = ViewMode = {}));

package/lib/crop/src/styles/index.cssr.d.ts

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