@cesarv/v-image-crop-dialog 0.0.1

package/README.md

@@ -0,0 +1,278 @@
+# V-Image-Crop-Dialog
+
+A Vue 3 dialog component for image cropping, built with Vuetify 3 and TypeScript. Based on `vue-advanced-cropper` for a powerful and intuitive cropping experience.
+
+## Features
+
+- 🎨 Full integration with **Vuetify 3**
+- 🔄 Support for **rectangular** and **circular** cropping
+- 🖼️ Support for images via **File** or **URL**
+- 🔧 Advanced controls: rotation, flip, zoom, and reset
+- 📐 Customizable aspect ratio
+- 🎯 Configurable output dimensions
+- 💾 Automatic export in WebP format
+- 📱 Fully responsive
+- 🎭 TypeScript support
+- 🎨 Customizable icons and button text
+
+## Requirements
+
+- Vue 3.5+
+- Vuetify 3.11+
+
+## Installation
+
+```bash
+npm install @cesarv/v-image-crop-dialog
+```
+
+## Usage
+
+### Setup
+
+If you're using the component as a plugin:
+
+```typescript
+import { createApp } from 'vue';
+import VImageCropDialog from '@cesarv/v-image-crop-dialog';
+
+const app = createApp(App);
+app.use(VImageCropDialog);
+```
+
+Or import the component directly:
+
+```html
+<script setup lang="ts">
+import { VImageCropDialog } from '@cesarv/v-image-crop-dialog';
+import '@cesarv/v-image-crop-dialog/dist/v-image-crop-dialog.css';
+</script>
+```
+
+### Basic Example
+
+```html
+<template>
+  <div>
+    <VBtn @click="open = true">Open Cropper</VBtn>
+    
+    <VImageCropDialog
+      v-model="open"
+      :url="imageUrl"
+      @update:file="handleCroppedImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VImageCropDialog } from '@cesarv/v-image-crop-dialog';
+
+const open = ref(false);
+const imageUrl = ref('https://example.com/image.jpg');
+
+const handleCroppedImage = (file: File) => {
+  console.log('Cropped image:', file);
+  // Upload or process the file here
+};
+</script>
+```
+
+## Examples
+
+### Cropping with File
+
+```html
+<template>
+  <div>
+    <input type="file" @change="handleFileSelect" accept="image/*" />
+    
+    <VImageCropDialog
+      v-model="open"
+      :file="selectedFile"
+      @update:file="handleCroppedImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const open = ref(false);
+const selectedFile = ref<File | null>(null);
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0];
+    open.value = true;
+  }
+};
+
+const handleCroppedImage = (file: File) => {
+  console.log('Cropped image:', file);
+};
+</script>
+```
+
+### Circular Crop with Fixed Aspect Ratio
+
+```html
+<template>
+  <VImageCropDialog
+    v-model="open"
+    :url="imageUrl"
+    stencil="circle"
+    :aspect-ratio="1"
+    @update:file="handleCroppedImage"
+  />
+</template>
+```
+
+### Custom Dimensions
+
+```html
+<template>
+  <VImageCropDialog
+    v-model="open"
+    :url="imageUrl"
+    :img-width="800"
+    :img-height="600"
+    :aspect-ratio="4/3"
+    @update:file="handleCroppedImage"
+  />
+</template>
+```
+
+### Persistent Dialog
+
+```html
+<template>
+  <VImageCropDialog
+    v-model="open"
+    :url="imageUrl"
+    persistent
+    max-width="800px"
+    @update:file="handleCroppedImage"
+  />
+</template>
+```
+
+### Custom Icons and Button Text
+
+```html
+<template>
+  <VImageCropDialog
+    v-model="open"
+    :url="imageUrl"
+    icon-rotate-right="mdi-rotate-clockwise"
+    icon-flip-horizontal="mdi-swap-horizontal"
+    crop-button-text="Confirm"
+    icon-crop="mdi-check-circle"
+    @update:file="handleCroppedImage"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `boolean` | `false` | Controls dialog visibility |
+| `file` | `File \| null` | `null` | Image file to crop |
+| `url` | `string \| null` | `null` | Image URL to crop |
+| `stencil` | `'rect' \| 'circle'` | `'rect'` | Type of crop stencil |
+| `imgWidth` | `number` | `undefined` | Output image width in pixels |
+| `imgHeight` | `number` | `undefined` | Output image height in pixels |
+| `aspectRatio` | `number` | `undefined` | Crop aspect ratio (e.g., 16/9, 1) |
+| `persistent` | `boolean` | `false` | Prevents dialog from closing when clicking outside |
+| `maxWidth` | `string \| number` | `'auto'` | Maximum dialog width |
+| `iconFlipVertical` | `string` | `'mdi-flip-vertical'` | Icon for vertical flip control |
+| `iconFlipHorizontal` | `string` | `'mdi-flip-horizontal'` | Icon for horizontal flip control |
+| `iconRotateRight` | `string` | `'mdi-rotate-right'` | Icon for rotate right control |
+| `iconRotateLeft` | `string` | `'mdi-rotate-left'` | Icon for rotate left control |
+| `iconZoomIn` | `string` | `'mdi-magnify-plus-outline'` | Icon for zoom in control |
+| `iconZoomOut` | `string` | `'mdi-magnify-minus-outline'` | Icon for zoom out control |
+| `iconReset` | `string` | `'mdi-refresh'` | Icon for reset control |
+| `iconCrop` | `string` | `'mdi-check'` | Icon for crop button |
+| `cropButtonText` | `string` | `'Crop'` | Text for crop button |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `boolean` | Emitted when dialog visibility changes |
+| `update:file` | `File` | Emitted when image is cropped, returns WebP file |
+
+### Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `activator` | `activatorProps` | Slot for element that activates the dialog |
+| `crop-button` | `{ processing: boolean, crop: () => void }` | Slot for custom crop button |
+
+### Activator Slot
+
+Use the activator slot to customize the element that opens the dialog:
+
+```html
+<template>
+  <VImageCropDialog v-model="open" :url="imageUrl">
+    <template #activator="{ props: activatorProps }">
+      <VBtn v-bind="activatorProps" color="primary">
+        Crop Image
+      </VBtn>
+    </template>
+  </VImageCropDialog>
+</template>
+```
+
+### Crop Button Slot
+
+Use the crop-button slot to completely customize the crop button:
+
+```html
+<template>
+  <VImageCropDialog v-model="open" :url="imageUrl">
+    <template #crop-button="{ processing, crop }">
+      <VBtn
+        color="success"
+        :loading="processing"
+        @click="crop"
+      >
+        <VIcon icon="mdi-check" start />
+        Confirm Crop
+      </VBtn>
+    </template>
+  </VImageCropDialog>
+</template>
+```
+
+## Cropper Controls
+
+The component includes built-in controls for:
+
+- **Rotate**: Rotate image 90° left or right
+- **Flip**: Flip image horizontally or vertically
+- **Zoom**: Zoom in or out
+- **Reset**: Restore image to original state
+
+These controls are displayed as floating buttons over the cropper and can be customized via icon props.
+
+## Notes
+
+- The cropped image is always exported in **WebP** format
+- If `imgWidth` and `imgHeight` are not specified, the image will maintain its original dimensions
+- The component requires either `file` or `url` to be provided to function
+- Make sure Vuetify is properly configured in your project
+- All icon props accept Material Design Icons (mdi-*) or any icon string compatible with Vuetify's VIcon component
+
+## License
+
+ISC
+
+## Author
+
+[Cesar Vieira](https://github.com/cesarvieira)

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './src/index'
+export {}
+import VImageCropDialog from './src/index'
+export default VImageCropDialog
+export * from './src/index'
+export {}

package/dist/src/components/VImageCropDialog.vue.d.ts

@@ -0,0 +1,314 @@
+import { CropperResult } from 'vue-advanced-cropper';
+interface Props {
+    modelValue: boolean;
+    stencil?: 'rect' | 'circle';
+    imgWidth?: number;
+    imgHeight?: number;
+    persistent?: boolean;
+    maxWidth?: string | number;
+    file?: File | null;
+    url?: string | null;
+    aspectRatio?: number;
+    iconFlipVertical?: string;
+    iconFlipHorizontal?: string;
+    iconRotateRight?: string;
+    iconRotateLeft?: string;
+    iconZoomIn?: string;
+    iconZoomOut?: string;
+    iconReset?: string;
+    iconCrop?: string;
+    cropButtonText?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        activator?(_: {
+            [x: string]: any;
+        }): any;
+        'crop-button'?(_: {
+            processing: boolean;
+            crop: () => Promise<void>;
+        }): any;
+    };
+    refs: {
+        cropperEl: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{} | {
+                [x: string]: any;
+            }> & Omit<{
+                readonly [x: string]: any;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<any>, {
+                getResult: () => CropperResult;
+                setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+                refresh: () => void;
+                zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+                move: (left: number, top?: number) => void;
+                rotate: (angle: number) => void;
+                flip: (horizontal: boolean, vertical?: boolean) => void;
+                reset: () => void;
+            }, {}, import('vue').ComputedOptions, import('vue').MethodOptions, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {} | {
+                [x: string]: any;
+            }, {}, 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: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').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<any>, "getResult" | "setCoordinates" | "refresh" | "zoom" | "move" | "rotate" | "flip" | "reset"> & import('vue').ShallowUnwrapRef<{
+            getResult: () => CropperResult;
+            setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+            refresh: () => void;
+            zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+            move: (left: number, top?: number) => void;
+            rotate: (angle: number) => void;
+            flip: (horizontal: boolean, vertical?: boolean) => void;
+            reset: () => void;
+        }> & {
+            [x: string]: never;
+        } & import('vue').MethodOptions & import('vue').ComponentCustomProperties & {}) | ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{} | {
+                [x: string]: any;
+            }> & Omit<{
+                readonly [x: string]: any;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<any>, {
+                getResult: () => CropperResult;
+                setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+                refresh: () => void;
+                zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+                move: (left: number, top?: number) => void;
+                rotate: (angle: number) => void;
+                flip: (horizontal: boolean, vertical?: boolean) => void;
+                reset: () => void;
+            }, {}, import('vue').ComputedOptions, import('vue').MethodOptions, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {} | {
+                [x: string]: any;
+            }, {}, 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: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').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<{
+            [x: string]: any;
+        }> & Omit<Readonly<any>, "getResult" | "setCoordinates" | "refresh" | "zoom" | "move" | "rotate" | "flip" | "reset"> & import('vue').ShallowUnwrapRef<{
+            getResult: () => CropperResult;
+            setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+            refresh: () => void;
+            zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+            move: (left: number, top?: number) => void;
+            rotate: (angle: number) => void;
+            flip: (horizontal: boolean, vertical?: boolean) => void;
+            reset: () => void;
+        }> & {
+            [x: string]: never;
+        } & import('vue').MethodOptions & import('vue').ComponentCustomProperties & {}) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+    "update:file": (value: File) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:file"?: ((value: File) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    cropperEl: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{} | {
+            [x: string]: any;
+        }> & Omit<{
+            readonly [x: string]: any;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<any>, {
+            getResult: () => CropperResult;
+            setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+            refresh: () => void;
+            zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+            move: (left: number, top?: number) => void;
+            rotate: (angle: number) => void;
+            flip: (horizontal: boolean, vertical?: boolean) => void;
+            reset: () => void;
+        }, {}, import('vue').ComputedOptions, import('vue').MethodOptions, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {} | {
+            [x: string]: any;
+        }, {}, 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: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').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<any>, "getResult" | "setCoordinates" | "refresh" | "zoom" | "move" | "rotate" | "flip" | "reset"> & import('vue').ShallowUnwrapRef<{
+        getResult: () => CropperResult;
+        setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+        refresh: () => void;
+        zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+        move: (left: number, top?: number) => void;
+        rotate: (angle: number) => void;
+        flip: (horizontal: boolean, vertical?: boolean) => void;
+        reset: () => void;
+    }> & {
+        [x: string]: never;
+    } & import('vue').MethodOptions & import('vue').ComponentCustomProperties & {}) | ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{} | {
+            [x: string]: any;
+        }> & Omit<{
+            readonly [x: string]: any;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<any>, {
+            getResult: () => CropperResult;
+            setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+            refresh: () => void;
+            zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+            move: (left: number, top?: number) => void;
+            rotate: (angle: number) => void;
+            flip: (horizontal: boolean, vertical?: boolean) => void;
+            reset: () => void;
+        }, {}, import('vue').ComputedOptions, import('vue').MethodOptions, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {} | {
+            [x: string]: any;
+        }, {}, 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: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').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<{
+        [x: string]: any;
+    }> & Omit<Readonly<any>, "getResult" | "setCoordinates" | "refresh" | "zoom" | "move" | "rotate" | "flip" | "reset"> & import('vue').ShallowUnwrapRef<{
+        getResult: () => CropperResult;
+        setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
+        refresh: () => void;
+        zoom: (factor: number, center?: import('vue-advanced-cropper').Point) => void;
+        move: (left: number, top?: number) => void;
+        rotate: (angle: number) => void;
+        flip: (horizontal: boolean, vertical?: boolean) => void;
+        reset: () => void;
+    }> & {
+        [x: string]: never;
+    } & import('vue').MethodOptions & import('vue').ComponentCustomProperties & {}) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { default as VImageCropDialog } from './components/VImageCropDialog.vue';
+export { VImageCropDialog };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;