@cesarv/v-image-crop-dialog 1.1.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -7
- package/dist/styles.css +1 -1
- package/dist/v-image-crop-dialog.mjs +2171 -2077
- package/dist/v-image-crop-dialog.umd.js +2 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# V-Image-Crop-Dialog
|
|
2
2
|
|
|
3
|
-
A Vue 3 dialog component for image cropping, built with Vuetify
|
|
3
|
+
A Vue 3 dialog component for image cropping, built with Vuetify 4 and TypeScript. Based on `vue-advanced-cropper` for a powerful and intuitive cropping experience.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- 🎨 Full integration with **Vuetify
|
|
7
|
+
- 🎨 Full integration with **Vuetify 4**
|
|
8
8
|
- 🔄 Support for **rectangular** and **circular** cropping
|
|
9
9
|
- 🖼️ Support for images via **File** or **URL**
|
|
10
10
|
- 🔧 Advanced controls: rotation, flip, zoom, and reset
|
|
@@ -18,7 +18,7 @@ A Vue 3 dialog component for image cropping, built with Vuetify 3 and TypeScript
|
|
|
18
18
|
## Requirements
|
|
19
19
|
|
|
20
20
|
- Vue 3.5+
|
|
21
|
-
- Vuetify
|
|
21
|
+
- Vuetify 4+
|
|
22
22
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
@@ -26,6 +26,19 @@ A Vue 3 dialog component for image cropping, built with Vuetify 3 and TypeScript
|
|
|
26
26
|
npm install @cesarv/v-image-crop-dialog
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
If you use the default toolbar icons (Material Design Icons), install the font and import it in your app:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install @mdi/font
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
// In main.ts or your entry file
|
|
37
|
+
import '@mdi/font/css/materialdesignicons.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Alternatively, you can pass custom icon names (compatible with your existing icon set) via the icon props and skip the MDI font.
|
|
41
|
+
|
|
29
42
|
## Usage
|
|
30
43
|
|
|
31
44
|
### Setup
|
|
@@ -44,8 +57,10 @@ Or import the component directly:
|
|
|
44
57
|
|
|
45
58
|
```html
|
|
46
59
|
<script setup lang="ts">
|
|
47
|
-
import
|
|
48
|
-
import '@cesarv/v-image-crop-dialog/dist/
|
|
60
|
+
import VImageCropDialog from '@cesarv/v-image-crop-dialog';
|
|
61
|
+
import '@cesarv/v-image-crop-dialog/dist/style.css';
|
|
62
|
+
// If you use the default icons (Material Design Icons), import the font in your app:
|
|
63
|
+
// import '@mdi/font/css/materialdesignicons.css';
|
|
49
64
|
</script>
|
|
50
65
|
```
|
|
51
66
|
|
|
@@ -66,7 +81,7 @@ import '@cesarv/v-image-crop-dialog/dist/v-image-crop-dialog.css';
|
|
|
66
81
|
|
|
67
82
|
<script setup lang="ts">
|
|
68
83
|
import { ref } from 'vue';
|
|
69
|
-
import
|
|
84
|
+
import VImageCropDialog from '@cesarv/v-image-crop-dialog';
|
|
70
85
|
|
|
71
86
|
const open = ref(false);
|
|
72
87
|
const imageUrl = ref('https://example.com/image.jpg');
|
|
@@ -267,7 +282,7 @@ These controls are displayed as floating buttons over the cropper and can be cus
|
|
|
267
282
|
- If `imgWidth` and `imgHeight` are not specified, the image will maintain its original dimensions
|
|
268
283
|
- The component requires either `file` or `url` to be provided to function
|
|
269
284
|
- Make sure Vuetify is properly configured in your project
|
|
270
|
-
-
|
|
285
|
+
- Default icons use Material Design Icons (mdi-*). Import `@mdi/font/css/materialdesignicons.css` in your app when using defaults, or pass icon props compatible with your own icon set (e.g. Vuetify's VIcon).
|
|
271
286
|
|
|
272
287
|
## License
|
|
273
288
|
|