@uzum-tech/ui 1.9.0 → 1.10.0

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

@@ -1,18 +1,47 @@
-import { h, defineComponent, inject, Fragment } from 'vue';
+import { h, defineComponent, inject, Fragment, ref } from 'vue';
 import { chatInjectionKey } from '../interface';
 import { UFlex } from '../../../flex';
 import { USelect } from '../../../select';
+import { UScrollbar } from '../../../scrollbar';
 import UChatListItems from '../ChatListItems';
 export default 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 = ref();
+        const lastScrollTop = ref(0);
+        const scrollTopFired = ref(false);
+        const scrollBottomFired = 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
          } = inject(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 (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
                 h(UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
@@ -24,11 +53,33 @@ export default defineComponent({
                     }
                 })));
         };
-        return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
-            renderListHeader(),
-            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
-                h(UChatListItems, { 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 (h("div", { class: `${this.mergedClsPrefixRef}-chat-sidebar` },
+            this.renderListHeader(),
+            h(UScrollbar, { ref: "sidebarContentRef", class: `${this.mergedClsPrefixRef}-chat-sidebar__content`, onScroll: this.handleSidebarScroll }, {
+                default: () => (h(UChatListItems, { 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/es/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/es/chat/src/styles/index.cssr.js

@@ -36,11 +36,11 @@ export default cB('chat', `
  gap: 8px;
  `), cE('content', `
  flex: 1;
- overflow-y: auto;
  min-height: 0;
+ `, [c('.u-scrollbar-content', `
  padding: 16px;
  padding-top: 8px;
- `), cE('item', `
+ `)]), cE('item', `
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
@@ -162,8 +162,19 @@ export default cB('chat', `
  `), 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;
  `), cE('header-actions', `
  padding: 4px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
  `), cE('unread-notification', `
  background-color: var(--u-unread-notification-background-color);
  color: var(--u-unread-notification-text-color);

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

@@ -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/es/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/es/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/es/crop/index.js

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

package/es/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/es/crop/src/Crop.js

@@ -0,0 +1,157 @@
+import { h, ref, watch, Fragment, computed, onMounted, defineComponent, onBeforeUnmount } from 'vue';
+import Cropper from 'cropperjs';
+import style from './styles/index.cssr';
+import { useConfig, useTheme } from '../../_mixins';
+import { cropLight } from '../styles';
+import { UButton } from '../../button';
+import { UFlex } from '../../flex';
+export const cropProps = Object.assign(Object.assign({}, 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'
+    } });
+export default defineComponent({
+    name: 'Crop',
+    inheritAttrs: false,
+    props: cropProps,
+    emits: {
+        cancel: () => true,
+        confirm: (dataUrl) => true
+    },
+    setup(props, { emit }) {
+        const cropWrapperRef = ref();
+        const cropImageRef = ref();
+        const cropperInstance = ref(null);
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme('Crop', '-crop', style, cropLight, props, mergedClsPrefixRef);
+        const cssVarsRef = 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 Cropper(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');
+        };
+        watch(props, initCrop);
+        onMounted(initCrop);
+        onBeforeUnmount(destroyCrop);
+        return {
+            cropWrapperRef,
+            cropImageRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef,
+            confirmCrop,
+            cancelCrop
+        };
+    },
+    render() {
+        const { src, cssVars, circleShape, mergedClsPrefix, cancelButtonText, confirmButtonText, confirmCrop, cancelCrop } = this;
+        return (h("div", { style: cssVars },
+            h("div", { ref: "cropWrapperRef", class: [
+                    `${mergedClsPrefix}-crop-wrapper`,
+                    circleShape ? `${mergedClsPrefix}-crop-wrapper--circle` : null
+                ] },
+                h("img", { ref: "cropImageRef", src: src, class: `${mergedClsPrefix}-crop-img` })),
+            h(UFlex, { justify: "end" }, {
+                default: () => (h(Fragment, null,
+                    h(UButton, { secondary: true, onClick: cancelCrop }, {
+                        default: () => cancelButtonText
+                    }),
+                    h(UButton, { tertiary: true, onClick: confirmCrop }, {
+                        default: () => confirmButtonText
+                    })))
+            })));
+    }
+});

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

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

package/es/crop/src/interface.js

@@ -0,0 +1,7 @@
+export 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 || (ViewMode = {}));

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

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