[6.x] Unify the API between Modals & Stacks

packages/cms/src/ui.js

@@ -97,6 +97,8 @@ export const {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,

resources/js/bootstrap/cms/ui.js

@@ -97,6 +97,8 @@ export {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,

resources/js/components/assets/Editor/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-    <ui-stack name="asset-editor" :before-close="shouldClose" :full="true" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack size="full" open ref="stack" :before-close="shouldClose" @update:open="$emit('closed')">
         <div
             class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
             :class="isImage ? 'is-image' : 'is-file'"
@@ -22,7 +22,7 @@
                             {{ asset.path }}
                         </span>
                     </button>
-                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose(close)" :aria-label="__('Close Editor')" />
+                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose()" :aria-label="__('Close Editor')" />
                 </header>
 
                 <div class="flex flex-1 grow flex-col overflow-auto md:flex-row md:justify-between">
@@ -174,7 +174,7 @@
             @cancel="closingWithChanges = false"
         />
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
@@ -188,6 +188,7 @@ import {
     PublishContainer,
     PublishTabs,
     Icon,
+	Stack,
 } from '@ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 
@@ -204,6 +205,7 @@ export default {
         PublishContainer,
         PublishTabs,
         Icon,
+	    Stack,
     },
 
     props: {
@@ -435,7 +437,7 @@ export default {
         },
 
         confirmClose(close) {
-            if (this.shouldClose()) close();
+            if (this.shouldClose()) this.$refs.stack.close();
         },
 
         confirmCloseWithChanges() {

resources/js/components/blueprints/Fields.vue

@@ -33,21 +33,11 @@
             <ui-button icon="add-circle" :text="__('Create Field')" @click="createField" />
         </div>
 
-        <ui-stack
-            name="fieldtype-selector"
-            v-if="isSelectingNewFieldtype"
-            @closed="isSelectingNewFieldtype = false"
-            v-slot="{ close }"
-        >
-            <fieldtype-selector @closed="close" @selected="fieldtypeSelected" />
-        </ui-stack>
-
-        <ui-stack
-            name="field-settings"
-            v-if="pendingCreatedField != null"
-            @closed="pendingCreatedField = null"
-            v-slot="{ close }"
-        >
+        <Stack v-model:open="isSelectingNewFieldtype">
+            <fieldtype-selector @closed="isSelectingNewFieldtype = false" @selected="fieldtypeSelected" />
+        </Stack>
+
+        <Stack :open="pendingCreatedField != null" @update:open="pendingCreatedField = null">
             <field-settings
                 ref="settings"
                 :type="pendingCreatedField.config.type"
@@ -57,9 +47,9 @@
                 :suggestable-condition-fields="suggestableConditionFields"
                 :is-inside-set="isInsideSet"
                 @committed="fieldCreated"
-                @closed="close"
+                @closed="pendingCreatedField = null"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -71,6 +61,7 @@ import LinkFields from './LinkFields.vue';
 import FieldtypeSelector from '../fields/FieldtypeSelector.vue';
 import FieldSettings from '../fields/Settings.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
+import { Stack } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -81,6 +72,7 @@ export default {
         LinkFields,
         FieldtypeSelector,
         FieldSettings,
+	    Stack,
     },
 
     props: {

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 name="field-settings" v-if="isEditing" @closed="editorClosed">
+                            <ui-stack :open="isEditing" @update:open="editorClosed">
                                 <field-settings
                                     ref="settings"
                                     :id="field._id"

resources/js/components/blueprints/LinkFields.vue

@@ -1,12 +1,16 @@
 <template>
     <div>
-        <ui-button icon="link" @click="open = true" :text="__('Link Existing')" />
+        <Stack size="narrow" v-model:open="open">
+	        <template #trigger>
+		        <Button icon="link" :text="__('Link Existing')" />
+	        </template>
 
-        <ui-stack narrow v-if="open" @closed="open = false" name="field-linker" v-slot="{ close }">
             <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">
                     <Heading :text="__('Link Fields')" size="lg" icon="fieldsets" />
-                    <Button type="button" icon="x" variant="subtle" @click="close" />
+	                <StackClose>
+		                <Button type="button" icon="x" variant="subtle" />
+	                </StackClose>
                 </header>
 
                 <div class="flex-1 overflow-auto px-3 py-4">
@@ -90,17 +94,17 @@
                     />
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
 <script>
 import uniqid from 'uniqid';
-import { Combobox, Button, Input, Heading, Field } from '@/components/ui';
+import { Combobox, Button, Input, Heading, Field, Stack, StackClose } from '@/components/ui';
 import { usePage } from '@inertiajs/vue3';
 
 export default {
-    components: { Heading, Combobox, Button, Input, Field },
+    components: { Heading, Combobox, Button, Input, Field, Stack, StackClose },
 
     props: {
         excludeFieldset: String,

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>
 
-                    <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
+                    <Stack :open="isEditing" @update:open="editorClosed">
                         <field-settings
                             ref="settings"
                             :id="field._id"
@@ -45,7 +45,7 @@
                             @committed="settingsUpdated"
                             @closed="editorClosed"
                         />
-                    </ui-stack>
+                    </Stack>
                 </div>
             </div>
         </div>
@@ -59,7 +59,7 @@ import WidthSelector from '../fields/WidthSelector.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 import titleize from '../../util/titleize';
 import deslugify from '../../util/deslugify';
-import { Icon } from '@/components/ui';
+import { Icon, Stack } from '@/components/ui';
 
 export default {
     mixins: [Field, CanDefineLocalizable],
@@ -68,6 +68,7 @@ export default {
         FieldSettings,
         WidthSelector,
         Icon,
+	    Stack,
     },
 
     props: ['suggestableConditionFields'],

resources/js/components/blueprints/Section.vue

@@ -35,10 +35,10 @@
         </ui-panel>
 
         <ui-stack
-            narrow
-            v-if="editingSection"
+	        size="narrow"
+            :open="editingSection !== false"
+            @update:open="editCancelled"
             @opened="() => $nextTick(() => $refs.displayInput.focus())"
-            @closed="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
@@ -182,7 +182,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 

resources/js/components/blueprints/Tab.vue

@@ -24,19 +24,21 @@
             </DropdownMenu>
         </Dropdown>
 
-        <ui-stack
-            narrow
-            v-if="editing"
+        <Stack
+	        size="narrow"
+            :open="editing"
             @opened="() => $nextTick(() => $refs.title.focus())"
-            @closed="editCancelled"
+            @update:open="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
                     <div class="flex items-center justify-between">
                         <ui-heading size="lg">
                             {{ editText }}
                         </ui-heading>
-                        <ui-button icon="x" variant="ghost" class="-me-2" @click="editCancelled" />
+	                    <StackClose>
+                            <ui-button icon="x" variant="ghost" class="-me-2" />
+	                    </StackClose>
                     </div>
                 </header>
                 <div class="space-y-6">
@@ -75,15 +77,15 @@
                     </div>
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </TabTrigger>
 </template>
 
 <script>
-import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input } from '@/components/ui';
+import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose } from '@/components/ui';
 
 export default {
-    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input },
+    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose },
 
     props: {
         tab: {
@@ -134,7 +136,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 

resources/js/components/collections/DeleteLocalizationConfirmation.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="__('Delete')" :open="true" @update:open="$emit('cancel')">
+    <Modal :title="__('Delete')" open @update:open="$emit('cancel')">
         <p>Are you sure you want to delete this?</p>
 
         <Field

resources/js/components/entries/PublishActions.vue

@@ -1,13 +1,6 @@
 <template>
-    <ui-stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <header
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ __('Publish') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-            </header>
-
+    <Stack size="narrow" :title="__('Publish')" open @update:open="$emit('closed')">
+	    <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div class="flex-1 overflow-auto">
                 <div class="loading flex h-full items-center justify-center" v-if="saving">
                     <Icon name="loading" />
@@ -45,14 +38,14 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading } from '@/components/ui';
+import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack } from '@/components/ui';
 
 export default {
-    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading },
+    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack },
 
     props: {
         actions: Object,

resources/js/components/entries/PublishForm.vue

@@ -190,21 +190,20 @@
             </LivePreview>
         </PublishContainer>
 
-        <ui-stack
-            name="revision-history"
-            v-if="showRevisionHistory"
-            @closed="showRevisionHistory = false"
-            :narrow="true"
-            v-slot="{ close }"
+        <Stack
+	        ref="revisionHistoryStack"
+	        size="narrow"
+	        :title="__('Revision History')"
+	        v-model:open="showRevisionHistory"
         >
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
                 :reference="initialReference"
                 :can-restore-revisions="!readOnly"
-                @closed="close"
+                @closed="$refs.revisionHistoryStack.close()"
             />
-        </ui-stack>
+        </Stack>
 
         <publish-actions
             v-if="confirmingPublish"
@@ -277,6 +276,7 @@ import {
     PublishComponents,
     PublishLocalizations as LocalizationsCard,
     LivePreview,
+	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
 import { computed, ref } from 'vue';
@@ -312,6 +312,7 @@ export default {
         Subheading,
         Switch,
         Select,
+	    Stack,
     },
 
     props: {