@web-utils/form-ui 1.0.0-beta8 → 1.0.0-beta80

package/image-cropper/index.d.ts

@@ -0,0 +1,365 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    appendToBody: boolean;
+    option?: Record<string, any> | undefined;
+    $props: {
+        readonly appendToBody?: boolean | undefined;
+        readonly option?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    dialog: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            dialog: ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {
+                    readonly appendToBody?: boolean | undefined;
+                    readonly appendTo?: (string | HTMLElement) | undefined;
+                    readonly beforeClose?: import('element-plus').DialogBeforeCloseFn | undefined;
+                    readonly destroyOnClose?: boolean | undefined;
+                    readonly closeOnClickModal?: boolean | undefined;
+                    readonly closeOnPressEscape?: boolean | undefined;
+                    readonly lockScroll?: boolean | undefined;
+                    readonly modal?: boolean | undefined;
+                    readonly modalPenetrable?: boolean | undefined;
+                    readonly openDelay?: number | undefined;
+                    readonly closeDelay?: number | undefined;
+                    readonly top?: string | undefined;
+                    readonly modelValue?: boolean | undefined;
+                    readonly modalClass?: string | undefined;
+                    readonly width?: string | number | undefined;
+                    readonly zIndex?: number | undefined;
+                    readonly trapFocus?: boolean | undefined;
+                    readonly headerAriaLevel?: string | undefined;
+                    readonly transition?: import('element-plus').DialogTransition | undefined;
+                    readonly center?: boolean | undefined;
+                    readonly alignCenter?: boolean | undefined;
+                    readonly closeIcon?: import('element-plus/es/utils/index.mjs').IconPropType | undefined;
+                    readonly draggable?: boolean | undefined;
+                    readonly overflow?: boolean | undefined;
+                    readonly fullscreen?: boolean | undefined;
+                    readonly headerClass?: string | undefined;
+                    readonly bodyClass?: string | undefined;
+                    readonly footerClass?: string | undefined;
+                    readonly showClose?: boolean | undefined;
+                    readonly title?: string | undefined;
+                    readonly ariaLevel?: string | undefined;
+                    readonly onClose?: (() => any) | undefined | undefined;
+                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined | undefined;
+                    readonly onOpen?: (() => any) | undefined | undefined;
+                    readonly onOpened?: (() => any) | undefined | undefined;
+                    readonly onClosed?: (() => any) | undefined | undefined;
+                    readonly onOpenAutoFocus?: (() => any) | undefined | undefined;
+                    readonly onCloseAutoFocus?: (() => any) | undefined | undefined;
+                } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+                $attrs: import('vue').Attrs;
+                $refs: {
+                    [x: string]: unknown;
+                };
+                $slots: Readonly<{
+                    [name: string]: globalThis.Slot | undefined;
+                }>;
+                $root: ComponentPublicInstance | null;
+                $parent: ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: ((event: "update:modelValue", value: boolean) => void) & ((event: "close") => void) & ((event: "closed") => void) & ((event: "open") => void) & ((event: "opened") => void) & ((event: "openAutoFocus") => void) & ((event: "closeAutoFocus") => void);
+                $el: any;
+                $options: import('vue').ComponentOptionsBase<Readonly<import('element-plus').DialogProps> & Readonly<{
+                    onClose?: (() => any) | undefined;
+                    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+                    onOpen?: (() => any) | undefined;
+                    onOpened?: (() => any) | undefined;
+                    onClosed?: (() => any) | undefined;
+                    onOpenAutoFocus?: (() => any) | undefined;
+                    onCloseAutoFocus?: (() => any) | undefined;
+                }>, {
+                    visible: globalThis.Ref<boolean, boolean>;
+                    dialogContentRef: globalThis.Ref<any, any>;
+                    resetPosition: () => void;
+                    handleClose: () => void;
+                }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    close: () => void;
+                    "update:modelValue": (value: boolean) => void;
+                    open: () => void;
+                    opened: () => void;
+                    closed: () => void;
+                    openAutoFocus: () => void;
+                    closeAutoFocus: () => void;
+                }, string, {
+                    appendTo: string | HTMLElement;
+                    title: string;
+                    transition: import('element-plus').DialogTransition;
+                    overflow: boolean;
+                    closeOnClickModal: boolean;
+                    closeOnPressEscape: boolean;
+                    lockScroll: boolean;
+                    modal: boolean;
+                    openDelay: number;
+                    closeDelay: number;
+                    headerAriaLevel: string;
+                    alignCenter: boolean;
+                    draggable: boolean;
+                    showClose: boolean;
+                    ariaLevel: string;
+                }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('vue').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            } & Readonly<{
+                appendTo: string | HTMLElement;
+                title: string;
+                transition: import('element-plus').DialogTransition;
+                overflow: boolean;
+                closeOnClickModal: boolean;
+                closeOnPressEscape: boolean;
+                lockScroll: boolean;
+                modal: boolean;
+                openDelay: number;
+                closeDelay: number;
+                headerAriaLevel: string;
+                alignCenter: boolean;
+                draggable: boolean;
+                showClose: boolean;
+                ariaLevel: string;
+            }> & Omit<Readonly<import('element-plus').DialogProps> & Readonly<{
+                onClose?: (() => any) | undefined;
+                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+                onOpen?: (() => any) | undefined;
+                onOpened?: (() => any) | undefined;
+                onClosed?: (() => any) | undefined;
+                onOpenAutoFocus?: (() => any) | undefined;
+                onCloseAutoFocus?: (() => any) | undefined;
+            }>, "showClose" | "appendTo" | "title" | "visible" | "transition" | "modal" | "lockScroll" | "openDelay" | "closeDelay" | "closeOnClickModal" | "closeOnPressEscape" | "draggable" | "overflow" | "alignCenter" | "headerAriaLevel" | "ariaLevel" | "dialogContentRef" | "resetPosition" | "handleClose"> & {
+                visible: boolean;
+                dialogContentRef: any;
+                resetPosition: () => void;
+                handleClose: () => void;
+            } & {} & import('vue').ComponentCustomProperties & {} & {
+                $slots: {
+                    header?: (props: {
+                        close: () => void;
+                        titleId: string;
+                        titleClass: string;
+                    }) => any;
+                } & {
+                    title?: (props: {}) => any;
+                } & {
+                    default?: (props: {}) => any;
+                } & {
+                    footer?: (props: {}) => any;
+                };
+            }) | null;
+        };
+        $slots: Readonly<{
+            [name: string]: globalThis.Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+            close: () => void;
+            hide: () => void;
+            $emit: (event: "toggle-fullscreen", ...args: any[]) => void;
+            modelValue: boolean;
+            customClass: string;
+            showClose: boolean;
+            embed: boolean;
+            title: string;
+            fullscreen: boolean;
+            appendToBody: boolean;
+            center: boolean;
+            top: string;
+            showFullscreen: boolean;
+            showFullScreen: boolean;
+            bodyPadding: boolean;
+            modal: boolean;
+            modalPenetrable: boolean;
+            lockScroll: boolean;
+            openDelay: number;
+            closeDelay: number;
+            closeOnClickModal: boolean;
+            closeOnPressEscape: boolean;
+            draggable: boolean;
+            overflow: boolean;
+            alignCenter: boolean;
+            destroyOnClose: boolean;
+            headerAriaLevel: string;
+            zIndex?: number | undefined;
+            appendTo?: string | Record<string, any> | undefined;
+            beforeClose?: Function | undefined;
+            transition?: string | Record<string, any> | undefined;
+            width?: string | number | undefined;
+            height?: string | undefined;
+            modalClass?: string | undefined;
+            headerClass?: string | undefined;
+            bodyClass?: string | undefined;
+            footerClass?: string | undefined;
+            closeIcon?: string | Record<string, any> | undefined;
+            $props: {
+                readonly modelValue?: boolean | undefined;
+                readonly customClass?: string | undefined;
+                readonly showClose?: boolean | undefined;
+                readonly embed?: boolean | undefined;
+                readonly title?: string | undefined;
+                readonly fullscreen?: boolean | undefined;
+                readonly appendToBody?: boolean | undefined;
+                readonly center?: boolean | undefined;
+                readonly top?: string | undefined;
+                readonly showFullscreen?: boolean | undefined;
+                readonly showFullScreen?: boolean | undefined;
+                readonly bodyPadding?: boolean | undefined;
+                readonly modal?: boolean | undefined;
+                readonly modalPenetrable?: boolean | undefined;
+                readonly lockScroll?: boolean | undefined;
+                readonly openDelay?: number | undefined;
+                readonly closeDelay?: number | undefined;
+                readonly closeOnClickModal?: boolean | undefined;
+                readonly closeOnPressEscape?: boolean | undefined;
+                readonly draggable?: boolean | undefined;
+                readonly overflow?: boolean | undefined;
+                readonly alignCenter?: boolean | undefined;
+                readonly destroyOnClose?: boolean | undefined;
+                readonly headerAriaLevel?: string | undefined;
+                readonly zIndex?: number | undefined;
+                readonly appendTo?: string | Record<string, any> | undefined;
+                readonly beforeClose?: Function | undefined;
+                readonly transition?: string | Record<string, any> | undefined;
+                readonly width?: string | number | undefined;
+                readonly height?: string | undefined;
+                readonly modalClass?: string | undefined;
+                readonly headerClass?: string | undefined;
+                readonly bodyClass?: string | undefined;
+                readonly footerClass?: string | undefined;
+                readonly closeIcon?: string | Record<string, any> | undefined;
+            };
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "modelValue" | "$props" | "$emit" | "customClass" | "showClose" | "zIndex" | "appendTo" | "close" | "embed" | "title" | "fullscreen" | "beforeClose" | "appendToBody" | "hide" | "transition" | "width" | "height" | "center" | "top" | "showFullscreen" | "showFullScreen" | "bodyPadding" | "modal" | "modalPenetrable" | "modalClass" | "headerClass" | "bodyClass" | "footerClass" | "lockScroll" | "openDelay" | "closeDelay" | "closeOnClickModal" | "closeOnPressEscape" | "draggable" | "overflow" | "alignCenter" | "destroyOnClose" | "closeIcon" | "headerAriaLevel"> & {
+        close: () => void;
+        hide: () => void;
+        $emit: (event: "toggle-fullscreen", ...args: any[]) => void;
+        modelValue: boolean;
+        customClass: string;
+        showClose: boolean;
+        embed: boolean;
+        title: string;
+        fullscreen: boolean;
+        appendToBody: boolean;
+        center: boolean;
+        top: string;
+        showFullscreen: boolean;
+        showFullScreen: boolean;
+        bodyPadding: boolean;
+        modal: boolean;
+        modalPenetrable: boolean;
+        lockScroll: boolean;
+        openDelay: number;
+        closeDelay: number;
+        closeOnClickModal: boolean;
+        closeOnPressEscape: boolean;
+        draggable: boolean;
+        overflow: boolean;
+        alignCenter: boolean;
+        destroyOnClose: boolean;
+        headerAriaLevel: string;
+        zIndex?: number | undefined;
+        appendTo?: string | Record<string, any> | undefined;
+        beforeClose?: Function | undefined;
+        transition?: string | Record<string, any> | undefined;
+        width?: string | number | undefined;
+        height?: string | undefined;
+        modalClass?: string | undefined;
+        headerClass?: string | undefined;
+        bodyClass?: string | undefined;
+        footerClass?: string | undefined;
+        closeIcon?: string | Record<string, any> | undefined;
+        $props: {
+            readonly modelValue?: boolean | undefined;
+            readonly customClass?: string | undefined;
+            readonly showClose?: boolean | undefined;
+            readonly embed?: boolean | undefined;
+            readonly title?: string | undefined;
+            readonly fullscreen?: boolean | undefined;
+            readonly appendToBody?: boolean | undefined;
+            readonly center?: boolean | undefined;
+            readonly top?: string | undefined;
+            readonly showFullscreen?: boolean | undefined;
+            readonly showFullScreen?: boolean | undefined;
+            readonly bodyPadding?: boolean | undefined;
+            readonly modal?: boolean | undefined;
+            readonly modalPenetrable?: boolean | undefined;
+            readonly lockScroll?: boolean | undefined;
+            readonly openDelay?: number | undefined;
+            readonly closeDelay?: number | undefined;
+            readonly closeOnClickModal?: boolean | undefined;
+            readonly closeOnPressEscape?: boolean | undefined;
+            readonly draggable?: boolean | undefined;
+            readonly overflow?: boolean | undefined;
+            readonly alignCenter?: boolean | undefined;
+            readonly destroyOnClose?: boolean | undefined;
+            readonly headerAriaLevel?: string | undefined;
+            readonly zIndex?: number | undefined;
+            readonly appendTo?: string | Record<string, any> | undefined;
+            readonly beforeClose?: Function | undefined;
+            readonly transition?: string | Record<string, any> | undefined;
+            readonly width?: string | number | undefined;
+            readonly height?: string | undefined;
+            readonly modalClass?: string | undefined;
+            readonly headerClass?: string | undefined;
+            readonly bodyClass?: string | undefined;
+            readonly footerClass?: string | undefined;
+            readonly closeIcon?: string | Record<string, any> | undefined;
+        };
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            header?(_: {}): any;
+            default?(_: {}): any;
+            footer?(_: {
+                close: () => void;
+            }): any;
+        };
+    }) | null;
+    cropper: any;
+}, any>;
+export default _default;

package/image-cropper/index.mjs

@@ -0,0 +1,156 @@
+import { t as e } from "../chunks/V-Js6hNd.mjs";
+import { ElButton as t } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import { createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, createVNode as o, mergeModels as s, normalizeStyle as c, openBlock as l, ref as u, unref as d, useModel as f, useTemplateRef as p, withCtx as m } from "vue";
+import { dataURLtoFile as h } from "@web-utils/core";
+import "element-plus/es/components/button/style/css";
+import { VueCropper as g } from "vue-cropper";
+//#region src/components/image-cropper/ImageCropper.vue
+var _ = { class: "cropper-content" }, v = { class: "cropper-box" }, y = { class: "cropper" }, b = { class: "footer-btn" }, x = { class: "show-preview" }, S = ["src"], C = /* @__PURE__ */ Object.assign({ name: "ImageCropper" }, {
+	__name: "ImageCropper",
+	props: /* @__PURE__ */ s({
+		appendToBody: Boolean,
+		option: Object
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let C = f(s, "modelValue"), w = s, T = p("cropper"), E = p("dialog"), D = u({}), O = (e) => {
+			e = e || 1, T.value.changeScale(e);
+		}, k = () => {
+			T.value.rotateLeft();
+		}, A = () => {
+			T.value.rotateRight();
+		}, j = (e) => {
+			D.value = e;
+		}, M = () => {
+			E.value.close(), T.value.getCropData((e) => {
+				var t, n;
+				let r = e;
+				w.option.type === "file" && (r = h(e, `${(/* @__PURE__ */ new Date()).getTime()}.${w.option.outputType}`)), (t = (n = w.option).callback) == null || t.call(n, r);
+			});
+		}, N = (e) => {
+			var t, n;
+			e == null || e(), (t = (n = w.option).cancel) == null || t.call(n), typeof w.option.beforeClose == "function" && w.option.beforeClose();
+		};
+		return (u, f) => {
+			let p = t, h = e;
+			return l(), n(h, {
+				ref_key: "dialog",
+				ref: E,
+				modelValue: C.value,
+				"onUpdate:modelValue": f[3] || (f[3] = (e) => C.value = e),
+				class: "avue-cropper",
+				"before-close": N,
+				title: "图片剪裁",
+				"close-on-press-escape": !1,
+				"close-on-click-modal": !1,
+				"append-to-body": s.appendToBody,
+				width: "1000px"
+			}, {
+				footer: m(() => [o(p, {
+					type: "primary",
+					onClick: M
+				}, {
+					default: m(() => [...f[4] || (f[4] = [a("确 定", -1)])]),
+					_: 1
+				}), o(p, { onClick: f[2] || (f[2] = (e) => N()) }, {
+					default: m(() => [...f[5] || (f[5] = [a("取 消", -1)])]),
+					_: 1
+				})]),
+				default: m(() => [i("div", _, [
+					i("div", v, [
+						i("div", y, [o(d(g), {
+							ref_key: "cropper",
+							ref: T,
+							img: s.option.img,
+							"output-size": s.option.outputSize,
+							"output-type": s.option.outputType,
+							info: s.option.info,
+							"can-scale": s.option.canScale,
+							"auto-crop": s.option.autoCrop,
+							"auto-crop-width": s.option.autoCropWidth,
+							"auto-crop-height": s.option.autoCropHeight,
+							fixed: s.option.fixed,
+							"fixed-number": s.option.fixedNumber,
+							full: s.option.full,
+							"fixed-box": s.option.fixedBox,
+							"can-move": s.option.canMove,
+							"can-move-box": s.option.canMoveBox,
+							original: s.option.original,
+							"center-box": s.option.centerBox,
+							height: s.option.height,
+							"info-true": s.option.infoTrue,
+							"max-img-size": s.option.maxImgSize,
+							enlarge: s.option.enlarge,
+							mode: s.option.mode,
+							onRealTime: j
+						}, null, 8, [
+							"img",
+							"output-size",
+							"output-type",
+							"info",
+							"can-scale",
+							"auto-crop",
+							"auto-crop-width",
+							"auto-crop-height",
+							"fixed",
+							"fixed-number",
+							"full",
+							"fixed-box",
+							"can-move",
+							"can-move-box",
+							"original",
+							"center-box",
+							"height",
+							"info-true",
+							"max-img-size",
+							"enlarge",
+							"mode"
+						])]),
+						r("底部操作工具按钮"),
+						i("div", b, [
+							o(p, {
+								type: "primary",
+								icon: "el-icon-zoom-in",
+								onClick: f[0] || (f[0] = (e) => O(1))
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-zoom-out",
+								onClick: f[1] || (f[1] = (e) => O(-1))
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-refresh-left",
+								onClick: k
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-refresh-right",
+								onClick: A
+							})
+						])
+					]),
+					r("预览效果图"),
+					i("div", x, [i("div", {
+						style: c(d(D).div),
+						class: "preview"
+					}, [i("img", {
+						src: d(D).url,
+						style: c(d(D).img),
+						alt: ""
+					}, null, 12, S)], 4)])
+				])]),
+				_: 1
+			}, 8, ["modelValue", "append-to-body"]);
+		};
+	}
+});
+//#endregion
+export { C as default };

package/image-cropper/style.css

@@ -0,0 +1 @@
+.vue-cropper[data-v-a742df44]{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;text-align:left;direction:ltr;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);width:100%;height:100%;position:relative}.cropper-box[data-v-a742df44],.cropper-box-canvas[data-v-a742df44],.cropper-drag-box[data-v-a742df44],.cropper-crop-box[data-v-a742df44],.cropper-face[data-v-a742df44]{-webkit-user-select:none;user-select:none;position:absolute;top:0;bottom:0;left:0;right:0}.cropper-box-canvas img[data-v-a742df44]{text-align:left;-webkit-user-select:none;user-select:none;max-width:none;max-height:none;position:relative;transform:none}.cropper-box[data-v-a742df44]{overflow:hidden}.cropper-move[data-v-a742df44]{cursor:move}.cropper-crop[data-v-a742df44]{cursor:crosshair}.cropper-modal[data-v-a742df44]{background:#00000080}.cropper-view-box[data-v-a742df44]{-webkit-user-select:none;user-select:none;outline:1px solid #3399ffbf;width:100%;height:100%;display:block;overflow:hidden}.cropper-view-box img[data-v-a742df44]{-webkit-user-select:none;user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-a742df44]{opacity:.1;background-color:#fff;top:0;left:0}.crop-info[data-v-a742df44]{text-align:center;color:#fff;background-color:#000c;min-width:65px;font-size:12px;line-height:20px;position:absolute;left:0}.crop-line[data-v-a742df44]{opacity:.1;width:100%;height:100%;display:block;position:absolute}.line-w[data-v-a742df44]{cursor:n-resize;height:5px;top:-3px;left:0}.line-a[data-v-a742df44]{cursor:w-resize;width:5px;top:0;left:-3px}.line-s[data-v-a742df44]{cursor:s-resize;height:5px;bottom:-3px;left:0}.line-d[data-v-a742df44]{cursor:e-resize;width:5px;top:0;right:-3px}.crop-point[data-v-a742df44]{opacity:.75;background-color:#39f;border-radius:100%;width:8px;height:8px;position:absolute}.point1[data-v-a742df44]{cursor:nw-resize;top:-4px;left:-4px}.point2[data-v-a742df44]{cursor:n-resize;margin-left:-3px;top:-5px;left:50%}.point3[data-v-a742df44]{cursor:ne-resize;top:-4px;right:-4px}.point4[data-v-a742df44]{cursor:w-resize;margin-top:-3px;top:50%;left:-4px}.point5[data-v-a742df44]{cursor:e-resize;margin-top:-3px;top:50%;right:-4px}.point6[data-v-a742df44]{cursor:sw-resize;bottom:-5px;left:-4px}.point7[data-v-a742df44]{cursor:s-resize;margin-left:-3px;bottom:-5px;left:50%}.point8[data-v-a742df44]{cursor:se-resize;bottom:-5px;right:-4px}@media screen and (max-width:500px){.crop-point[data-v-a742df44]{opacity:.45;background-color:#39f;border-radius:100%;width:20px;height:20px;position:absolute}.point1[data-v-a742df44]{top:-10px;left:-10px}.point2[data-v-a742df44],.point4[data-v-a742df44],.point5[data-v-a742df44],.point7[data-v-a742df44]{display:none}.point3[data-v-a742df44]{top:-10px;right:-10px}.point4[data-v-a742df44]{top:0;left:0}.point6[data-v-a742df44]{bottom:-10px;left:-10px}.point8[data-v-a742df44]{bottom:-10px;right:-10px}}.avue-cropper .cropper-content{justify-content:flex-end;display:flex}.avue-cropper .cropper-content .cropper-box{flex:1;width:100%}.avue-cropper .cropper-content .cropper-box .cropper{width:auto;height:300px}.avue-cropper .cropper-content .show-preview{flex:1;justify-content:center;display:flex}.avue-cropper .cropper-content .show-preview .preview{background:#ccc;border:1px solid #67c23a;overflow:hidden}.avue-cropper .cropper-content .footer-btn{justify-content:center;margin-top:30px;padding-right:10px;display:flex}

package/image-preview/index.d.ts

@@ -0,0 +1,61 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    visible: BooleanConstructor;
+    beforeClose: FunctionConstructor;
+    closeOnClickModal: BooleanConstructor;
+    click: FunctionConstructor;
+    modal: BooleanConstructor;
+    datas: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    beginIndex: NumberConstructor;
+}>, {}, {
+    left: number;
+    top: number;
+    scale: number;
+    rotate: number;
+    index: number | undefined;
+}, {
+    styleBoxName(): {
+        marginLeft: string;
+        marginTop: string;
+    };
+    styleName(): {
+        transform: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+    isRrrow(): boolean;
+}, {
+    getName(url: any): any;
+    handlePrint(): void;
+    handlePrev(): void;
+    handleNext(): void;
+    stopItem(): void;
+    isMediaType(item: any): false | "audio" | "video" | "img" | undefined;
+    subScale(): void;
+    addScale(): void;
+    handleChange(): void;
+    move(e: any): void;
+    handleClick(item: any, index: any, df?: boolean): void;
+    close(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "close"[], "close", import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    visible: BooleanConstructor;
+    beforeClose: FunctionConstructor;
+    closeOnClickModal: BooleanConstructor;
+    click: FunctionConstructor;
+    modal: BooleanConstructor;
+    datas: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    beginIndex: NumberConstructor;
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    modal: boolean;
+    closeOnClickModal: boolean;
+    datas: unknown[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;