@gct-paas/core-web 0.1.4-dev.8 → 0.1.5-dev.0

package/es/modules/global-modal/src/typing.d.ts

@@ -0,0 +1,174 @@
+import { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
+import { CSSProperties, VNodeChild, ComputedRef } from 'vue';
+import { JSX } from 'vue/jsx-runtime';
+/**
+ * @description: 弹窗对外暴露的方法
+ */
+export interface ModalMethods {
+    setModalProps: (props: Partial<ModalProps>) => void;
+    emitVisible?: (visible: boolean, uid: number) => void;
+    redoModalHeight?: () => void;
+}
+export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+export interface ReturnMethods extends ModalMethods {
+    openModal: <T = IObject>(props?: boolean, data?: T, openOnSet?: boolean) => void;
+    closeModal: () => void;
+    getVisible?: ComputedRef<boolean>;
+}
+export type UseModalReturnType = [RegisterFn, ReturnMethods];
+export interface ReturnInnerMethods extends ModalMethods {
+    closeModal: () => void;
+    changeLoading: (loading: boolean) => void;
+    changeOkLoading: (loading: boolean) => void;
+    getVisible?: ComputedRef<boolean>;
+    redoModalHeight: () => void;
+}
+export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
+export interface ModalProps {
+    minHeight?: number;
+    height?: number;
+    wrapperFooterOffset?: number;
+    draggable?: boolean;
+    scrollTop?: boolean;
+    canFullscreen?: boolean;
+    defaultFullscreen?: boolean;
+    visible?: boolean;
+    helpMessage: string | string[];
+    useWrapper: boolean;
+    loading: boolean;
+    loadingTip?: string;
+    wrapperProps: Omit<ModalWrapperProps, 'loading'>;
+    showOkBtn: boolean;
+    showCancelBtn: boolean;
+    closeFunc: () => Promise<any>;
+    /**
+     * Specify a function that will be called when modal is closed completely.
+     * @type Function
+     */
+    afterClose?: () => any;
+    /**
+     * Body style for modal body element. Such as height, padding etc.
+     * @default {}
+     * @type object
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Text of the Cancel button
+     * @default 'cancel'
+     * @type string
+     */
+    cancelText?: string;
+    /**
+     * Centered Modal
+     * @default false
+     * @type boolean
+     */
+    centered?: boolean;
+    /**
+     * Whether a close (x) button is visible on top right of the modal dialog or not
+     * @default true
+     * @type boolean
+     */
+    closable?: boolean;
+    /**
+     * Whether a close (x) button is visible on top right of the modal dialog or not
+     */
+    closeIcon?: VNodeChild | JSX.Element;
+    /**
+     * Whether to apply loading visual effect for OK button or not
+     * @default false
+     * @type boolean
+     */
+    confirmLoading?: boolean;
+    /**
+     * Whether to unmount child components on onClose
+     * @default false
+     * @type boolean
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Footer content, set as :footer="null" when you don't need default buttons
+     * @default OK and Cancel buttons
+     * @type any (string | slot)
+     */
+    footer?: VNodeChild | JSX.Element;
+    /**
+     * Return the mount node for Modal
+     * @default () => document.body
+     * @type Function
+     */
+    getContainer?: (instance: any) => HTMLElement;
+    /**
+     * Whether show mask or not.
+     * @default true
+     * @type boolean
+     */
+    mask?: boolean;
+    /**
+     * Whether to close the modal dialog when the mask (area outside the modal) is clicked
+     * @default true
+     * @type boolean
+     */
+    maskClosable?: boolean;
+    /**
+     * Style for modal's mask element.
+     * @default {}
+     * @type object
+     */
+    maskStyle?: CSSProperties;
+    /**
+     * Text of the OK button
+     * @default 'OK'
+     * @type string
+     */
+    okText?: string;
+    /**
+     * Button type of the OK button
+     * @default 'primary'
+     * @type string
+     */
+    okType?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+    /**
+     * The ok button props, follow jsx rules
+     * @type object
+     */
+    okButtonProps?: ButtonProps;
+    /**
+     * The cancel button props, follow jsx rules
+     * @type object
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * The modal dialog's title
+     * @type any (string | slot)
+     */
+    title?: VNodeChild | JSX.Element;
+    /**
+     * Width of the modal dialog
+     * @default 520
+     * @type string | number
+     */
+    width?: string | number;
+    /**
+     * The class name of the container of the modal dialog
+     * @type string
+     */
+    wrapClassName?: string;
+    /**
+     * The z-index of the Modal
+     * @default 1000
+     * @type number
+     */
+    zIndex?: number;
+}
+export interface ModalWrapperProps {
+    footerOffset?: number;
+    loading: boolean;
+    modalHeaderHeight: number;
+    modalFooterHeight: number;
+    minHeight: number;
+    height: number;
+    visible: boolean;
+    fullScreen: boolean;
+    useWrapper: boolean;
+}

package/es/modules/picture-cropper/index.d.ts

@@ -0,0 +1,6 @@
+import { default as CopperFreeModal } from './src/CopperFreeModal.vue';
+import { default as CopperModal } from './src/CopperModal.vue';
+import { default as CropperImage } from './src/Cropper.vue';
+import { default as CropperAvatar } from './src/CropperAvatar.vue';
+import { default as CropperFree } from './src/CropperFree.vue';
+export { CopperFreeModal, CopperModal, CropperImage, CropperAvatar, CropperFree, };

package/es/modules/picture-cropper/index.mjs

@@ -0,0 +1,5 @@
+import "./src/Cropper.vue.mjs";
+import "./src/CopperFreeModal.vue.mjs";
+import "./src/CopperModal.vue.mjs";
+import "./src/CropperAvatar.vue.mjs";
+import "./src/CropperFree.vue.mjs";

package/es/modules/picture-cropper/src/CopperFreeModal.vue.d.ts

@@ -0,0 +1,99 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    src: {
+        type: StringConstructor;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+    };
+    accept: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: string[];
+    };
+    beforeUpload: {
+        type: FunctionConstructor;
+    };
+    uploadText: {
+        type: StringConstructor;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    register: (...args: any[]) => void;
+    uploadSuccess: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    src: {
+        type: StringConstructor;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+    };
+    accept: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: string[];
+    };
+    beforeUpload: {
+        type: FunctionConstructor;
+    };
+    uploadText: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onRegister?: ((...args: any[]) => any) | undefined;
+    onUploadSuccess?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    accept: string[];
+    circled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/picture-cropper/src/CopperFreeModal.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import CopperFreeModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default from "./CopperFreeModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs";
+import './CopperFreeModal.vue_vue_type_style_index_0_scoped_488ed4c7_lang.css';/* empty css                                                                      */
+//#region src/modules/picture-cropper/src/CopperFreeModal.vue
+var CopperFreeModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CopperFreeModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default, [["__scopeId", "data-v-488ed4c7"]]);
+//#endregion
+export { CopperFreeModal_default as default };

package/es/modules/picture-cropper/src/CopperFreeModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs

@@ -0,0 +1,297 @@
+import { useModalInner } from "../../global-modal/src/hooks/useModal.mjs";
+import { BasicModal } from "../../global-modal/index.mjs";
+import Cropper_default from "./Cropper.vue.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { isFunction } from "lodash-es";
+import { dataURLtoBlob, t, useNamespace } from "@gct-paas/core";
+import { Space, Tooltip, Upload, message } from "ant-design-vue";
+import { ReloadOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-cropper/src/CopperFreeModal.vue?vue&type=script&setup=true&name=CropperModal&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "empty"
+};
+var _hoisted_2 = { class: "flex flex-col justify-center items-center" };
+var _hoisted_3 = ["title"];
+var CopperFreeModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CopperFreeModal",
+	props: {
+		title: {
+			type: String,
+			default: "图片上传"
+		},
+		circled: {
+			type: Boolean,
+			default: true
+		},
+		uploadApi: { type: Function },
+		src: { type: String },
+		aspectRatio: { type: Number },
+		accept: {
+			type: Array,
+			default: [
+				"jpg",
+				"jpeg",
+				"png",
+				"bmp"
+			]
+		},
+		beforeUpload: { type: Function },
+		uploadText: { type: String }
+	},
+	emits: ["uploadSuccess", "register"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const src = ref(props.src || "");
+		const originalSrc = ref(props.src || "");
+		const previewSource = ref("");
+		const cropper = ref();
+		let scaleX = 1;
+		let scaleY = 1;
+		let filename = "";
+		const fileAccept = computed(() => {
+			return props.accept.map((e) => `image/${e}`).join(",");
+		});
+		const ns = useNamespace("cropper-free");
+		const [register, { closeModal, setModalProps }] = useModalInner((data) => {
+			if (data?.file) handleBeforeUpload(data.file);
+		});
+		watch(() => props.src, (value) => {
+			src.value = value || "";
+			originalSrc.value = value || "";
+		});
+		async function handleBeforeUpload(file) {
+			props.beforeUpload && await props.beforeUpload(file);
+			if (file.size / 1024 / 1024 > 4) {
+				message.warn(`【${file.name}】文件大小不能超过 4MB`);
+				return false;
+			}
+			if (!fileAccept.value.includes(file.type)) {
+				message.warning(`【${file.name}】${t("sys.component.cropper.acceptAvatarTypeTip")}`);
+				return false;
+			}
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			src.value = "";
+			previewSource.value = "";
+			reader.onload = function(e) {
+				src.value = e.target?.result ?? "";
+				filename = file.name;
+			};
+			return false;
+		}
+		function handleCropend({ imgBase64 }) {
+			previewSource.value = imgBase64;
+		}
+		function handleReady(cropperInstance) {
+			cropper.value = cropperInstance;
+		}
+		function handlerToolbar(event, arg) {
+			if (event === "scaleX") scaleX = arg = scaleX === -1 ? 1 : -1;
+			if (event === "scaleY") scaleY = arg = scaleY === -1 ? 1 : -1;
+			cropper.value?.[event]?.(arg);
+		}
+		async function handleOk() {
+			const uploadApi = props.uploadApi;
+			if (uploadApi && isFunction(uploadApi)) {
+				const blob = dataURLtoBlob(previewSource.value);
+				try {
+					setModalProps({ confirmLoading: true });
+					const result = await uploadApi({
+						name: "file",
+						file: blob,
+						filename
+					});
+					emit("uploadSuccess", {
+						source: previewSource.value,
+						data: result.data.data
+					});
+					closeModal();
+				} finally {
+					setModalProps({ confirmLoading: false });
+				}
+			}
+		}
+		function handleCancel() {
+			src.value = "";
+			setTimeout(() => {
+				src.value = originalSrc.value || "";
+			});
+		}
+		return (_ctx, _cache) => {
+			const _component_PlusOutlined = resolveComponent("PlusOutlined");
+			const _component_a_button = resolveComponent("a-button");
+			return openBlock(), createBlock(unref(BasicModal), mergeProps(_ctx.$attrs, {
+				title: __props.title,
+				width: "640px",
+				"min-height": "510",
+				"can-fullscreen": false,
+				"ok-text": unref(t)("sys.okText"),
+				onRegister: unref(register),
+				onOk: handleOk,
+				onCancel: handleCancel
+			}), {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(ns).b()) }, [createElementVNode("div", { class: normalizeClass(unref(ns).b("left")) }, [createElementVNode("div", { class: normalizeClass(unref(ns).b("cropper")) }, [src.value ? (openBlock(), createBlock(Cropper_default, {
+					key: 0,
+					src: src.value,
+					height: "304px",
+					width: "538px",
+					options: { aspectRatio: __props.aspectRatio ?? 200 / 120 },
+					onCropend: handleCropend,
+					onReady: handleReady
+				}, null, 8, ["src", "options"])) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Upload), {
+					"list-type": "picture-card",
+					"file-list": [],
+					accept: "image/*",
+					"before-upload": handleBeforeUpload
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [
+						createVNode(_component_PlusOutlined),
+						_cache[14] || (_cache[14] = createElementVNode("div", { class: "mt12px" }, "点击或将图片拖拽到这里上传", -1)),
+						_cache[15] || (_cache[15] = createElementVNode("div", { class: "color-[#8B8B8B] mt8px" }, " 仅支持JPG、PNG、JPEG、BMP格式，文件小于4M ", -1))
+					])]),
+					_: 1
+				})]))], 2), src.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ns).b("toolbar"))
+				}, [createVNode(unref(Upload), {
+					"file-list": [],
+					accept: fileAccept.value,
+					"before-upload": handleBeforeUpload
+				}, {
+					default: withCtx(() => [__props.uploadText ? (openBlock(), createBlock(_component_a_button, {
+						key: 0,
+						type: "link",
+						size: "small",
+						style: { "padding": "0" }
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.uploadText), 1)]),
+						_: 1
+					})) : (openBlock(), createElementBlock("a", {
+						key: 1,
+						title: unref(t)("sys.reUpload"),
+						placement: "bottom"
+					}, toDisplayString(unref(t)("sys.reUpload")), 9, _hoisted_3))]),
+					_: 1
+				}, 8, ["accept"]), createVNode(unref(Space), null, {
+					default: withCtx(() => [
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_zoom_in"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("zoom", .1))
+							}, {
+								icon: withCtx(() => [..._cache[16] || (_cache[16] = [createElementVNode("i", { class: "iconfont icon-fangda_zoom-in" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_zoom_out"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("zoom", -.1))
+							}, {
+								icon: withCtx(() => [..._cache[17] || (_cache[17] = [createElementVNode("i", { class: "iconfont icon-a-suoxiao_zoom-out1" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_rotate_left"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("rotate", -45))
+							}, {
+								icon: withCtx(() => [..._cache[18] || (_cache[18] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_rotate" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_rotate_right"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("rotate", 45))
+							}, {
+								icon: withCtx(() => [..._cache[19] || (_cache[19] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_2" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_scale_x"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[9] || (_cache[9] = ($event) => handlerToolbar("scaleX"))
+							}, {
+								icon: withCtx(() => [..._cache[20] || (_cache[20] = [createElementVNode("i", { class: "iconfont icon-shuipingfanzhuan_flip-horizontally" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_scale_y"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[10] || (_cache[10] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[11] || (_cache[11] = ($event) => handlerToolbar("scaleY"))
+							}, {
+								icon: withCtx(() => [..._cache[21] || (_cache[21] = [createElementVNode("i", { class: "iconfont icon-chuizhifanzhuan_flip-vertically" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_reset"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[12] || (_cache[12] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[13] || (_cache[13] = ($event) => handlerToolbar("reset"))
+							}, {
+								icon: withCtx(() => [createVNode(unref(ReloadOutlined))]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"])
+					]),
+					_: 1
+				})], 2)) : createCommentVNode("", true)], 2)], 2)]),
+				_: 1
+			}, 16, [
+				"title",
+				"ok-text",
+				"onRegister"
+			]);
+		};
+	}
+});
+//#endregion
+export { CopperFreeModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default as default };

package/es/modules/picture-cropper/src/CopperFreeModal.vue_vue_type_style_index_0_scoped_488ed4c7_lang.css

@@ -0,0 +1,48 @@
+.gct-cropper-free[data-v-488ed4c7] {
+  display: flex;
+  padding: 0 35px;
+}
+.gct-cropper-free-left[data-v-488ed4c7],
+.gct-cropper-free-right[data-v-488ed4c7] {
+  height: 304px;
+}
+.gct-cropper-free-left[data-v-488ed4c7] {
+  width: 100%;
+}
+.gct-cropper-free-cropper[data-v-488ed4c7] {
+  position: relative;
+  width: 538px;
+  height: 304px;
+  background: #eee;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
+  background-position: 0 0,
+      12px 12px;
+  background-size: 24px 24px;
+}
+.gct-cropper-free-toolbar[data-v-488ed4c7] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 538px;
+  margin-top: 10px;
+}
+.empty[data-v-488ed4c7] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-488ed4c7] {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-488ed4c7] .ant-upload-list {
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-488ed4c7] .ant-upload-list .ant-upload-select-picture-card {
+  width: 100%;
+  height: 100%;
+}

package/es/modules/picture-cropper/src/CopperModal.vue.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    src: {
+        type: StringConstructor;
+    };
+    sourceUrlValue: {
+        type: StringConstructor;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    register: (...args: any[]) => void;
+    uploadSuccess: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    src: {
+        type: StringConstructor;
+    };
+    sourceUrlValue: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onRegister?: ((...args: any[]) => any) | undefined;
+    onUploadSuccess?: ((...args: any[]) => any) | undefined;
+}>, {
+    circled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/picture-cropper/src/CopperModal.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default from "./CopperModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs";
+import './CopperModal.vue_vue_type_style_index_0_scoped_ee086999_lang.css';/* empty css                                                                  */
+//#region src/modules/picture-cropper/src/CopperModal.vue
+var CopperModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default, [["__scopeId", "data-v-ee086999"]]);
+//#endregion
+export { CopperModal_default as default };