From 1cc2d38edc9743684d54138edc4d224a8936e521 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 15 Apr 2024 15:12:06 +0100
Subject: [PATCH 01/67] WIP

---
 resources/css/components/publish.css          | 12 +++
 resources/css/elements/dropdowns.css          | 46 ++++++++++++
 resources/js/app.js                           |  1 +
 resources/js/bootstrap/components.js          |  6 ++
 resources/js/components/DropdownList.vue      |  8 +-
 resources/js/components/DropdownTools.vue     | 30 ++++++++
 resources/js/components/HasTools.js           | 29 +++++++
 resources/js/components/QuickDropdownItem.vue | 37 +++++++++
 resources/js/components/QuickDropdownList.vue | 16 ++++
 resources/js/components/Statamic.js           |  6 ++
 resources/js/components/Tools.js              | 19 +++++
 .../js/components/fieldtypes/Fieldtype.vue    | 28 ++++++-
 .../fieldtypes/bard/BardFieldtype.vue         | 27 ++++++-
 .../fieldtypes/replicator/Replicator.vue      | 33 +++++++-
 .../components/fieldtypes/replicator/Set.vue  |  9 ++-
 resources/js/components/publish/Field.vue     | 75 ++++++++++++++++---
 tailwind.config.js                            |  1 +
 17 files changed, 362 insertions(+), 21 deletions(-)
 create mode 100644 resources/js/components/DropdownTools.vue
 create mode 100644 resources/js/components/HasTools.js
 create mode 100644 resources/js/components/QuickDropdownItem.vue
 create mode 100644 resources/js/components/QuickDropdownList.vue
 create mode 100644 resources/js/components/Tools.js

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 98b427dabf..0a0c6153d1 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -70,6 +70,18 @@ code.parent-url {
         @apply absolute inset-0 cursor-not-allowed bg-white/25;
         z-index: 100;
     }
+
+    .field-dropdown {
+        @apply hidden;
+    }
+    .has-dropdown {
+        .field-inner {
+            @apply pr-6;
+        }
+        .field-dropdown {
+            @apply block absolute bottom-0 right-0;
+        }
+    }
 }
 
 .publish-field {
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index f7d51f7aef..a1ff698520 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -40,9 +40,55 @@
     .divider {
         @apply h-px bg-gray-400 overflow-hidden;
         margin: 6px -8px;
+        /* Hide dividers that come first, last or immediately after another (due to v-if) */
+        & + &,
+        &:first-child,
+        &:last-child {
+            display: none;
+        }
     }
 
     .align-left & {
         right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
     }
+
 }
+
+.quick-list {
+
+    @apply relative;
+
+    .quick-list-content {
+        @apply absolute top-1/2 right-full mr-[8px] -translate-y-1/2 min-w-max transition origin-right flex bg-white shadow-quick rounded-full p-0.5;
+        &::before {
+            content: '';
+            position: absolute;
+            inset: -8px -8px -8px -20px;
+            z-index: -1;
+        }
+        button, a {
+            @apply rounded-full p-1.5 text-gray-800 flex shrink-0;
+            &:hover {
+                @apply bg-blue text-white;
+            }
+        }
+        &:empty {
+            @apply hidden;
+        }
+    }
+
+    button.warning, a.warning {
+        @apply text-red-500;
+
+        &:hover {
+            @apply bg-red-500 text-white;
+        }
+    }
+
+    &:not(:hover) {
+        .quick-list-content {
+            @apply opacity-0 pointer-events-none scale-[0.85];
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 968c30a852..81a8629d29 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -67,6 +67,7 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
+Vue.prototype.$tools = Statamic.$tools;
 
 import Moment from 'moment';
 window.moment = Vue.moment = Vue.prototype.$moment = Moment;
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 8b9cb1269b..7e992c08a9 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -42,6 +42,9 @@ import FileIcon from '../components/FileIcon.vue';
 import LoadingGraphic from '../components/LoadingGraphic.vue';
 import DropdownList from '../components/DropdownList.vue';
 import DropdownItem from '../components/DropdownItem.vue';
+import DropdownTools from '../components/DropdownTools.vue';
+import QuickDropdownList from '../components/QuickDropdownList.vue';
+import QuickDropdownItem from '../components/QuickDropdownItem.vue';
 import ValidationErrors from '../components/ValidationErrors.vue';
 import Slugify from '../components/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
@@ -119,6 +122,9 @@ Vue.component('file-icon', FileIcon);
 Vue.component('loading-graphic', LoadingGraphic);
 Vue.component('dropdown-list', DropdownList);
 Vue.component('dropdown-item', DropdownItem);
+Vue.component('dropdown-tools', DropdownTools);
+Vue.component('quick-dropdown-list', QuickDropdownList);
+Vue.component('quick-dropdown-item', QuickDropdownItem);
 Vue.component('validation-errors', ValidationErrors);
 Vue.component('slugify', Slugify);
 Vue.component('element-container', ElementContainer);
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index 72329edeab..9e91349619 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :autoclose="autoclose" @opened="$emit('opened')" @closed="$emit('closed')">
+    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :autoclose="autoclose" :offset="offset" @opened="$emit('opened')" @closed="$emit('closed')">
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
@@ -25,7 +25,11 @@ export default {
         autoclose: {
             type: Boolean,
             default: false
-        }
+        },
+        offset: {
+            type: Array,
+            default: () => [10, 0]
+        },
     },
     computed: {
         strategy() {
diff --git a/resources/js/components/DropdownTools.vue b/resources/js/components/DropdownTools.vue
new file mode 100644
index 0000000000..a613b07b83
--- /dev/null
+++ b/resources/js/components/DropdownTools.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <button
+            v-for="tool in tools"
+            @click="run(tool)"
+        >
+            {{ tool.display }}
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+
+    props: ['tools'],
+
+    inject: ['popover'],
+
+    methods: {
+
+        run(tool) {
+            this.$emit('run', tool);
+
+            this.popover.vm.close();
+        },
+
+    }
+
+}
+</script>
diff --git a/resources/js/components/HasTools.js b/resources/js/components/HasTools.js
new file mode 100644
index 0000000000..812c0ec653
--- /dev/null
+++ b/resources/js/components/HasTools.js
@@ -0,0 +1,29 @@
+export default {
+
+    computed: {
+
+        tools() {
+            return this.$tools.get(this.$options.name);
+        },
+
+        hasTools() {
+            return this.$options.name !== null && this.tools.length > 0;
+        },
+
+        toolPayload() { 
+            return {};
+        },
+         
+    },
+
+    methods: {
+
+        runTool({ callback }) {
+            callback({
+                ...this.toolPayload,
+            });
+        },
+
+    }
+
+}
diff --git a/resources/js/components/QuickDropdownItem.vue b/resources/js/components/QuickDropdownItem.vue
new file mode 100644
index 0000000000..3f7806c3e3
--- /dev/null
+++ b/resources/js/components/QuickDropdownItem.vue
@@ -0,0 +1,37 @@
+<template>
+    <a :href="href" :target="target" @click="selectAndClose" v-tooltip="text">
+        <svg-icon :name="icon" class="h-3 w-3" />
+    </a>
+</template>
+
+<script>
+export default {
+
+    props: ['text', 'icon', 'redirect', 'externalLink'],
+
+    computed: {
+
+        href() {
+            return this.redirect || this.externalLink;
+        },
+
+        target() {
+            return this.externalLink ? '_blank' : null;
+        },
+
+    },
+
+    methods: {
+
+        selectAndClose($event) {
+            if (this.href) {
+                return;
+            }
+
+            this.$emit('click', $event);
+        },
+
+    }
+
+}
+</script>
diff --git a/resources/js/components/QuickDropdownList.vue b/resources/js/components/QuickDropdownList.vue
new file mode 100644
index 0000000000..58d7265c67
--- /dev/null
+++ b/resources/js/components/QuickDropdownList.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="quick-list">
+        <div class="quick-list-content">
+            <slot />
+        </div>
+        <dropdown-list placement="left-start" :offset="[7, -3]">
+            <slot name="dropdown" />
+        </dropdown-list>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
index 75d6d71404..1a18b2b44b 100644
--- a/resources/js/components/Statamic.js
+++ b/resources/js/components/Statamic.js
@@ -3,6 +3,7 @@ import Echo from './Echo';
 import Bard from './Bard';
 import Keys from './keys/Keys';
 import Hooks from './Hooks';
+import Tools from './Tools';
 import Reveal from './Reveal';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
@@ -11,6 +12,7 @@ const echo = new Echo;
 const bard = new Bard;
 const keys = new Keys;
 const hooks = new Hooks;
+const tools = new Tools;
 const reveal = new Reveal;
 const components = new Components;
 const conditions = new FieldConditions;
@@ -51,6 +53,10 @@ export default new Vue({
             return hooks;
         },
 
+        $tools() {
+            return tools;
+        },
+
         $reveal() {
             return reveal;
         },
diff --git a/resources/js/components/Tools.js b/resources/js/components/Tools.js
new file mode 100644
index 0000000000..b5f54a8f65
--- /dev/null
+++ b/resources/js/components/Tools.js
@@ -0,0 +1,19 @@
+class Tools {
+    constructor() {
+        this.tools = {};
+    }
+
+    add(name, action) {
+        if (this.tools[name] === undefined) {
+            this.tools[name] = [];
+        }
+
+        this.tools[name].push(action);
+    }
+
+    get(name) {
+        return this.tools[name] || [];
+    }
+}
+
+export default Tools;
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 05d99e2c61..11245d7ff7 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,6 +1,12 @@
 <script>
+import HasTools from '../HasTools';
+
 export default {
 
+    mixins: [
+        HasTools,
+    ],
+
     props: {
         value: {
             required: true
@@ -40,7 +46,7 @@ export default {
 
         updateMeta(value) {
             this.$emit('meta-updated', value);
-        }
+        },
     },
 
     computed: {
@@ -75,7 +81,23 @@ export default {
             let prefix = this.fieldPathPrefix ? this.fieldPathPrefix+'.' : '';
 
             return prefix+'field_'+this.config.handle;
-        }
+        },
+
+        dropdownItems() {
+            return [];
+        },
+
+        toolPayload() { 
+            return {
+                field: this,
+                value: this.value,
+                config: this.config,
+                meta: this.meta,
+                update: this.update,
+                updateMeta: this.updateMeta,
+            };
+        },
+
     },
 
     watch: {
@@ -92,4 +114,4 @@ export default {
     }
 
 }
-</script>
+</script>../HasTools
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index dc131f222e..ab21fb1992 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -29,13 +29,13 @@
                     <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
                         <svg-icon name="show-source" class="w-4 h-4 "/>
                     </button>
-                    <button class="bard-toolbar-button" @click="toggleCollapseSets" v-tooltip="__('Expand/Collapse Sets')" :aria-label="__('Expand/Collapse Sets')" v-if="config.collapse !== 'accordion' && setConfigs.length > 0">
+                    <!-- <button class="bard-toolbar-button" @click="toggleCollapseSets" v-tooltip="__('Expand/Collapse Sets')" :aria-label="__('Expand/Collapse Sets')" v-if="config.collapse !== 'accordion' && setConfigs.length > 0">
                         <svg-icon name="expand-collapse-vertical-2" class="w-4 h-4" />
                     </button>
                     <button class="bard-toolbar-button" @click="toggleFullscreen" v-tooltip="__('Toggle Fullscreen Mode')" :aria-label="__('Toggle Fullscreen Mode')" v-if="config.fullscreen">
                         <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode" />
                         <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode" />
-                    </button>
+                    </button> -->
             </div>
         </div>
 
@@ -329,6 +329,29 @@ export default {
             return this.config.sets;
         },
 
+        dropdownItems() {
+            return [
+                {
+                    text: __('Expand All'),
+                    icon: 'arrows-horizontal-expand',
+                    quick: true,
+                    click: this.expandAll,
+                },
+                {
+                    text: __('Collapse All'),
+                    icon: 'arrows-horizontal-collapse',
+                    quick: true,
+                    click: this.collapseAll,
+                },
+                {
+                    text: __('Fullscreen'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    click: this.toggleFullscreen,
+                },
+            ];
+        },
+
     },
 
     mounted() {
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 3f7d4cb216..4104305851 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -25,7 +25,7 @@
 
     <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
 
-        <div class="flex justify-end" :class="{'absolute top-3 rtl:left-3 ltr:right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
+        <!-- <div class="flex justify-end" :class="{'absolute top-3 rtl:left-3 ltr:right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
                     <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
@@ -38,7 +38,7 @@
                     <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="fullScreenMode" />
                 </button>
             </div>
-        </div>
+        </div> -->
 
         <sortable-list
             :value="value"
@@ -176,7 +176,30 @@ export default {
             if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
             return `${__(this.config.display)}: ${__n(':count set|:count sets', this.value.length)}`;
-        }
+        },
+
+        dropdownItems() {
+            return [
+                {
+                    text: __('Expand All'),
+                    icon: 'arrows-horizontal-expand',
+                    quick: true,
+                    click: this.expandAll,
+                },
+                {
+                    text: __('Collapse All'),
+                    icon: 'arrows-horizontal-collapse',
+                    quick: true,
+                    click: this.collapseAll,
+                },
+                {
+                    text: __('Fullscreen'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    click: this.toggleFullscreen,
+                },
+            ];
+        },
     },
 
     methods: {
@@ -271,6 +294,10 @@ export default {
             this.collapsed = [];
         },
 
+        toggleFullscreen() {
+            this.fullScreenMode = !this.fullScreenMode;
+        },
+
         blurred() {
             setTimeout(() => {
                 if (!this.$el.contains(document.activeElement)) {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 4bc73d493a..308071ef6b 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,6 +31,8 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
+                        <dropdown-tools :tools="tools" @run="runTool" />
+                        <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="destroy" />
@@ -77,12 +79,17 @@
 import SetField from './Field.vue';
 import ManagesPreviewText from './ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
+import HasTools from '../../HasTools.js';
 
 export default {
 
     components: { SetField },
 
-    mixins: [ValidatesFieldConditions, ManagesPreviewText],
+    mixins: [
+        ValidatesFieldConditions,
+        ManagesPreviewText,
+        HasTools,
+    ],
 
     inject: ['replicatorSets'],
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 5ec6ee200f..4773a02b7c 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -11,7 +11,7 @@
                 <span
                     v-if="showLabelText"
                     class="rtl:ml-1 ltr:mr-1"
-                    :class="{ 'text-gray-600': syncable && isSynced }"
+                    :class="{ 'text-gray-600': true && isSynced }"
                     v-text="__(labelText)"
                     v-tooltip="{content: config.handle, delay: 500, autoHide: false}"
                 />
@@ -24,9 +24,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="syncable && isSynced"
+                    v-show="true && isSynced"
                     class="outline-none"
-                    :class="{ flex: syncable && isSynced }"
+                    :class="{ flex: true && isSynced }"
                     @click="$emit('desynced')"
                 >
                     <svg-icon name="light/hyperlink" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -35,9 +35,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="syncable && !isSynced"
+                    v-show="true && !isSynced"
                     class="outline-none"
-                    :class="{ flex: syncable && !isSynced }"
+                    :class="{ flex: true && !isSynced }"
                     @click="$emit('synced')"
                 >
                     <svg-icon name="light/hyperlink-broken" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -49,6 +49,24 @@
                 class="help-block" :class="{ '-mt-2': showLabel }"
                 v-if="instructions && config.instructions_position !== 'below'"
                 v-html="instructions" />
+
+            <div class="field-dropdown" v-if="mounted && hasDropdown">
+                <quick-dropdown-list>
+                    <quick-dropdown-item
+                        v-for="item in fieldQuickItems"
+                        v-bind="item"
+                        @click="item.click" />
+                    <template #dropdown>
+                        <dropdown-tools :tools="fieldTools" @run="fieldRunTool" />
+                        <div class="divider" />
+                        <dropdown-item
+                            v-for="item in fieldDropdownItems"
+                            v-bind="item"
+                            @click="item.click" />
+                    </template>
+                </quick-dropdown-list>                
+            </div>
+
         </div>
 
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
@@ -57,6 +75,7 @@
             <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
             <component
                 v-else
+                ref="field"
                 :is="fieldtypeComponent"
                 :config="config"
                 :value="value"
@@ -80,6 +99,7 @@
         <div v-if="hasError">
             <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
+
     </div>
     </publish-field-meta>
 
@@ -114,6 +134,16 @@ export default {
         isInsideConfigFields: { default: false },
     },
 
+    data() {
+        return {
+            mounted: false,
+        }
+    },
+
+    mounted() {
+        this.mounted = true;
+    },
+
     computed: {
 
         fieldtypeComponent() {
@@ -135,12 +165,14 @@ export default {
         },
 
         isReadOnly() {
+            return false;
             if (this.storeState.isRoot === false && !this.config.localizable) return true;
 
             return this.isLocked || this.readOnly || this.config.visibility === 'read_only' || false;
         },
 
         isLocalizable() {
+            return true;
             return this.$config.get('sites').length > 1 && this.config.localizable;
         },
 
@@ -159,6 +191,7 @@ export default {
                 `${this.config.component || this.config.type}-fieldtype`,,
                 this.isReadOnly ? 'read-only-field' : '',
                 this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
+                this.mounted && this.hasDropdown && !this.isInsideConfigFields ? 'has-dropdown' : '',
                 this.config.classes || '',
                 this.config.full_width_setting ? 'full-width-setting' : '',
                 { 'has-error': this.hasError || this.hasNestedError }
@@ -174,18 +207,20 @@ export default {
         },
 
         isLocked() {
+            return true;
             return Object.keys(this.locks).includes(this.config.handle);
         },
 
         lockingUser() {
             if (this.isLocked) {
+                return Statamic.user;
                 let user = this.locks[this.config.handle];
                 if (typeof user === 'object') return user;
             }
         },
 
         isSynced() {
-            if (!this.syncable) return;
+            if (!this.true) return;
             return !this.storeState.localizedFields.includes(this.config.handle);
         },
 
@@ -204,18 +239,34 @@ export default {
                  || Vue.$options.filters.titleize(Vue.$options.filters.deslugify(this.config.handle));
          },
 
-         showLabelText() {
+        showLabelText() {
             return !this.config.hide_display;
-         },
+        },
 
-         showLabel() {
+        showLabel() {
             return this.showLabelText // Need to see the text
                 || this.isReadOnly // Need to see the "Read Only" text
                 || this.config.required // Need to see the asterisk
                 || this.isLocked // Need to see the avatar
                 || this.isLocalizable // Need to see the icon
                 || this.syncable // Need to see the icon
-         }
+        },
+
+        fieldTools() {
+            return this.$refs.field.tools;
+        },
+
+        fieldDropdownItems() {
+            return this.$refs.field.dropdownItems;
+        },
+
+        fieldQuickItems() {
+            return this.fieldDropdownItems.filter(item => item.quick);
+        },
+
+        hasDropdown() {
+            return this.fieldTools.length > 0 || this.fieldDropdownItems.length > 0;
+        },
 
     },
 
@@ -246,6 +297,10 @@ export default {
             });
 
             return marked(text);
+        },
+
+        fieldRunTool(tool) {
+            this.$refs.field.runTool(tool);
         }
 
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index efa20d3f6b..b33f5f7d3b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -95,6 +95,7 @@ module.exports = {
                 lg: '0 7px 14px 0 rgba(50,50,93,.1), 0 2px 8px 0 rgba(0,0,0,.075)',
                 xl: '0 12px 24px 0 rgba(50, 50, 93, .1), 0 10px 20px 0 rgba(0, 0, 0, .075)',
                 popover: '0 0 0 1px rgba(40,45,50,0.05), 0 0 0 1px rgba(40,45,50,0.05), 0 2px 7px 1px rgba(40,45,50,0.16)',
+                quick: '0 0 0 1px rgba(40,45,50,0.075), 0 0 0 1px rgba(40,45,50,0.075)',
                 set: 'rgba(50,50,93,.15) 0 0 0 1px, rgba(50,50,93,.08) 0 2px 5px, rgba(0,0,0,.07) 0 1px 1.5px,rgba(0,0,0,.08) 0 1px 2px 0, transparent 0 0 0 0',
                 button: '0 1px 0 0 rgba(25,30,35,.05)',
                 inner: 'inset 0px 1px 1px 0px rgba(0,0,0,.05)',

From d4acda05c6fd90700195f507d9c7aaea3db20702 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 21 Jun 2024 15:03:03 +0100
Subject: [PATCH 02/67] WIP

---
 resources/js/app.js                           |  2 +-
 resources/js/bootstrap/components.js          |  4 +--
 resources/js/components/Actions.js            | 19 ++++++++++++
 ...{DropdownTools.vue => DropdownActions.vue} | 12 ++++----
 resources/js/components/HasActions.js         | 29 +++++++++++++++++++
 resources/js/components/HasTools.js           | 29 -------------------
 resources/js/components/Statamic.js           |  8 ++---
 resources/js/components/Tools.js              | 19 ------------
 .../js/components/fieldtypes/Fieldtype.vue    |  9 +++---
 .../components/fieldtypes/replicator/Set.vue  |  7 +++--
 resources/js/components/publish/Field.vue     | 10 +++----
 11 files changed, 75 insertions(+), 73 deletions(-)
 create mode 100644 resources/js/components/Actions.js
 rename resources/js/components/{DropdownTools.vue => DropdownActions.vue} (54%)
 create mode 100644 resources/js/components/HasActions.js
 delete mode 100644 resources/js/components/HasTools.js
 delete mode 100644 resources/js/components/Tools.js

diff --git a/resources/js/app.js b/resources/js/app.js
index ed46cf593e..ad0c631d87 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -67,7 +67,7 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
-Vue.prototype.$tools = Statamic.$tools;
+Vue.prototype.$actions = Statamic.$actions;
 Vue.prototype.$slug = Statamic.$slug;
 
 import Moment from 'moment';
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 81d1e22ebb..db2fed2b9e 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -42,7 +42,7 @@ import FileIcon from '../components/FileIcon.vue';
 import LoadingGraphic from '../components/LoadingGraphic.vue';
 import DropdownList from '../components/DropdownList.vue';
 import DropdownItem from '../components/DropdownItem.vue';
-import DropdownTools from '../components/DropdownTools.vue';
+import DropdownActions from '../components/DropdownActions.vue';
 import QuickDropdownList from '../components/QuickDropdownList.vue';
 import QuickDropdownItem from '../components/QuickDropdownItem.vue';
 import ValidationErrors from '../components/ValidationErrors.vue';
@@ -122,7 +122,7 @@ Vue.component('file-icon', FileIcon);
 Vue.component('loading-graphic', LoadingGraphic);
 Vue.component('dropdown-list', DropdownList);
 Vue.component('dropdown-item', DropdownItem);
-Vue.component('dropdown-tools', DropdownTools);
+Vue.component('dropdown-actions', DropdownActions);
 Vue.component('quick-dropdown-list', QuickDropdownList);
 Vue.component('quick-dropdown-item', QuickDropdownItem);
 Vue.component('validation-errors', ValidationErrors);
diff --git a/resources/js/components/Actions.js b/resources/js/components/Actions.js
new file mode 100644
index 0000000000..dffe00491b
--- /dev/null
+++ b/resources/js/components/Actions.js
@@ -0,0 +1,19 @@
+class Actions {
+    constructor() {
+        this.actions = {};
+    }
+
+    add(name, action) {
+        if (this.actions[name] === undefined) {
+            this.actions[name] = [];
+        }
+
+        this.actions[name].push(action);
+    }
+
+    get(name) {
+        return this.actions[name] || [];
+    }
+}
+
+export default Actions;
diff --git a/resources/js/components/DropdownTools.vue b/resources/js/components/DropdownActions.vue
similarity index 54%
rename from resources/js/components/DropdownTools.vue
rename to resources/js/components/DropdownActions.vue
index a613b07b83..d55fc48b01 100644
--- a/resources/js/components/DropdownTools.vue
+++ b/resources/js/components/DropdownActions.vue
@@ -1,10 +1,10 @@
 <template>
     <div>
         <button
-            v-for="tool in tools"
-            @click="run(tool)"
+            v-for="action in actions"
+            @click="run(action)"
         >
-            {{ tool.display }}
+            {{ action.display }}
         </button>
     </div>
 </template>
@@ -12,14 +12,14 @@
 <script>
 export default {
 
-    props: ['tools'],
+    props: ['actions'],
 
     inject: ['popover'],
 
     methods: {
 
-        run(tool) {
-            this.$emit('run', tool);
+        run(action) {
+            this.$emit('run', action);
 
             this.popover.vm.close();
         },
diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
new file mode 100644
index 0000000000..e968099d95
--- /dev/null
+++ b/resources/js/components/HasActions.js
@@ -0,0 +1,29 @@
+export default {
+
+    computed: {
+
+        actions() {
+            return this.$actions.get(this.$options.name);
+        },
+
+        hasActions() {
+            return this.$options.name !== null && this.actions.length > 0;
+        },
+
+        actionPayload() { 
+            return {};
+        },
+         
+    },
+
+    methods: {
+
+        runAction({ callback }) {
+            callback({
+                ...this.actionPayload,
+            });
+        },
+
+    }
+
+}
diff --git a/resources/js/components/HasTools.js b/resources/js/components/HasTools.js
deleted file mode 100644
index 812c0ec653..0000000000
--- a/resources/js/components/HasTools.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-
-    computed: {
-
-        tools() {
-            return this.$tools.get(this.$options.name);
-        },
-
-        hasTools() {
-            return this.$options.name !== null && this.tools.length > 0;
-        },
-
-        toolPayload() { 
-            return {};
-        },
-         
-    },
-
-    methods: {
-
-        runTool({ callback }) {
-            callback({
-                ...this.toolPayload,
-            });
-        },
-
-    }
-
-}
diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
index 46c55b354f..b44777a119 100644
--- a/resources/js/components/Statamic.js
+++ b/resources/js/components/Statamic.js
@@ -3,7 +3,7 @@ import Echo from './Echo';
 import Bard from './Bard';
 import Keys from './keys/Keys';
 import Hooks from './Hooks';
-import Tools from './Tools';
+import Actions from './Actions';
 import Reveal from './Reveal';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
@@ -13,7 +13,7 @@ const echo = new Echo;
 const bard = new Bard;
 const keys = new Keys;
 const hooks = new Hooks;
-const tools = new Tools;
+const actions = new Actions;
 const reveal = new Reveal;
 const components = new Components;
 const conditions = new FieldConditions;
@@ -55,8 +55,8 @@ export default new Vue({
             return hooks;
         },
 
-        $tools() {
-            return tools;
+        $actions() {
+            return actions;
         },
 
         $reveal() {
diff --git a/resources/js/components/Tools.js b/resources/js/components/Tools.js
deleted file mode 100644
index b5f54a8f65..0000000000
--- a/resources/js/components/Tools.js
+++ /dev/null
@@ -1,19 +0,0 @@
-class Tools {
-    constructor() {
-        this.tools = {};
-    }
-
-    add(name, action) {
-        if (this.tools[name] === undefined) {
-            this.tools[name] = [];
-        }
-
-        this.tools[name].push(action);
-    }
-
-    get(name) {
-        return this.tools[name] || [];
-    }
-}
-
-export default Tools;
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 11245d7ff7..956b02e0c0 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,10 +1,10 @@
 <script>
-import HasTools from '../HasTools';
+import HasActions from '../HasActions';
 
 export default {
 
     mixins: [
-        HasTools,
+        HasActions,
     ],
 
     props: {
@@ -87,7 +87,7 @@ export default {
             return [];
         },
 
-        toolPayload() { 
+        actionPayload() { 
             return {
                 field: this,
                 value: this.value,
@@ -114,4 +114,5 @@ export default {
     }
 
 }
-</script>../HasTools
+</script>../HasActions
+../HasActions
\ No newline at end of file
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 6a7945064c..4a7b09dcf7 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-tools :tools="tools" @run="runTool" />
+                        <dropdown-actions :actions="actions" @run="runAction" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
@@ -79,7 +79,7 @@
 import SetField from './Field.vue';
 import ManagesPreviewText from './ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
-import HasTools from '../../HasTools.js';
+import HasActions from '../../HasActions.js';
 
 export default {
 
@@ -88,7 +88,7 @@ export default {
     mixins: [
         ValidatesFieldConditions,
         ManagesPreviewText,
-        HasTools,
+        HasActions,
     ],
 
     inject: ['replicatorSets'],
@@ -245,3 +245,4 @@ export default {
 
 }
 </script>
+../../HasActions.js
\ No newline at end of file
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 4773a02b7c..8da4804c6d 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -57,7 +57,7 @@
                         v-bind="item"
                         @click="item.click" />
                     <template #dropdown>
-                        <dropdown-tools :tools="fieldTools" @run="fieldRunTool" />
+                        <dropdown-tools :tools="fieldActions" @run="fieldRunAction" />
                         <div class="divider" />
                         <dropdown-item
                             v-for="item in fieldDropdownItems"
@@ -252,7 +252,7 @@ export default {
                 || this.syncable // Need to see the icon
         },
 
-        fieldTools() {
+        fieldActions() {
             return this.$refs.field.tools;
         },
 
@@ -265,7 +265,7 @@ export default {
         },
 
         hasDropdown() {
-            return this.fieldTools.length > 0 || this.fieldDropdownItems.length > 0;
+            return this.fieldActions.length > 0 || this.fieldDropdownItems.length > 0;
         },
 
     },
@@ -299,8 +299,8 @@ export default {
             return marked(text);
         },
 
-        fieldRunTool(tool) {
-            this.$refs.field.runTool(tool);
+        fieldRunAction(action) {
+            this.$refs.field.runAction(action);
         }
 
     }

From ab1c934cb0756cb5dad2572ef1a7a0357c2dca44 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 21 Jun 2024 15:17:39 +0100
Subject: [PATCH 03/67] WIP

---
 resources/js/components/HasActions.js         |  4 +-
 .../js/components/fieldtypes/Fieldtype.vue    |  2 +-
 .../fieldtypes/bard/BardFieldtype.vue         | 14 +++---
 .../fieldtypes/replicator/Replicator.vue      | 29 +++---------
 resources/js/components/publish/Field.vue     | 46 ++++++++++---------
 5 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
index e968099d95..8dfced1871 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/HasActions.js
@@ -18,8 +18,8 @@ export default {
 
     methods: {
 
-        runAction({ callback }) {
-            callback({
+        runAction({ run }) {
+            run({
                 ...this.actionPayload,
             });
         },
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 956b02e0c0..200938ac8d 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -83,7 +83,7 @@ export default {
             return prefix+'field_'+this.config.handle;
         },
 
-        dropdownItems() {
+        internalActions() {
             return [];
         },
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index b596f35137..69feeb2ef5 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -328,25 +328,25 @@ export default {
             return this.config.sets;
         },
 
-        dropdownItems() {
+        internalActions() {
             return [
                 {
-                    text: __('Expand All'),
+                    display: __('Expand All'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
-                    click: this.expandAll,
+                    run: this.expandAll,
                 },
                 {
-                    text: __('Collapse All'),
+                    display: __('Collapse All'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
-                    click: this.collapseAll,
+                    run: this.collapseAll,
                 },
                 {
-                    text: __('Fullscreen'),
+                    display: __('Fullscreen'),
                     icon: 'expand-bold',
                     quick: true,
-                    click: this.toggleFullscreen,
+                    run: this.toggleFullscreen,
                 },
             ];
         },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 74dcefcc62..e09d0edd6d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -25,21 +25,6 @@
 
     <section :class="{'mt-12 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
 
-        <!-- <div class="flex justify-end" :class="{'absolute top-3 rtl:left-3 ltr:right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
-            <div class="btn-group">
-                <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" />
-                </button>
-                <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" />
-                </button>
-                <button v-if="config.fullscreen" @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="fullScreenMode" />
-                </button>
-            </div>
-        </div> -->
-
         <sortable-list
             :value="value"
             :vertical="true"
@@ -179,25 +164,25 @@ export default {
             return `${__(this.config.display)}: ${__n(':count set|:count sets', this.value.length)}`;
         },
 
-        dropdownItems() {
+        internalActions() {
             return [
                 {
-                    text: __('Expand All'),
+                    display: __('Expand All'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
-                    click: this.expandAll,
+                    run: this.expandAll,
                 },
                 {
-                    text: __('Collapse All'),
+                    display: __('Collapse All'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
-                    click: this.collapseAll,
+                    run: this.collapseAll,
                 },
                 {
-                    text: __('Fullscreen'),
+                    display: __('Fullscreen'),
                     icon: 'expand-bold',
                     quick: true,
-                    click: this.toggleFullscreen,
+                    run: this.toggleFullscreen,
                 },
             ];
         },
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 8da4804c6d..27e8c6b021 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -11,7 +11,7 @@
                 <span
                     v-if="showLabelText"
                     class="rtl:ml-1 ltr:mr-1"
-                    :class="{ 'text-gray-600': true && isSynced }"
+                    :class="{ 'text-gray-600': isSynced }"
                     v-text="__(labelText)"
                     v-tooltip="{content: config.handle, delay: 500, autoHide: false}"
                 />
@@ -24,9 +24,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="true && isSynced"
+                    v-show="isSynced"
                     class="outline-none"
-                    :class="{ flex: true && isSynced }"
+                    :class="{ flex: isSynced }"
                     @click="$emit('desynced')"
                 >
                     <svg-icon name="light/hyperlink" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -35,9 +35,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="true && !isSynced"
+                    v-show="!isSynced"
                     class="outline-none"
-                    :class="{ flex: true && !isSynced }"
+                    :class="{ flex: !isSynced }"
                     @click="$emit('synced')"
                 >
                     <svg-icon name="light/hyperlink-broken" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -53,16 +53,17 @@
             <div class="field-dropdown" v-if="mounted && hasDropdown">
                 <quick-dropdown-list>
                     <quick-dropdown-item
-                        v-for="item in fieldQuickItems"
-                        v-bind="item"
-                        @click="item.click" />
+                        v-for="item in fieldQuickActions"
+                        :text="item.display"
+                        :icon="item.icon"
+                        @click="item.run" />
                     <template #dropdown>
-                        <dropdown-tools :tools="fieldActions" @run="fieldRunAction" />
+                        <dropdown-actions :actions="fieldActions" @run="fieldRunAction" />
                         <div class="divider" />
                         <dropdown-item
-                            v-for="item in fieldDropdownItems"
-                            v-bind="item"
-                            @click="item.click" />
+                            v-for="item in fieldInternalActions"
+                            :text="item.display"
+                            @click="item.run" />
                     </template>
                 </quick-dropdown-list>                
             </div>
@@ -165,14 +166,12 @@ export default {
         },
 
         isReadOnly() {
-            return false;
             if (this.storeState.isRoot === false && !this.config.localizable) return true;
 
             return this.isLocked || this.readOnly || this.config.visibility === 'read_only' || false;
         },
 
         isLocalizable() {
-            return true;
             return this.$config.get('sites').length > 1 && this.config.localizable;
         },
 
@@ -213,14 +212,13 @@ export default {
 
         lockingUser() {
             if (this.isLocked) {
-                return Statamic.user;
                 let user = this.locks[this.config.handle];
                 if (typeof user === 'object') return user;
             }
         },
 
         isSynced() {
-            if (!this.true) return;
+            if (!this.syncable) return;
             return !this.storeState.localizedFields.includes(this.config.handle);
         },
 
@@ -253,19 +251,23 @@ export default {
         },
 
         fieldActions() {
-            return this.$refs.field.tools;
+            return this.$refs.field.actions;
+        },
+
+        fieldInternalActions() {
+            return this.$refs.field.internalActions;
         },
 
-        fieldDropdownItems() {
-            return this.$refs.field.dropdownItems;
+        fieldAllActions() {
+            return [...this.fieldActions, ...this.fieldInternalActions];
         },
 
-        fieldQuickItems() {
-            return this.fieldDropdownItems.filter(item => item.quick);
+        fieldQuickActions() {
+            return this.fieldAllActions.filter(item => item.quick);
         },
 
         hasDropdown() {
-            return this.fieldActions.length > 0 || this.fieldDropdownItems.length > 0;
+            return this.fieldAllActions.length > 0;
         },
 
     },

From 42e5d4997ae3e7b6f2e7434c233c5c47aa353c19 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 21 Jun 2024 15:31:56 +0100
Subject: [PATCH 04/67] WIP

---
 .../js/components/fieldtypes/bard/BardFieldtype.vue   |  7 -------
 resources/js/components/fieldtypes/bard/Set.vue       |  5 ++++-
 resources/js/components/fieldtypes/replicator/Set.vue |  5 ++---
 resources/js/components/publish/Field.vue             | 11 +++++------
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 69feeb2ef5..21f7589085 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -29,13 +29,6 @@
                     <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
                         <svg-icon name="show-source" class="w-4 h-4 "/>
                     </button>
-                    <!-- <button class="bard-toolbar-button" @click="toggleCollapseSets" v-tooltip="__('Expand/Collapse Sets')" :aria-label="__('Expand/Collapse Sets')" v-if="config.collapse !== 'accordion' && setConfigs.length > 0">
-                        <svg-icon name="expand-collapse-vertical-2" class="w-4 h-4" />
-                    </button>
-                    <button class="bard-toolbar-button" @click="toggleFullscreen" v-tooltip="__('Toggle Fullscreen Mode')" :aria-label="__('Toggle Fullscreen Mode')" v-if="config.fullscreen">
-                        <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode" />
-                        <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode" />
-                    </button> -->
             </div>
         </div>
 
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index c683c16a90..ba36f36975 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -31,7 +31,9 @@
                         class="toggle-sm rtl:ml-4 ltr:mr-4"
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
-                    <dropdown-list class="-mt-1">
+                    <dropdown-list>
+                        <dropdown-actions :actions="actions" @run="runAction" v-if="hasActions" />
+                        <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="deleteNode" />
@@ -68,6 +70,7 @@ import { NodeViewWrapper } from '@tiptap/vue-2';
 import SetField from '../replicator/Field.vue';
 import ManagesPreviewText from '../replicator/ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
+import HasActions from '../../HasActions.js';
 
 export default {
 
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 4a7b09dcf7..83b1c005a6 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="actions" @run="runAction" />
+                        <dropdown-actions :actions="actions" @run="runAction" v-if="hasActions" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
@@ -244,5 +244,4 @@ export default {
     }
 
 }
-</script>
-../../HasActions.js
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 27e8c6b021..9d879542dd 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -11,7 +11,7 @@
                 <span
                     v-if="showLabelText"
                     class="rtl:ml-1 ltr:mr-1"
-                    :class="{ 'text-gray-600': isSynced }"
+                    :class="{ 'text-gray-600': syncable && isSynced }"
                     v-text="__(labelText)"
                     v-tooltip="{content: config.handle, delay: 500, autoHide: false}"
                 />
@@ -24,9 +24,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="isSynced"
+                    v-show="syncable && isSynced"
                     class="outline-none"
-                    :class="{ flex: isSynced }"
+                    :class="{ flex: syncable && isSynced }"
                     @click="$emit('desynced')"
                 >
                     <svg-icon name="light/hyperlink" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -35,9 +35,9 @@
 
                 <button
                     v-if="!isReadOnly && !isTab"
-                    v-show="!isSynced"
+                    v-show="syncable && !isSynced"
                     class="outline-none"
-                    :class="{ flex: !isSynced }"
+                    :class="{ flex: syncable && !isSynced }"
                     @click="$emit('synced')"
                 >
                     <svg-icon name="light/hyperlink-broken" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
@@ -206,7 +206,6 @@ export default {
         },
 
         isLocked() {
-            return true;
             return Object.keys(this.locks).includes(this.config.handle);
         },
 

From c1d3fcb7078e9618825e58fde2cafd1cee41a0d3 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 21 Jun 2024 15:37:11 +0100
Subject: [PATCH 05/67] WIP

---
 resources/js/components/fieldtypes/Fieldtype.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 200938ac8d..340c1cddc2 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -114,5 +114,4 @@ export default {
     }
 
 }
-</script>../HasActions
-../HasActions
\ No newline at end of file
+</script>
\ No newline at end of file

From a99d386b44d8362f0b2a57c3eb812fb325b87bd5 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 24 Jun 2024 09:14:06 +0100
Subject: [PATCH 06/67] WIP

---
 resources/js/components/HasActions.js                       | 4 +---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue   | 6 +++---
 .../js/components/fieldtypes/replicator/Replicator.vue      | 6 +++---
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
index 8dfced1871..117c85c1e9 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/HasActions.js
@@ -19,9 +19,7 @@ export default {
     methods: {
 
         runAction({ run }) {
-            run({
-                ...this.actionPayload,
-            });
+            run(this.actionPayload);
         },
 
     }
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 21f7589085..c057803088 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -324,19 +324,19 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Expand All'),
+                    display: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
                     run: this.expandAll,
                 },
                 {
-                    display: __('Collapse All'),
+                    display: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
                     run: this.collapseAll,
                 },
                 {
-                    display: __('Fullscreen'),
+                    display: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index e09d0edd6d..a77f09acf5 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -167,19 +167,19 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Expand All'),
+                    display: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
                     run: this.expandAll,
                 },
                 {
-                    display: __('Collapse All'),
+                    display: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
                     run: this.collapseAll,
                 },
                 {
-                    display: __('Fullscreen'),
+                    display: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,

From 97bf8e4dc46b4ab339e385a3efe8d422715b8087 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 5 Sep 2024 14:50:34 +0100
Subject: [PATCH 07/67] Visibilty callback

---
 resources/js/components/Actions.js              | 9 ++++++++-
 resources/js/components/HasActions.js           | 4 +++-
 resources/js/components/fieldtypes/bard/Set.vue | 6 +++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Actions.js b/resources/js/components/Actions.js
index dffe00491b..806043c421 100644
--- a/resources/js/components/Actions.js
+++ b/resources/js/components/Actions.js
@@ -8,7 +8,14 @@ class Actions {
             this.actions[name] = [];
         }
 
-        this.actions[name].push(action);
+        this.actions[name].push({
+            display: null,
+            icon:  null,
+            quick: false,
+            run: () => {},
+            visible: () => true,
+            ...action,
+        });
     }
 
     get(name) {
diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
index 117c85c1e9..2097f7f7ef 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/HasActions.js
@@ -3,7 +3,9 @@ export default {
     computed: {
 
         actions() {
-            return this.$actions.get(this.$options.name);
+            return this.$actions
+                .get(this.$options.name)
+                .filter(action => action.visible());;
         },
 
         hasActions() {
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 70e9365736..61376e1ab2 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -87,7 +87,11 @@ export default {
 
     components: { NodeViewWrapper, SetField },
 
-    mixins: [ValidatesFieldConditions, ManagesPreviewText],
+    mixins: [
+        ValidatesFieldConditions,
+        ManagesPreviewText, 
+        HasActions,
+    ],
 
     inject: ['bard', 'bardSets'],
 

From bbcd08572f92b961ee110fd5548994e7c6ccd38b Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 5 Sep 2024 15:07:17 +0100
Subject: [PATCH 08/67] Set payloads

---
 .../js/components/fieldtypes/bard/Set.vue     | 11 +++++++++++
 .../components/fieldtypes/replicator/Set.vue  | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 61376e1ab2..2cc546b889 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -186,6 +186,17 @@ export default {
             return this.decorationSpecs.withinSelection;
         },
 
+        actionPayload() { 
+            return {
+                field: this.extension.options.bard,
+                values: this.values,
+                config: this.config,
+                meta: this.meta,
+                update: (handle, value) => this.updated(handle, value),
+                updateMeta: (handle, value) => this.metaUpdated(handle, value),
+            };
+        },
+
     },
 
     methods: {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index af58d4a1de..6e6fe31410 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -187,6 +187,25 @@ export default {
             return Object.keys(this.config).length === 0;
         },
 
+        field() {
+            let vm = this;
+            while (vm !== vm.$root) {
+                if (vm.$options.name === 'replicator-fieldtype') return vm;
+                vm = vm.$parent;
+            }
+        },
+
+        actionPayload() { 
+            return {
+                field: this.field,
+                values: this.values,
+                config: this.config,
+                meta: this.meta,
+                update: (handle, value) => this.updated(handle, value),
+                updateMeta: (handle, value) => this.metaUpdated(handle, value),
+            };
+        },
+
     },
 
     methods: {

From 330cd5356a55ddc2aea5ba9bc820a759500c1b12 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 19 Sep 2024 14:27:18 +0100
Subject: [PATCH 09/67] WIP

---
 resources/css/components/fieldtypes/bard.css  |  2 +-
 resources/css/components/fieldtypes/code.css  |  2 +-
 resources/css/elements/buttons.css            | 13 +++++
 resources/css/vendors/codemirror.css          |  2 +-
 resources/js/bootstrap/components.js          |  2 +
 resources/js/components/Actions.js            | 11 +---
 resources/js/components/HasActions.js         | 33 +++++++++--
 .../components/fieldtypes/CodeFieldtype.vue   | 30 ++++++++--
 .../js/components/fieldtypes/Fieldtype.vue    |  2 +
 .../components/fieldtypes/GroupFieldtype.vue  | 33 ++++++-----
 .../components/fieldtypes/TableFieldtype.vue  | 42 +++++++++-----
 .../fieldtypes/bard/BardFieldtype.vue         | 37 ++++++++++--
 .../js/components/fieldtypes/bard/Set.vue     |  7 ++-
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 23 ++++++--
 .../fieldtypes/replicator/Replicator.vue      | 27 ++++-----
 .../components/fieldtypes/replicator/Set.vue  |  4 +-
 resources/js/components/publish/Field.vue     | 26 ++++-----
 .../js/components/publish/FieldHeader.vue     | 56 +++++++++++++++++++
 18 files changed, 254 insertions(+), 98 deletions(-)
 create mode 100644 resources/js/components/publish/FieldHeader.vue

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 0a26a9c822..be75f358eb 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -206,7 +206,7 @@
    ========================================================================== */
 
 .bard-fullscreen {
-    @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-16;
+    @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-14;
 
     & > .bard-editor {
         @apply bg-white dark:bg-dark-800 shadow dark:shadow-dark max-w-xl mx-auto rounded relative my-6 px-8;
diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
index 7b411b7775..00b828e42a 100644
--- a/resources/css/components/fieldtypes/code.css
+++ b/resources/css/components/fieldtypes/code.css
@@ -18,7 +18,7 @@
 
 
 .code-fieldtype-container.code-fullscreen {
-    @apply fixed bg-gray-200 dark:bg-dark-600 inset-0 min-h-screen overflow-scroll rounded-none pt-12;
+    @apply fixed bg-gray-200 dark:bg-dark-600 inset-0 min-h-screen overflow-scroll rounded-none pt-14;
 
     .code-fieldtype-toolbar {
         @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow dark:shadow-dark text-base rounded-none bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600;
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 5c0767a3b6..cee79d0eaf 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -291,6 +291,19 @@ td .btn-icon {
     }
 }
 
+.btn-quick-action {
+    @apply text-center p-0 text-xl text-gray-600 dark:text-dark-150 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
+
+    &:hover {
+        @apply bg-gray-400 dark:bg-dark-700;
+    }
+
+    &:active, &:focus:hover {
+        outline: none;
+        @apply bg-gray-500 dark:bg-dark-750;
+    }
+}
+
 .super-btn {
     @apply p-4 flex items-start hover:bg-gray-200 border border-transparent rounded-md space-x-4 rtl:space-x-reverse;
     @apply dark:hover:bg-dark-575 dark:hover:border-dark-400;
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index e36f5f6383..1af15899be 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -342,7 +342,7 @@
 
 
   .CodeMirror-fullscreen {
-      @apply fixed h-auto inset-0 top-12 rounded-none;
+      @apply fixed h-auto inset-0 top-14 rounded-none;
   }
 
   .CodeMirror-rulers {
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 62a837de29..232160b5ce 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -8,6 +8,7 @@ import PublishForm from '../components/publish/PublishForm.vue';
 import Fields from '../components/publish/Fields.vue';
 import FieldsContainer from '../components/publish/FieldsContainer.vue'; // deprecated
 import Field from '../components/publish/Field.vue';
+import FieldHeader from '../components/publish/FieldHeader.vue';
 import FieldMeta from '../components/publish/FieldMeta.vue';
 import ConfigureTabs from '../components/configure/Tabs.vue';
 import PublishTabs from '../components/publish/Tabs.vue';
@@ -80,6 +81,7 @@ Vue.component('publish-fields', Fields);
 Vue.component('publish-fields-container', FieldsContainer);
 Vue.component('publish-field', Field);
 Vue.component('publish-field-meta', FieldMeta);
+Vue.component('publish-field-header', FieldHeader);
 Vue.component('configure-tabs', ConfigureTabs);
 Vue.component('publish-tabs', PublishTabs);
 Vue.component('publish-sections', PublishSections);
diff --git a/resources/js/components/Actions.js b/resources/js/components/Actions.js
index 806043c421..c227f03eef 100644
--- a/resources/js/components/Actions.js
+++ b/resources/js/components/Actions.js
@@ -1,3 +1,5 @@
+import uid from 'uniqid';
+
 class Actions {
     constructor() {
         this.actions = {};
@@ -8,14 +10,7 @@ class Actions {
             this.actions[name] = [];
         }
 
-        this.actions[name].push({
-            display: null,
-            icon:  null,
-            quick: false,
-            run: () => {},
-            visible: () => true,
-            ...action,
-        });
+        this.actions[name].push(action);
     }
 
     get(name) {
diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
index 2097f7f7ef..1c1c91387f 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/HasActions.js
@@ -3,13 +3,36 @@ export default {
     computed: {
 
         actions() {
-            return this.$actions
-                .get(this.$options.name)
-                .filter(action => action.visible());;
+            return this.$actions.get(this.$options.name);
         },
 
-        hasActions() {
-            return this.$options.name !== null && this.actions.length > 0;
+        internalActions() {
+            return [];
+        },
+
+        visibleActions() {
+            return this.actions
+                .filter(action => {
+                    if (typeof action.visible === 'function') return action.visible();
+                    if (typeof action.visible !== 'undefined') return action.visible;
+                    return true;
+                });
+        },
+
+        visibleInternalActions() {
+            return this.internalActions
+                .filter(action => {
+                    if (typeof action.visible === 'function') return action.visible();
+                    if (typeof action.visible !== 'undefined') return action.visible;
+                    return true;
+                });
+        },
+
+        visibleQuickActions() {
+            return [
+                ...this.visibleActions,
+                ...this.visibleInternalActions
+            ].filter(item => item.quick);
         },
 
         actionPayload() { 
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index acb0e65983..03b9aae3c3 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -3,15 +3,20 @@
 <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
 <element-container @resized="refresh">
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
-        <div class="code-fieldtype-toolbar">
+        <publish-field-header
+            v-if="fullScreenMode"
+            :config="config"
+            :run-action="runAction"
+            :actions="visibleActions"
+            :internal-actions="visibleInternalActions"
+            :quick-actions="visibleQuickActions"
+            @close="toggleFullscreen">
+        </publish-field-header>
+        <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
             <div>
                 <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
                 <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
             </div>
-            <button @click="fullScreenMode = !fullScreenMode" class="btn-icon h-8 leading-none flex items-center justify-center text-gray-800 dark:text-dark-150" v-tooltip="__('Toggle Fullscreen Mode')">
-                <svg-icon name="expand-bold" class="h-3.5 w-3.5" v-show="!fullScreenMode" />
-                <svg-icon name="arrows-shrink" class="h-3.5 w-3.5" v-show="fullScreenMode" />
-            </button>
         </div>
         <div ref="codemirror"></div>
     </div>
@@ -131,6 +136,16 @@ export default {
                 };
             });
         },
+        internalActions() {
+            return [
+                {
+                    display: __('Toggle Fullscreen Mode'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    run: this.toggleFullscreen,
+                },
+            ];
+        },
     },
 
     watch: {
@@ -204,7 +219,10 @@ export default {
 
             // CodeMirror also needs to be manually refreshed when made visible in the DOM
             this.$events.$on('tab-switched', this.refresh);
-        }
+        },
+        toggleFullscreen() {
+            this.fullScreenMode = !this.fullScreenMode;
+        },
     }
 };
 </script>
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 340c1cddc2..30e4ec869e 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -90,6 +90,8 @@ export default {
         actionPayload() { 
             return {
                 field: this,
+                fieldPathPrefix: this.fieldPathPrefix,
+                handle: this.handle,
                 value: this.value,
                 config: this.config,
                 meta: this.meta,
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 9814ee0056..f09e7bd8f7 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -21,22 +21,6 @@
                     >&times;</button>
                 </header>
                 <section :class="{ 'p-4': fullScreenMode }">
-                    <div
-                        v-if="!fullScreenMode"
-                        class="group-fieldtype-button-wrapper"
-                    >
-                        <button
-                            v-if="config.fullscreen"
-                            @click="toggleFullScreen"
-                            v-tooltip="__('Toggle Fullscreen Mode')"
-                            class="flex items-center group"
-                        >
-                            <svg-icon
-                                name="expand-bold"
-                                class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175 group-hover:text-black dark:group-hover:text-dark-100"
-                            />
-                        </button>
-                    </div>
                     <div :class="{ 'border dark:border-dark-900 rounded shadow-sm replicator-set': config.border }">
                         <div class="publish-fields @container" :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }">
                             <set-field
@@ -108,7 +92,18 @@ export default {
             if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
             return Object.values(this.value).join(', ');
-        }
+        },
+        internalActions() {
+            return [
+                {
+                    display: __('Toggle Fullscreen Mode'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    run: this.toggleFullscreen,
+                    visible: this.config.fullscreen,
+                },
+            ];
+        },
     },
     methods: {
         blurred() {
@@ -168,6 +163,10 @@ export default {
             if (!state) return [];
             return state.errors[this.fieldPath(handle)] || [];
         },
+
+        toggleFullscreen() {
+            this.fullScreenMode = !this.fullScreenMode;
+        },
     },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index c8f7c65faa..fc2f2b4321 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -1,11 +1,17 @@
 <template>
     <portal name="table-fullscreen" :disabled="!fullScreenMode" target-class="table-fieldtype">
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
-            <header class="bg-gray-200 dark:bg-dark-550 border-b dark:border-dark-900 py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
-                <h2 v-text="__(config.display)" />
-                <button class="btn-close absolute top-2 rtl:left-5 ltr:right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
-            </header>
-            <section :class="{'p-4 dark:bg-dark-700': fullScreenMode}">
+            <publish-field-header
+                v-if="fullScreenMode"
+                :config="config"
+                :run-action="runAction"
+                :actions="visibleActions"
+                :internal-actions="visibleInternalActions"
+                :quick-actions="visibleQuickActions"
+                @close="toggleFullscreen">
+            </publish-field-header>
+
+            <section :class="{'mt-14 p-4 dark:bg-dark-700': fullScreenMode}">
                 <table class="table-fieldtype-table" v-if="rowCount">
                     <thead>
                         <tr>
@@ -18,12 +24,7 @@
                                     </a>
                                 </div>
                             </th>
-                            <th class="row-controls rtl:pl-0 ltr:pr-0">
-                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-600 hover:text-gray-800">
-                                    <svg-icon name="expand-bold" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
-                                    <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
-                                </button>
-                            </th>
+                            <th class="row-controls rtl:pl-0 ltr:pr-0"></th>
                         </tr>
                     </thead>
 
@@ -169,7 +170,18 @@ export default {
             return _(this.data)
                 .map(row => row.value.cells.filter(cell => !!cell).join(', '))
                 .filter(row => !!row).join(', ');
-        }
+        },
+
+        internalActions() {
+            return [
+                {
+                    display: __('Toggle Fullscreen Mode'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    run: this.toggleFullscreen,
+                },
+            ];
+        },
     },
 
     methods: {
@@ -214,7 +226,11 @@ export default {
         deleteCancelled() {
             this.deletingRow = false;
             this.deletingColumn = false;
-        }
+        },
+
+        toggleFullscreen() {
+            this.fullScreenMode = !this.fullScreenMode;
+        },
     }
 
 }
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index c057803088..0b0cdee59e 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -15,8 +15,34 @@
         @dragend="ignorePageHeader(false)"
     >
 
-        <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar">
-            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed" :class="{'justify-center': fullScreenMode}">
+        <publish-field-header
+            v-if="fullScreenMode"
+            :config="config"
+            :run-action="runAction"
+            :actions="visibleActions"
+            :internal-actions="visibleInternalActions"
+            :quick-actions="visibleQuickActions"
+            @close="toggleFullscreen">
+            <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
+                <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
+                    <component
+                        v-for="button in visibleButtons(buttons)"
+                        :key="button.name"
+                        :is="button.component || 'BardToolbarButton'"
+                        :button="button"
+                        :active="buttonIsActive(button)"
+                        :config="config"
+                        :bard="_self"
+                        :editor="editor" />
+                    <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
+                        <svg-icon name="show-source" class="w-4 h-4 "/>
+                    </button>
+                </div>
+            </div>
+        </publish-field-header>
+
+        <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar && !fullScreenMode">
+            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
                 <component
                     v-for="button in visibleButtons(buttons)"
                     :key="button.name"
@@ -26,9 +52,9 @@
                     :config="config"
                     :bard="_self"
                     :editor="editor" />
-                    <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
-                        <svg-icon name="show-source" class="w-4 h-4 "/>
-                    </button>
+                <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
+                    <svg-icon name="show-source" class="w-4 h-4 "/>
+                </button>
             </div>
         </div>
 
@@ -340,6 +366,7 @@ export default {
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
+                    visible: this.config.fullscreen,
                 },
             ];
         },
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 2cc546b889..8aaefef377 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -32,7 +32,7 @@
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="actions" @run="runAction" v-if="hasActions" />
+                        <dropdown-actions :actions="visibleActions" @run="runAction" v-if="visibleActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
@@ -187,8 +187,11 @@ export default {
         },
 
         actionPayload() { 
+            const field = this.extension.options.bard;
             return {
-                field: this.extension.options.bard,
+                field: field,
+                fieldPathPrefix: field.fieldPathPrefix || field.handle,
+                index: this.index,
                 values: this.values,
                 config: this.config,
                 meta: this.meta,
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 333984c882..c323130b74 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -29,10 +29,6 @@
                         <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
                             <svg-icon name="dark-mode" class="w-4 h-4" />
                         </button>
-                        <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')" :aria-label="__('Toggle Fullscreen Mode')">
-                            <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode" />
-                            <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode" />
-                        </button>
                     </div>
                 </div>
 
@@ -715,7 +711,11 @@ export default {
 
             this.count.characters = ucs2decode(trimmed.replace(/\s/g, '')).length;
             this.count.words = trimmed.split(/\s+/).filter(word => word.length > 0).length;
-        }
+        },
+
+        toggleFullscreen() {
+            this.fullScreenMode = !this.fullScreenMode;
+        },
     },
 
     computed: {
@@ -744,7 +744,18 @@ export default {
 
             return marked(this.data || '', { renderer: new PlainTextRenderer })
                 .replace(/<\/?[^>]+(>|$)/g, "");
-        }
+        },
+
+        internalActions() {
+            return [
+                {
+                    display: __('Toggle Fullscreen Mode'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    run: this.toggleFullscreen,
+                },
+            ];
+        },
     }
 
 };
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index a77f09acf5..d697fb7d11 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,22 +8,17 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
 
-    <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 border-b dark:border-dark-900 p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
-        <h2 v-text="__(config.display)" class="flex-1" />
-            <div class="flex items-center">
-                <div class="btn-group">
-                    <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750 dark:text-dark-175" />
-                    </button>
-                    <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750 dark:text-dark-175" />
-                    </button>
-                </div>
-                <button class="btn-close rtl:mr-2 ltr:ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
-            </div>
-    </header>
-
-    <section :class="{'mt-12 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
+    <publish-field-header
+        v-if="fullScreenMode"
+        :config="config"
+        :run-action="runAction"
+        :actions="visibleActions"
+        :internal-actions="visibleInternalActions"
+        :quick-actions="visibleQuickActions"
+        @close="toggleFullscreen">
+    </publish-field-header>
+
+    <section :class="{'mt-14 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
 
         <sortable-list
             :value="value"
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 6e6fe31410..9b10e8800d 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="actions" @run="runAction" v-if="hasActions" />
+                        <dropdown-actions :actions="visibleActions" @run="runAction" v-if="visibleActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
@@ -198,6 +198,8 @@ export default {
         actionPayload() { 
             return {
                 field: this.field,
+                fieldPathPrefix: this.fieldPathPrefix,
+                index: this.index,
                 values: this.values,
                 config: this.config,
                 meta: this.meta,
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 1d595d058c..41a19a66cd 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -53,19 +53,17 @@
             <div class="field-dropdown" v-if="mounted && hasDropdown">
                 <quick-dropdown-list>
                     <quick-dropdown-item
-                        v-for="item in fieldQuickActions"
+                        v-for="item, index in fieldQuickActions"
+                        :key="index"
                         :text="item.display"
                         :icon="item.icon"
-                        @click="item.run" />
+                        @click="fieldRunAction(item)" />
                     <template #dropdown>
-                        <dropdown-actions :actions="fieldActions" @run="fieldRunAction" />
+                        <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
                         <div class="divider" />
-                        <dropdown-item
-                            v-for="item in fieldInternalActions"
-                            :text="item.display"
-                            @click="item.run" />
+                        <dropdown-actions :actions="fieldInternalActions" @run="fieldRunAction" v-if="fieldInternalActions.length" />
                     </template>
-                </quick-dropdown-list>                
+                </quick-dropdown-list>
             </div>
 
         </div>
@@ -250,23 +248,19 @@ export default {
         },
 
         fieldActions() {
-            return this.$refs.field.actions;
+            return this.$refs.field.visibleActions;
         },
 
         fieldInternalActions() {
-            return this.$refs.field.internalActions;
-        },
-
-        fieldAllActions() {
-            return [...this.fieldActions, ...this.fieldInternalActions];
+            return this.$refs.field.visibleInternalActions;
         },
 
         fieldQuickActions() {
-            return this.fieldAllActions.filter(item => item.quick);
+            return this.$refs.field.visibleQuickActions;
         },
 
         hasDropdown() {
-            return this.fieldAllActions.length > 0;
+            return this.fieldActions.length > 0 || this.fieldInternalActions.length > 0;;
         },
 
     },
diff --git a/resources/js/components/publish/FieldHeader.vue b/resources/js/components/publish/FieldHeader.vue
new file mode 100644
index 0000000000..fc15c2e611
--- /dev/null
+++ b/resources/js/components/publish/FieldHeader.vue
@@ -0,0 +1,56 @@
+<template>
+
+    <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 px-4 flex items-center justify-between shadow z-max">
+        <h2 class="w-full" v-text="__(config.display)" />
+        <div class="grow-1 min-w-max flex gap-4 items-center">
+            <slot />
+        </div>
+        <div class="w-full py-2.5 flex justify-end items-center">
+            <dropdown-list class="mr-2" v-if="actions.length || internalActions.length">
+                <dropdown-actions :actions="actions" @run="runAction" v-if="actions.length" />
+                <div class="divider" />
+                <dropdown-actions :actions="internalActions" @run="runAction" v-if="actions.length" />
+            </dropdown-list>
+            <button
+                class="btn-quick-action"
+                v-for="item, index in quickActions"
+                :key="index"
+                v-tooltip="item.display"
+                @click="runAction(item)">
+                <svg-icon :name="item.icon" class="h-4 w-4" />
+            </button>
+        </div>
+    </header>
+
+</template>
+
+<script>
+
+export default {
+
+    props: {
+        config: {
+            type: Object,
+            required: true,
+        },
+        runAction: {
+            type: Function,
+            required: true,
+        },
+        actions: {
+            type: Array,
+            default: () => [],
+        },
+        internalActions: {
+            type: Array,
+            default: () => [],
+        },
+        quickActions: {
+            type: Array,
+            default: () => [],
+        },
+    },
+
+}
+
+</script>

From 2d619135f3ce147c13f235b85f00240e7569db40 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 20 Sep 2024 16:20:35 +0100
Subject: [PATCH 10/67] WIP

---
 resources/css/components/fieldtypes/code.css  |  3 +-
 .../css/components/fieldtypes/markdown.css    |  5 ++-
 resources/css/vendors/codemirror.css          |  2 +-
 resources/js/components/HasActions.js         |  4 +--
 .../components/fieldtypes/CodeFieldtype.vue   |  6 ++++
 .../components/fieldtypes/GroupFieldtype.vue  | 20 ++++++------
 .../js/components/fieldtypes/grid/Grid.vue    | 32 +++++++++++++------
 .../js/components/fieldtypes/grid/Stacked.vue |  6 ----
 .../js/components/fieldtypes/grid/Table.vue   |  7 +---
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 32 ++++++++++++++++++-
 .../js/components/publish/FieldHeader.vue     |  2 +-
 11 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
index 00b828e42a..63f34caf42 100644
--- a/resources/css/components/fieldtypes/code.css
+++ b/resources/css/components/fieldtypes/code.css
@@ -12,7 +12,8 @@
     }
 }
 
-.code-fieldtype-toolbar select {
+.code-fieldtype-toolbar select,
+.code-fieldtype-toolbar-fullscreen select {
     @apply h-8 text-sm leading-none;
 }
 
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 9c824f2f71..de611e1354 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -212,13 +212,12 @@
 }
 
 .markdown-fieldtype-wrapper.markdown-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-16;
+    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-14 border-0;
     /* padding-top: 52px;  offset the nav */
     will-change: transform;
 
     .markdown-toolbar {
-        @apply fixed top-0 w-full px-6 py-2 h-12 shadow text-base flex items-center justify-between;
-        @apply bg-gradient-to-b from-white to-gray-100;
+        @apply border-0;
     }
 
     .mode-wrap {
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index 1af15899be..93377c0fec 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -342,7 +342,7 @@
 
 
   .CodeMirror-fullscreen {
-      @apply fixed h-auto inset-0 top-14 rounded-none;
+      @apply fixed h-auto inset-0 pt-14 rounded-none;
   }
 
   .CodeMirror-rulers {
diff --git a/resources/js/components/HasActions.js b/resources/js/components/HasActions.js
index 1c1c91387f..e9abaf96ae 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/HasActions.js
@@ -43,8 +43,8 @@ export default {
 
     methods: {
 
-        runAction({ run }) {
-            run(this.actionPayload);
+        runAction(action) {
+            action.run(this.actionPayload);
         },
 
     }
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 03b9aae3c3..0027926ace 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -11,6 +11,12 @@
             :internal-actions="visibleInternalActions"
             :quick-actions="visibleQuickActions"
             @close="toggleFullscreen">
+            <div class="code-fieldtype-toolbar-fullscreen">
+                <div>
+                    <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
+                    <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
+                </div>
+            </div>
         </publish-field-header>
         <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
             <div>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index f09e7bd8f7..a32b58e5ae 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -9,18 +9,16 @@
                 class="group-fieldtype-container"
                 :class="{ 'grid-fullscreen bg-white': fullScreenMode }"
             >
-                <header
+                <publish-field-header
                     v-if="fullScreenMode"
-                    class="relative flex items-center justify-between py-3 rtl:pr-3 ltr:pl-3 bg-gray-200 border-b"
-                >
-                    <h2 v-text="__(config.display)" />
-                    <button
-                        @click="fullScreenMode = false"
-                        class="absolute btn-close top-2 rtl:left-5 ltr:right-5"
-                        :aria-label="__('Exit Fullscreen Mode')"
-                    >&times;</button>
-                </header>
-                <section :class="{ 'p-4': fullScreenMode }">
+                    :config="config"
+                    :run-action="runAction"
+                    :actions="visibleActions"
+                    :internal-actions="visibleInternalActions"
+                    :quick-actions="visibleQuickActions"
+                    @close="toggleFullscreen">
+                </publish-field-header>
+                <section :class="{ 'mt-14 p-4': fullScreenMode }">
                     <div :class="{ 'border dark:border-dark-900 rounded shadow-sm replicator-set': config.border }">
                         <div class="publish-fields @container" :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }">
                             <set-field
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index a806019446..9f0e71baf3 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -5,14 +5,17 @@
     <element-container @resized="containerWidth = $event.width">
     <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }">
 
-        <template v-if="config.fullscreen || !config.hide_display">
-            <header class="bg-gray-200 dark:bg-dark-550 border-b dark:border-dark-900 py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
-                <h2 v-text="__(config.display)" />
-                <button class="btn-close absolute top-2 rtl:left-5 ltr:right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
-            </header>
-        </template>
-
-        <section :class="{'p-4': fullScreenMode}">
+        <publish-field-header
+            v-if="fullScreenMode"
+            :config="config"
+            :run-action="runAction"
+            :actions="visibleActions"
+            :internal-actions="visibleInternalActions"
+            :quick-actions="visibleQuickActions"
+            @close="toggleFullscreen">
+        </publish-field-header>
+
+        <section :class="{'mt-14 p-4': fullScreenMode}">
 
             <small v-if="hasExcessRows" class="help-block text-red-500">
                 {{ __('Max Rows') }}: {{ maxRows }}
@@ -141,7 +144,18 @@ export default {
             if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
             return `${__(this.config.display)}: ${__n(':count row|:count rows', this.value.length)}`;
-        }
+        },
+
+        internalActions() {
+            return [
+                {
+                    display: __('Toggle Fullscreen Mode'),
+                    icon: 'expand-bold',
+                    quick: true,
+                    run: this.toggleFullScreen,
+                },
+            ];
+        },
 
     },
 
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index 75536569ae..ae431e9f99 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -1,11 +1,5 @@
 <template>
 <div>
-    <div class="flex justify-end absolute top-3 rtl:left-3 ltr:right-3 @md:rtl:left-6 @md:ltr:right-6" v-if="! grid.fullScreenMode">
-        <button v-if="allowFullscreen" @click="grid.toggleFullScreen" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-            <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="! grid.fullScreenMode" />
-            <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="grid.fullScreenMode" />
-        </button>
-    </div>
 
     <sortable-list
         :value="rows"
diff --git a/resources/js/components/fieldtypes/grid/Table.vue b/resources/js/components/fieldtypes/grid/Table.vue
index 640108ddc7..ad6a315fd3 100644
--- a/resources/js/components/fieldtypes/grid/Table.vue
+++ b/resources/js/components/fieldtypes/grid/Table.vue
@@ -9,12 +9,7 @@
                     :key="field.handle"
                     :field="field"
                 />
-                <th class="grid-row-controls row-controls">
-                    <button v-if="allowFullscreen" @click="grid.toggleFullScreen" class="flex items-center w-full h-full justify-center text-gray-500 hover:text-gray-700">
-                        <svg-icon name="expand-bold" class="h-3.5 w-3.5" v-show="! grid.fullScreenMode" />
-                        <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="grid.fullScreenMode" />
-                    </button>
-                </th>
+                <th class="grid-row-controls row-controls"></th>
             </tr>
         </thead>
         <sortable-list
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index c323130b74..3acc4a0d5d 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -12,7 +12,37 @@
             @upload-complete="uploadComplete"
         >
             <div slot-scope="{ dragging }">
-                <div class="markdown-toolbar">
+
+                <publish-field-header
+                    v-if="fullScreenMode"
+                    :config="config"
+                    :run-action="runAction"
+                    :actions="visibleActions"
+                    :internal-actions="visibleInternalActions"
+                    :quick-actions="visibleQuickActions"
+                    @close="toggleFullscreen">
+                    <div class="markdown-toolbar">
+                        <div class="markdown-modes">
+                            <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
+                            <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
+                        </div>
+                        <div class="markdown-buttons" v-if="! isReadOnly">
+                            <button
+                                v-for="button in buttons"
+                                v-tooltip="button.text"
+                                :aria-label="button.text"
+                                @click="button.command(editor)"
+                            >
+                                <svg-icon :name="button.svg" class="w-4 h-4" />
+                            </button>
+                            <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
+                                <svg-icon name="dark-mode" class="w-4 h-4" />
+                            </button>
+                        </div>
+                    </div>
+                </publish-field-header>
+
+                <div class="markdown-toolbar" v-if="!fullScreenMode">
                     <div class="markdown-modes">
                         <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
                         <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
diff --git a/resources/js/components/publish/FieldHeader.vue b/resources/js/components/publish/FieldHeader.vue
index fc15c2e611..69f8c13917 100644
--- a/resources/js/components/publish/FieldHeader.vue
+++ b/resources/js/components/publish/FieldHeader.vue
@@ -9,7 +9,7 @@
             <dropdown-list class="mr-2" v-if="actions.length || internalActions.length">
                 <dropdown-actions :actions="actions" @run="runAction" v-if="actions.length" />
                 <div class="divider" />
-                <dropdown-actions :actions="internalActions" @run="runAction" v-if="actions.length" />
+                <dropdown-actions :actions="internalActions" @run="runAction" v-if="internalActions.length" />
             </dropdown-list>
             <button
                 class="btn-quick-action"

From a448f9726b95e7329b90d86718bfc59247e6bd06 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 23 Sep 2024 09:21:35 +0100
Subject: [PATCH 11/67] Tweak payload keys

---
 resources/js/components/fieldtypes/Fieldtype.vue      |  2 +-
 resources/js/components/fieldtypes/bard/Set.vue       | 10 +++++++---
 resources/js/components/fieldtypes/replicator/Set.vue |  5 +++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 30e4ec869e..2a7cf29839 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -89,7 +89,7 @@ export default {
 
         actionPayload() { 
             return {
-                field: this,
+                vm: this,
                 fieldPathPrefix: this.fieldPathPrefix,
                 handle: this.handle,
                 value: this.value,
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 8aaefef377..d03b0d15fc 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -186,11 +186,15 @@ export default {
             return this.decorationSpecs.withinSelection;
         },
 
+        fieldVm() {
+            return this.extension.options.bard
+        },
+
         actionPayload() { 
-            const field = this.extension.options.bard;
             return {
-                field: field,
-                fieldPathPrefix: field.fieldPathPrefix || field.handle,
+                vm: this,
+                fieldVm: this.fieldVm,
+                fieldPathPrefix: this.fieldVm.fieldPathPrefix || this.fieldVm.handle,
                 index: this.index,
                 values: this.values,
                 config: this.config,
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 9b10e8800d..b97821bf5e 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -187,7 +187,7 @@ export default {
             return Object.keys(this.config).length === 0;
         },
 
-        field() {
+        fieldVm() {
             let vm = this;
             while (vm !== vm.$root) {
                 if (vm.$options.name === 'replicator-fieldtype') return vm;
@@ -197,7 +197,8 @@ export default {
 
         actionPayload() { 
             return {
-                field: this.field,
+                vm: this,
+                fieldVm: this.fieldVm,
                 fieldPathPrefix: this.fieldPathPrefix,
                 index: this.index,
                 values: this.values,

From 5002d370e427da7126e03734bcc10496f1cc019c Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Tue, 24 Sep 2024 09:21:14 +0100
Subject: [PATCH 12/67] Naming tweaks

---
 resources/js/components/DropdownActions.vue     | 2 +-
 resources/js/components/publish/Field.vue       | 8 ++++----
 resources/js/components/publish/FieldHeader.vue | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/DropdownActions.vue b/resources/js/components/DropdownActions.vue
index d55fc48b01..0e621d5e7b 100644
--- a/resources/js/components/DropdownActions.vue
+++ b/resources/js/components/DropdownActions.vue
@@ -4,7 +4,7 @@
             v-for="action in actions"
             @click="run(action)"
         >
-            {{ action.display }}
+            {{ action.display || action.title }}
         </button>
     </div>
 </template>
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 41a19a66cd..1e97c13a1e 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -53,11 +53,11 @@
             <div class="field-dropdown" v-if="mounted && hasDropdown">
                 <quick-dropdown-list>
                     <quick-dropdown-item
-                        v-for="item, index in fieldQuickActions"
+                        v-for="action, index in fieldQuickActions"
                         :key="index"
-                        :text="item.display"
-                        :icon="item.icon"
-                        @click="fieldRunAction(item)" />
+                        :text="action.title"
+                        :icon="action.icon"
+                        @click="fieldRunAction(action)" />
                     <template #dropdown>
                         <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
                         <div class="divider" />
diff --git a/resources/js/components/publish/FieldHeader.vue b/resources/js/components/publish/FieldHeader.vue
index 69f8c13917..470d3f21bc 100644
--- a/resources/js/components/publish/FieldHeader.vue
+++ b/resources/js/components/publish/FieldHeader.vue
@@ -13,11 +13,11 @@
             </dropdown-list>
             <button
                 class="btn-quick-action"
-                v-for="item, index in quickActions"
+                v-for="action, index in quickActions"
                 :key="index"
-                v-tooltip="item.display"
-                @click="runAction(item)">
-                <svg-icon :name="item.icon" class="h-4 w-4" />
+                v-tooltip="action.title"
+                @click="runAction(action)">
+                <svg-icon :name="action.icon" class="h-4 w-4" />
             </button>
         </div>
     </header>

From eed83346768924b20c065774b614a49c857bdb07 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Tue, 24 Sep 2024 09:24:38 +0100
Subject: [PATCH 13/67] Naming tweaks, round two

---
 resources/js/components/fieldtypes/CodeFieldtype.vue        | 2 +-
 resources/js/components/fieldtypes/Fieldtype.vue            | 4 ----
 resources/js/components/fieldtypes/GroupFieldtype.vue       | 2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue       | 2 +-
 resources/js/components/fieldtypes/bard/BardFieldtype.vue   | 6 +++---
 resources/js/components/fieldtypes/grid/Grid.vue            | 2 +-
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue | 2 +-
 .../js/components/fieldtypes/replicator/Replicator.vue      | 6 +++---
 8 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 0027926ace..f1da41d85a 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -145,7 +145,7 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 2a7cf29839..4e3bf54192 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -83,10 +83,6 @@ export default {
             return prefix+'field_'+this.config.handle;
         },
 
-        internalActions() {
-            return [];
-        },
-
         actionPayload() { 
             return {
                 vm: this,
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index a32b58e5ae..a2b9a437e3 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -94,7 +94,7 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index fc2f2b4321..f66d29410a 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -175,7 +175,7 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 0b0cdee59e..d45bcad248 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -350,19 +350,19 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Expand All Sets'),
+                    title: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
                     run: this.expandAll,
                 },
                 {
-                    display: __('Collapse All Sets'),
+                    title: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
                     run: this.collapseAll,
                 },
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 9f0e71baf3..7bcd00c126 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -149,7 +149,7 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullScreen,
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 3acc4a0d5d..aa6dda2984 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -779,7 +779,7 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index d697fb7d11..1619870ea2 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -162,19 +162,19 @@ export default {
         internalActions() {
             return [
                 {
-                    display: __('Expand All Sets'),
+                    title: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
                     run: this.expandAll,
                 },
                 {
-                    display: __('Collapse All Sets'),
+                    title: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
                     run: this.collapseAll,
                 },
                 {
-                    display: __('Toggle Fullscreen Mode'),
+                    title: __('Toggle Fullscreen Mode'),
                     icon: 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,

From d7d3fe4cf1e4854bf97d27797f68b1e6bd890e27 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Tue, 24 Sep 2024 18:09:15 +0100
Subject: [PATCH 14/67] Ensure dropdown buttons dont submit forms

---
 resources/js/components/DropdownList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index 9e91349619..cb90e5cb0f 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -2,7 +2,7 @@
     <popover class="dropdown-list" :disabled="disabled" :placement="placement" :autoclose="autoclose" :offset="offset" @opened="$emit('opened')" @closed="$emit('closed')">
         <template #trigger>
             <slot name="trigger">
-                <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
+                <button class="rotating-dots-button" :aria-label="__('Open Dropdown')" type="button">
                     <svg class="rotating-dots fill-current" width="12" viewBox="0 0 24 24"><circle cx="3" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="21" cy="12" r="3"/></svg>
                 </button>
             </slot>

From d081de7fb9f765094a727f775e587aa9621c3618 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Wed, 6 Nov 2024 09:46:22 +0000
Subject: [PATCH 15/67] Option to resolve icons using callback

---
 .../js/components/fieldtypes/CodeFieldtype.vue     |  3 ++-
 .../js/components/fieldtypes/GroupFieldtype.vue    |  3 ++-
 .../js/components/fieldtypes/TableFieldtype.vue    |  3 ++-
 .../components/fieldtypes/bard/BardFieldtype.vue   |  3 ++-
 resources/js/components/fieldtypes/grid/Grid.vue   |  3 ++-
 .../fieldtypes/markdown/MarkdownFieldtype.vue      |  3 ++-
 .../fieldtypes/replicator/Replicator.vue           |  3 ++-
 resources/js/components/publish/Field.vue          |  8 ++++++--
 resources/js/components/publish/FieldHeader.vue    | 14 +++++++++++++-
 9 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index f1da41d85a..4680048214 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -5,6 +5,7 @@
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
         <publish-field-header
             v-if="fullScreenMode"
+            :field="_self"
             :config="config"
             :run-action="runAction"
             :actions="visibleActions"
@@ -146,7 +147,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index a2b9a437e3..253b6f0735 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,6 +11,7 @@
             >
                 <publish-field-header
                     v-if="fullScreenMode"
+                    :field="_self"
                     :config="config"
                     :run-action="runAction"
                     :actions="visibleActions"
@@ -95,7 +96,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index f66d29410a..56fb1e0130 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -3,6 +3,7 @@
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
             <publish-field-header
                 v-if="fullScreenMode"
+                :field="_self"
                 :config="config"
                 :run-action="runAction"
                 :actions="visibleActions"
@@ -176,7 +177,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index d45bcad248..20afe35170 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -17,6 +17,7 @@
 
         <publish-field-header
             v-if="fullScreenMode"
+            :field="_self"
             :config="config"
             :run-action="runAction"
             :actions="visibleActions"
@@ -363,7 +364,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 7bcd00c126..2a760f2c2b 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -7,6 +7,7 @@
 
         <publish-field-header
             v-if="fullScreenMode"
+            :field="_self"
             :config="config"
             :run-action="runAction"
             :actions="visibleActions"
@@ -150,7 +151,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullScreen,
                 },
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index aa6dda2984..519b7cf246 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -15,6 +15,7 @@
 
                 <publish-field-header
                     v-if="fullScreenMode"
+                    :field="_self"
                     :config="config"
                     :run-action="runAction"
                     :actions="visibleActions"
@@ -780,7 +781,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 1619870ea2..3319acd968 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -10,6 +10,7 @@
 
     <publish-field-header
         v-if="fullScreenMode"
+        :field="_self"
         :config="config"
         :run-action="runAction"
         :actions="visibleActions"
@@ -175,7 +176,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: 'expand-bold',
+                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 1e97c13a1e..a701d33dd5 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -56,7 +56,7 @@
                         v-for="action, index in fieldQuickActions"
                         :key="index"
                         :text="action.title"
-                        :icon="action.icon"
+                        :icon="fieldActionIcon(action)"
                         @click="fieldRunAction(action)" />
                     <template #dropdown>
                         <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
@@ -296,7 +296,11 @@ export default {
 
         fieldRunAction(action) {
             this.$refs.field.runAction(action);
-        }
+        },
+
+        fieldActionIcon({ icon }) {
+            return typeof icon === 'function' ? icon({ field: this }) : icon;
+        },
 
     }
 }
diff --git a/resources/js/components/publish/FieldHeader.vue b/resources/js/components/publish/FieldHeader.vue
index 470d3f21bc..c610a48026 100644
--- a/resources/js/components/publish/FieldHeader.vue
+++ b/resources/js/components/publish/FieldHeader.vue
@@ -17,7 +17,7 @@
                 :key="index"
                 v-tooltip="action.title"
                 @click="runAction(action)">
-                <svg-icon :name="action.icon" class="h-4 w-4" />
+                <svg-icon :name="fieldActionIcon(action)" class="h-4 w-4" />
             </button>
         </div>
     </header>
@@ -29,6 +29,10 @@
 export default {
 
     props: {
+        field: {
+            type: Object,
+            required: true,
+        },
         config: {
             type: Object,
             required: true,
@@ -51,6 +55,14 @@ export default {
         },
     },
 
+    methods: {
+
+        fieldActionIcon({ icon }) {
+            return typeof icon === 'function' ? icon({ field: this.field }) : icon;
+        },
+
+    },
+
 }
 
 </script>

From 90462b2601a22dcdaed0c3ccec34816031d82dc9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 10:19:56 -0500
Subject: [PATCH 16/67] marking an action as quick without an icon breaks. this
 defaults it to a placeholder

---
 resources/js/components/publish/Field.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index a701d33dd5..14c1219703 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -299,6 +299,7 @@ export default {
         },
 
         fieldActionIcon({ icon }) {
+            icon = icon || 'image';
             return typeof icon === 'function' ? icon({ field: this }) : icon;
         },
 

From 6ac8c383d8342e4c98bbcb3e0d294da67a1749de Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 10:20:37 -0500
Subject: [PATCH 17/67] noticed that there is a white background. when
 displayed on non-white it's wonky.

---
 resources/svg/icons/regular/image.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/svg/icons/regular/image.svg b/resources/svg/icons/regular/image.svg
index 446baa9e96..95a6a914a9 100644
--- a/resources/svg/icons/regular/image.svg
+++ b/resources/svg/icons/regular/image.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="matrix(.9 0 0 .9 .7 .7)"><rect width="13" height="13" x=".5" y=".5" rx="1" transform="rotate(180 7.005 7)"/><circle cx="9.25" cy="4.75" r="1.75"/><path d="M9.4 13.5a7.36 7.36 0 0 0-7.4-6 7.88 7.88 0 0 0-1.5.14"/><path d="M13.5 9.91A7.8 7.8 0 0 0 11 9.5a7.89 7.89 0 0 0-3.13.64"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="matrix(.9 0 0 .9 .7 .7)"><rect width="13" height="13" x=".5" y=".5" rx="1" transform="rotate(180 7.005 7)"/><circle cx="9.25" cy="4.75" r="1.75"/><path d="M9.4 13.5a7.36 7.36 0 0 0-7.4-6 7.88 7.88 0 0 0-1.5.14"/><path d="M13.5 9.91A7.8 7.8 0 0 0 11 9.5a7.89 7.89 0 0 0-3.13.64"/></g></svg>

From 4fd3dc716f9b750ad4a0addfa421bf41a59e7486 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 12:35:34 -0500
Subject: [PATCH 18/67] rename

---
 resources/js/bootstrap/components.js                          | 4 ++--
 resources/js/components/fieldtypes/CodeFieldtype.vue          | 4 ++--
 resources/js/components/fieldtypes/GroupFieldtype.vue         | 4 ++--
 resources/js/components/fieldtypes/TableFieldtype.vue         | 4 ++--
 resources/js/components/fieldtypes/bard/BardFieldtype.vue     | 4 ++--
 resources/js/components/fieldtypes/grid/Grid.vue              | 4 ++--
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue   | 4 ++--
 resources/js/components/fieldtypes/replicator/Replicator.vue  | 4 ++--
 .../publish/{FieldHeader.vue => FullscreenHeader.vue}         | 0
 9 files changed, 16 insertions(+), 16 deletions(-)
 rename resources/js/components/publish/{FieldHeader.vue => FullscreenHeader.vue} (100%)

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 232160b5ce..6266430c73 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -8,7 +8,7 @@ import PublishForm from '../components/publish/PublishForm.vue';
 import Fields from '../components/publish/Fields.vue';
 import FieldsContainer from '../components/publish/FieldsContainer.vue'; // deprecated
 import Field from '../components/publish/Field.vue';
-import FieldHeader from '../components/publish/FieldHeader.vue';
+import FullscreenHeader from '../components/publish/FullscreenHeader.vue';
 import FieldMeta from '../components/publish/FieldMeta.vue';
 import ConfigureTabs from '../components/configure/Tabs.vue';
 import PublishTabs from '../components/publish/Tabs.vue';
@@ -81,7 +81,7 @@ Vue.component('publish-fields', Fields);
 Vue.component('publish-fields-container', FieldsContainer);
 Vue.component('publish-field', Field);
 Vue.component('publish-field-meta', FieldMeta);
-Vue.component('publish-field-header', FieldHeader);
+Vue.component('publish-field-fullscreen-header', FullscreenHeader);
 Vue.component('configure-tabs', ConfigureTabs);
 Vue.component('publish-tabs', PublishTabs);
 Vue.component('publish-sections', PublishSections);
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 4680048214..c63e9264bc 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -3,7 +3,7 @@
 <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
 <element-container @resized="refresh">
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
-        <publish-field-header
+        <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
@@ -18,7 +18,7 @@
                     <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
                 </div>
             </div>
-        </publish-field-header>
+        </publish-field-fullscreen-header>
         <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
             <div>
                 <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 253b6f0735..f9d6a647a2 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -9,7 +9,7 @@
                 class="group-fieldtype-container"
                 :class="{ 'grid-fullscreen bg-white': fullScreenMode }"
             >
-                <publish-field-header
+                <publish-field-fullscreen-header
                     v-if="fullScreenMode"
                     :field="_self"
                     :config="config"
@@ -18,7 +18,7 @@
                     :internal-actions="visibleInternalActions"
                     :quick-actions="visibleQuickActions"
                     @close="toggleFullscreen">
-                </publish-field-header>
+                </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
                     <div :class="{ 'border dark:border-dark-900 rounded shadow-sm replicator-set': config.border }">
                         <div class="publish-fields @container" :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }">
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 56fb1e0130..ff9dfe49b7 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -1,7 +1,7 @@
 <template>
     <portal name="table-fullscreen" :disabled="!fullScreenMode" target-class="table-fieldtype">
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
-            <publish-field-header
+            <publish-field-fullscreen-header
                 v-if="fullScreenMode"
                 :field="_self"
                 :config="config"
@@ -10,7 +10,7 @@
                 :internal-actions="visibleInternalActions"
                 :quick-actions="visibleQuickActions"
                 @close="toggleFullscreen">
-            </publish-field-header>
+            </publish-field-fullscreen-header>
 
             <section :class="{'mt-14 p-4 dark:bg-dark-700': fullScreenMode}">
                 <table class="table-fieldtype-table" v-if="rowCount">
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 20afe35170..61c8e43b75 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -15,7 +15,7 @@
         @dragend="ignorePageHeader(false)"
     >
 
-        <publish-field-header
+        <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
@@ -40,7 +40,7 @@
                     </button>
                 </div>
             </div>
-        </publish-field-header>
+        </publish-field-fullscreen-header>
 
         <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar && !fullScreenMode">
             <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 2a760f2c2b..800cbefdc0 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -5,7 +5,7 @@
     <element-container @resized="containerWidth = $event.width">
     <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }">
 
-        <publish-field-header
+        <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
@@ -14,7 +14,7 @@
             :internal-actions="visibleInternalActions"
             :quick-actions="visibleQuickActions"
             @close="toggleFullscreen">
-        </publish-field-header>
+        </publish-field-fullscreen-header>
 
         <section :class="{'mt-14 p-4': fullScreenMode}">
 
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 519b7cf246..519ed0516c 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -13,7 +13,7 @@
         >
             <div slot-scope="{ dragging }">
 
-                <publish-field-header
+                <publish-field-fullscreen-header
                     v-if="fullScreenMode"
                     :field="_self"
                     :config="config"
@@ -41,7 +41,7 @@
                             </button>
                         </div>
                     </div>
-                </publish-field-header>
+                </publish-field-fullscreen-header>
 
                 <div class="markdown-toolbar" v-if="!fullScreenMode">
                     <div class="markdown-modes">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 3319acd968..325c08d1ab 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,7 +8,7 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
 
-    <publish-field-header
+    <publish-field-fullscreen-header
         v-if="fullScreenMode"
         :field="_self"
         :config="config"
@@ -17,7 +17,7 @@
         :internal-actions="visibleInternalActions"
         :quick-actions="visibleQuickActions"
         @close="toggleFullscreen">
-    </publish-field-header>
+    </publish-field-fullscreen-header>
 
     <section :class="{'mt-14 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
 
diff --git a/resources/js/components/publish/FieldHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
similarity index 100%
rename from resources/js/components/publish/FieldHeader.vue
rename to resources/js/components/publish/FullscreenHeader.vue

From 2ba316478c46fbad578fcece02e9791045bb98bd Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 12:57:23 -0500
Subject: [PATCH 19/67] organize/rename

---
 resources/js/app.js                                       | 2 +-
 resources/js/components/Statamic.js                       | 8 ++++----
 .../{Actions.js => field-actions/FieldActions.js}         | 4 ++--
 .../{HasActions.js => field-actions/HasFieldActions.js}   | 8 ++++----
 resources/js/components/fieldtypes/Fieldtype.vue          | 4 ++--
 resources/js/components/fieldtypes/bard/Set.vue           | 6 +++---
 resources/js/components/fieldtypes/replicator/Set.vue     | 6 +++---
 7 files changed, 19 insertions(+), 19 deletions(-)
 rename resources/js/components/{Actions.js => field-actions/FieldActions.js} (86%)
 rename resources/js/components/{HasActions.js => field-actions/HasFieldActions.js} (88%)

diff --git a/resources/js/app.js b/resources/js/app.js
index d264154253..90c5616dae 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -67,7 +67,7 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
-Vue.prototype.$actions = Statamic.$actions;
+Vue.prototype.$fieldActions = Statamic.$fieldActions;
 Vue.prototype.$slug = Statamic.$slug;
 
 import Moment from 'moment';
diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
index 15c5cd9870..cc2087e385 100644
--- a/resources/js/components/Statamic.js
+++ b/resources/js/components/Statamic.js
@@ -3,7 +3,7 @@ import Echo from './Echo';
 import Bard from './Bard';
 import Keys from './keys/Keys';
 import Hooks from './Hooks';
-import Actions from './Actions';
+import FieldActions from './field-actions/FieldActions';
 import Reveal from './Reveal';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
@@ -13,7 +13,7 @@ const echo = new Echo;
 const bard = new Bard;
 const keys = new Keys;
 const hooks = new Hooks;
-const actions = new Actions;
+const fieldActions = new FieldActions;
 const reveal = new Reveal;
 const components = new Components;
 const conditions = new FieldConditions;
@@ -56,8 +56,8 @@ export default new Vue({
             return hooks;
         },
 
-        $actions() {
-            return actions;
+        $fieldActions() {
+            return fieldActions;
         },
 
         $reveal() {
diff --git a/resources/js/components/Actions.js b/resources/js/components/field-actions/FieldActions.js
similarity index 86%
rename from resources/js/components/Actions.js
rename to resources/js/components/field-actions/FieldActions.js
index c227f03eef..1e3b27fbff 100644
--- a/resources/js/components/Actions.js
+++ b/resources/js/components/field-actions/FieldActions.js
@@ -1,6 +1,6 @@
 import uid from 'uniqid';
 
-class Actions {
+class FieldActions {
     constructor() {
         this.actions = {};
     }
@@ -18,4 +18,4 @@ class Actions {
     }
 }
 
-export default Actions;
+export default FieldActions;
diff --git a/resources/js/components/HasActions.js b/resources/js/components/field-actions/HasFieldActions.js
similarity index 88%
rename from resources/js/components/HasActions.js
rename to resources/js/components/field-actions/HasFieldActions.js
index e9abaf96ae..18003846ba 100644
--- a/resources/js/components/HasActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -3,7 +3,7 @@ export default {
     computed: {
 
         actions() {
-            return this.$actions.get(this.$options.name);
+            return this.$fieldActions.get(this.$options.name);
         },
 
         internalActions() {
@@ -35,16 +35,16 @@ export default {
             ].filter(item => item.quick);
         },
 
-        actionPayload() { 
+        fieldActionPayload() {
             return {};
         },
-         
+
     },
 
     methods: {
 
         runAction(action) {
-            action.run(this.actionPayload);
+            action.run(this.fieldActionPayload);
         },
 
     }
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 4e3bf54192..5a671d605d 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,5 +1,5 @@
 <script>
-import HasActions from '../HasActions';
+import HasActions from '../field-actions/HasFieldActions';
 
 export default {
 
@@ -83,7 +83,7 @@ export default {
             return prefix+'field_'+this.config.handle;
         },
 
-        actionPayload() { 
+        fieldActionPayload() {
             return {
                 vm: this,
                 fieldPathPrefix: this.fieldPathPrefix,
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index e6ac5f4469..acb3b50b22 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -71,7 +71,7 @@ import { NodeViewWrapper } from '@tiptap/vue-2';
 import SetField from '../replicator/Field.vue';
 import ManagesPreviewText from '../replicator/ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
-import HasActions from '../../HasActions.js';
+import HasFieldActions from '../../field-actions/HasFieldActions.js';
 
 export default {
 
@@ -91,7 +91,7 @@ export default {
     mixins: [
         ValidatesFieldConditions,
         ManagesPreviewText, 
-        HasActions,
+        HasFieldActions,
     ],
 
     inject: ['bard', 'bardSets'],
@@ -191,7 +191,7 @@ export default {
             return this.extension.options.bard
         },
 
-        actionPayload() { 
+        fieldActionPayload() {
             return {
                 vm: this,
                 fieldVm: this.fieldVm,
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index ddc440533b..786880bbe9 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -79,7 +79,7 @@
 import SetField from './Field.vue';
 import ManagesPreviewText from './ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
-import HasActions from '../../HasActions.js';
+import HasFieldActions from '../../field-actions/HasFieldActions.js';
 
 export default {
 
@@ -88,7 +88,7 @@ export default {
     mixins: [
         ValidatesFieldConditions,
         ManagesPreviewText,
-        HasActions,
+        HasFieldActions,
     ],
 
     inject: ['replicatorSets'],
@@ -195,7 +195,7 @@ export default {
             }
         },
 
-        actionPayload() { 
+        fieldActionPayload() {
             return {
                 vm: this,
                 fieldVm: this.fieldVm,

From e49eeace1a9cb4425e4b9f686269a74f65620bf4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 13:22:15 -0500
Subject: [PATCH 20/67] dont need the custom components only being used in one
 place

---
 resources/js/bootstrap/components.js          |  4 --
 resources/js/components/QuickDropdownItem.vue | 37 -------------------
 resources/js/components/QuickDropdownList.vue | 16 --------
 resources/js/components/publish/Field.vue     | 24 +++++++-----
 4 files changed, 14 insertions(+), 67 deletions(-)
 delete mode 100644 resources/js/components/QuickDropdownItem.vue
 delete mode 100644 resources/js/components/QuickDropdownList.vue

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 6266430c73..092adb9315 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -44,8 +44,6 @@ import LoadingGraphic from '../components/LoadingGraphic.vue';
 import DropdownList from '../components/DropdownList.vue';
 import DropdownItem from '../components/DropdownItem.vue';
 import DropdownActions from '../components/DropdownActions.vue';
-import QuickDropdownList from '../components/QuickDropdownList.vue';
-import QuickDropdownItem from '../components/QuickDropdownItem.vue';
 import ValidationErrors from '../components/ValidationErrors.vue';
 import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
@@ -126,8 +124,6 @@ Vue.component('loading-graphic', LoadingGraphic);
 Vue.component('dropdown-list', DropdownList);
 Vue.component('dropdown-item', DropdownItem);
 Vue.component('dropdown-actions', DropdownActions);
-Vue.component('quick-dropdown-list', QuickDropdownList);
-Vue.component('quick-dropdown-item', QuickDropdownItem);
 Vue.component('validation-errors', ValidationErrors);
 Vue.component('slugify', Slugify);
 Vue.component('element-container', ElementContainer);
diff --git a/resources/js/components/QuickDropdownItem.vue b/resources/js/components/QuickDropdownItem.vue
deleted file mode 100644
index 3f7806c3e3..0000000000
--- a/resources/js/components/QuickDropdownItem.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <a :href="href" :target="target" @click="selectAndClose" v-tooltip="text">
-        <svg-icon :name="icon" class="h-3 w-3" />
-    </a>
-</template>
-
-<script>
-export default {
-
-    props: ['text', 'icon', 'redirect', 'externalLink'],
-
-    computed: {
-
-        href() {
-            return this.redirect || this.externalLink;
-        },
-
-        target() {
-            return this.externalLink ? '_blank' : null;
-        },
-
-    },
-
-    methods: {
-
-        selectAndClose($event) {
-            if (this.href) {
-                return;
-            }
-
-            this.$emit('click', $event);
-        },
-
-    }
-
-}
-</script>
diff --git a/resources/js/components/QuickDropdownList.vue b/resources/js/components/QuickDropdownList.vue
deleted file mode 100644
index 58d7265c67..0000000000
--- a/resources/js/components/QuickDropdownList.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div class="quick-list">
-        <div class="quick-list-content">
-            <slot />
-        </div>
-        <dropdown-list placement="left-start" :offset="[7, -3]">
-            <slot name="dropdown" />
-        </dropdown-list>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 14c1219703..a388f9cd06 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -51,19 +51,23 @@
                 v-html="instructions" />
 
             <div class="field-dropdown" v-if="mounted && hasDropdown">
-                <quick-dropdown-list>
-                    <quick-dropdown-item
-                        v-for="action, index in fieldQuickActions"
-                        :key="index"
-                        :text="action.title"
-                        :icon="fieldActionIcon(action)"
-                        @click="fieldRunAction(action)" />
-                    <template #dropdown>
+                <div class="quick-list">
+                    <div class="quick-list-content">
+                        <a
+                            v-for="(action, index) in fieldQuickActions"
+                            :key="index"
+                            @click="fieldRunAction(action)"
+                            v-tooltip="action.title"
+                        >
+                            <svg-icon :name="fieldActionIcon(action)" class="h-3 w-3" />
+                        </a>
+                    </div>
+                    <dropdown-list placement="left-start" :offset="[7, -3]">
                         <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
                         <div class="divider" />
                         <dropdown-actions :actions="fieldInternalActions" @run="fieldRunAction" v-if="fieldInternalActions.length" />
-                    </template>
-                </quick-dropdown-list>
+                    </dropdown-list>
+                </div>
             </div>
 
         </div>

From 5e49e4953bfa557d7e0bb6d793f14bbd47fecab3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 13:23:42 -0500
Subject: [PATCH 21/67] bracies

---
 resources/js/components/publish/FullscreenHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index c610a48026..eba0152212 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -13,7 +13,7 @@
             </dropdown-list>
             <button
                 class="btn-quick-action"
-                v-for="action, index in quickActions"
+                v-for="(action, index) in quickActions"
                 :key="index"
                 v-tooltip="action.title"
                 @click="runAction(action)">

From 323240318a9217895a15d17f790948b5d898be90 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 13:54:17 -0500
Subject: [PATCH 22/67] import dropdown actions as components. no need to be
 global.

---
 resources/js/bootstrap/components.js                         | 2 --
 .../js/components/{ => field-actions}/DropdownActions.vue    | 0
 resources/js/components/fieldtypes/bard/Set.vue              | 3 ++-
 resources/js/components/fieldtypes/replicator/Set.vue        | 3 ++-
 resources/js/components/publish/Field.vue                    | 5 +++++
 resources/js/components/publish/FullscreenHeader.vue         | 5 +++++
 6 files changed, 14 insertions(+), 4 deletions(-)
 rename resources/js/components/{ => field-actions}/DropdownActions.vue (100%)

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 092adb9315..626ef0d368 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -43,7 +43,6 @@ import FileIcon from '../components/FileIcon.vue';
 import LoadingGraphic from '../components/LoadingGraphic.vue';
 import DropdownList from '../components/DropdownList.vue';
 import DropdownItem from '../components/DropdownItem.vue';
-import DropdownActions from '../components/DropdownActions.vue';
 import ValidationErrors from '../components/ValidationErrors.vue';
 import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
@@ -123,7 +122,6 @@ Vue.component('file-icon', FileIcon);
 Vue.component('loading-graphic', LoadingGraphic);
 Vue.component('dropdown-list', DropdownList);
 Vue.component('dropdown-item', DropdownItem);
-Vue.component('dropdown-actions', DropdownActions);
 Vue.component('validation-errors', ValidationErrors);
 Vue.component('slugify', Slugify);
 Vue.component('element-container', ElementContainer);
diff --git a/resources/js/components/DropdownActions.vue b/resources/js/components/field-actions/DropdownActions.vue
similarity index 100%
rename from resources/js/components/DropdownActions.vue
rename to resources/js/components/field-actions/DropdownActions.vue
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index acb3b50b22..0d34c3fa25 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -72,6 +72,7 @@ import SetField from '../replicator/Field.vue';
 import ManagesPreviewText from '../replicator/ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
 import HasFieldActions from '../../field-actions/HasFieldActions.js';
+import DropdownActions from '../../field-actions/DropdownActions.vue';
 
 export default {
 
@@ -86,7 +87,7 @@ export default {
         'deleteNode', // delete the current node
     ],
 
-    components: { NodeViewWrapper, SetField },
+    components: { NodeViewWrapper, SetField, DropdownActions },
 
     mixins: [
         ValidatesFieldConditions,
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 786880bbe9..eafe72e4da 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -80,10 +80,11 @@ import SetField from './Field.vue';
 import ManagesPreviewText from './ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
 import HasFieldActions from '../../field-actions/HasFieldActions.js';
+import DropdownActions from '../../field-actions/DropdownActions.vue';
 
 export default {
 
-    components: { SetField },
+    components: { SetField, DropdownActions },
 
     mixins: [
         ValidatesFieldConditions,
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index a388f9cd06..8d0f8ff787 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -110,9 +110,14 @@
 
 <script>
 import { marked } from 'marked';
+import DropdownActions from '../field-actions/DropdownActions.vue';
 
 export default {
 
+    components: {
+        DropdownActions
+    },
+
     props: {
         config: {
             type: Object,
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index eba0152212..6c66037e53 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -25,9 +25,14 @@
 </template>
 
 <script>
+import DropdownActions from "../field-actions/DropdownActions.vue";
 
 export default {
 
+    components: {
+        DropdownActions
+    },
+
     props: {
         field: {
             type: Object,

From af782a06c32d0a659018eacc42e2b8c165822ffc Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 14:41:42 -0500
Subject: [PATCH 23/67] pass the payload along with the filter function

---
 resources/js/components/field-actions/HasFieldActions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index 18003846ba..4919d75753 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -13,7 +13,7 @@ export default {
         visibleActions() {
             return this.actions
                 .filter(action => {
-                    if (typeof action.visible === 'function') return action.visible();
+                    if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
                     if (typeof action.visible !== 'undefined') return action.visible;
                     return true;
                 });
@@ -22,7 +22,7 @@ export default {
         visibleInternalActions() {
             return this.internalActions
                 .filter(action => {
-                    if (typeof action.visible === 'function') return action.visible();
+                    if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
                     if (typeof action.visible !== 'undefined') return action.visible;
                     return true;
                 });

From 020bdc1de03964efd406f102efee135040c5027b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 15:05:34 -0500
Subject: [PATCH 24/67] fix error

---
 resources/js/components/fieldtypes/grid/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 800cbefdc0..a9b4c305b8 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -13,7 +13,7 @@
             :actions="visibleActions"
             :internal-actions="visibleInternalActions"
             :quick-actions="visibleQuickActions"
-            @close="toggleFullscreen">
+            @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
 
         <section :class="{'mt-14 p-4': fullScreenMode}">

From 1f65ba790ee4c49b73ece345262d800a9f0c4077 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 15:35:30 -0500
Subject: [PATCH 25/67] more of 90462b26

---
 resources/js/components/publish/FullscreenHeader.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index 6c66037e53..f386f40735 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -63,6 +63,7 @@ export default {
     methods: {
 
         fieldActionIcon({ icon }) {
+            icon = icon || 'image';
             return typeof icon === 'function' ? icon({ field: this.field }) : icon;
         },
 

From 546f2b7e9d97b6428dcd0f28f3c92bbb21bb8523 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 15:38:46 -0500
Subject: [PATCH 26/67] more calling field actions field actions

---
 .../field-actions/HasFieldActions.js          | 20 +++++++++----------
 .../components/fieldtypes/CodeFieldtype.vue   | 10 +++++-----
 .../components/fieldtypes/GroupFieldtype.vue  | 10 +++++-----
 .../components/fieldtypes/TableFieldtype.vue  | 10 +++++-----
 .../fieldtypes/bard/BardFieldtype.vue         | 10 +++++-----
 .../js/components/fieldtypes/bard/Set.vue     |  2 +-
 .../js/components/fieldtypes/grid/Grid.vue    | 10 +++++-----
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 10 +++++-----
 .../fieldtypes/replicator/Replicator.vue      | 10 +++++-----
 .../components/fieldtypes/replicator/Set.vue  |  2 +-
 resources/js/components/publish/Field.vue     |  8 ++++----
 .../components/publish/FullscreenHeader.vue   | 18 ++++++++---------
 12 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index 4919d75753..b43ae0688f 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -2,16 +2,16 @@ export default {
 
     computed: {
 
-        actions() {
+        fieldActions() {
             return this.$fieldActions.get(this.$options.name);
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [];
         },
 
-        visibleActions() {
-            return this.actions
+        visibleFieldActions() {
+            return this.fieldActions
                 .filter(action => {
                     if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
                     if (typeof action.visible !== 'undefined') return action.visible;
@@ -19,8 +19,8 @@ export default {
                 });
         },
 
-        visibleInternalActions() {
-            return this.internalActions
+        visibleInternalFieldActions() {
+            return this.internalFieldActions
                 .filter(action => {
                     if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
                     if (typeof action.visible !== 'undefined') return action.visible;
@@ -28,10 +28,10 @@ export default {
                 });
         },
 
-        visibleQuickActions() {
+        visibleQuickFieldActions() {
             return [
-                ...this.visibleActions,
-                ...this.visibleInternalActions
+                ...this.visibleFieldActions,
+                ...this.visibleInternalFieldActions
             ].filter(item => item.quick);
         },
 
@@ -43,7 +43,7 @@ export default {
 
     methods: {
 
-        runAction(action) {
+        runFieldAction(action) {
             action.run(this.fieldActionPayload);
         },
 
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index c63e9264bc..a4225910a4 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -7,10 +7,10 @@
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
-            :run-action="runAction"
-            :actions="visibleActions"
-            :internal-actions="visibleInternalActions"
-            :quick-actions="visibleQuickActions"
+            :run-field-action="runFieldAction"
+            :field-actions="visibleFieldActions"
+            :internal-field-actions="visibleInternalFieldActions"
+            :quick-field-actions="visibleQuickFieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
                 <div>
@@ -143,7 +143,7 @@ export default {
                 };
             });
         },
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index f9d6a647a2..0ee65f0c38 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -13,10 +13,10 @@
                     v-if="fullScreenMode"
                     :field="_self"
                     :config="config"
-                    :run-action="runAction"
-                    :actions="visibleActions"
-                    :internal-actions="visibleInternalActions"
-                    :quick-actions="visibleQuickActions"
+                    :run-field-action="runFieldAction"
+                    :field-actions="visibleFieldActions"
+                    :internal-field-actions="visibleInternalFieldActions"
+                    :quick-field-actions="visibleQuickFieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
@@ -92,7 +92,7 @@ export default {
 
             return Object.values(this.value).join(', ');
         },
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index ff9dfe49b7..4bdb9005ed 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -5,10 +5,10 @@
                 v-if="fullScreenMode"
                 :field="_self"
                 :config="config"
-                :run-action="runAction"
-                :actions="visibleActions"
-                :internal-actions="visibleInternalActions"
-                :quick-actions="visibleQuickActions"
+                :run-field-action="runFieldAction"
+                :field-actions="visibleFieldActions"
+                :internal-field-actions="visibleInternalFieldActions"
+                :quick-field-actions="visibleQuickFieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
 
@@ -173,7 +173,7 @@ export default {
                 .filter(row => !!row).join(', ');
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 61c8e43b75..4692b6f852 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -19,10 +19,10 @@
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
-            :run-action="runAction"
-            :actions="visibleActions"
-            :internal-actions="visibleInternalActions"
-            :quick-actions="visibleQuickActions"
+            :run-field-action="runFieldAction"
+            :field-actions="visibleFieldActions"
+            :internal-field-actions="visibleInternalFieldActions"
+            :quick-field-actions="visibleQuickFieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
                 <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
@@ -348,7 +348,7 @@ export default {
             return this.config.sets;
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Expand All Sets'),
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 0d34c3fa25..cb2c843af3 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -33,7 +33,7 @@
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleActions" @run="runAction" v-if="visibleActions.length" />
+                        <dropdown-actions :actions="visibleFieldActions" @run="runFieldAction" v-if="visibleFieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index a9b4c305b8..b21a9c76ba 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -9,10 +9,10 @@
             v-if="fullScreenMode"
             :field="_self"
             :config="config"
-            :run-action="runAction"
-            :actions="visibleActions"
-            :internal-actions="visibleInternalActions"
-            :quick-actions="visibleQuickActions"
+            :run-field-action="runFieldAction"
+            :field-actions="visibleFieldActions"
+            :internal-field-actions="visibleInternalFieldActions"
+            :quick-field-actions="visibleQuickFieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
 
@@ -147,7 +147,7 @@ export default {
             return `${__(this.config.display)}: ${__n(':count row|:count rows', this.value.length)}`;
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 519ed0516c..68bb9a50ce 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -17,10 +17,10 @@
                     v-if="fullScreenMode"
                     :field="_self"
                     :config="config"
-                    :run-action="runAction"
-                    :actions="visibleActions"
-                    :internal-actions="visibleInternalActions"
-                    :quick-actions="visibleQuickActions"
+                    :run-field-action="runFieldAction"
+                    :field-actions="visibleFieldActions"
+                    :internal-field-actions="visibleInternalFieldActions"
+                    :quick-field-actions="visibleQuickFieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
                         <div class="markdown-modes">
@@ -777,7 +777,7 @@ export default {
                 .replace(/<\/?[^>]+(>|$)/g, "");
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 325c08d1ab..ad6c427498 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -12,10 +12,10 @@
         v-if="fullScreenMode"
         :field="_self"
         :config="config"
-        :run-action="runAction"
-        :actions="visibleActions"
-        :internal-actions="visibleInternalActions"
-        :quick-actions="visibleQuickActions"
+        :run-field-action="runFieldAction"
+        :field-actions="visibleFieldActions"
+        :internal-field-actions="visibleInternalFieldActions"
+        :quick-field-actions="visibleQuickFieldActions"
         @close="toggleFullscreen">
     </publish-field-fullscreen-header>
 
@@ -160,7 +160,7 @@ export default {
             return `${__(this.config.display)}: ${__n(':count set|:count sets', this.value.length)}`;
         },
 
-        internalActions() {
+        internalFieldActions() {
             return [
                 {
                     title: __('Expand All Sets'),
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index eafe72e4da..bca5c89d53 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleActions" @run="runAction" v-if="visibleActions.length" />
+                        <dropdown-actions :actions="visibleFieldActions" @run="runFieldAction" v-if="visibleFieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 8d0f8ff787..71ab24d435 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -257,15 +257,15 @@ export default {
         },
 
         fieldActions() {
-            return this.$refs.field.visibleActions;
+            return this.$refs.field.visibleFieldActions;
         },
 
         fieldInternalActions() {
-            return this.$refs.field.visibleInternalActions;
+            return this.$refs.field.visibleInternalFieldActions;
         },
 
         fieldQuickActions() {
-            return this.$refs.field.visibleQuickActions;
+            return this.$refs.field.visibleQuickFieldActions;
         },
 
         hasDropdown() {
@@ -304,7 +304,7 @@ export default {
         },
 
         fieldRunAction(action) {
-            this.$refs.field.runAction(action);
+            this.$refs.field.runFieldAction(action);
         },
 
         fieldActionIcon({ icon }) {
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index f386f40735..a8bfbe2c69 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -6,17 +6,17 @@
             <slot />
         </div>
         <div class="w-full py-2.5 flex justify-end items-center">
-            <dropdown-list class="mr-2" v-if="actions.length || internalActions.length">
-                <dropdown-actions :actions="actions" @run="runAction" v-if="actions.length" />
+            <dropdown-list class="mr-2" v-if="fieldActions.length || internalFieldActions.length">
+                <dropdown-actions :actions="fieldActions" @run="runFieldAction" v-if="fieldActions.length" />
                 <div class="divider" />
-                <dropdown-actions :actions="internalActions" @run="runAction" v-if="internalActions.length" />
+                <dropdown-actions :actions="internalFieldActions" @run="runFieldAction" v-if="internalFieldActions.length" />
             </dropdown-list>
             <button
                 class="btn-quick-action"
-                v-for="(action, index) in quickActions"
+                v-for="(action, index) in quickFieldActions"
                 :key="index"
                 v-tooltip="action.title"
-                @click="runAction(action)">
+                @click="runFieldAction(action)">
                 <svg-icon :name="fieldActionIcon(action)" class="h-4 w-4" />
             </button>
         </div>
@@ -42,19 +42,19 @@ export default {
             type: Object,
             required: true,
         },
-        runAction: {
+        runFieldAction: {
             type: Function,
             required: true,
         },
-        actions: {
+        fieldActions: {
             type: Array,
             default: () => [],
         },
-        internalActions: {
+        internalFieldActions: {
             type: Array,
             default: () => [],
         },
-        quickActions: {
+        quickFieldActions: {
             type: Array,
             default: () => [],
         },

From 704da52f59586f8d4fc0d4867f4b675ff5f31ef0 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 16:21:08 -0500
Subject: [PATCH 27/67] nitpick

---
 resources/js/components/fieldtypes/Fieldtype.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 5a671d605d..f65f8f36de 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -46,7 +46,7 @@ export default {
 
         updateMeta(value) {
             this.$emit('meta-updated', value);
-        },
+        }
     },
 
     computed: {
@@ -112,4 +112,4 @@ export default {
     }
 
 }
-</script>
\ No newline at end of file
+</script>

From 06c4f00d0a5bd856c0d274bd32ba25f43f0dc36c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 17:14:20 -0500
Subject: [PATCH 28/67] merge internal and custom actions

---
 .../field-actions/HasFieldActions.js          | 21 ++++---------------
 .../components/fieldtypes/CodeFieldtype.vue   |  2 --
 .../components/fieldtypes/GroupFieldtype.vue  |  2 --
 .../components/fieldtypes/TableFieldtype.vue  |  2 --
 .../fieldtypes/bard/BardFieldtype.vue         |  2 --
 .../js/components/fieldtypes/grid/Grid.vue    |  2 --
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  2 --
 .../fieldtypes/replicator/Replicator.vue      |  2 --
 resources/js/components/publish/Field.vue     | 14 ++-----------
 .../components/publish/FullscreenHeader.vue   | 14 ++-----------
 10 files changed, 8 insertions(+), 55 deletions(-)

diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index b43ae0688f..5a3579ebc7 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -3,7 +3,10 @@ export default {
     computed: {
 
         fieldActions() {
-            return this.$fieldActions.get(this.$options.name);
+            return [
+                ...this.$fieldActions.get(this.$options.name),
+                ...this.internalFieldActions
+            ];
         },
 
         internalFieldActions() {
@@ -19,22 +22,6 @@ export default {
                 });
         },
 
-        visibleInternalFieldActions() {
-            return this.internalFieldActions
-                .filter(action => {
-                    if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
-                    if (typeof action.visible !== 'undefined') return action.visible;
-                    return true;
-                });
-        },
-
-        visibleQuickFieldActions() {
-            return [
-                ...this.visibleFieldActions,
-                ...this.visibleInternalFieldActions
-            ].filter(item => item.quick);
-        },
-
         fieldActionPayload() {
             return {};
         },
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index a4225910a4..4274a768ed 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -9,8 +9,6 @@
             :config="config"
             :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
-            :internal-field-actions="visibleInternalFieldActions"
-            :quick-field-actions="visibleQuickFieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
                 <div>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 0ee65f0c38..c94082efb7 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -15,8 +15,6 @@
                     :config="config"
                     :run-field-action="runFieldAction"
                     :field-actions="visibleFieldActions"
-                    :internal-field-actions="visibleInternalFieldActions"
-                    :quick-field-actions="visibleQuickFieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 4bdb9005ed..f026d177f0 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -7,8 +7,6 @@
                 :config="config"
                 :run-field-action="runFieldAction"
                 :field-actions="visibleFieldActions"
-                :internal-field-actions="visibleInternalFieldActions"
-                :quick-field-actions="visibleQuickFieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 4692b6f852..2fa34122f9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -21,8 +21,6 @@
             :config="config"
             :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
-            :internal-field-actions="visibleInternalFieldActions"
-            :quick-field-actions="visibleQuickFieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
                 <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index b21a9c76ba..e398d90eef 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -11,8 +11,6 @@
             :config="config"
             :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
-            :internal-field-actions="visibleInternalFieldActions"
-            :quick-field-actions="visibleQuickFieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
 
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 68bb9a50ce..db8a264c38 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -19,8 +19,6 @@
                     :config="config"
                     :run-field-action="runFieldAction"
                     :field-actions="visibleFieldActions"
-                    :internal-field-actions="visibleInternalFieldActions"
-                    :quick-field-actions="visibleQuickFieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
                         <div class="markdown-modes">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index ad6c427498..c1d8d5a0d9 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -14,8 +14,6 @@
         :config="config"
         :run-field-action="runFieldAction"
         :field-actions="visibleFieldActions"
-        :internal-field-actions="visibleInternalFieldActions"
-        :quick-field-actions="visibleQuickFieldActions"
         @close="toggleFullscreen">
     </publish-field-fullscreen-header>
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 71ab24d435..19280aa383 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -54,7 +54,7 @@
                 <div class="quick-list">
                     <div class="quick-list-content">
                         <a
-                            v-for="(action, index) in fieldQuickActions"
+                            v-for="(action, index) in fieldActions.filter(a => a.quick)"
                             :key="index"
                             @click="fieldRunAction(action)"
                             v-tooltip="action.title"
@@ -64,8 +64,6 @@
                     </div>
                     <dropdown-list placement="left-start" :offset="[7, -3]">
                         <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
-                        <div class="divider" />
-                        <dropdown-actions :actions="fieldInternalActions" @run="fieldRunAction" v-if="fieldInternalActions.length" />
                     </dropdown-list>
                 </div>
             </div>
@@ -260,16 +258,8 @@ export default {
             return this.$refs.field.visibleFieldActions;
         },
 
-        fieldInternalActions() {
-            return this.$refs.field.visibleInternalFieldActions;
-        },
-
-        fieldQuickActions() {
-            return this.$refs.field.visibleQuickFieldActions;
-        },
-
         hasDropdown() {
-            return this.fieldActions.length > 0 || this.fieldInternalActions.length > 0;;
+            return this.fieldActions.length > 0;
         },
 
     },
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index a8bfbe2c69..1800a82191 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -6,14 +6,12 @@
             <slot />
         </div>
         <div class="w-full py-2.5 flex justify-end items-center">
-            <dropdown-list class="mr-2" v-if="fieldActions.length || internalFieldActions.length">
+            <dropdown-list class="mr-2" v-if="fieldActions.length">
                 <dropdown-actions :actions="fieldActions" @run="runFieldAction" v-if="fieldActions.length" />
-                <div class="divider" />
-                <dropdown-actions :actions="internalFieldActions" @run="runFieldAction" v-if="internalFieldActions.length" />
             </dropdown-list>
             <button
                 class="btn-quick-action"
-                v-for="(action, index) in quickFieldActions"
+                v-for="(action, index) in fieldActions.filter(a => a.quick)"
                 :key="index"
                 v-tooltip="action.title"
                 @click="runFieldAction(action)">
@@ -50,14 +48,6 @@ export default {
             type: Array,
             default: () => [],
         },
-        internalFieldActions: {
-            type: Array,
-            default: () => [],
-        },
-        quickFieldActions: {
-            type: Array,
-            default: () => [],
-        },
     },
 
     methods: {

From 0a47981eded4adfb1a7711c6da7e31371a54f87b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 8 Nov 2024 17:14:26 -0500
Subject: [PATCH 29/67] self closing

---
 resources/js/components/fieldtypes/replicator/Replicator.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index c1d8d5a0d9..91bc5a1dfc 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -14,8 +14,8 @@
         :config="config"
         :run-field-action="runFieldAction"
         :field-actions="visibleFieldActions"
-        @close="toggleFullscreen">
-    </publish-field-fullscreen-header>
+        @close="toggleFullscreen"
+    />
 
     <section :class="{'mt-14 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
 

From e16e990aff6e97d883e207f0759e175c7d27d0ee Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 12:54:21 -0500
Subject: [PATCH 30/67] Refactor to class ...

- Move logic into a dedicated FieldAction class.
- Avoids passing around functions as props and needing to define field action related functions in mixins
- The quick property can now also be a function.
- The run, quick, visible, and icon methods all get the same payload.
---
 .../field-actions/DropdownActions.vue         |  2 +-
 .../components/field-actions/FieldAction.js   | 32 +++++++++++++++++++
 .../field-actions/HasFieldActions.js          | 19 +++--------
 .../components/fieldtypes/CodeFieldtype.vue   |  4 +--
 .../components/fieldtypes/GroupFieldtype.vue  |  4 +--
 .../components/fieldtypes/TableFieldtype.vue  |  4 +--
 .../fieldtypes/bard/BardFieldtype.vue         |  4 +--
 .../js/components/fieldtypes/bard/Set.vue     |  2 +-
 .../js/components/fieldtypes/grid/Grid.vue    |  4 +--
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  4 +--
 .../fieldtypes/replicator/Replicator.vue      |  4 +--
 .../components/fieldtypes/replicator/Set.vue  |  2 +-
 resources/js/components/publish/Field.vue     | 17 +++-------
 .../components/publish/FullscreenHeader.vue   | 25 +++------------
 14 files changed, 54 insertions(+), 73 deletions(-)
 create mode 100644 resources/js/components/field-actions/FieldAction.js

diff --git a/resources/js/components/field-actions/DropdownActions.vue b/resources/js/components/field-actions/DropdownActions.vue
index 0e621d5e7b..c5ec2e5629 100644
--- a/resources/js/components/field-actions/DropdownActions.vue
+++ b/resources/js/components/field-actions/DropdownActions.vue
@@ -19,7 +19,7 @@ export default {
     methods: {
 
         run(action) {
-            this.$emit('run', action);
+            action.run();
 
             this.popover.vm.close();
         },
diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
new file mode 100644
index 0000000000..fce724c9ac
--- /dev/null
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -0,0 +1,32 @@
+export default class FieldAction {
+    #payload;
+    #run;
+    #visible;
+    #icon;
+    #quick;
+
+    constructor(action, payload) {
+        this.#payload = payload;
+        this.#run = action.run;
+        this.#visible = action.visible ?? true;
+        this.#icon = action.icon ?? 'image';
+        this.#quick = action.quick ?? false;
+        this.title = action.title;
+    }
+
+    get visible() {
+        return typeof this.#visible === 'function' ? this.#visible(this.#payload) : this.#visible;
+    }
+
+    get quick() {
+        return typeof this.#quick === 'function' ? this.#quick(this.#payload) : this.#quick;
+    }
+
+    get icon() {
+        return typeof this.#icon === 'function' ? this.#icon(this.#payload) : this.#icon;
+    }
+
+    run() {
+        this.#run(this.#payload);
+    }
+}
diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index 5a3579ebc7..8f20eb3470 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -1,3 +1,5 @@
+import FieldAction from './FieldAction';
+
 export default {
 
     computed: {
@@ -6,7 +8,7 @@ export default {
             return [
                 ...this.$fieldActions.get(this.$options.name),
                 ...this.internalFieldActions
-            ];
+            ].map(action => new FieldAction(action, this.fieldActionPayload));
         },
 
         internalFieldActions() {
@@ -14,26 +16,13 @@ export default {
         },
 
         visibleFieldActions() {
-            return this.fieldActions
-                .filter(action => {
-                    if (typeof action.visible === 'function') return action.visible(this.fieldActionPayload);
-                    if (typeof action.visible !== 'undefined') return action.visible;
-                    return true;
-                });
+            return this.fieldActions.filter(action => action.visible);
         },
 
         fieldActionPayload() {
             return {};
         },
 
-    },
-
-    methods: {
-
-        runFieldAction(action) {
-            action.run(this.fieldActionPayload);
-        },
-
     }
 
 }
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 4274a768ed..ceb696fd72 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -5,9 +5,7 @@
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :field="_self"
             :config="config"
-            :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
@@ -145,7 +143,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index c94082efb7..5bf5314a01 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,9 +11,7 @@
             >
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :field="_self"
                     :config="config"
-                    :run-field-action="runFieldAction"
                     :field-actions="visibleFieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
@@ -94,7 +92,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index f026d177f0..a2ac65fd7e 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -3,9 +3,7 @@
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
-                :field="_self"
                 :config="config"
-                :run-field-action="runFieldAction"
                 :field-actions="visibleFieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
@@ -175,7 +173,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 2fa34122f9..f6c93376a4 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -17,9 +17,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :field="_self"
             :config="config"
-            :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
@@ -362,7 +360,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index cb2c843af3..79d170d1e8 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -33,7 +33,7 @@
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleFieldActions" @run="runFieldAction" v-if="visibleFieldActions.length" />
+                        <dropdown-actions :actions="visibleFieldActions" v-if="visibleFieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index e398d90eef..248a0b92d6 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -7,9 +7,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :field="_self"
             :config="config"
-            :run-field-action="runFieldAction"
             :field-actions="visibleFieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
@@ -149,7 +147,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullScreen,
                 },
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index db8a264c38..516698fc1f 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -15,9 +15,7 @@
 
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :field="_self"
                     :config="config"
-                    :run-field-action="runFieldAction"
                     :field-actions="visibleFieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
@@ -779,7 +777,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 91bc5a1dfc..1d076ad0e8 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -10,9 +10,7 @@
 
     <publish-field-fullscreen-header
         v-if="fullScreenMode"
-        :field="_self"
         :config="config"
-        :run-field-action="runFieldAction"
         :field-actions="visibleFieldActions"
         @close="toggleFullscreen"
     />
@@ -174,7 +172,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ field }) => field.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
                 },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index bca5c89d53..1bc67bf019 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleFieldActions" @run="runFieldAction" v-if="visibleFieldActions.length" />
+                        <dropdown-actions :actions="visibleFieldActions" v-if="visibleFieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 19280aa383..fe227eec22 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -56,14 +56,14 @@
                         <a
                             v-for="(action, index) in fieldActions.filter(a => a.quick)"
                             :key="index"
-                            @click="fieldRunAction(action)"
+                            @click="action.run()"
                             v-tooltip="action.title"
                         >
-                            <svg-icon :name="fieldActionIcon(action)" class="h-3 w-3" />
+                            <svg-icon :name="action.icon" class="h-3 w-3" />
                         </a>
                     </div>
                     <dropdown-list placement="left-start" :offset="[7, -3]">
-                        <dropdown-actions :actions="fieldActions" @run="fieldRunAction" v-if="fieldActions.length" />
+                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                     </dropdown-list>
                 </div>
             </div>
@@ -291,16 +291,7 @@ export default {
             });
 
             return marked(text);
-        },
-
-        fieldRunAction(action) {
-            this.$refs.field.runFieldAction(action);
-        },
-
-        fieldActionIcon({ icon }) {
-            icon = icon || 'image';
-            return typeof icon === 'function' ? icon({ field: this }) : icon;
-        },
+        }
 
     }
 }
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index 1800a82191..7180dccf60 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -7,15 +7,15 @@
         </div>
         <div class="w-full py-2.5 flex justify-end items-center">
             <dropdown-list class="mr-2" v-if="fieldActions.length">
-                <dropdown-actions :actions="fieldActions" @run="runFieldAction" v-if="fieldActions.length" />
+                <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
             </dropdown-list>
             <button
                 class="btn-quick-action"
                 v-for="(action, index) in fieldActions.filter(a => a.quick)"
                 :key="index"
                 v-tooltip="action.title"
-                @click="runFieldAction(action)">
-                <svg-icon :name="fieldActionIcon(action)" class="h-4 w-4" />
+                @click="action.run()">
+                <svg-icon :name="action.icon" class="h-4 w-4" />
             </button>
         </div>
     </header>
@@ -32,32 +32,15 @@ export default {
     },
 
     props: {
-        field: {
-            type: Object,
-            required: true,
-        },
         config: {
             type: Object,
             required: true,
         },
-        runFieldAction: {
-            type: Function,
-            required: true,
-        },
         fieldActions: {
             type: Array,
             default: () => [],
         },
-    },
-
-    methods: {
-
-        fieldActionIcon({ icon }) {
-            icon = icon || 'image';
-            return typeof icon === 'function' ? icon({ field: this.field }) : icon;
-        },
-
-    },
+    }
 
 }
 

From dc8651d968da45d0e6b523320161bafedc071ff9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 12:57:22 -0500
Subject: [PATCH 31/67] change to title prop

---
 resources/js/components/fieldtypes/CodeFieldtype.vue        | 2 +-
 resources/js/components/fieldtypes/GroupFieldtype.vue       | 2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue       | 2 +-
 resources/js/components/fieldtypes/bard/BardFieldtype.vue   | 2 +-
 resources/js/components/fieldtypes/grid/Grid.vue            | 2 +-
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue | 2 +-
 .../js/components/fieldtypes/replicator/Replicator.vue      | 2 +-
 resources/js/components/publish/FullscreenHeader.vue        | 6 +++---
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index ceb696fd72..1ece774f3a 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -5,7 +5,7 @@
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :config="config"
+            :title="config.title"
             :field-actions="visibleFieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 5bf5314a01..5fa07db19f 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,7 +11,7 @@
             >
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :config="config"
+                    :title="config.title"
                     :field-actions="visibleFieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index a2ac65fd7e..b88c124532 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -3,7 +3,7 @@
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
-                :config="config"
+                :title="config.title"
                 :field-actions="visibleFieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index f6c93376a4..44d28fa3b4 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -17,7 +17,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :config="config"
+            :title="config.title"
             :field-actions="visibleFieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 248a0b92d6..1def6bab8c 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -7,7 +7,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :config="config"
+            :title="config.title"
             :field-actions="visibleFieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 516698fc1f..ebaeff6249 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -15,7 +15,7 @@
 
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :config="config"
+                    :title="config.title"
                     :field-actions="visibleFieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 1d076ad0e8..4ab442b0cf 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -10,7 +10,7 @@
 
     <publish-field-fullscreen-header
         v-if="fullScreenMode"
-        :config="config"
+        :title="config.title"
         :field-actions="visibleFieldActions"
         @close="toggleFullscreen"
     />
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index 7180dccf60..23d8a03567 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -1,7 +1,7 @@
 <template>
 
     <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 px-4 flex items-center justify-between shadow z-max">
-        <h2 class="w-full" v-text="__(config.display)" />
+        <h2 class="w-full" v-text="__(title)" />
         <div class="grow-1 min-w-max flex gap-4 items-center">
             <slot />
         </div>
@@ -32,8 +32,8 @@ export default {
     },
 
     props: {
-        config: {
-            type: Object,
+        title: {
+            type: String,
             required: true,
         },
         fieldActions: {

From ae740cfbde4e0f2239db4606b1e1b76e475efbd1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 12:58:51 -0500
Subject: [PATCH 32/67] nitpick

---
 resources/js/components/field-actions/DropdownActions.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/components/field-actions/DropdownActions.vue b/resources/js/components/field-actions/DropdownActions.vue
index c5ec2e5629..2d1abf5b8f 100644
--- a/resources/js/components/field-actions/DropdownActions.vue
+++ b/resources/js/components/field-actions/DropdownActions.vue
@@ -3,9 +3,7 @@
         <button
             v-for="action in actions"
             @click="run(action)"
-        >
-            {{ action.display || action.title }}
-        </button>
+            v-text="action.display || action.title" />
     </div>
 </template>
 

From acacecfc01cdcb85bcfc5f3925310556c934dad1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 12:59:35 -0500
Subject: [PATCH 33/67] action.display isnt a thing

---
 resources/js/components/field-actions/DropdownActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/DropdownActions.vue b/resources/js/components/field-actions/DropdownActions.vue
index 2d1abf5b8f..afc8e0ee97 100644
--- a/resources/js/components/field-actions/DropdownActions.vue
+++ b/resources/js/components/field-actions/DropdownActions.vue
@@ -3,7 +3,7 @@
         <button
             v-for="action in actions"
             @click="run(action)"
-            v-text="action.display || action.title" />
+            v-text="action.title" />
     </div>
 </template>
 

From fbde34f4feee212809797a7ebd2898be146b6831 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 13:05:49 -0500
Subject: [PATCH 34/67] We never care about non-visible actions

---
 resources/js/components/field-actions/HasFieldActions.js  | 8 +++-----
 resources/js/components/fieldtypes/CodeFieldtype.vue      | 2 +-
 resources/js/components/fieldtypes/GroupFieldtype.vue     | 2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue     | 2 +-
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 2 +-
 resources/js/components/fieldtypes/bard/Set.vue           | 2 +-
 resources/js/components/fieldtypes/grid/Grid.vue          | 2 +-
 .../components/fieldtypes/markdown/MarkdownFieldtype.vue  | 2 +-
 .../js/components/fieldtypes/replicator/Replicator.vue    | 2 +-
 resources/js/components/fieldtypes/replicator/Set.vue     | 2 +-
 resources/js/components/publish/Field.vue                 | 2 +-
 11 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index 8f20eb3470..cd28d0acce 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -8,17 +8,15 @@ export default {
             return [
                 ...this.$fieldActions.get(this.$options.name),
                 ...this.internalFieldActions
-            ].map(action => new FieldAction(action, this.fieldActionPayload));
+            ]
+            .map(action => new FieldAction(action, this.fieldActionPayload))
+            .filter(action => action.visible);
         },
 
         internalFieldActions() {
             return [];
         },
 
-        visibleFieldActions() {
-            return this.fieldActions.filter(action => action.visible);
-        },
-
         fieldActionPayload() {
             return {};
         },
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 1ece774f3a..d7d9edaab8 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -6,7 +6,7 @@
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :title="config.title"
-            :field-actions="visibleFieldActions"
+            :field-actions="fieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
                 <div>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 5fa07db19f..0d8b91686e 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -12,7 +12,7 @@
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
                     :title="config.title"
-                    :field-actions="visibleFieldActions"
+                    :field-actions="fieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index b88c124532..3553ef5f5b 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -4,7 +4,7 @@
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
                 :title="config.title"
-                :field-actions="visibleFieldActions"
+                :field-actions="fieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 44d28fa3b4..e0e1b7a8ea 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -18,7 +18,7 @@
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :title="config.title"
-            :field-actions="visibleFieldActions"
+            :field-actions="fieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
                 <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 79d170d1e8..de9c39a623 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -33,7 +33,7 @@
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleFieldActions" v-if="visibleFieldActions.length" />
+                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 1def6bab8c..7125ea27c9 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -8,7 +8,7 @@
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
             :title="config.title"
-            :field-actions="visibleFieldActions"
+            :field-actions="fieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
 
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index ebaeff6249..469dcd71f4 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -16,7 +16,7 @@
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
                     :title="config.title"
-                    :field-actions="visibleFieldActions"
+                    :field-actions="fieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
                         <div class="markdown-modes">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 4ab442b0cf..ec5b41de7f 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -11,7 +11,7 @@
     <publish-field-fullscreen-header
         v-if="fullScreenMode"
         :title="config.title"
-        :field-actions="visibleFieldActions"
+        :field-actions="fieldActions"
         @close="toggleFullscreen"
     />
 
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 1bc67bf019..4f0dc47bef 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -31,7 +31,7 @@
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list>
-                        <dropdown-actions :actions="visibleFieldActions" v-if="visibleFieldActions.length" />
+                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                         <div class="divider" />
                         <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index fe227eec22..3a0bac5c9e 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -255,7 +255,7 @@ export default {
         },
 
         fieldActions() {
-            return this.$refs.field.visibleFieldActions;
+            return this.$refs.field.fieldActions;
         },
 
         hasDropdown() {

From 7f5996098dec3b4ee9a25839807669e4c7115f36 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 13:09:41 -0500
Subject: [PATCH 35/67] nitpick

---
 resources/js/components/fieldtypes/Fieldtype.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index f65f8f36de..e145afea53 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,10 +1,10 @@
 <script>
-import HasActions from '../field-actions/HasFieldActions';
+import HasFieldActions from '../field-actions/HasFieldActions';
 
 export default {
 
     mixins: [
-        HasActions,
+        HasFieldActions,
     ],
 
     props: {

From 89466b63b4cd9365028de6a63564651819511612 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 13:15:29 -0500
Subject: [PATCH 36/67] oops from dc8651d9

---
 resources/js/components/fieldtypes/CodeFieldtype.vue            | 2 +-
 resources/js/components/fieldtypes/GroupFieldtype.vue           | 2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue           | 2 +-
 resources/js/components/fieldtypes/bard/BardFieldtype.vue       | 2 +-
 resources/js/components/fieldtypes/grid/Grid.vue                | 2 +-
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue     | 2 +-
 resources/js/components/fieldtypes/replicator/Replicator.vue    | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index d7d9edaab8..a3fe7bf45d 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -5,7 +5,7 @@
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :title="config.title"
+            :title="config.display"
             :field-actions="fieldActions"
             @close="toggleFullscreen">
             <div class="code-fieldtype-toolbar-fullscreen">
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 0d8b91686e..3274f30b4c 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,7 +11,7 @@
             >
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :title="config.title"
+                    :title="config.display"
                     :field-actions="fieldActions"
                     @close="toggleFullscreen">
                 </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 3553ef5f5b..2afd20b7c5 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -3,7 +3,7 @@
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
-                :title="config.title"
+                :title="config.display"
                 :field-actions="fieldActions"
                 @close="toggleFullscreen">
             </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index e0e1b7a8ea..05ce2e04a6 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -17,7 +17,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :title="config.title"
+            :title="config.display"
             :field-actions="fieldActions"
             @close="toggleFullscreen">
             <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 7125ea27c9..e7fe522dda 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -7,7 +7,7 @@
 
         <publish-field-fullscreen-header
             v-if="fullScreenMode"
-            :title="config.title"
+            :title="config.display"
             :field-actions="fieldActions"
             @close="fullScreenMode = false">
         </publish-field-fullscreen-header>
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 469dcd71f4..576305936e 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -15,7 +15,7 @@
 
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
-                    :title="config.title"
+                    :title="config.display"
                     :field-actions="fieldActions"
                     @close="toggleFullscreen">
                     <div class="markdown-toolbar">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index ec5b41de7f..5cb91eaac4 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -10,7 +10,7 @@
 
     <publish-field-fullscreen-header
         v-if="fullScreenMode"
-        :title="config.title"
+        :title="config.display"
         :field-actions="fieldActions"
         @close="toggleFullscreen"
     />

From 089a76f9e28b766b69f5bd40a5b14c8cd4fa16a0 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 13:52:30 -0500
Subject: [PATCH 37/67] Add bits from #10833

Co-authored-by: Jack Sleight <jacksleight@gmail.com>
---
 resources/js/bootstrap/components.js          |   2 +
 .../components/field-actions/FieldAction.js   |   2 +-
 .../field-actions/FieldActionModal.vue        | 160 ++++++++++++++++++
 .../components/field-actions/FieldActions.js  |  25 +++
 routes/cp.php                                 |   6 +
 .../CP/FieldActionModalController.php         |  48 ++++++
 6 files changed, 242 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/field-actions/FieldActionModal.vue
 create mode 100644 src/Http/Controllers/CP/FieldActionModalController.php

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 626ef0d368..091fb442b5 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -57,6 +57,7 @@ import Modal from '../components/Modal.vue';
 import ConfirmationModal from '../components/modals/ConfirmationModal.vue';
 import FavoriteCreator from '../components/FavoriteCreator.vue';
 import KeyboardShortcutsModal from '../components/modals/KeyboardShortcutsModal.vue';
+import FieldActionModal from '../components/field-actions/FieldActionModal.vue';
 import ResourceDeleter from '../components/ResourceDeleter.vue';
 import Stack from '../components/stacks/Stack.vue';
 import StackTest from '../components/stacks/StackTest.vue';
@@ -142,6 +143,7 @@ Vue.component('confirmation-modal', ConfirmationModal);
 Vue.component('favorite-creator', FavoriteCreator);
 Vue.component('keyboard-shortcuts-modal', KeyboardShortcutsModal);
 Vue.component('resource-deleter', ResourceDeleter);
+Vue.component('field-action-modal', FieldActionModal);
 
 Vue.component('stack', Stack);
 Vue.component('stack-test', StackTest);
diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index fce724c9ac..e0578a335f 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -26,7 +26,7 @@ export default class FieldAction {
         return typeof this.#icon === 'function' ? this.#icon(this.#payload) : this.#icon;
     }
 
-    run() {
+    async run() {
         this.#run(this.#payload);
     }
 }
diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
new file mode 100644
index 0000000000..658da8092a
--- /dev/null
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -0,0 +1,160 @@
+<template>
+
+    <div>
+        <confirmation-modal
+            :title="title"
+            :danger="dangerous"
+            :buttonText="buttonText"
+            :busy="resolving || processing"
+            @confirm="confirm"
+            @cancel="cancel"
+        >
+            <div class="min-h-20">
+
+                <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || showDirtyWarning || hasFields }" />
+
+                <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': showDirtyWarning || hasFields }" />
+
+                <div v-if="showDirtyWarning" v-text="dirtyText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
+
+                <publish-container
+                    v-if="hasFields && !resolving"
+                    name="confirm-action"
+                    :blueprint="fieldset"
+                    :values="values"
+                    :meta="meta"
+                    :errors="errors"
+                    @updated="values = $event"
+                >
+                    <publish-fields
+                        slot-scope="{ setFieldValue, setFieldMeta }"
+                        :fields="fieldset.tabs[0].fields"
+                        @updated="setFieldValue"
+                        @meta-updated="setFieldMeta"
+                    />
+                </publish-container>
+
+            </div>
+        </confirmation-modal>
+    </div>
+
+</template>
+
+<script>
+export default {
+
+    props: {
+        fields: {
+            type: Object,
+        },
+        title: {
+            type: String,
+        },
+        buttonText: {
+            type: String,
+        },
+        confirmationText: {
+            type: String,
+        },
+        warningText: {
+            type: String,
+        },
+        dirtyText: {
+            type: String,
+        },
+        dirtyWarningText: {
+            type: String,
+        },
+        dangerous: {
+            type: Boolean,
+            default: false,
+        },
+        bypassesDirtyWarning: {
+            type: Boolean,
+            default: false,
+        },
+        keepOpen: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            resolving: this.hasFields,
+            processing: false,
+            fieldset: [],
+            values: {},
+            meta: {},
+            error: null,
+            errors: {},
+            isDirty: false,
+        }
+    },
+
+    mounted() {
+        this.initialize()
+    },
+
+    computed: {
+
+        hasFields() {
+            return Object.keys(this.fields).length > 0;
+        },
+
+        showDirtyWarning() {
+            return this.isDirty && this.dirtyWarningText && ! this.bypassesDirtyWarning;
+        },
+
+    },
+
+    methods: {
+
+        initialize() {
+            if (!this.hasFields) {
+                return;
+            }
+            this.resolving = true;
+            this.$axios.post(cp_url(`field-action-modal/resolve`), {
+                fields: this.fields,
+            }).then(response => {
+                this.fieldset = { tabs: [{ fields: response.data.fieldset }]};
+                this.values = response.data.values;
+                this.meta = response.data.meta;
+                this.resolving = false;
+            });
+        },
+
+        confirm() {
+            if (!this.hasFields) {
+                return;
+            }
+            this.processing = true;
+            this.$axios.post(cp_url('field-action-modal/process'), {
+                fields: this.fields,
+                values: this.values,
+            }).then(response => {
+                this.processing = this.keepOpen;
+                this.$emit('confirm', response.data);
+            }).catch(e => {
+                this.processing = false;
+                if (e.response && e.response.status === 422) {
+                    const { message, errors } = e.response.data;
+                    this.error = message;
+                    this.errors = errors;
+                    this.$toast.error(message);
+                } else if (e.response) {
+                    this.$toast.error(e.response.data.message);
+                } else {
+                    this.$toast.error(__('Something went wrong'));
+                }
+            });
+        },
+
+        cancel() {
+            this.$emit('cancel')
+        },
+
+    },
+}
+</script>
diff --git a/resources/js/components/field-actions/FieldActions.js b/resources/js/components/field-actions/FieldActions.js
index 1e3b27fbff..68c6d1e8bb 100644
--- a/resources/js/components/field-actions/FieldActions.js
+++ b/resources/js/components/field-actions/FieldActions.js
@@ -16,6 +16,31 @@ class FieldActions {
     get(name) {
         return this.actions[name] || [];
     }
+
+    modal(props) {
+        const name = props.fields ? 'field-action-modal' : 'confirmation-modal';
+        return new Promise((resolve) => {
+            const component = Statamic.$components.append(name, { props });
+            component.on('confirm', (data = {}) => {
+                if (props.keepOpen) {
+                    resolve({
+                        ...data,
+                        confirmed: true,
+                        close: () => Statamic.$components.destroy(component.id),
+                    });
+                } else {
+                    resolve(data);
+                    Statamic.$components.destroy(component.id);
+                }
+            });
+            component.on('cancel', () => {
+                resolve({
+                    confirmed: false,
+                });
+                Statamic.$components.destroy(component.id);
+            });
+        });
+    }
 }
 
 export default FieldActions;
diff --git a/routes/cp.php b/routes/cp.php
index 19f8743826..34dac73184 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -42,6 +42,7 @@
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Http\Controllers\CP\DashboardController;
 use Statamic\Http\Controllers\CP\DuplicatesController;
+use Statamic\Http\Controllers\CP\FieldActionModalController;
 use Statamic\Http\Controllers\CP\Fields\BlueprintController;
 use Statamic\Http\Controllers\CP\Fields\FieldsController;
 use Statamic\Http\Controllers\CP\Fields\FieldsetController;
@@ -319,6 +320,11 @@
         Route::get('dictionaries/{dictionary}', DictionaryFieldtypeController::class)->name('dictionary-fieldtype');
     });
 
+    Route::group(['prefix' => 'field-action-modal'], function () {
+        Route::post('resolve', [FieldActionModalController::class, 'resolve'])->name('resolve');
+        Route::post('process', [FieldActionModalController::class, 'process'])->name('process');
+    });
+
     Route::group(['prefix' => 'api', 'as' => 'api.'], function () {
         Route::resource('addons', AddonsApiController::class)->only('index');
         Route::resource('templates', TemplatesController::class)->only('index');
diff --git a/src/Http/Controllers/CP/FieldActionModalController.php b/src/Http/Controllers/CP/FieldActionModalController.php
new file mode 100644
index 0000000000..4e5cd97188
--- /dev/null
+++ b/src/Http/Controllers/CP/FieldActionModalController.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP;
+
+use Illuminate\Http\Request;
+use Statamic\Fields\Fields;
+
+class FieldActionModalController extends CpController
+{
+    public function resolve(Request $request)
+    {
+        $fields = $this->getFields($request->fields)
+            ->preProcess();
+
+        return [
+            'fieldset' => $fields->toPublishArray(),
+            'values' => $fields->values(),
+            'meta' => $fields->meta(),
+        ];
+    }
+
+    public function process(Request $request)
+    {
+        $fields = $this->getFields($request->fields)
+            ->addValues($request->values);
+
+        $fields->validate();
+
+        $raw = $fields->process()->values();
+
+        $fields->preProcess();
+
+        return [
+            'values' => $fields->values(),
+            'meta' => $fields->meta(),
+            'raw' => $raw,
+        ];
+    }
+
+    protected function getFields($fieldItems)
+    {
+        $fields = collect($fieldItems)->map(function ($field, $handle) {
+            return compact('handle', 'field');
+        });
+
+        return new Fields($fields);
+    }
+}

From cca2c56974d763a1b5d463d21cf8dc1945d08f8c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 14:55:39 -0500
Subject: [PATCH 38/67] move modal out of $fieldActions and into run method

---
 .../components/field-actions/FieldAction.js   |  4 ++-
 .../components/field-actions/FieldActions.js  | 25 -----------------
 .../js/components/field-actions/modal.js      | 27 +++++++++++++++++++
 3 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 resources/js/components/field-actions/modal.js

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index e0578a335f..9ea9319ccb 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -1,3 +1,5 @@
+import modal from './modal';
+
 export default class FieldAction {
     #payload;
     #run;
@@ -27,6 +29,6 @@ export default class FieldAction {
     }
 
     async run() {
-        this.#run(this.#payload);
+        this.#run({...this.#payload, modal});
     }
 }
diff --git a/resources/js/components/field-actions/FieldActions.js b/resources/js/components/field-actions/FieldActions.js
index 68c6d1e8bb..1e3b27fbff 100644
--- a/resources/js/components/field-actions/FieldActions.js
+++ b/resources/js/components/field-actions/FieldActions.js
@@ -16,31 +16,6 @@ class FieldActions {
     get(name) {
         return this.actions[name] || [];
     }
-
-    modal(props) {
-        const name = props.fields ? 'field-action-modal' : 'confirmation-modal';
-        return new Promise((resolve) => {
-            const component = Statamic.$components.append(name, { props });
-            component.on('confirm', (data = {}) => {
-                if (props.keepOpen) {
-                    resolve({
-                        ...data,
-                        confirmed: true,
-                        close: () => Statamic.$components.destroy(component.id),
-                    });
-                } else {
-                    resolve(data);
-                    Statamic.$components.destroy(component.id);
-                }
-            });
-            component.on('cancel', () => {
-                resolve({
-                    confirmed: false,
-                });
-                Statamic.$components.destroy(component.id);
-            });
-        });
-    }
 }
 
 export default FieldActions;
diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
new file mode 100644
index 0000000000..151beae43a
--- /dev/null
+++ b/resources/js/components/field-actions/modal.js
@@ -0,0 +1,27 @@
+export default function(props) {
+    const name = props.fields ? 'field-action-modal' : 'confirmation-modal';
+
+    return new Promise((resolve) => {
+        const component = Statamic.$components.append(name, { props });
+
+        component.on('confirm', (data = {}) => {
+            if (props.keepOpen) {
+                resolve({
+                    ...data,
+                    confirmed: true,
+                    close: () => Statamic.$components.destroy(component.id),
+                });
+            } else {
+                resolve(data);
+                Statamic.$components.destroy(component.id);
+            }
+        });
+
+        component.on('cancel', () => {
+            resolve({
+                confirmed: false,
+            });
+            Statamic.$components.destroy(component.id);
+        });
+    });
+}

From 40b5b062bca49ebf429a4f1790dabe1b675426b4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 15:02:22 -0500
Subject: [PATCH 39/67] pass missing confirmed bool

---
 resources/js/components/field-actions/modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index 151beae43a..e1f5f57e41 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -12,7 +12,7 @@ export default function(props) {
                     close: () => Statamic.$components.destroy(component.id),
                 });
             } else {
-                resolve(data);
+                resolve({...data, confirmed: true});
                 Statamic.$components.destroy(component.id);
             }
         });

From 36045b673155305e2a1cbd18edfa1ed2a5a32c4c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 17:21:43 -0500
Subject: [PATCH 40/67] dont worry about dirty stuff

---
 .../field-actions/FieldActionModal.vue        | 23 +++----------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 658da8092a..85cc44ec5d 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -11,11 +11,9 @@
         >
             <div class="min-h-20">
 
-                <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || showDirtyWarning || hasFields }" />
+                <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || hasFields }" />
 
-                <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': showDirtyWarning || hasFields }" />
-
-                <div v-if="showDirtyWarning" v-text="dirtyText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
+                <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
 
                 <publish-container
                     v-if="hasFields && !resolving"
@@ -59,20 +57,10 @@ export default {
         warningText: {
             type: String,
         },
-        dirtyText: {
-            type: String,
-        },
-        dirtyWarningText: {
-            type: String,
-        },
         dangerous: {
             type: Boolean,
             default: false,
         },
-        bypassesDirtyWarning: {
-            type: Boolean,
-            default: false,
-        },
         keepOpen: {
             type: Boolean,
             default: false,
@@ -88,7 +76,6 @@ export default {
             meta: {},
             error: null,
             errors: {},
-            isDirty: false,
         }
     },
 
@@ -100,11 +87,7 @@ export default {
 
         hasFields() {
             return Object.keys(this.fields).length > 0;
-        },
-
-        showDirtyWarning() {
-            return this.isDirty && this.dirtyWarningText && ! this.bypassesDirtyWarning;
-        },
+        }
 
     },
 

From be704228305a98f9c28b8ec806e65c0e38da7949 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 17:22:18 -0500
Subject: [PATCH 41/67] extract variable

---
 resources/js/components/field-actions/modal.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index e1f5f57e41..17a7332f8e 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -3,17 +3,18 @@ export default function(props) {
 
     return new Promise((resolve) => {
         const component = Statamic.$components.append(name, { props });
+        const close = () => Statamic.$components.destroy(component.id);
 
         component.on('confirm', (data = {}) => {
             if (props.keepOpen) {
                 resolve({
                     ...data,
                     confirmed: true,
-                    close: () => Statamic.$components.destroy(component.id),
+                    close,
                 });
             } else {
                 resolve({...data, confirmed: true});
-                Statamic.$components.destroy(component.id);
+                close();
             }
         });
 
@@ -21,7 +22,7 @@ export default function(props) {
             resolve({
                 confirmed: false,
             });
-            Statamic.$components.destroy(component.id);
+            close();
         });
     });
 }

From f2c899b94e1da88641992d56132b5c34cad6e26e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 15 Nov 2024 17:23:24 -0500
Subject: [PATCH 42/67] nitpick

---
 resources/js/components/field-actions/modal.js | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index 17a7332f8e..a0bfafdb82 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -7,21 +7,15 @@ export default function(props) {
 
         component.on('confirm', (data = {}) => {
             if (props.keepOpen) {
-                resolve({
-                    ...data,
-                    confirmed: true,
-                    close,
-                });
+                resolve({ ...data, confirmed: true, close });
             } else {
-                resolve({...data, confirmed: true});
+                resolve({ ...data, confirmed: true });
                 close();
             }
         });
 
         component.on('cancel', () => {
-            resolve({
-                confirmed: false,
-            });
+            resolve({ confirmed: false });
             close();
         });
     });

From 7668295967cb506ae0109e19113ac47dd22d6fc2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 14:04:13 -0500
Subject: [PATCH 43/67] always use the same component

---
 resources/js/components/field-actions/FieldActionModal.vue | 2 +-
 resources/js/components/field-actions/modal.js             | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 85cc44ec5d..724ff514c4 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -86,7 +86,7 @@ export default {
     computed: {
 
         hasFields() {
-            return Object.keys(this.fields).length > 0;
+            return this.fields && Object.keys(this.fields).length > 0;
         }
 
     },
diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index a0bfafdb82..1365b317df 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -1,8 +1,6 @@
 export default function(props) {
-    const name = props.fields ? 'field-action-modal' : 'confirmation-modal';
-
     return new Promise((resolve) => {
-        const component = Statamic.$components.append(name, { props });
+        const component = Statamic.$components.append('field-action-modal', { props });
         const close = () => Statamic.$components.destroy(component.id);
 
         component.on('confirm', (data = {}) => {

From f869093dd94695c1b3880f66b322773b0664d071 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 14:06:12 -0500
Subject: [PATCH 44/67] body text has a default when both are missing

---
 resources/js/components/field-actions/FieldActionModal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 724ff514c4..0af56201fa 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -11,7 +11,7 @@
         >
             <div class="min-h-20">
 
-                <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || hasFields }" />
+                <div v-if="bodyText" v-text="bodyText" :class="{ 'mb-4': warningText || hasFields }" />
 
                 <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
 
@@ -76,6 +76,7 @@ export default {
             meta: {},
             error: null,
             errors: {},
+            bodyText: (!this.confirmationText && this.warningText) ? null : (this.confirmationText ?? __('Are you sure?')),
         }
     },
 

From 3ff8ae4495d604ebce36b6df99d4e2f723efbf9b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 14:10:59 -0500
Subject: [PATCH 45/67] always close the modal on confirm

---
 .../js/components/field-actions/FieldActionModal.vue      | 8 +-------
 resources/js/components/field-actions/modal.js            | 8 ++------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 0af56201fa..744846f5d2 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -61,10 +61,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        keepOpen: {
-            type: Boolean,
-            default: false,
-        },
     },
 
     data() {
@@ -118,10 +114,8 @@ export default {
                 fields: this.fields,
                 values: this.values,
             }).then(response => {
-                this.processing = this.keepOpen;
                 this.$emit('confirm', response.data);
             }).catch(e => {
-                this.processing = false;
                 if (e.response && e.response.status === 422) {
                     const { message, errors } = e.response.data;
                     this.error = message;
@@ -132,7 +126,7 @@ export default {
                 } else {
                     this.$toast.error(__('Something went wrong'));
                 }
-            });
+            }).finally(() => this.processing = false);
         },
 
         cancel() {
diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index 1365b317df..b8fa6f9488 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -4,12 +4,8 @@ export default function(props) {
         const close = () => Statamic.$components.destroy(component.id);
 
         component.on('confirm', (data = {}) => {
-            if (props.keepOpen) {
-                resolve({ ...data, confirmed: true, close });
-            } else {
-                resolve({ ...data, confirmed: true });
-                close();
-            }
+            resolve({ ...data, confirmed: true });
+            close();
         });
 
         component.on('cancel', () => {

From 72114b2c3ea0e03ff7c152bd4c1be6124a960e48 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 14:11:15 -0500
Subject: [PATCH 46/67] if no fields, confirming will close

---
 resources/js/components/field-actions/FieldActionModal.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 744846f5d2..d73eaab48c 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -107,8 +107,10 @@ export default {
 
         confirm() {
             if (!this.hasFields) {
+                this.$emit('confirm');
                 return;
             }
+
             this.processing = true;
             this.$axios.post(cp_url('field-action-modal/process'), {
                 fields: this.fields,

From 3be19654d3ba46cf7eaf6387d26cb63de757050c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 14:52:23 -0500
Subject: [PATCH 47/67] show field actions in bard/replicator subfields

---
 resources/js/bootstrap/components.js          |  2 +
 .../components/field-actions/FieldActions.vue | 36 +++++++++++++++++
 .../fieldtypes/replicator/Field.vue           | 40 ++++++++++++++-----
 resources/js/components/publish/Field.vue     | 24 +----------
 4 files changed, 68 insertions(+), 34 deletions(-)
 create mode 100644 resources/js/components/field-actions/FieldActions.vue

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 626ef0d368..6d123d1157 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -10,6 +10,7 @@ import FieldsContainer from '../components/publish/FieldsContainer.vue'; // depr
 import Field from '../components/publish/Field.vue';
 import FullscreenHeader from '../components/publish/FullscreenHeader.vue';
 import FieldMeta from '../components/publish/FieldMeta.vue';
+import FieldActions from '../components/field-actions/FieldActions.vue';
 import ConfigureTabs from '../components/configure/Tabs.vue';
 import PublishTabs from '../components/publish/Tabs.vue';
 import PublishSections from '../components/publish/Sections.vue';
@@ -78,6 +79,7 @@ Vue.component('publish-fields', Fields);
 Vue.component('publish-fields-container', FieldsContainer);
 Vue.component('publish-field', Field);
 Vue.component('publish-field-meta', FieldMeta);
+Vue.component('publish-field-actions', FieldActions);
 Vue.component('publish-field-fullscreen-header', FullscreenHeader);
 Vue.component('configure-tabs', ConfigureTabs);
 Vue.component('publish-tabs', PublishTabs);
diff --git a/resources/js/components/field-actions/FieldActions.vue b/resources/js/components/field-actions/FieldActions.vue
new file mode 100644
index 0000000000..8194ee2bb6
--- /dev/null
+++ b/resources/js/components/field-actions/FieldActions.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="field-dropdown">
+        <div class="quick-list">
+            <div class="quick-list-content">
+                <a
+                    v-for="(action, index) in actions.filter(a => a.quick)"
+                    :key="index"
+                    @click="action.run()"
+                    v-tooltip="action.title"
+                >
+                    <svg-icon :name="action.icon" class="h-3 w-3" />
+                </a>
+            </div>
+            <dropdown-list placement="left-start" :offset="[7, -3]">
+                <dropdown-actions :actions="actions" />
+            </dropdown-list>
+        </div>
+    </div>
+</template>
+
+<script>
+import DropdownActions from '../field-actions/DropdownActions.vue';
+
+export default {
+
+    components: {
+        DropdownActions
+    },
+
+    props: {
+        actions: {
+            type: Array
+        }
+    }
+}
+</script>
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 4c66cde948..364ebc6cd7 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -1,20 +1,24 @@
 <template>
 
     <div class="p-4 m-0 @container" :class="classes">
-
-        <label class="block" :for="fieldId" v-if="showLabel">
-            <span v-if="showLabelText" v-tooltip="{content: field.handle, delay: 500, autoHide: false}">{{ display }}</span>
-            <i class="required" v-if="field.required">*</i>
-            <span v-if="isReadOnly" class="text-gray-500 font-normal text-2xs mx-1" v-text="__('Read Only')" />
-        </label>
-
-        <div
-            class="help-block" :class="{ '-mt-2': showLabel }"
-            v-if="instructions && field.instructions_position !== 'below'"
-            v-html="instructions" />
+        <div class="field-inner">
+            <label class="block" :for="fieldId" v-if="showLabel">
+                <span v-if="showLabelText" v-tooltip="{content: field.handle, delay: 500, autoHide: false}">{{ display }}</span>
+                <i class="required" v-if="field.required">*</i>
+                <span v-if="isReadOnly" class="text-gray-500 font-normal text-2xs mx-1" v-text="__('Read Only')" />
+            </label>
+
+            <div
+                class="help-block" :class="{ '-mt-2': showLabel }"
+                v-if="instructions && field.instructions_position !== 'below'"
+                v-html="instructions" />
+
+            <publish-field-actions v-if="mounted && fieldActions.length" :actions="fieldActions" />
+        </div>
 
         <component
             :is="fieldtypeComponent"
+            ref="field"
             :config="field"
             :meta="meta"
             :value="value"
@@ -75,6 +79,16 @@ export default {
 
     inject: ['storeName'],
 
+    data() {
+        return {
+            mounted: false,
+        }
+    },
+
+    mounted() {
+        this.mounted = true;
+    },
+
     computed: {
 
         fieldtypeComponent() {
@@ -141,6 +155,10 @@ export default {
         fieldId() {
             let prefix = this.fieldPath ? this.fieldPath+'.' : '';
             return prefix+'field_'+this.field.handle;
+        },
+
+        fieldActions() {
+            return this.$refs.field.fieldActions;
         }
 
     }
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 3a0bac5c9e..6df195091f 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -50,24 +50,7 @@
                 v-if="instructions && config.instructions_position !== 'below'"
                 v-html="instructions" />
 
-            <div class="field-dropdown" v-if="mounted && hasDropdown">
-                <div class="quick-list">
-                    <div class="quick-list-content">
-                        <a
-                            v-for="(action, index) in fieldActions.filter(a => a.quick)"
-                            :key="index"
-                            @click="action.run()"
-                            v-tooltip="action.title"
-                        >
-                            <svg-icon :name="action.icon" class="h-3 w-3" />
-                        </a>
-                    </div>
-                    <dropdown-list placement="left-start" :offset="[7, -3]">
-                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
-                    </dropdown-list>
-                </div>
-            </div>
-
+            <publish-field-actions v-if="mounted && hasDropdown" :actions="fieldActions" />
         </div>
 
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
@@ -108,14 +91,9 @@
 
 <script>
 import { marked } from 'marked';
-import DropdownActions from '../field-actions/DropdownActions.vue';
 
 export default {
 
-    components: {
-        DropdownActions
-    },
-
     props: {
         config: {
             type: Object,

From 21064d2b8f62568996fde3bd3e50a6fef51e69a7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:06:49 -0500
Subject: [PATCH 48/67] actions can provide a confirm object to get a modal
 instead of doing it in run

---
 resources/js/components/field-actions/FieldAction.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index 9ea9319ccb..fed791abf8 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -6,10 +6,12 @@ export default class FieldAction {
     #visible;
     #icon;
     #quick;
+    #confirm;
 
     constructor(action, payload) {
         this.#payload = payload;
         this.#run = action.run;
+        this.#confirm = action.confirm;
         this.#visible = action.visible ?? true;
         this.#icon = action.icon ?? 'image';
         this.#quick = action.quick ?? false;
@@ -29,6 +31,14 @@ export default class FieldAction {
     }
 
     async run() {
-        this.#run({...this.#payload, modal});
+        let payload = {...this.#payload};
+
+        if (this.#confirm) {
+            const confirmation = await modal(this.#confirm);
+            if (!confirmation.confirmed) return;
+            payload = {...payload, confirmation};
+        }
+
+        this.#run(payload);
     }
 }

From 733fbbb8654c25cf48e801143546d68eaf8616ca Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:07:07 -0500
Subject: [PATCH 49/67] loading state is handled automatically if run returns a
 promise

---
 resources/js/components/field-actions/FieldAction.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index fed791abf8..658f6abb83 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -39,6 +39,13 @@ export default class FieldAction {
             payload = {...payload, confirmation};
         }
 
-        this.#run(payload);
+        const response = this.#run(payload);
+
+        if (response instanceof Promise) {
+            const progress = this.#payload.vm.$progress;
+            const name = this.#payload.fieldPathPrefix ?? this.#payload.handle;
+            progress.loading(name, true);
+            response.then(() => progress.loading(name, false));
+        }
     }
 }

From bd399897915b4a640c87ebb1d7324e7f0c78a431 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:12:47 -0500
Subject: [PATCH 50/67] handle reject too

---
 resources/js/components/field-actions/FieldAction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index 658f6abb83..a028b887a0 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -45,7 +45,7 @@ export default class FieldAction {
             const progress = this.#payload.vm.$progress;
             const name = this.#payload.fieldPathPrefix ?? this.#payload.handle;
             progress.loading(name, true);
-            response.then(() => progress.loading(name, false));
+            response.finally(() => progress.loading(name, false));
         }
     }
 }

From d6d3c775e17b9742192a6680b84e2ce9d777fc17 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:16:57 -0500
Subject: [PATCH 51/67] allow confirm: true

---
 resources/js/components/field-actions/FieldAction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index a028b887a0..60f9e395e4 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -11,7 +11,7 @@ export default class FieldAction {
     constructor(action, payload) {
         this.#payload = payload;
         this.#run = action.run;
-        this.#confirm = action.confirm;
+        this.#confirm = action.confirm === true ? {} : action.confirm;
         this.#visible = action.visible ?? true;
         this.#icon = action.icon ?? 'image';
         this.#quick = action.quick ?? false;

From f1aca3ea13f1a1204a11c6ba00fdcdb2a5b24094 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:23:51 -0500
Subject: [PATCH 52/67] words

---
 src/Http/Controllers/CP/FieldActionModalController.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Http/Controllers/CP/FieldActionModalController.php b/src/Http/Controllers/CP/FieldActionModalController.php
index 4e5cd97188..2c60ccff4d 100644
--- a/src/Http/Controllers/CP/FieldActionModalController.php
+++ b/src/Http/Controllers/CP/FieldActionModalController.php
@@ -26,14 +26,14 @@ public function process(Request $request)
 
         $fields->validate();
 
-        $raw = $fields->process()->values();
+        $processed = $fields->process()->values();
 
         $fields->preProcess();
 
         return [
             'values' => $fields->values(),
             'meta' => $fields->meta(),
-            'raw' => $raw,
+            'processed' => $processed,
         ];
     }
 

From cc3015e065c23f9bd2b5fdc16de7f7bf553a7aeb Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:24:26 -0500
Subject: [PATCH 53/67] nitpick

---
 .../Controllers/CP/FieldActionModalController.php  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Http/Controllers/CP/FieldActionModalController.php b/src/Http/Controllers/CP/FieldActionModalController.php
index 2c60ccff4d..01db57f447 100644
--- a/src/Http/Controllers/CP/FieldActionModalController.php
+++ b/src/Http/Controllers/CP/FieldActionModalController.php
@@ -9,7 +9,8 @@ class FieldActionModalController extends CpController
 {
     public function resolve(Request $request)
     {
-        $fields = $this->getFields($request->fields)
+        $fields = $this
+            ->getFields($request->fields)
             ->preProcess();
 
         return [
@@ -21,7 +22,8 @@ public function resolve(Request $request)
 
     public function process(Request $request)
     {
-        $fields = $this->getFields($request->fields)
+        $fields = $this
+            ->getFields($request->fields)
             ->addValues($request->values);
 
         $fields->validate();
@@ -39,10 +41,8 @@ public function process(Request $request)
 
     protected function getFields($fieldItems)
     {
-        $fields = collect($fieldItems)->map(function ($field, $handle) {
-            return compact('handle', 'field');
-        });
-
-        return new Fields($fields);
+        return new Fields(
+            collect($fieldItems)->map(fn ($field, $handle) => compact('handle', 'field'))
+        );
     }
 }

From 9b0051095afbe0b41bf164c325ad800d116ff4b9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:26:48 -0500
Subject: [PATCH 54/67] nitpick

---
 .../js/components/field-actions/FieldActionModal.vue      | 8 ++++----
 src/Http/Controllers/CP/FieldActionModalController.php    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index d73eaab48c..c5d6c7b319 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -18,7 +18,7 @@
                 <publish-container
                     v-if="hasFields && !resolving"
                     name="confirm-action"
-                    :blueprint="fieldset"
+                    :blueprint="blueprint"
                     :values="values"
                     :meta="meta"
                     :errors="errors"
@@ -26,7 +26,7 @@
                 >
                     <publish-fields
                         slot-scope="{ setFieldValue, setFieldMeta }"
-                        :fields="fieldset.tabs[0].fields"
+                        :fields="blueprint.tabs[0].fields"
                         @updated="setFieldValue"
                         @meta-updated="setFieldMeta"
                     />
@@ -67,7 +67,7 @@ export default {
         return {
             resolving: this.hasFields,
             processing: false,
-            fieldset: [],
+            blueprint: [],
             values: {},
             meta: {},
             error: null,
@@ -98,7 +98,7 @@ export default {
             this.$axios.post(cp_url(`field-action-modal/resolve`), {
                 fields: this.fields,
             }).then(response => {
-                this.fieldset = { tabs: [{ fields: response.data.fieldset }]};
+                this.blueprint = { tabs: [{ fields: response.data.fields }]};
                 this.values = response.data.values;
                 this.meta = response.data.meta;
                 this.resolving = false;
diff --git a/src/Http/Controllers/CP/FieldActionModalController.php b/src/Http/Controllers/CP/FieldActionModalController.php
index 01db57f447..b94492d87c 100644
--- a/src/Http/Controllers/CP/FieldActionModalController.php
+++ b/src/Http/Controllers/CP/FieldActionModalController.php
@@ -14,7 +14,7 @@ public function resolve(Request $request)
             ->preProcess();
 
         return [
-            'fieldset' => $fields->toPublishArray(),
+            'fields' => $fields->toPublishArray(),
             'values' => $fields->values(),
             'meta' => $fields->meta(),
         ];

From c00a1ffe42e70a7f71f23c0e9d12b92d7239985e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:39:54 -0500
Subject: [PATCH 55/67] initial body text better. if there are fields dont set
 a default

---
 .../components/field-actions/FieldActionModal.vue   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index c5d6c7b319..074223d07e 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -72,12 +72,13 @@ export default {
             meta: {},
             error: null,
             errors: {},
-            bodyText: (!this.confirmationText && this.warningText) ? null : (this.confirmationText ?? __('Are you sure?')),
+            bodyText: null,
         }
     },
 
     mounted() {
-        this.initialize()
+        this.initializeBodyText();
+        this.initialize();
     },
 
     computed: {
@@ -135,6 +136,14 @@ export default {
             this.$emit('cancel')
         },
 
+        initializeBodyText() {
+            if (this.confirmationText) return this.confirmationText;
+
+            if (this.warningText || this.hasFields) return null;
+
+            this.bodyText = __('Are you sure?');
+        }
+
     },
 }
 </script>

From e3e16f26ac890caed9799568df94d64fa8460c9d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 16:40:10 -0500
Subject: [PATCH 56/67] modal title defaults to the action title

---
 .../js/components/field-actions/FieldAction.js     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index 60f9e395e4..e6b36638c0 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -11,7 +11,7 @@ export default class FieldAction {
     constructor(action, payload) {
         this.#payload = payload;
         this.#run = action.run;
-        this.#confirm = action.confirm === true ? {} : action.confirm;
+        this.#confirm = action.confirm;
         this.#visible = action.visible ?? true;
         this.#icon = action.icon ?? 'image';
         this.#quick = action.quick ?? false;
@@ -34,7 +34,7 @@ export default class FieldAction {
         let payload = {...this.#payload};
 
         if (this.#confirm) {
-            const confirmation = await modal(this.#confirm);
+            const confirmation = await modal(this.#modalProps());
             if (!confirmation.confirmed) return;
             payload = {...payload, confirmation};
         }
@@ -48,4 +48,14 @@ export default class FieldAction {
             response.finally(() => progress.loading(name, false));
         }
     }
+
+    #modalProps() {
+        let props = this.#confirm === true ? {} : {...this.#confirm};
+
+        if (! props.title) {
+            props.title = this.title;
+        }
+
+        return props;
+    }
 }

From 9a01bbfe950e90d3f7e64fbfe17c3bab0f1ec210 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 17:12:31 -0500
Subject: [PATCH 57/67] do better

---
 resources/js/components/field-actions/FieldActionModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 074223d07e..a249d6f077 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -77,7 +77,7 @@ export default {
     },
 
     mounted() {
-        this.initializeBodyText();
+        this.bodyText = this.initializeBodyText();
         this.initialize();
     },
 
@@ -141,7 +141,7 @@ export default {
 
             if (this.warningText || this.hasFields) return null;
 
-            this.bodyText = __('Are you sure?');
+            return __('Are you sure?');
         }
 
     },

From 61bf410321785fa16cc8d6e800824861e1e7e2d9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Nov 2024 17:13:31 -0500
Subject: [PATCH 58/67] call it text

---
 resources/js/components/field-actions/FieldActionModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index a249d6f077..dbd495d96e 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -51,7 +51,7 @@ export default {
         buttonText: {
             type: String,
         },
-        confirmationText: {
+        text: {
             type: String,
         },
         warningText: {
@@ -137,7 +137,7 @@ export default {
         },
 
         initializeBodyText() {
-            if (this.confirmationText) return this.confirmationText;
+            if (this.text) return this.text;
 
             if (this.warningText || this.hasFields) return null;
 

From 9ab940da1139dd9573b845476f8401e322d2a28d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 14:08:27 -0500
Subject: [PATCH 59/67] handle situations when the field reference doesnt exist
 - like lazy loaded meta. and make consistent in replicator field.

---
 .../fieldtypes/replicator/Field.vue           | 18 ++++++-------
 resources/js/components/publish/Field.vue     | 25 ++++++++++---------
 resources/js/components/publish/FieldMeta.vue |  1 +
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 364ebc6cd7..57365d2ccc 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -13,7 +13,7 @@
                 v-if="instructions && field.instructions_position !== 'below'"
                 v-html="instructions" />
 
-            <publish-field-actions v-if="mounted && fieldActions.length" :actions="fieldActions" />
+            <publish-field-actions v-if="shouldShowFieldActions" :actions="fieldActions" />
         </div>
 
         <component
@@ -81,14 +81,10 @@ export default {
 
     data() {
         return {
-            mounted: false,
+            fieldActions: [],
         }
     },
 
-    mounted() {
-        this.mounted = true;
-    },
-
     computed: {
 
         fieldtypeComponent() {
@@ -157,11 +153,15 @@ export default {
             return prefix+'field_'+this.field.handle;
         },
 
-        fieldActions() {
-            return this.$refs.field.fieldActions;
+        shouldShowFieldActions() {
+            return this.fieldActions.length > 0;
         }
 
-    }
+    },
+
+    mounted() {
+        if (this.$refs.field) this.fieldActions = this.$refs.field.fieldActions;
+    },
 
 }
 </script>
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 6df195091f..9171202be2 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -4,6 +4,7 @@
         :config="config"
         :initial-value="value"
         :initial-meta="meta"
+        @loaded="metaLoaded"
     >
     <div slot-scope="{ meta, value, loading: loadingMeta }" :class="classes">
         <div class="field-inner">
@@ -50,7 +51,7 @@
                 v-if="instructions && config.instructions_position !== 'below'"
                 v-html="instructions" />
 
-            <publish-field-actions v-if="mounted && hasDropdown" :actions="fieldActions" />
+            <publish-field-actions v-if="shouldShowFieldActions" :actions="fieldActions" />
         </div>
 
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
@@ -120,14 +121,10 @@ export default {
 
     data() {
         return {
-            mounted: false,
+            fieldActions: [],
         }
     },
 
-    mounted() {
-        this.mounted = true;
-    },
-
     computed: {
 
         fieldtypeComponent() {
@@ -173,7 +170,7 @@ export default {
                 `${this.config.component || this.config.type}-fieldtype`,,
                 this.isReadOnly ? 'read-only-field' : '',
                 this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
-                this.mounted && this.hasDropdown && !this.isInsideConfigFields ? 'has-dropdown' : '',
+                this.shouldShowFieldActions && !this.isInsideConfigFields ? 'has-dropdown' : '',
                 this.config.classes || '',
                 this.config.full_width_setting ? 'full-width-setting' : '',
                 { 'has-error': this.hasError || this.hasNestedError }
@@ -232,16 +229,16 @@ export default {
                 || this.syncable // Need to see the icon
         },
 
-        fieldActions() {
-            return this.$refs.field.fieldActions;
-        },
-
-        hasDropdown() {
+        shouldShowFieldActions() {
             return this.fieldActions.length > 0;
         },
 
     },
 
+    mounted() {
+        if (this.$refs.field) this.fieldActions = this.$refs.field.fieldActions;
+    },
+
     methods: {
 
         focused() {
@@ -269,6 +266,10 @@ export default {
             });
 
             return marked(text);
+        },
+
+        metaLoaded() {
+            this.$nextTick(() => this.fieldActions = this.$refs.field.fieldActions);
         }
 
     }
diff --git a/resources/js/components/publish/FieldMeta.vue b/resources/js/components/publish/FieldMeta.vue
index 7c540b0ee2..b92315feb5 100644
--- a/resources/js/components/publish/FieldMeta.vue
+++ b/resources/js/components/publish/FieldMeta.vue
@@ -67,6 +67,7 @@ export default {
                 this.meta = response.data.meta;
                 this.value = response.data.value;
                 this.loading = false;
+                this.$emit('loaded');
             });
         },
 

From fed5bfe5ee2e81c8e86d36d92959be8650f2c17d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 14:20:19 -0500
Subject: [PATCH 60/67] avoid rendering components if we're just going to hide
 it with css.

---
 resources/css/components/publish.css                    | 3 ---
 resources/js/components/fieldtypes/replicator/Field.vue | 7 +++++--
 resources/js/components/publish/Field.vue               | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 9e595e2cc2..ed7ec518d6 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -71,9 +71,6 @@ code.parent-url {
         z-index: 100;
     }
 
-    .field-dropdown {
-        @apply hidden;
-    }
     .has-dropdown {
         .field-inner {
             @apply pr-6;
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 57365d2ccc..4793ecb072 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -77,7 +77,10 @@ export default {
         showFieldPreviews: Boolean,
     },
 
-    inject: ['storeName'],
+    inject: {
+        storeName: { default: null },
+        isInsideConfigFields: { default: false },
+    },
 
     data() {
         return {
@@ -154,7 +157,7 @@ export default {
         },
 
         shouldShowFieldActions() {
-            return this.fieldActions.length > 0;
+            return !this.isInsideConfigFields && this.fieldActions.length > 0;
         }
 
     },
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 9171202be2..3c8b14e354 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -170,7 +170,7 @@ export default {
                 `${this.config.component || this.config.type}-fieldtype`,,
                 this.isReadOnly ? 'read-only-field' : '',
                 this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
-                this.shouldShowFieldActions && !this.isInsideConfigFields ? 'has-dropdown' : '',
+                this.shouldShowFieldActions ? 'has-dropdown' : '',
                 this.config.classes || '',
                 this.config.full_width_setting ? 'full-width-setting' : '',
                 { 'has-error': this.hasError || this.hasNestedError }
@@ -230,7 +230,7 @@ export default {
         },
 
         shouldShowFieldActions() {
-            return this.fieldActions.length > 0;
+            return !this.isInsideConfigFields && this.fieldActions.length > 0;
         },
 
     },

From cff367fa70afd1ccd13159b02f121f7eaa970eb0 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 14:22:13 -0500
Subject: [PATCH 61/67] specific

---
 resources/css/components/publish.css      | 2 +-
 resources/js/components/publish/Field.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index ed7ec518d6..eb4f1e50c8 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -71,7 +71,7 @@ code.parent-url {
         z-index: 100;
     }
 
-    .has-dropdown {
+    .has-field-dropdown {
         .field-inner {
             @apply pr-6;
         }
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 3c8b14e354..a1ceeca4c5 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -170,7 +170,7 @@ export default {
                 `${this.config.component || this.config.type}-fieldtype`,,
                 this.isReadOnly ? 'read-only-field' : '',
                 this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
-                this.shouldShowFieldActions ? 'has-dropdown' : '',
+                this.shouldShowFieldActions ? 'has-field-dropdown' : '',
                 this.config.classes || '',
                 this.config.full_width_setting ? 'full-width-setting' : '',
                 { 'has-error': this.hasError || this.hasNestedError }

From f922f2dec778d9f5e4500e560641ab1e2acff082 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 15:44:14 -0500
Subject: [PATCH 62/67] make reactive again by putting it back into a computed.
 oopsie i broke it in 9ab940da

---
 .../js/components/fieldtypes/replicator/Field.vue      |  8 ++++++--
 resources/js/components/publish/Field.vue              | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 4793ecb072..a76d68da0e 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -84,7 +84,7 @@ export default {
 
     data() {
         return {
-            fieldActions: [],
+            hasField: false,
         }
     },
 
@@ -158,12 +158,16 @@ export default {
 
         shouldShowFieldActions() {
             return !this.isInsideConfigFields && this.fieldActions.length > 0;
+        },
+
+        fieldActions() {
+            return this.hasField ? this.$refs.field.fieldActions : [];
         }
 
     },
 
     mounted() {
-        if (this.$refs.field) this.fieldActions = this.$refs.field.fieldActions;
+        if (this.$refs.field) this.hasField = true;
     },
 
 }
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index a1ceeca4c5..7ef056ee9c 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -121,7 +121,7 @@ export default {
 
     data() {
         return {
-            fieldActions: [],
+            hasField: false,
         }
     },
 
@@ -233,10 +233,14 @@ export default {
             return !this.isInsideConfigFields && this.fieldActions.length > 0;
         },
 
+        fieldActions() {
+            return this.hasField ? this.$refs.field.fieldActions : [];
+        },
+
     },
 
     mounted() {
-        if (this.$refs.field) this.fieldActions = this.$refs.field.fieldActions;
+        if (this.$refs.field) this.hasField = true;
     },
 
     methods: {
@@ -269,7 +273,7 @@ export default {
         },
 
         metaLoaded() {
-            this.$nextTick(() => this.fieldActions = this.$refs.field.fieldActions);
+            this.$nextTick(() => this.hasField = true);
         }
 
     }

From 2e7f147b3e80f52a3024673eeb4881293639685f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 15:46:23 -0500
Subject: [PATCH 63/67] dont bother rendering actions if they arent going to be
 visible

---
 resources/js/components/publish/Field.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 7ef056ee9c..d9eadf6012 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -230,7 +230,7 @@ export default {
         },
 
         shouldShowFieldActions() {
-            return !this.isInsideConfigFields && this.fieldActions.length > 0;
+            return !this.isInsideConfigFields && this.showLabel && this.fieldActions.length > 0;
         },
 
         fieldActions() {

From cc98155ef292dd5ece19c885e0393f40cfed3b19 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 15:50:45 -0500
Subject: [PATCH 64/67] fix modals in modals (in modals (in modals (in
 modals...)))

---
 resources/js/components/field-actions/FieldActionModal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index dbd495d96e..11d29de49a 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -17,7 +17,7 @@
 
                 <publish-container
                     v-if="hasFields && !resolving"
-                    name="confirm-action"
+                    :name="containerName"
                     :blueprint="blueprint"
                     :values="values"
                     :meta="meta"
@@ -39,6 +39,8 @@
 </template>
 
 <script>
+import uniqid from "uniqid";
+
 export default {
 
     props: {
@@ -73,6 +75,7 @@ export default {
             error: null,
             errors: {},
             bodyText: null,
+            containerName: `field-action-modal-${uniqid()}`,
         }
     },
 

From 4228001fae5353edee7f02f2d46d0316b12ff645 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 16:09:35 -0500
Subject: [PATCH 65/67] add isReadOnly to payload

---
 resources/js/components/fieldtypes/Fieldtype.vue      | 1 +
 resources/js/components/fieldtypes/bard/Set.vue       | 1 +
 resources/js/components/fieldtypes/replicator/Set.vue | 1 +
 3 files changed, 3 insertions(+)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index e145afea53..8008151c99 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -93,6 +93,7 @@ export default {
                 meta: this.meta,
                 update: this.update,
                 updateMeta: this.updateMeta,
+                isReadOnly: this.isReadOnly,
             };
         },
 
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index de9c39a623..3f64ab12ab 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -203,6 +203,7 @@ export default {
                 meta: this.meta,
                 update: (handle, value) => this.updated(handle, value),
                 updateMeta: (handle, value) => this.metaUpdated(handle, value),
+                isReadOnly: this.isReadOnly
             };
         },
 
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 4f0dc47bef..0382f45110 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -207,6 +207,7 @@ export default {
                 meta: this.meta,
                 update: (handle, value) => this.updated(handle, value),
                 updateMeta: (handle, value) => this.metaUpdated(handle, value),
+                isReadOnly: this.isReadOnly,
             };
         },
 

From 0973f48ccdd28821b8ef8eecb64ffaa1ef1cce6d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 16:33:43 -0500
Subject: [PATCH 66/67] actions arent shown by default on read only fields but
 can be opted in

---
 resources/js/components/field-actions/FieldAction.js        | 6 ++++++
 resources/js/components/fieldtypes/CodeFieldtype.vue        | 1 +
 resources/js/components/fieldtypes/GroupFieldtype.vue       | 1 +
 resources/js/components/fieldtypes/TableFieldtype.vue       | 1 +
 resources/js/components/fieldtypes/bard/BardFieldtype.vue   | 3 +++
 resources/js/components/fieldtypes/grid/Grid.vue            | 1 +
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue | 1 +
 .../js/components/fieldtypes/replicator/Replicator.vue      | 3 +++
 8 files changed, 17 insertions(+)

diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index fce724c9ac..8a19f3b666 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -2,6 +2,7 @@ export default class FieldAction {
     #payload;
     #run;
     #visible;
+    #visibleWhenReadOnly;
     #icon;
     #quick;
 
@@ -9,12 +10,17 @@ export default class FieldAction {
         this.#payload = payload;
         this.#run = action.run;
         this.#visible = action.visible ?? true;
+        this.#visibleWhenReadOnly = action.visibleWhenReadOnly ?? false;
         this.#icon = action.icon ?? 'image';
         this.#quick = action.quick ?? false;
         this.title = action.title;
     }
 
     get visible() {
+        if (this.#payload.isReadOnly && !this.#visibleWhenReadOnly) {
+            return false;
+        }
+
         return typeof this.#visible === 'function' ? this.#visible(this.#payload) : this.#visible;
     }
 
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index a3fe7bf45d..bedcc6f916 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -145,6 +145,7 @@ export default {
                     title: __('Toggle Fullscreen Mode'),
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
             ];
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 3274f30b4c..eed9be0c3e 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -96,6 +96,7 @@ export default {
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
+                    visibleWhenReadOnly: true,
                 },
             ];
         },
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 2afd20b7c5..e53b80ef9f 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -175,6 +175,7 @@ export default {
                     title: __('Toggle Fullscreen Mode'),
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
             ];
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 05ce2e04a6..3e13f7fa76 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -350,12 +350,14 @@ export default {
                     title: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.expandAll,
                 },
                 {
                     title: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.collapseAll,
                 },
                 {
@@ -363,6 +365,7 @@ export default {
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
                     run: this.toggleFullscreen,
+                    visibleWhenReadOnly: true,
                     visible: this.config.fullscreen,
                 },
             ];
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index e7fe522dda..abab666916 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -149,6 +149,7 @@ export default {
                     title: __('Toggle Fullscreen Mode'),
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.toggleFullScreen,
                 },
             ];
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 576305936e..2d20240e3a 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -779,6 +779,7 @@ export default {
                     title: __('Toggle Fullscreen Mode'),
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
             ];
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 5cb91eaac4..5744aadf50 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -162,18 +162,21 @@ export default {
                     title: __('Expand All Sets'),
                     icon: 'arrows-horizontal-expand',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.expandAll,
                 },
                 {
                     title: __('Collapse All Sets'),
                     icon: 'arrows-horizontal-collapse',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.collapseAll,
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
                     icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
                     quick: true,
+                    visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
             ];

From 1e1409ea61b9d2ae0fe533e6cec10cab177832df Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 20 Nov 2024 16:36:54 -0500
Subject: [PATCH 67/67] nitpick

---
 src/Http/Controllers/CP/FieldActionModalController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Http/Controllers/CP/FieldActionModalController.php b/src/Http/Controllers/CP/FieldActionModalController.php
index b94492d87c..049a6287ee 100644
--- a/src/Http/Controllers/CP/FieldActionModalController.php
+++ b/src/Http/Controllers/CP/FieldActionModalController.php
@@ -39,7 +39,7 @@ public function process(Request $request)
         ];
     }
 
-    protected function getFields($fieldItems)
+    private function getFields($fieldItems)
     {
         return new Fields(
             collect($fieldItems)->map(fn ($field, $handle) => compact('handle', 'field'))