[6.x] Replicator and Bard Set Preview Images (#12532)

jasonvarga · jackmcdade · web-flow · commit e9480fdaddf0 · 2025-09-25T15:12:21.000-04:00
* wip

* switch from a modal to a drawer-esque stack ...

modals currently sit on top of everything. if you open the asset browser, you cant use it.

the drawer component doesn't stack correctly when used within stacks.

* tests

* Style the set thumbnail feature. Adds new HoverCard component.

* move the v-if up further

* increase contrast as per Figma mockup

* Return null if invalid path

* Replace static method call with config with a default

* Only show field if container is configured

* refactor method to return an array or null

* Avoid rendering the hover card contents when there's no thumbnail

* Allow hover card to be opened by a prop, and open it when using keyboard in the set picker

* rename thumbnails to preview images

* allow setting the config as the container handle string if you dont care about a folder

* Show / command shortcut

* wip Grid Mode

* Switch to a modal for grid

* Fix Grid Mode search

* small screens

* Use icons if no image, increase max-width

* Add HoverCard to ui package export test

* Actually export HoverCard

* export HoverCard here too

---------

Co-authored-by: Jack McDade &lt;jack@jackmcdade.com&gt;
diff --git a/config/assets.php b/config/assets.php
@@ -235,4 +235,20 @@
         'cache_path' => storage_path('statamic/glide/ffmpeg'),
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Replicator and Bard Set Preview Images
+    |--------------------------------------------------------------------------
+    |
+    | Replicator and Bard sets may have preview images to give users a visual
+    | representation of the content within. Here you may specify the asset
+    | container and folder where these preview images are to be stored.
+    |
+    */
+
+    'set_preview_images' => [
+        'container' => 'assets',
+        'folder' => 'set-previews',
+    ],
+
 ];
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
@@ -41,6 +41,7 @@ export const {
     Field,
     Header,
     Heading,
+    HoverCard,
     Icon,
     Input,
     InputGroup,
diff --git a/packages/ui/src/HoverCard.vue b/packages/ui/src/HoverCard.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { cva } from 'cva';
+import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui';
+import { computed, getCurrentInstance, ref, watch } from 'vue';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const emit = defineEmits(['update:open']);
+
+const props = defineProps({
+    align: { type: String, default: 'center' },
+    arrow: { type: Boolean, default: true },
+    delay: { type: Number, default: 200 },
+    inset: { type: Boolean, default: false },
+    offset: { type: Number, default: 25 },
+    side: { type: String, default: 'left' },
+    open: { type: Boolean, default: false },
+});
+
+const HoverCardContentClasses = cva({
+    base: [
+        'rounded-xl bg-white dark:bg-gray-800 outline-hidden overflow-hidden',
+        'border border-gray-200 dark:border-white/10 dark:border-b-0 shadow-lg',
+        'duration-100 will-change-[transform,opacity]',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+    ],
+    variants: {
+        inset: { true: 'inset-0', false: 'p-4' },
+    },
+})({
+    ...props,
+});
+
+
+const instance = getCurrentInstance();
+const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
+const open = ref(props.open);
+watch(
+    () => props.open,
+    (value) => open.value = value,
+);
+// When the parent component controls the open state, emit an update event
+// so it can update its state, which eventually gets passed down as a prop.
+// Otherwise, update the local state.
+function updateOpen(value) {
+    if (isUsingOpenProp.value) {
+        emit('update:open', value);
+        return;
+    }
+
+    open.value = value;
+}
+</script>
+
+<template>
+    <HoverCardRoot
+        v-slot="slotProps"
+        :open-delay="delay"
+        :open="open"
+        @update:open="updateOpen"
+    >
+        <HoverCardTrigger data-ui-hover-card-trigger as-child>
+            <slot name="trigger" />
+        </HoverCardTrigger>
+        <HoverCardPortal v-if="$slots.default">
+            <HoverCardContent
+                data-ui-hover-card-content
+                :class="[HoverCardContentClasses, $attrs.class]"
+                :align
+                :sideOffset="offset"
+                :side
+            >
+                <slot v-bind="slotProps" />
+                <HoverCardArrow v-if="arrow" class="fill-white stroke-gray-300" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<style>
+[data-ui-hover-card-content] {
+    max-height: var(--reka-hover-card-content-available-height);
+    transform-origin: var(--reka-hover-card-content-transform-origin);
+}
+</style>
diff --git a/packages/ui/src/Input/Input.vue b/packages/ui/src/Input/Input.vue
@@ -53,6 +53,7 @@ const inputClasses = computed(() => {
             variant: {
                 default: '',
                 light: 'dark:bg-gray-800/20',
+                ghost: 'bg-transparent border-none shadow-none! inset-shadow-none!',
             },
             hasLimit: {
                 true: 'pe-9',
diff --git a/packages/ui/src/Modal/Modal.vue b/packages/ui/src/Modal/Modal.vue
@@ -8,6 +8,7 @@ import Icon from '../Icon/Icon.vue';
 const emit = defineEmits(['update:open']);
 
 const props = defineProps({
+    blur: { type: Boolean, default: true },
     title: { type: String, default: '' },
     icon: { type: [String, null], default: null },
     open: { type: Boolean, default: false },
@@ -16,6 +17,15 @@ const props = defineProps({
 
 const hasModalTitleComponent = hasComponent('ModalTitle');
 
+const overlayClasses = cva({
+    base: 'data-[state=open]:show fixed inset-0 z-30 bg-gray-800/20 dark:bg-gray-800/50',
+    variants: {
+        blur: {
+            true: 'backdrop-blur-[2px]',
+        },
+    },
+})({ ...props });
+
 const modalClasses = cva({
     base: [
         'fixed outline-hidden left-1/2 top-1/6 z-50 w-full max-w-2xl -translate-x-1/2',
@@ -63,7 +73,7 @@ function preventIfNotDismissible(event) {
             <slot name="trigger" />
         </DialogTrigger>
         <DialogPortal>
-            <DialogOverlay class="data-[state=open]:show fixed inset-0 z-30 bg-gray-800/20 backdrop-blur-[2px] dark:bg-gray-800/50" />
+            <DialogOverlay :class="overlayClasses" />
             <DialogContent
                 :class="[modalClasses, $attrs.class]"
                 data-ui-modal-content
diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js
@@ -37,6 +37,7 @@ export { default as EmptyStateMenu } from './EmptyState/Menu.vue';
 export { default as Field } from './Field.vue';
 export { default as Header } from './Header.vue';
 export { default as Heading } from './Heading.vue';
+export { default as HoverCard } from './HoverCard.vue';
 export { default as Icon } from './Icon/Icon.vue';
 export { registerIconSet, registerIconSetFromStrings } from './Icon/registry.js';
 export { default as Input } from './Input/Input.vue';
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
@@ -176,10 +176,6 @@
         }
     }
 
-    .bard-add-set-button {
-        @apply absolute top-[-6px] z-1 flex items-center justify-center -start-4;
-    }
-
     .bard-footer-toolbar {
         @apply flex items-center justify-between rounded-b border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-550 dark:text-dark-175;
         padding: 8px 12px;
@@ -217,10 +213,6 @@
             }
         }
     }
-
-    .set-picker .popover .popover-content {
-        min-width: 320px !important;
-    }
 }
 /* Fullscreen mode
    ========================================================================== */
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
@@ -41,6 +41,7 @@ export {
     Field,
     Header,
     Heading,
+    HoverCard,
     Icon,
     Input,
     InputGroup,
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
@@ -34,59 +34,95 @@
             </Fields>
         </ui-panel>
 
-        <confirmation-modal
+        <stack
+            narrow
             v-if="editingSection"
-            :title="editText"
             @opened="$refs.displayInput?.select()"
-            @confirm="editConfirmed"
-            @cancel="editCancelled"
+            @closed="editCancelled"
         >
-            <div class="space-y-6">
-                <ui-field :label="__('Display')">
-                    <ui-input ref="displayInput" type="text" v-model="editingSection.display" />
-                </ui-field>
-                <ui-field :label="__('Handle')" v-if="showHandleField">
-                    <ui-input
-                        type="text"
-                        class="font-mono text-sm"
-                        v-model="editingSection.handle"
-                        @input="handleSyncedWithDisplay = false"
-                    />
-                </ui-field>
-                <ui-field :label="__('Instructions')">
-                    <ui-input type="text" v-model="editingSection.instructions" />
-                </ui-field>
-                <ui-field :label="__('Collapsible')">
-                    <ui-switch v-model="editingSection.collapsible" />
-                </ui-field>
-                <ui-field :label="__('Collapsed by default')" v-if="editingSection.collapsible">
-                    <ui-switch v-model="editingSection.collapsed" />
-                </ui-field>
-                <ui-field :label="__('Icon')" v-if="showHandleField">
-                    <publish-field-meta
-                        :config="{
-                            handle: 'icon',
-                            type: 'icon',
-                            set: iconSet,
-                        }"
-                        :initial-value="editingSection.icon"
-                        v-slot="{ meta, value, loading, config }"
-                    >
-                        <icon-fieldtype
-                            v-if="!loading"
-                            handle="icon"
-                            :config="config"
-                            :meta="meta"
-                            :value="value"
-                            @update:value="editingSection.icon = $event"
+            <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 rounded-l-xl dark:bg-dark-800">
+                <header class="py-2">
+                    <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" />
+                    </div>
+                </header>
+                <div class="space-y-6">
+                    <ui-field :label="__('Display')">
+                        <ui-input ref="displayInput" type="text" v-model="editingSection.display" />
+                    </ui-field>
+                    <ui-field :label="__('Handle')" v-if="showHandleField">
+                        <ui-input
+                            type="text"
+                            class="font-mono text-sm"
+                            v-model="editingSection.handle"
+                            @input="handleSyncedWithDisplay = false"
                         />
-                    </publish-field-meta>
-                </ui-field>
-                <ui-field :label="__('Hidden')" v-if="showHideField">
-                    <ui-switch v-model="editingSection.hide" />
-                </ui-field>
+                    </ui-field>
+                    <ui-field :label="__('Instructions')">
+                        <ui-input type="text" v-model="editingSection.instructions" />
+                    </ui-field>
+                    <ui-field :label="__('Collapsible')">
+                        <ui-switch v-model="editingSection.collapsible" />
+                    </ui-field>
+                    <ui-field :label="__('Collapsed by default')" v-if="editingSection.collapsible">
+                        <ui-switch v-model="editingSection.collapsed" />
+                    </ui-field>
+                    <ui-field :label="__('Icon')" v-if="showHandleField">
+                        <publish-field-meta
+                            :config="{
+                                handle: 'icon',
+                                type: 'icon',
+                                set: iconSet,
+                            }"
+                            :initial-value="editingSection.icon"
+                            v-slot="{ meta, value, loading, config }"
+                        >
+                            <icon-fieldtype
+                                v-if="!loading"
+                                handle="icon"
+                                :config="config"
+                                :meta="meta"
+                                :value="value"
+                                @update:value="editingSection.icon = $event"
+                            />
+                        </publish-field-meta>
+                    </ui-field>
+                    <ui-field :label="__('Preview Image')" v-if="showHandleField && previewImageContainer">
+                        <publish-field-meta
+                            :config="{
+                                handle: 'image',
+                                type: 'assets',
+                                container: previewImageContainer,
+                                folder: previewImageFolder,
+                                restrict: !! previewImageFolder,
+                                allow_uploads: true,
+                            }"
+                            :initial-value="editingSection.image"
+                            v-slot="{ meta, value, loading, config }"
+                        >
+                            <assets-fieldtype
+                                v-if="!loading"
+                                handle="image"
+                                :config="config"
+                                :meta="meta"
+                                :value="value"
+                                @update:value="editingSection.image = $event?.[0] || null"
+                            />
+                        </publish-field-meta>
+                    </ui-field>
+                    <ui-field :label="__('Hidden')" v-if="showHideField">
+                        <ui-switch v-model="editingSection.hide" />
+                    </ui-field>
+                    <div class="py-4 space-x-2">
+                        <ui-button :text="__('Confirm')" @click="editConfirmed" variant="primary" />
+                        <ui-button :text="__('Cancel')" @click="editCancelled" variant="ghost" />
+                    </div>
+                </div>
             </div>
-        </confirmation-modal>
+        </stack>
     </div>
 </template>
 
@@ -132,6 +168,14 @@ export default {
         iconSet() {
             return this.$config.get('replicatorSetIcons') || undefined;
         },
+
+        previewImageContainer() {
+            return this.$config.get('setPreviewImages.container') || null;
+        },
+
+        previewImageFolder() {
+            return this.$config.get('setPreviewImages.folder') || null;
+        },
     },
 
     watch: {
@@ -185,6 +229,7 @@ export default {
                 handle: this.section.handle,
                 instructions: this.section.instructions,
                 icon: this.section.icon,
+                image: this.section.image,
                 hide: this.section.hide,
                 collapsible: this.section.collapsible,
                 collapsed: this.section.collapsed,
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -95,15 +95,15 @@
                                 @added="addSet"
                             >
                                 <template #trigger>
-                                    <button
-                                        type="button"
-                                        class="btn-round bard-add-set-button group size-7!"
-                                        :style="{ transform: `translateY(${y+2}px)` }"
-                                        :aria-label="__('Add Set')"
-                                        v-tooltip="__('Add Set')"
-                                    >
-                                        <ui-icon name="plus" class="size-4" />
-                                    </button>
+                                    <div class="absolute flex items-center gap-2 top-[-6px] z-1 -start-4.5 group" :style="{ transform: `translateY(${y}px)` }">
+                                        <ui-button
+                                            icon="plus"
+                                            size="sm"
+                                            :aria-label="__('Add Set')"
+                                            v-tooltip="__('Add Set')"
+                                        />
+                                        <ui-description v-if="!$refs.setPicker?.isOpen" :text="__('Type \'/\' to insert a set')" />
+                                    </div>
                                 </template>
                             </set-picker>
                         </floating-menu>
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php

Original file line number	Diff line number	Diff line change
`@@ -176,10 +176,6 @@`
`176`	`176`	`}`
`177`	`177`	`}`
`178`	`178`
`179`		`- .bard-add-set-button {`
`180`		`- @apply absolute top-[-6px] z-1 flex items-center justify-center -start-4;`
`181`		`- }`
`182`		`-`
`183`	`179`	`.bard-footer-toolbar {`
`184`	`180`	`@apply flex items-center justify-between rounded-b border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-550 dark:text-dark-175;`
`185`	`181`	`padding: 8px 12px;`
`@@ -217,10 +213,6 @@`
`217`	`213`	`}`
`218`	`214`	`}`
`219`	`215`	`}`
`220`		`-`
`221`		`- .set-picker .popover .popover-content {`
`222`		`- min-width: 320px !important;`
`223`		`- }`
`224`	`216`	`}`
`225`	`217`	`/* Fullscreen mode`
`226`	`218`	`========================================================================== */`