[6.x] Multisite - entry grouping

resources/css/components/fieldtypes/grid.css

@@ -101,6 +101,58 @@
         }
     }
 
+    /* GRID FIELDTYPE / SECTIONED MODIFIER
+    =================================================== */
+    /* Grid whose column headers double as the enclosing publish section's header.
+      - e.g. A site group in `cp/sites`
+      - the table and its headers go transparent so the headers sit on the section background
+      - the rows take over the card background, border and corners
+      - headers stay real table headers, so they keep aligning with their columns
+    */
+    .grid-table--sectioned {
+        @apply rounded-none border-0 bg-transparent shadow-none dark:bg-transparent;
+
+        thead th {
+            @apply static border-b-0 bg-transparent dark:bg-transparent;
+            &:first-child {
+                @apply rounded-ss-none;
+            }
+            &:last-child {
+                @apply rounded-se-none;
+            }
+        }
+
+        > tbody > tr {
+            > td {
+                @apply bg-white dark:bg-gray-900;
+
+                &:first-child {
+                    @apply border-s dark:border-s-gray-700;
+                }
+
+                &:last-child {
+                    @apply border-e dark:border-e-gray-700;
+                }
+            }
+
+            &:first-child > td {
+                @apply border-t dark:border-t-gray-700;
+
+                &:first-child {
+                    @apply rounded-ss-[7px];
+                }
+
+                &:last-child {
+                    @apply rounded-se-[7px];
+                }
+            }
+
+            &:last-child > td {
+                @apply border-b dark:border-b-gray-700;
+            }
+        }
+    }
+
     .grid-item-header {
         @apply flex cursor-move items-center justify-between border-b bg-gray-200 px-4 py-2 text-sm outline-hidden;
     }

resources/js/components/entries/PublishForm.vue

@@ -169,6 +169,7 @@
                                 v-if="showLocalizationSelector"
                                 :localizations
                                 :localizing="localizing !== null"
+                                :confirming-switch="!!pendingLocalization"
                                 @selected="localizationSelected"
                             />
                         </div>
@@ -234,7 +235,63 @@
         >
             <div class="publish-fields">
                 <ui-field class="form-group field-w-100" :label="__('Origin')" :instructions="__('messages.entry_origin_instructions')">
-                    <Select class="w-full" v-model="selectedOrigin" :options="originOptions" placeholder="" />
+                    <Select
+                        class="w-full"
+                        v-model="selectedOrigin"
+                        :options="originOptions"
+                        :virtualize="!originHasNamedGroups"
+                        placeholder=""
+                    >
+                        <template #selected-option="{ option }">
+                            <span class="flex min-w-0 items-center gap-1.5">
+                                <span
+                                    class="little-dot shrink-0"
+                                    :class="{
+                                        'bg-green-600': option.published,
+                                        'bg-gray-500': !option.published,
+                                        'bg-red-500': !option.exists,
+                                    }"
+                                />
+                                <template v-if="selectedOriginGroupLabel(option)">
+                                    <span class="truncate">{{ selectedOriginGroupLabel(option) }}</span>
+                                    <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
+                                </template>
+                                <span class="truncate">{{ __(option.label) }}</span>
+                                <Badge v-if="option.origin" class="ms-1.5" size="sm" color="orange" :text="__('Origin')" />
+                            </span>
+                        </template>
+
+                        <template #before-option="option">
+                            <div
+                                v-if="option._showGroupSeparator"
+                                class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                                role="separator"
+                            />
+                            <Subheading
+                                v-if="option._groupLabel"
+                                size="sm"
+                                class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                                :text="__(option._groupLabel)"
+                            />
+                        </template>
+
+                        <template #option="option">
+                            <div class="flex min-w-0 items-center gap-x-2">
+                                <div class="flex min-w-0 items-center">
+                                    <span
+                                        class="little-dot me-2 shrink-0"
+                                        :class="{
+                                            'bg-green-600': option.published,
+                                            'bg-gray-500': !option.published,
+                                            'bg-red-500': !option.exists,
+                                        }"
+                                    />
+                                    <span class="truncate">{{ __(option.label) }}</span>
+                                </div>
+                                <Badge v-if="option.origin" class="ms-2" size="sm" color="orange" :text="__('Origin')" />
+                            </div>
+                        </template>
+                    </Select>
                 </ui-field>
             </div>
         </confirmation-modal>
@@ -261,6 +318,7 @@ import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 import clone from '@/util/clone.js';
 import {
+    Badge,
     Button,
     Card,
     CardPanel,
@@ -285,6 +343,13 @@ import {
 	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    preferredOriginHandle,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 import { computed, ref } from 'vue';
 import { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } from '@ui/Publish/SavePipeline.js';
 import { router } from '@inertiajs/vue3';
@@ -293,6 +358,7 @@ export default {
     mixins: [HasPreferences, HasActions],
 
     components: {
+        Badge,
         Button,
         Card,
         CardPanel,
@@ -513,13 +579,32 @@ export default {
             return this.getPreference('after_save') ?? 'listing';
         },
 
+        defaultOriginHandle() {
+            return preferredOriginHandle(
+                this.localizations,
+                this.localizing || null,
+                this.originBehavior,
+            );
+        },
+
         originOptions() {
-            return this.localizations
+            const existing = this.localizations
                 .filter((localization) => localization.exists)
                 .map((localization) => ({
                     value: localization.handle,
                     label: localization.name,
+                    group: localization.group,
+                    group_handle: localization.group_handle,
+                    published: localization.published,
+                    exists: localization.exists,
+                    origin: localization.handle === this.defaultOriginHandle,
                 }));
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(existing));
+        },
+
+        originHasNamedGroups() {
+            return hasNamedSiteGroups(this.originOptions);
         },
 
         direction() {
@@ -654,6 +739,11 @@ export default {
             this.$dirty.remove(this.publishContainer);
 
             this.localizing = localization;
+            this.selectedOrigin = preferredOriginHandle(
+                this.localizations,
+                localization,
+                this.originBehavior,
+            );
 
             if (localization.exists) {
                 this.editLocalization(localization);
@@ -724,6 +814,10 @@ export default {
             this.localizing = false;
         },
 
+        selectedOriginGroupLabel(option) {
+            return selectedSiteGroupLabel(option, this.originHasNamedGroups);
+        },
+
         localizationStatusText(localization) {
             if (!localization.exists) return 'This entry does not exist for this site.';
 
@@ -877,10 +971,11 @@ export default {
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
 
-        this.selectedOrigin =
-            this.originBehavior === 'active'
-                ? this.localizations.find((l) => l.active)?.handle
-                : this.localizations.find((l) => l.root)?.handle;
+        this.selectedOrigin = preferredOriginHandle(
+            this.localizations,
+            this.localizations.find((localization) => localization.active),
+            this.originBehavior,
+        );
     },
 
     beforeUnmount() {

resources/js/components/fieldtypes/SlugFieldtype.vue

@@ -74,15 +74,17 @@
         source() {
             if (!this.generate) return;
 
-            const field = this.config.from || 'title';
-            let key = field;
+            const from = this.valueFrom(this.config.from || 'title', { relative: true });
 
-            if (this.fieldPathPrefix) {
-                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.' + this.handle + '$'), '');
-                key = dottedPrefix + '.' + field;
-            }
+            if (!from) return from;
 
-            return data_get(this.publishContainer?.values, key);
+            const prefix = this.config.prefix_from
+                ? this.valueFrom(this.config.prefix_from, { relative: false })
+                : null;
+
+            if (!prefix) return from;
+
+            return `${prefix} ${from}`;
         },
 
         language() {
@@ -123,6 +125,17 @@
             }
         },
 
+        valueFrom(field, { relative }) {
+            let key = field;
+
+            if (relative && this.fieldPathPrefix) {
+                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.' + this.handle + '$'), '');
+                key = dottedPrefix + '.' + field;
+            }
+
+            return data_get(this.publishContainer?.values, key);
+        },
+
         sync() {
             this.$refs.slugify.reset();
         },

resources/js/components/fieldtypes/grid/Grid.vue

@@ -36,7 +36,14 @@
                         @blur="blurred"
                     />
 
-                    <ui-button size="sm" v-if="canAddRows" v-text="__(addRowButtonLabel)" @click.prevent="addRow" />
+                    <Teleport
+                        v-if="canAddRows"
+                        :disabled="!usesExternalAddRow"
+                        defer
+                        :to="addRowTeleportTarget"
+                    >
+                        <ui-button size="sm" v-text="__(addRowButtonLabel)" @click.prevent="addRow" />
+                    </Teleport>
                 </section>
             </div>
         </element-container>
@@ -84,6 +91,10 @@ export default {
         isInGridField: true,
     },
 
+    inject: {
+        sectionAddRowTarget: { default: null },
+    },
+
     computed: {
         component() {
             const stackAt = this.config.stack_at ?? 550;
@@ -116,6 +127,16 @@ export default {
             return __(this.config.add_row) || __('Add Row');
         },
 
+        usesExternalAddRow() {
+            return !!this.sectionAddRowTarget && !!this.config.headers_in_section && !this.fullScreenMode;
+        },
+
+        addRowTeleportTarget() {
+            if (!this.usesExternalAddRow) return 'body';
+
+            return `[${this.sectionAddRowTarget}="${CSS.escape(this.handle)}"]`;
+        },
+
         hasMaxRows() {
             return this.maxRows != null;
         },
@@ -186,6 +207,11 @@ export default {
 
             this.updateRowMeta(id, this.meta.new);
             this.update([...this.value, row]);
+
+            // Only auto-focus on Configure Sites sectioned grids, not every Grid in the CP.
+            if (this.config.headers_in_section) {
+                this.focusNewRow(id);
+            }
         },
 
         updated(index, row) {
@@ -233,6 +259,23 @@ export default {
             // TODO
         },
 
+        focusNewRow(id, attempts = 0) {
+            const row = document.querySelector(`[data-grid-row-id="${CSS.escape(id)}"]`);
+            const focusable = row?.querySelector(
+                'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])',
+            );
+
+            if (focusable) {
+                focusable.focus();
+                row.scrollIntoView({ block: 'nearest' });
+                return;
+            }
+
+            if (attempts < 20) {
+                requestAnimationFrame(() => this.focusNewRow(id, attempts + 1));
+            }
+        },
+
         blurred() {
             setTimeout(() => {
                 if (!this.$el.contains(document.activeElement)) {
@@ -256,6 +299,7 @@ export default {
                 metaPathPrefix: { get: () => this.metaPathPrefix },
                 fullScreenMode: { get: () => this.fullScreenMode },
                 toggleFullScreen: { get: () => this.toggleFullScreen },
+                usesExternalAddRow: { get: () => this.usesExternalAddRow },
             });
             return grid;
         },

resources/js/components/fieldtypes/grid/Row.vue

@@ -1,5 +1,8 @@
 <template>
-    <tr :class="[sortableItemClass, { 'opacity-50': isExcessive, 'inset-ring-1 inset-ring-red': hasError }]">
+    <tr
+        :data-grid-row-id="values._id"
+        :class="[sortableItemClass, { 'opacity-50': isExcessive, 'inset-ring-1 inset-ring-red': hasError }]"
+    >
         <td v-if="grid.isReorderable" class="drag-handle" :class="sortableHandleClass"></td>
 
         <FieldsProvider

resources/js/components/fieldtypes/grid/Stacked.vue

@@ -1,10 +1,11 @@
 <template>
-    <div :class="{ 'mb-4': rows.length > 0 }">
+    <div :class="{ 'mb-4': (rows.length > 0 || usesSectionRowSortable) && !grid.usesExternalAddRow }">
         <sortable-list
             :model-value="rows"
             :vertical="true"
             :item-class="sortableItemClass"
             :handle-class="sortableHandleClass"
+            :disabled="usesSectionRowSortable"
             append-to="body"
             constrain-dimensions
             @dragstart="$emit('focus')"
@@ -13,8 +14,10 @@
             v-slot="{}"
         >
             <div
+                ref="zone"
                 class="grid-stacked space-y-8"
                 :class="{
+                    'publish-section-row-zone min-h-16': usesSectionRowSortable,
                     // 'mt-0': !allowFullscreen && hideDisplay,
                     // 'mt-4': !hideDisplay,
                 }"