Merge branch '3.x' into fix/multiselect-dropdown-out-of-bounds

Author: ifox

Diff for: .github/workflows/main.yml

@@ -108,7 +108,7 @@ jobs:
         id: composer-cache
         run: |
           echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         with:
           path: ${{ steps.composer-cache.outputs.dir }}
           key: ${{ matrix.os }}-${{ matrix.laravel }}-${{ matrix.php }}-${{ matrix.dbal }}-composer-${{ hashFiles('**/composer.lock') }}

Diff for: composer.json

@@ -48,9 +48,9 @@
     "area17/phptorch": "dev-main",
     "chillerlan/php-qrcode": "~4.0",
     "friendsofphp/php-cs-fixer": "^3.0",
+    "larastan/larastan": "^2.9",
     "nette/php-generator": "^4.0.3",
     "nunomaduro/collision": "^6.0 || ^7.0 || ^8.0",
-    "nunomaduro/larastan": "^2.0",
     "orchestra/testbench": "^7.8 || ^8.0 || ^9.0",
     "orchestra/testbench-dusk": "^7.8 || ^8.0 || ^9.0",
     "phpunit/php-invoker": "^3.1 || ^4.0",

Diff for: docs/content/1_docs/4_form-fields/06_multi-select.md

@@ -200,21 +200,38 @@ public function sectors() {
 - In your repository, make sure to sync the association when saving:
 
 ```php
-public function afterSave($object, $fields)
+public function afterSave($object, $fields): void
 {
     $object->sectors()->sync($fields['sectors'] ?? []);
 
     parent::afterSave($object, $fields);
 }
 ```
 
+:::tabs=currenttab.FormBuilder&items.FormBuilder|FormView:::
+:::tab=name.FormBuilder:::
+
+```php
+        $form->add(
+            MultiSelect::make()
+            ->name('sectors')
+            ->options(
+                Options::fromArray(app()->make(SectorsRepository::class)->listAll()->toArray())
+              )
+        );
+```
+
+:::#tab:::
+
+:::tab=name.FormView:::
+
 - In your controller, add to the formData the collection of options:
 
 ```php
 protected function formData($request)
 {
     return [
-        'sectors' => app()->make(SectorRepository::class)->listAll()
+        'sectors' => app()->make(SectorRepository::class)->listAll()->toArray()
     ];
 }
 ```
@@ -229,6 +246,9 @@ protected function formData($request)
 />
 ```
 
+:::#tab:::
+:::#tabs:::
+
 When used in a [block](../5_block-editor), no migration is needed.
 
 ## Multi Select Inline

Diff for: docs/content/2_guides/assets/customized-without-publish-switch.png

@@ -207,8 +207,8 @@
         if (!this.active) return
 
         clearTimeout(this.timer)
-        document.removeEventListener('click', this.closeFromDoc, true)
-        document.removeEventListener('touchend', this.closeFromDoc, true)
+        document.removeEventListener('click', this.closeFromDoc, false)
+        document.removeEventListener('touchend', this.closeFromDoc, false)
 
         if (this.fixed) {
           window.removeEventListener('scroll', this.closeFromDoc, true)

Diff for: frontend/js/components/Dropdown.vue

@@ -763,7 +763,7 @@
   }
 
   .media__actions {
-    min-width:45px * 3;
+    flex-shrink: 0;
 
     @media screen and (max-width: 1140px) {
       display: none !important;

Diff for: frontend/js/components/MediaField.vue

@@ -15,6 +15,7 @@
                             :index="index"
                             :mediaContext="name"
                             :cropContext="cropContext"
+                            :activeCrop="activeCrop"
                             :hover="hoverable"
                             :isSlide="true"
                             :withAddInfo="withAddInfo"
@@ -70,6 +71,10 @@
       disabled: {
         type: Boolean,
         default: false
+      },
+      activeCrop: {
+        type: Boolean,
+        default: true
       }
     },
     data: function () {

Diff for: frontend/js/components/Slideshow.vue

@@ -4,7 +4,7 @@
     <draggable class="editorSidebar__blocks"
                :class="editorSidebarClasses"
                v-model="blocks"
-               :options="{
+               v-bind="{
                     group: {
                       name: 'editorBlocks',
                       pull: 'clone',

Diff for: frontend/js/components/editor/EditorSidebarBlockList.vue

@@ -197,46 +197,53 @@
         this.uploadProgress(0)
       },
       _onSubmitCallback (id, name) {
-        this.$emit('clear')
-        // each upload session will add upload files with original filenames in a folder named using a uuid
-        this.unique_folder_name = this.unique_folder_name || (this.uploaderConfig.endpointRoot + qq.getUniqueId())
-        this._uploader.methods.setParams({
-          unique_folder_name: this.unique_folder_name,
-          media_to_replace_id: this.media_to_replace_id
-        }, id)
+        return new Promise((resolve, reject) => {
+          // halt fine uploader upload until image is loaded
+          // so we can send image dimensions with the upload
+          const img = new Image()
+          img.onload = () => {
+            this.$emit('clear')
+            // each upload session will add upload files with original filenames in a folder named using a uuid
+            this.unique_folder_name = this.unique_folder_name || (this.uploaderConfig.endpointRoot + qq.getUniqueId())
 
-        // determine the image dimensions and add it to params sent on upload success
-        const imageUrl = URL.createObjectURL(this._uploader.methods.getFile(id))
-        const img = new Image()
+            // determine the image dimensions and add it to params sent on upload success
+            this._uploader.methods.setParams({
+              width: img.width,
+              height: img.height,
+              unique_folder_name: this.unique_folder_name,
+              media_to_replace_id: this.media_to_replace_id
+            }, id)
 
-        img.onload = () => {
-          this._uploader.methods.setParams({
-            width: img.width,
-            height: img.height,
-            unique_folder_name: this.unique_folder_name,
-            media_to_replace_id: this.media_to_replace_id
-          }, id)
-          this.media_to_replace_id = null
-        }
+            this.media_to_replace_id = null
 
-        img.src = imageUrl
+            const media = {
+              id: this._uploader.methods.getUuid(id),
+              name: sanitizeFilename(name),
+              progress: 0,
+              error: false,
+              errorMessage: null,
+              isReplacement: !!this.media_to_replace_id,
+              replacementId: this.media_to_replace_id
+            }
 
-        const media = {
-          id: this._uploader.methods.getUuid(id),
-          name: sanitizeFilename(name),
-          progress: 0,
-          error: false,
-          errorMessage: null,
-          isReplacement: !!this.media_to_replace_id,
-          replacementId: this.media_to_replace_id
-        }
+            if (this.type.value === 'file') {
+              this.media_to_replace_id = null
+            }
 
-        if (this.type.value === 'file') {
-          this.media_to_replace_id = null
-        }
+            this.loadingMedias.push(media)
+            this.loadingProgress(media)
+
+            // resolve the promise, allow the upload to continue
+            resolve(img)
+          }
+
+          img.onerror = (err) => {
+            console.error(err) // eslint-disable-line
+            reject(err);
+          }
 
-        this.loadingMedias.push(media)
-        this.loadingProgress(media)
+          img.src = URL.createObjectURL(this._uploader.methods.getFile(id))
+        });
       },
       _onProgressCallback (id, name, uploadedBytes, totalBytes) {
         const index = this.loadingMedias.findIndex((m) => m.id === this._uploader.methods.getUuid(id))

Diff for: frontend/js/components/media-library/Uploader.vue

@@ -2,12 +2,37 @@
  * Convert crop values between to given range
  */
 export const cropConversion = (data, dest, origin) => {
-  return {
+  const d = {
     x: Math.round(data.x * dest.width / origin.width),
     y: Math.round(data.y * dest.height / origin.height),
     width: Math.round(data.width * dest.width / origin.width),
     height: Math.round(data.height * dest.height / origin.height)
   }
+
+  // Mike ([email protected]) --
+  //
+  // fixing the case of the square...
+  // rounding errors often mean that a square crop appears to
+  // generate non square outputs. Usually only out by a few pixels
+  // but its noticeable with a square as you're expecting w === h
+  //
+  // first checking if the crop shape is (nearly) square
+  // (its subject to its own rounding errors...)
+  if (Math.abs(data.width - data.height) < 2) {
+    // storing the difference between calculated width and height
+    const diff = d.width - d.height;
+    // setting height to equal width
+    d.height = d.width;
+    // we may have made the final crop taller,
+    // which means we might try and crop dimensions lower than the original image height
+    // so compensating, if we've cropped lower than the diff
+    if (diff > 0 && d.y > diff) {
+      d.y = d.y - diff;
+    }
+  }
+  // -- Mike ([email protected])
+
+  return d;
 }
 
 export default {

Diff for: frontend/js/utils/cropper.js

@@ -1,5 +1,5 @@
 includes:
-  - ./vendor/nunomaduro/larastan/extension.neon
+  - ./vendor/larastan/larastan/extension.neon
   - phpstan-baseline.neon
 
 parameters: