Merge branch '3.x' into fix-slugs

Author: Tofandel

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: CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to `twill` will be documented in this file.
 
+## 3.5.0
+
+### Added
+
+- Add a `ModuleController::setPreviewView()` method by @zachgarwood in https://github.com/area17/twill/pull/2724
+- Add a `disableCrop()` method to `medias` fields by @ifox in https://github.com/area17/twill/pull/2686
+
+### Fixed
+
+- Fix position management in `medias` and `files` fields by @zeezo887 in https://github.com/area17/twill/pull/2694
+- Fix issues with touch actions by @13twelve in https://github.com/area17/twill/pull/2713
+- Fix issue with `Relation` column by @zachgarwood in https://github.com/area17/twill/pull/2720
+- Fix endpoints initialization for `Browser` component by @zeezo887 in https://github.com/area17/twill/pull/2722
+- Fix image cropper for erroneous EXIF orientation: Use JS to read image dimensions on upload by @13twelve in https://github.com/area17/twill/pull/2705
+- Fix square crops having mismatching width/height values by @13twelve in https://github.com/area17/twill/pull/2706
+- Fix `hideActiveCrop()` not working for medias form field when max is greater than 1 by @zeezo887 in https://github.com/area17/twill/pull/2686
+- Fix #2641: `InlineRepeater` updates by @13twelve in https://github.com/area17/twill/pull/2714
+- Fix Vue dropdown console warnings: update useCapture param for removeEventListener to match addEventListener by @zeezo887 in https://github.com/area17/twill/pull/2687
+- Fix #2657: adds missing Vue draggable deprecations by @13twelve in https://github.com/area17/twill/pull/2707
+
+### Docs
+
+- Added instructions to disable publish switch in create modal by @ordigital in https://github.com/area17/twill/pull/2698
+- Added instructions for `MultiSelect` field with dynamic values in form builder by @ordigital in https://github.com/area17/twill/pull/2699
+- Added instructions for free cropping with `null` or `0` ratio value by @LucaRed in https://github.com/area17/twill/pull/2715
+
+### Translations
+
+- Fix #2619: adds missing iso languages by @13twelve in https://github.com/area17/twill/pull/2708
+
 ## 3.4.1
 
 ### Improved

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/1_docs/4_form-fields/11_repeater.md

@@ -163,6 +163,17 @@ class ProjectController extends BaseModuleController
 }
 ```
 
+| Option         | Description                                  | Type    | Default value    |
+|:---------------|:---------------------------------------------|:--------|:-----------------|
+| type           | Type of repeater items                       | string  |                  |
+| name           | Name of the field                            | string  | same as `type`   |
+| max            | Maximum amount that can be created           | number  | null (unlimited) |
+| buttonAsLink   | Displays the `Add` button as a centered link | boolean | false            |
+| disableCreate  | Disables ability to add new items            | boolean | false            |
+| disableActions | Removes row item actions                     | boolean | false            |
+| disableReorder | Disables reordering of repeater items        | boolean | false            |
+
+
 ## Blade repeater fields
 
 The following example demonstrates how to define a relationship between `Team` and `TeamMember` modules to implement

Diff for: docs/content/1_docs/7_media-library/03_role-crop-params.md

@@ -6,7 +6,7 @@ A _role_ is a way to define different contexts in which an image might be placed
 
 _Crops_ are more self-explanatory. Twill comes with some pre-defined crop settings to allow you to set different variants of a given image, so crops can be used in combination with _roles,_ or they can be used on their own with a single role to define multiple cropping ratios on the same image.
 
-Using the Person example, your `cover` image could have a `square` crop for mobile screens, but could use a `16/9` crop on larger screens. Those values are editable at your convenience for each model, even if there are already some crops created in the CMS.
+Using the Person example, your `cover` image could have a `square` crop for mobile screens, but could use a `16/9` crop on larger screens. Those values are editable at your convenience for each model in the `ratio` option, even if there are already some crops created in the CMS. By specifying `null` or `0` as a `ratio`, no automatic crop will happen and you'll be able to crop freely.
 
 The only thing you have to do to make it work is to compose your model and repository with the appropriate traits, respectively `HasMedias` and `HandleMedias`, set up your `$mediasParams` configuration and use the `medias` form partial in your form view (more info in the CRUD section).
 

Diff for: docs/content/2_guides/3_adding-fields-to-the-create-modal.md

@@ -16,7 +16,7 @@ Often you might want to add some mandatory fields to the create modal of your mo
 In our module controller we can override the `getCreateForm` method and add the fields to render:
 
 :::filename:::
-`app/Http/Controllers/Twill/YourModuleController.php`
+`app/Http/Controllers/Twill/BlogController.php`
 :::#filename:::
 
 ```phptorch
@@ -168,3 +168,88 @@ Result:
 
 :::#tab:::
 :::#tabs:::
+
+# Removing publish switch from create modal
+
+In our module controller we can override the `indexData` to remove publish switch from modal. We can also override `setUpController` method to disable language select box used for making a translation active.
+
+:::filename:::
+`app/Http/Controllers/Twill/BlogController.php`
+:::#filename:::
+
+```phptorch
+##CODE##
+<?php
+
+namespace App\Http\Controllers\Twill;
+
+use A17\Twill\Http\Controllers\Admin\NestedModuleController as BaseModuleController;
+use A17\Twill\Services\Forms\Fields\Input;
+use A17\Twill\Services\Forms\Fields\Wysiwyg;
+use A17\Twill\Services\Forms\Form;
+
+class BlogController extends BaseModuleController
+{
+    protected $moduleName = 'blogs';
+
+    public function getCreateForm(): Form
+    {
+        ...
+    }
+
+    protected function setUpController(): void
+    {
+        $this->disablePublish();
+        $this->disableBulkPublish();
+        // $this->disableEditor(); # uncomment this to disable full editor
+        // $this->enableEditInModal(); # uncomment this to enable editing in modal
+
+    }
+
+    protected function formData($request) 
+    { 
+        return [ 'controlLanguagesPublication' => false ]; # disable select box to make language active
+    }
+}
+```
+
+If we also want to make all languages active by default, we can override `prepareFieldsBeforeCreate` function in our module repository:
+
+:::filename:::
+`app/Repositories/BlogRepository.php`
+:::#filename:::
+
+```phptorch
+##CODE##
+<?php
+
+namespace App\Repositories;
+
+use A17\Twill\Repositories\Behaviors\HandleTranslations;
+use A17\Twill\Repositories\Behaviors\HandleSlugs;
+use A17\Twill\Repositories\ModuleRepository;
+use App\Models\Category;
+
+class BlogRepository extends ModuleRepository
+{
+    use HandleTranslations, HandleSlugs;
+
+    public function __construct(Category $model)
+    {
+        $this->model = $model;
+    }
+
+    ### make all languages active for this model
+    public function prepareFieldsBeforeCreate($fields): array
+    {
+        foreach ($fields['languages'] as $key => $language) {
+            $fields['languages'][$key]['published'] = true;
+        }
+
+        return parent::prepareFieldsBeforeCreate($fields); // @phpstan-ignore-line
+    }
+
+}
+```
+
+![Customized create modal without publish switch](./assets/customized-without-publish-switch.png)

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

@@ -161,6 +161,8 @@
         }
       },
       closeFromDoc: function (event) {
+        if (!this.active) return
+
         const target = event.target
 
         if (event.type === 'scroll') {
@@ -172,8 +174,13 @@
           }
         }
 
-        if (!this.clickable) this.close()
-        else if (!this.$el.querySelector('[data-dropdown-content]').contains(target) && this.clickable) this.close()
+        // timeout so the click is not triggered directly
+        this.timer = setTimeout(() => {
+          this.timer = null
+
+          if (!this.clickable) this.close()
+          else if (!this.$el.querySelector('[data-dropdown-content]').contains(target) && this.clickable) this.close()
+        }, 1)
       },
       open: function (onShow) {
         if (this.active) return
@@ -207,8 +214,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

@@ -7,12 +7,13 @@
               ref="blockList"
               :block="block"
               :index="index"
-              :withHandle="draggable"
+              :withHandle="reorder && draggable"
+              :withActions="displayActions"
               :size="blockSize"
               :opened="opened"
           >
             <a17-button slot="block-actions" variant="icon" data-action @click="duplicateBlock(index)"
-                        v-if="hasRemainingBlocks">
+                        v-if="hasRemainingBlocks && allowCreate">
               <span v-svg symbol="add"></span>
             </a17-button>
             <div slot="dropdown-action">
@@ -110,11 +111,19 @@
         type: Boolean,
         default: true
       },
+      displayActions: {
+        type: Boolean,
+        default: true
+      },
       max: {
         type: [Number, null],
         required: false,
         default: null
-      }
+      },
+      reorder: {
+        type: Boolean,
+        default: true
+      },
     },
     data: function () {
       return {

Diff for: frontend/js/components/Repeater.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',