Merge branch '4.x'

# Conflicts:
#	CHANGELOG.md

resources/css/components/fieldtypes/button-group.css

@@ -1,6 +1,30 @@
-/* Inside a Grid field
+/* Vertical alignment of btn groups when overflowing
   ========================================================================== */
 
-.grid-table td.button_group-fieldtype {
-    width: 1%;
+.btn-group:not(.btn-vertical) {
+    @apply flex-wrap;
+}
+.btn-group.btn-vertical {
+    @apply flex-col items-stretch justify-start p-0 h-auto;
+
+    button {
+        @apply border-b border-t-0 rounded-none border-l border-r ;
+        height: 2.375rem; /*  38px */
+    }
+
+    :is(.btn-group button:not(:last-child):not(.active)) {
+        @apply border-r border-l;
+    }
+
+    button.active+button {
+        @apply border-l border-r;
+    }
+
+    button:first-child {
+        @apply rounded-t rounded-b-none border-t;
+    }
+
+    button:last-child {
+        @apply rounded-t-none rounded-b border-b;
+    }
 }

resources/js/components/blueprints/Section.vue

@@ -195,6 +195,10 @@ export default {
         },
 
         editConfirmed() {
+            if (! this.editingSection.handle) {
+                this.editingSection.handle = this.$slugify(this.editingSection.display, '_');
+            }
+
             this.$emit('updated', {...this.section, ...this.editingSection});
             this.editingSection = false;
         },

resources/js/components/blueprints/Tab.vue

@@ -134,13 +134,18 @@ export default {
         },
 
         editConfirmed() {
+            if (! this.handle) {
+                this.handle = this.$slugify(this.display, '_');
+            }
+
             this.$emit('updated', {
                 ...this.tab,
                 handle: this.handle,
                 display: this.display,
                 instructions: this.instructions,
                 icon: this.icon,
             });
+
             this.editing = false;
         },
 

resources/js/components/fieldtypes/ButtonGroupFieldtype.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="button-group-fieldtype-wrapper" :class="{'inline-mode': config.inline}">
-        <div class="btn-group">
+        <div class="btn-group" ref="buttonGroup">
             <button class="btn px-4"
                 v-for="(option, $index) in options"
                 :key="$index"
@@ -18,10 +18,25 @@
 
 <script>
 import HasInputOptions from './HasInputOptions.js'
+import ResizeObserver from 'resize-observer-polyfill';
 
 export default {
     mixins: [Fieldtype, HasInputOptions],
 
+    data() {
+        return {
+            resizeObserver: null,
+        }
+    },
+
+    mounted() {
+        this.setupResizeObserver();
+    },
+
+    beforeDestroy() {
+        this.resizeObserver.disconnect();
+    },
+
     computed: {
         options() {
             return this.normalizeInputOptions(this.config.options);
@@ -37,6 +52,25 @@ export default {
 
     methods: {
 
+        setupResizeObserver() {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.handleWrappingOfNode(this.$refs.buttonGroup);
+            });
+            this.resizeObserver.observe(this.$refs.buttonGroup);
+        },
+
+        handleWrappingOfNode(node) {
+            const lastEl = node.lastChild;
+
+            if (!lastEl) return;
+
+            node.classList.remove('btn-vertical');
+
+            if(lastEl.offsetTop > node.clientTop) {
+                node.classList.add('btn-vertical');
+            }
+        },
+
         focus() {
             this.$refs.button[0].focus();
         }

resources/js/components/fieldtypes/GroupFieldtype.vue

@@ -67,7 +67,7 @@
 
 <style>
     .group-fieldtype-button-wrapper {
-        @apply flex justify-end absolute top-5 sm:top-7 rtl:left-0 ltr:right-0 @md:right-4 @lg:right-6;
+        @apply flex rtl:left-6 ltr:right-6 absolute top-5 sm:top-7;
     }
 
     .replicator-set .group-fieldtype-button-wrapper {

resources/js/components/fieldtypes/date/RangePopover.vue

@@ -37,7 +37,7 @@
                                 @focus="$emit('focus', $event.target)"
                                 @blur="$emit('blur')"
                             />
-                            <button @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                            <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
                                 <span>×</span>
                             </button>
                         </div>

resources/js/components/fieldtypes/date/SinglePopover.vue

@@ -32,7 +32,7 @@
                             @focus="$emit('focus', $event.target)"
                             @blur="$emit('blur')"
                         />
-                        <button @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                        <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
                             <span>×</span>
                         </button>
                     </div>

resources/lang/fr.json

@@ -7,7 +7,7 @@
     ":count set|:count sets": ":count jeu|:count jeux",
     ":count word|:count words": ":count mot|:count mots",
     ":count\/:max selected": ":count sélectionnés \/:max",
-    ":count\/:total characters": "count caractères \/:total",
+    ":count\/:total characters": "count caractères :count\/:total",
     ":file uploaded": ":file téléchargé",
     ":start-:end of :total": ":start-:end sur :total",
     ":title Field": "Champ :title",

src/Assets/Asset.php

@@ -1063,7 +1063,7 @@ public function defaultAugmentedArrayKeys()
 
     public function shallowAugmentedArrayKeys()
     {
-        return ['id', 'url', 'permalink', 'api_url'];
+        return ['id', 'url', 'permalink', 'api_url', 'alt'];
     }
 
     protected function defaultAugmentedRelations()

src/Facades/Parse.php

@@ -3,9 +3,10 @@
 namespace Statamic\Facades;
 
 use Illuminate\Support\Facades\Facade;
+use Statamic\View\Antlers\AntlersString;
 
 /**
- * @method static string template($str, $variables = [], $context = [], $php = false)
+ * @method static AntlersString template($str, $variables = [], $context = [], $php = false)
  * @method static string templateLoop($content, $data, $supplement = true, $context = [], $php = false)
  * @method static array YAML($str)
  * @method static mixed env($val)

src/Http/Middleware/CP/AddVaryHeaderToResponse.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Statamic\Http\Middleware\CP;
+
+use Closure;
+
+class AddVaryHeaderToResponse
+{
+    public function handle($request, Closure $next)
+    {
+        $response = $next($request);
+
+        $response->headers->set('Vary', 'X-Requested-With');
+
+        return $response;
+    }
+}

src/Providers/CpServiceProvider.php

@@ -93,6 +93,7 @@ protected function registerMiddlewareGroups()
             \Statamic\Http\Middleware\CP\BootPreferences::class,
             \Statamic\Http\Middleware\CP\BootUtilities::class,
             \Statamic\Http\Middleware\CP\CountUsers::class,
+            \Statamic\Http\Middleware\CP\AddVaryHeaderToResponse::class,
             \Statamic\Http\Middleware\DeleteTemporaryFileUploads::class,
         ]);
     }

src/Tags/Vite.php

@@ -52,6 +52,24 @@ public function asset()
             ->asset($src);
     }
 
+    /**
+     * The {{ vite:content }} tag.
+     *
+     * @return string
+     */
+    public function content()
+    {
+        if (! $src = $this->params->get('src')) {
+            throw new \Exception('Please provide a source file.');
+        }
+
+        $directory = $this->params->get('directory', 'build');
+
+        return $this->vite()
+            ->useBuildDirectory($directory)
+            ->content($src);
+    }
+
     private function vite()
     {
         return clone app(LaravelVite::class);

tests/Fieldtypes/AssetsTest.php

@@ -69,6 +69,20 @@ public function it_augments_to_a_single_asset_when_max_files_is_one()
     /** @test */
     public function it_shallow_augments_to_a_collection_of_assets()
     {
+        AssetContainer::find('test')
+            ->queryAssets()
+            ->where('path', 'foo/one.txt')
+            ->first()
+            ->set('alt', 'Alt text for one')
+            ->save();
+
+        AssetContainer::find('test')
+            ->queryAssets()
+            ->where('path', 'bar/two.txt')
+            ->first()
+            ->set('alt', 'Alt text for two')
+            ->save();
+
         $augmented = $this->fieldtype()->shallowAugment(['foo/one.txt', 'bar/two.txt', 'unknown.txt']);
 
         $this->assertInstanceOf(Collection::class, $augmented);
@@ -79,19 +93,28 @@ public function it_shallow_augments_to_a_collection_of_assets()
                 'url' => '/assets/foo/one.txt',
                 'permalink' => 'http://localhost/assets/foo/one.txt',
                 'api_url' => 'http://localhost/api/assets/test/foo/one.txt',
+                'alt' => 'Alt text for one',
             ],
             [
                 'id' => 'test::bar/two.txt',
                 'url' => '/assets/bar/two.txt',
                 'permalink' => 'http://localhost/assets/bar/two.txt',
                 'api_url' => 'http://localhost/api/assets/test/bar/two.txt',
+                'alt' => 'Alt text for two',
             ],
         ], $augmented->toArray());
     }
 
     /** @test */
     public function it_shallow_augments_to_a_single_asset_when_max_files_is_one()
     {
+        AssetContainer::find('test')
+            ->queryAssets()
+            ->where('path', 'foo/one.txt')
+            ->first()
+            ->set('alt', 'Alt text for one')
+            ->save();
+
         $augmented = $this->fieldtype(['max_files' => 1])->shallowAugment(['foo/one.txt']);
 
         $this->assertInstanceOf(AugmentedCollection::class, $augmented);
@@ -100,6 +123,7 @@ public function it_shallow_augments_to_a_single_asset_when_max_files_is_one()
             'url' => '/assets/foo/one.txt',
             'permalink' => 'http://localhost/assets/foo/one.txt',
             'api_url' => 'http://localhost/api/assets/test/foo/one.txt',
+            'alt' => 'Alt text for one',
         ], $augmented->toArray());
     }