[6.x] Stacks updates (#13350)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: duncanmcclean

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/vue3-vite';
+import { resolve } from 'path';
 
 const config: StorybookConfig = {
     stories: [
@@ -16,6 +17,15 @@ const config: StorybookConfig = {
             docgen: 'vue-component-meta'
         }
     },
+    async viteFinal(config) {
+        if (config.resolve) {
+            config.resolve.alias = {
+                ...config.resolve.alias,
+                '@api': resolve(process.cwd(), 'resources/js/api.js'),
+            };
+        }
+        return config;
+    },
 };
 
 export default config;

.storybook/preview.ts

@@ -13,16 +13,14 @@ import PortalVue from 'portal-vue';
 import FullscreenHeader from '@/components/publish/FullscreenHeader.vue';
 import Portal from '@/components/portals/Portal.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
+import { portals, stacks } from '@api';
 
 // Intercept Inertia navigation and log to Actions tab.
 router.on('before', (event) => {
   action('inertia navigate')(event.detail.visit.url);
   return false;
 });
 
-// const portals = markRaw(new Portals());
-// const stacks = new Stacks(portals);
-
 setup(async (app) => {
   window.__ = translate;
 
@@ -53,8 +51,8 @@ setup(async (app) => {
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
   app.config.globalProperties.cp_url = (url) => url;
-  // app.config.globalProperties.$portals = portals;
-  // app.config.globalProperties.$stacks = stacks;
+  app.config.globalProperties.$portals = portals;
+  app.config.globalProperties.$stacks = stacks;
 
   app.use(PortalVue, { portalName: 'v-portal' });
 
@@ -129,7 +127,10 @@ const preview: Preview = {
                 }
             }
 
-            return story();
+            return {
+                components: { PortalTargets },
+                template: '<div><story /><PortalTargets /></div>',
+            };
         },
     ],
 };

.storybook/storybook.css

@@ -2,6 +2,7 @@
 @import '../resources/css/ui.css';
 @import '../resources/css/core/utilities.css';
 @import '../resources/css/elements/tables.css';
+@import '../resources/css/components/stacks.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
 .sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1),
@@ -46,3 +47,11 @@
 .dark .sbdocs-preview {
     background: var(--theme-color-content-bg);
 }
+
+.docs-story div[scale="1"] {
+    transform: none !important;
+}
+
+.stacks-on-stacks {
+    z-index: 100;
+}

packages/cms/src/ui.js

@@ -97,6 +97,10 @@ export const {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackHeader,
+    StackFooter,
+    StackContent,
     Table,
     TableCell,
     TableColumn,

resources/js/bootstrap/cms/ui.js

@@ -97,6 +97,10 @@ export {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackHeader,
+    StackFooter,
+    StackContent,
     Table,
     TableCell,
     TableColumn,

resources/js/components/Config.js

@@ -1,6 +1,9 @@
 import { ref } from 'vue';
+import { data_get } from '@/bootstrap/globals';
 
 export default class Config {
+    config = ref({});
+
     initialize(initialConfig) {
         this.config = ref(initialConfig);
     }

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 inset ref="stack" :before-close="shouldClose" @update:open="$emit('closed')" :show-close-button="false">
         <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,20 +33,22 @@
             <ui-button icon="add-circle" :text="__('Create Field')" @click="createField" />
         </div>
 
-        <ui-stack
-            name="fieldtype-selector"
-            v-if="isSelectingNewFieldtype"
+        <Stack
+            v-model:open="isSelectingNewFieldtype"
             @closed="isSelectingNewFieldtype = false"
+            :title="__('Fieldtypes')"
+            icon="cog"
             v-slot="{ close }"
         >
             <fieldtype-selector @closed="close" @selected="fieldtypeSelected" />
-        </ui-stack>
+        </Stack>
 
-        <ui-stack
-            name="field-settings"
-            v-if="pendingCreatedField != null"
+        <Stack
+            :open="pendingCreatedField != null"
+            @update:open="(value) => { if (!value) pendingCreatedField = null }"
             @closed="pendingCreatedField = null"
             v-slot="{ close }"
+            inset
         >
             <field-settings
                 ref="settings"
@@ -59,7 +61,7 @@
                 @committed="fieldCreated"
                 @closed="close"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -71,6 +73,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 +84,7 @@ export default {
         LinkFields,
         FieldtypeSelector,
         FieldSettings,
+	    Stack,
     },
 
     props: {
@@ -129,7 +133,7 @@ export default {
                 },
             };
 
-            this.$nextTick(() => (this.pendingCreatedField = pending));
+            setTimeout(() => (this.pendingCreatedField = pending), 500); // wait for stack to close
         },
 
         createField() {

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" inset :show-close-button="false">
                                 <field-settings
                                     ref="settings"
                                     :id="field._id"

resources/js/components/blueprints/LinkFields.vue

@@ -1,15 +1,17 @@
 <template>
     <div>
-        <ui-button icon="link" @click="open = true" :text="__('Link Existing')" />
-
-        <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" />
-                </header>
-
-                <div class="flex-1 overflow-auto px-3 py-4">
+        <Stack
+            size="narrow"
+            v-model:open="open"
+            :title="__('Link Fields')"
+            icon="fieldsets"
+        >
+	        <template #trigger>
+		        <Button icon="link" :text="__('Link Existing')" />
+	        </template>
+
+            <div class="">
+                <div class="">
                     <Field
                         :label="__('Link a single field')"
                         :instructions="__('Changes to this field in the fieldset will stay in sync.')"
@@ -90,17 +92,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,