[6.x] Apply standard headers to field settings stacks

resources/js/components/blueprints/Fields.vue

@@ -50,6 +50,8 @@
             @closed="pendingCreatedField = null"
             v-slot="{ close }"
             inset
+            :show-close-button="false"
+            :wrap-slot="false"
         >
             <field-settings
                 ref="settings"

resources/js/components/blueprints/ImportField.vue

@@ -16,7 +16,7 @@
                         </div>
                         <div class="flex items-center gap-2">
                             <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
-                            <ui-stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false">
+                            <ui-stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false" :wrap-slot="false">
                                 <field-settings
                                     ref="settings"
                                     :id="field._id"

resources/js/components/blueprints/RegularField.vue

@@ -31,7 +31,7 @@
                         <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
                     </div>
 
-                    <Stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false">
+                    <Stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false" :wrap-slot="false">
                         <field-settings
                             ref="settings"
                             :id="field._id"

resources/js/components/fields/ImportSettings.vue

@@ -1,14 +1,12 @@
 <template>
-    <div class="h-full overflow-auto bg-white dark:bg-gray-800 p-3 rounded-l-xl">
-        <header class="flex items-center justify-between pl-3 mb-6">
-            <Heading :text="__('Linked fieldset')" size="lg" icon="fieldsets" />
-            <div class="flex items-center gap-2 sm:gap-3">
-                <Button variant="ghost" :text="__('Cancel')" @click.prevent="close" />
-                <Button variant="primary" @click.prevent="commit" :text="__('Apply')" />
-                <Button v-if="isInsideSet" variant="primary" @click.prevent="commit(true)" :text="__('Apply & Close All')" />
-            </div>
-        </header>
+    <StackHeader :title="__('Linked fieldset')" icon="fieldsets">
+        <template #actions>
+            <Button variant="primary" @click.prevent="commit" :text="__('Apply')" />
+            <Button v-if="isInsideSet" variant="primary" @click.prevent="commit(true)" :text="__('Apply & Close All')" />
+        </template>
+    </StackHeader>
 
+    <StackContent>
         <CardPanel :heading="__('Linked fieldset')">
             <div class="publish-fields">
                 <Field :label="__('Fieldset')" :instructions="__('messages.fieldset_import_fieldset_instructions')" class="form-group field-w-100">
@@ -20,14 +18,14 @@
                 </Field>
             </div>
         </CardPanel>
-    </div>
+    </StackContent>
 </template>
 
 <script>
-import { Button, Heading, CardPanel, Field, Input } from '@/components/ui';
+import { Button, Heading, CardPanel, Field, Input, StackHeader, StackContent } from '@/components/ui';
 
 export default {
-    components: { Heading, Button, CardPanel, Field, Input },
+    components: { StackContent, StackHeader, Heading, Button, CardPanel, Field, Input },
 
     props: ['config', 'isInsideSet'],
 

resources/js/components/fields/Settings.vue

@@ -1,21 +1,19 @@
 <template>
-    <div class="h-full overflow-auto bg-content-bg dark:bg-dark-content-bg focus-none p-3 pt-0">
-        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
-            <Icon name="loading" />
-        </div>
-
-        <header v-if="!loading" class="flex flex-wrap items-center justify-between pl-3 pt-3 pb-4 -mb-4 sticky top-0 z-(--z-index-modal) bg-gradient-to-b from-white from-75% dark:from-gray-800">
-            <Heading :text=" __(fieldtype.title + ' ' + 'Field')" size="lg" :icon="fieldtype.icon" />
-            <div class="flex items-center gap-3">
-                <Button variant="ghost" :text="__('Cancel')" @click.prevent="close" />
-                <Button variant="default" @click.prevent="commit" :text="__('Apply')" />
-                <Button v-if="!(isNestedField)" variant="primary" @click.prevent="commitAndSave" icon="save" :text="__('Apply & Save')" />
-                <Button v-if="isNestedField" variant="default" @click.prevent="commitAndCloseAll" :text="__('Apply & Close All')" />
-                <Button v-if="isNestedField" variant="primary" @click.prevent="commitAndSaveAll" icon="save" :text="__('Save & Close All')" />
-            </div>
-        </header>
-
-        <section v-if="!loading" class="isolate lg:px-3 py-4">
+    <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
+        <Icon name="loading" />
+    </div>
+
+    <StackHeader v-if="!loading" :title="__(fieldtype.title + ' ' + 'Field')" :icon="fieldtype.icon">
+        <template #actions>
+            <Button variant="default" @click.prevent="commit" :text="__('Apply')" />
+            <Button v-if="!(isNestedField)" variant="primary" @click.prevent="commitAndSave" icon="save" :text="__('Apply & Save')" />
+            <Button v-if="isNestedField" variant="default" @click.prevent="commitAndCloseAll" :text="__('Apply & Close All')" />
+            <Button v-if="isNestedField" variant="primary" @click.prevent="commitAndSaveAll" icon="save" :text="__('Save & Close All')" />
+        </template>
+    </StackHeader>
+
+    <StackContent>
+        <section v-if="!loading" class="isolate">
             <Tabs v-model:modelValue="activeTab">
                 <TabList class="mb-6">
                     <TabTrigger name="settings" :text="__('Settings')" />
@@ -57,16 +55,18 @@
                 </div>
             </Tabs>
         </section>
-    </div>
+    </StackContent>
 </template>
 
 <script>
 import { FieldConditionsBuilder, FIELD_CONDITIONS_KEYS } from '../field-conditions/FieldConditions.js';
 import FieldValidationBuilder from '../field-validation/Builder.vue';
-import { Heading, Button, Tabs, TabList, TabTrigger, TabContent, CardPanel, Icon } from '@/components/ui';
+import { Heading, Button, Tabs, TabList, TabTrigger, TabContent, CardPanel, Icon, StackHeader, StackContent } from '@/components/ui';
 
 export default {
     components: {
+        StackContent,
+        StackHeader,
         FieldConditionsBuilder,
         FieldValidationBuilder,
         Heading,

resources/js/components/ui/Stack/Stack.vue

@@ -37,6 +37,8 @@ const props = defineProps({
     inset: { type: Boolean, default: false },
     /** When `true`, the close button is shown in the top-right corner of the stack. */
     showCloseButton: { type: Boolean, default: true },
+    /** When `false`, the logic for wrapping the slot in a Content component is ignored and the slot will not be wrapped. */
+    wrapSlot: { type: Boolean, default: true },
 });
 
 const stack = ref(null);
@@ -59,7 +61,7 @@ const depth = computed(() => stacks.stacks().findIndex(s => s.id === stack.value
 const isTopStack = computed(() => stacks.count() === depth.value);
 
 const shouldAddHeader = computed(() => !!(props.title || props.icon) && !hasStackHeaderComponent.value);
-const shouldWrapSlot = computed(() => !hasStackContentComponent.value);
+const shouldWrapSlot = computed(() => props.wrapSlot && !hasStackContentComponent.value);
 const shouldShowFloatingCloseButton = computed(() => props.showCloseButton && !shouldAddHeader.value && !hasStackHeaderComponent.value);
 
 const offset = computed(() => {