#80 build

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/field.js": "/js/field.js",
     "/css/field.css": "/css/field.css"
-}
+}

package.json

@@ -11,13 +11,17 @@
     },
     "devDependencies": {
         "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0",
-        "object-to-formdata": "^1.5.2"
+        "laravel-mix": "^4.0.7",
+        "laravel-nova": "*",
+        "object-to-formdata": "^1.5.2",
+        "resolve-url-loader": "2.3.1",
+        "sass": "^1.19.0",
+        "sass-loader": "7.*",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
         "slug": "^0.9.1",
-        "vue": "^2.5.0",
+        "vue": "^2.5.17",
         "vuedraggable": "^2.16.0",
         "vuejs-clipper": "^0.2.11"
     }

readme.md

@@ -155,6 +155,12 @@ To disable this feature use the `croppable` method:
 Images::make('Gallery')->croppable(false);
 ```
 
+You can set all configurations like ratio e.g. as following: 
+```php
+Images::make('Gallery')->croppingConfigs(['ratio' => 4/3]);
+```
+Available cropping configuration, see https://github.com/timtnleeProject/vuejs-clipper#clipper-basic.
+
 ## Custom properties
 
 ![Custom properties](https://raw.githubusercontent.com/ebess/advanced-nova-media-library/master/docs/custom-properties.gif)

resources/js/components/Cropper.vue

@@ -3,7 +3,7 @@
     <modal v-if="image" @modal-close="$emit('close')">
       <card class="text-center clipping-container m-2 bg-white rounded-lg shadow-lg overflow-hidden">
         <div class="p-4">
-          <clipper-basic class="clipper" ref="clipper" bg-color="rgba(0, 0, 0, 0)" :rotate="rotate" :src="imageUrl"/>
+          <clipper-basic class="clipper" ref="clipper" bg-color="rgba(0, 0, 0, 0)" :rotate="rotate" :src="imageUrl" v-bind="configs"/>
         </div>
 
         <div class="bg-30 px-6 py-3 footer rounded-lg">
@@ -24,6 +24,10 @@
   export default {
     props: {
       image: Object,
+      configs: {
+        type: Object,
+        default: {},
+      },
     },
     data: () => ({
       rotate: 0,

resources/js/components/Gallery.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gallery" :class="{editable}">
-    <cropper v-if="editable" :image="cropImage" @close="cropImage = null" @crop-completed="onCroppedImage"/>
+    <cropper v-if="editable" :image="cropImage" @close="cropImage = null" @crop-completed="onCroppedImage" :configs="field.croppingConfigs"/>
 
     <component :is="draggable ? 'draggable' : 'div'" v-if="images.length > 0" v-model="images"
                class="gallery-list clearfix">

resources/js/components/icons/Scissors.vue

@@ -24,7 +24,10 @@
 <script>
   export default {
     props: {
-      brand: 'var(--black)',
+      brand: {
+        type: String,
+        default: 'var(--black)'
+      },
     },
   };
 </script>

resources/js/field.js

@@ -1,9 +1,12 @@
 import VuejsClipper from 'vuejs-clipper';
+import IndexField from './components/fields/IndexField';
+import DetailField from './components/fields/DetailField';
+import FormField from './components/fields/FormField';
 
 Nova.booting((Vue, router) => {
   Vue.use(VuejsClipper);
 
-  Vue.component('index-advanced-media-library-field', require('./components/fields/IndexField'));
-  Vue.component('detail-advanced-media-library-field', require('./components/fields/DetailField'));
-  Vue.component('form-advanced-media-library-field', require('./components/fields/FormField'));
+  Vue.component('index-advanced-media-library-field', IndexField);
+  Vue.component('detail-advanced-media-library-field', DetailField);
+  Vue.component('form-advanced-media-library-field', FormField);
 });

src/Fields/Images.php

@@ -25,8 +25,13 @@ public function singleImageRules($singleImageRules): self
         return $this;
     }
 
-    public function croppable(bool $croppable = true): self
-    {
-        return $this->withMeta(compact('croppable'));
-    }
+	public function croppable(bool $croppable = true): self
+	{
+		return $this->withMeta(compact('croppable'));
+	}
+
+	public function croppingConfigs(array $configs): self
+	{
+		return $this->withMeta(['croppingConfigs' => $configs]);
+	}
 }