@@ -117,9 +119,12 @@ import {
PublishFields as Fields
} from '@ui';
import { containerContextKey } from '@/components/ui/Publish/Container.vue';
-import { watch } from 'vue';
+import { watch, inject } from 'vue';
import { reveal } from '@api';
import { useUiDirection } from '@/composables/ui-direction';
+import { createMountScheduler } from '@/util/createMountScheduler.js';
+import ShowField from '@/components/field-conditions/ShowField.js';
+import { keepElementUnderPointer } from '@/util/keepElementUnderPointer.js';
export default {
props: nodeViewProps,
@@ -127,6 +132,17 @@ export default {
setup() {
return {
uiDirection: useUiDirection().direction,
+ mountScheduler: inject('mountScheduler', createMountScheduler()),
+ };
+ },
+
+ data() {
+ const collapsedIds = this.extension.options.bard.collapsed || [];
+ const initiallyCollapsed = collapsedIds.includes(this.node.attrs.id);
+
+ return {
+ hasBeenExpanded: !initiallyCollapsed,
+ fieldsReady: !initiallyCollapsed,
};
},
@@ -321,6 +337,16 @@ export default {
}
},
+ prewarmFields() {
+ if (this.hasBeenExpanded || !this.hasFields) return;
+ this.hasBeenExpanded = true;
+ this.mountScheduler.schedule(() => {
+ if (!this._setUnmounted) {
+ this.fieldsReady = true;
+ }
+ });
+ },
+
collapse() {
// this.$events.$emit('collapsed', this.node.attrs.id);
this.extension.options.bard.collapseSet(this.node.attrs.id);
@@ -344,13 +370,35 @@ export default {
this._draggableObserver?.disconnect();
this.$el.setAttribute('draggable', true);
+ // dragstart fires on this.$el (the draggable wrapper), not the inner container.
+ this.$el.addEventListener('dragstart', this.collapseSiblingsForDrag, { once: true });
document.addEventListener('mouseup', this.disableDragging, { once: true });
document.addEventListener('dragend', this.disableDragging, { once: true });
},
+ collapseSiblingsForDrag(event) {
+ const bard = this.extension.options.bard;
+ const root = this.$el.closest('.bard-fieldtype');
+
+ keepElementUnderPointer(this.$el, () => {
+ bard.dragging = true;
+ root?.classList.add('bard-dragging');
+ });
+
+ const rect = this.$el.getBoundingClientRect();
+ event.dataTransfer?.setDragImage(this.$el, event.clientX - rect.left, event.clientY - rect.top);
+
+ bard.collapseAll();
+ },
+
disableDragging() {
+ this.$el.removeEventListener('dragstart', this.collapseSiblingsForDrag);
this.$el.setAttribute('draggable', false);
this._draggableObserver?.observe(this.$el, { attributes: true, attributeFilter: ['draggable'] });
+
+ const bard = this.extension.options.bard;
+ bard.dragging = false;
+ this.$el.closest('.bard-fieldtype')?.classList.remove('bard-dragging');
},
preventNodeSelectionDrag(event) {
@@ -379,6 +427,54 @@ export default {
{ deep: true }
);
+ watch(
+ () => this.collapsed,
+ (collapsed) => {
+ if (!collapsed && !this.hasBeenExpanded) {
+ this.hasBeenExpanded = true;
+ this.mountScheduler.schedule(() => {
+ if (!this._setUnmounted) {
+ this.fieldsReady = true;
+ }
+ });
+ } else if (!collapsed) {
+ this.fieldsReady = true;
+ }
+ },
+ );
+
+ // Headlessly evaluate conditions for never-mounted sets so omitValue
+ // bookkeeping stays correct for the save payload.
+ watch(
+ [() => this.values, () => this.fieldsReady],
+ () => {
+ if (this.fieldsReady || !this.hasFields) return;
+
+ const fields = Array.isArray(this.fields)
+ ? this.fields
+ : Object.values(this.fields || {});
+
+ const showField = new ShowField(
+ this.values || {},
+ {},
+ this.publishContainer.visibleValues.value,
+ this.publishContainer.revealerValues.value,
+ this.publishContainer.hiddenFields.value,
+ this.publishContainer.setHiddenField,
+ { container: this.publishContainer.container },
+ );
+
+ fields.forEach((field) => {
+ showField.showField(field, `${this.fieldPathPrefix}.${field.handle}`);
+ });
+ },
+ { deep: true, immediate: true },
+ );
+
+ if (this.hasError && this.collapsed) {
+ this.expand();
+ }
+
reveal.mount(this.$refs.container, this.expand);
// Firefox bug 739071: text selection doesn't work inside elements with a
@@ -398,6 +494,7 @@ export default {
},
beforeUnmount() {
+ this._setUnmounted = true;
this._draggableObserver?.disconnect();
},
};
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index e2b6adb043c..c140ecfd078 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -186,6 +186,7 @@ import Uploader from '../../assets/Uploader.vue';
import Uploads from '../../assets/Uploads.vue';
import MarkdownToolbar from './MarkdownToolbar.vue';
import { useContentDirection } from '@/composables/content-direction';
+import { dedupeInFlight } from '@/util/dedupeInFlight.js';
// Keymaps
import 'codemirror/keymap/sublime';
@@ -587,8 +588,12 @@ export default {
this.closeAssetSelector();
this.selectedAssets = [];
- this.$axios.post(cp_url('assets-fieldtype'), { assets }).then(({ data }) => {
- data.forEach(asset => {
+ const cacheKey = JSON.stringify([...assets].slice().sort());
+
+ dedupeInFlight('assets-fieldtype', cacheKey, () =>
+ this.$axios.post(cp_url('assets-fieldtype'), { assets }),
+ ).then(({ data }) => {
+ data.forEach((asset) => {
const alt = asset.values.alt || '';
const url = encodeURI(`statamic://${asset.reference}`);
const method = assets.length === 1 ? 'insert' : 'append';
diff --git a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
index 44149c7d579..b9b5f7ec479 100644
--- a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
+++ b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
@@ -1,30 +1,22 @@
-import PreviewHtml from './PreviewHtml';
+import { buildPreviewText } from '@/util/buildPreviewText';
+import formatPreviewValueUtil from '@/util/formatPreviewValue';
export default {
computed: {
previewText() {
- return Object.entries(this.previews)
- .filter(([handle, value]) => {
- if (!handle.endsWith('_')) return false;
- handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
- const config = this.config.fields.find((f) => f.handle === handle);
- if (!config) return false;
- return config.replicator_preview === undefined ? this.showFieldPreviews : config.replicator_preview;
- })
- .map(([handle, value]) => value)
- .filter((value) => (['null', '[]', '{}', '', undefined].includes(JSON.stringify(value)) ? null : value))
- .map((value) => {
- if (value instanceof PreviewHtml) return value.html;
-
- if (typeof value === 'string') return escapeHtml(value);
-
- if (Array.isArray(value) && typeof value[0] === 'string') {
- return escapeHtml(value.join(', '));
- }
+ return buildPreviewText({
+ previews: this.previews,
+ config: this.config,
+ values: this.values,
+ showFieldPreviews: this.showFieldPreviews,
+ separator: ' / ',
+ });
+ },
+ },
- return escapeHtml(JSON.stringify(value));
- })
- .join(' / ');
+ methods: {
+ formatPreviewValue(value, fieldConfig) {
+ return formatPreviewValueUtil(value, fieldConfig, { escape: false });
},
},
};
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 085eafa56f7..ac629f79b9d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -16,17 +16,21 @@
@close="toggleFullscreen"
/>
-
+
@@ -95,6 +99,8 @@ import AddSetButton from './AddSetButton.vue';
import ManagesSetMeta from './ManagesSetMeta';
import { SortableList } from '../../sortable/Sortable';
import { data_get } from "@/bootstrap/globals.js";
+import { createMountScheduler } from '@/util/createMountScheduler.js';
+import { keepElementUnderPointer } from '@/util/keepElementUnderPointer.js';
export default {
mixins: [Fieldtype, ManagesSetMeta],
@@ -114,10 +120,12 @@ export default {
provide: {
replicatorSets: this.config.sets,
showReplicatorFieldPreviews: this.config.previews,
+ mountScheduler: createMountScheduler(),
},
errorsById: {},
setsCache: {},
loadingSet: null,
+ dragging: false,
};
},
@@ -210,6 +218,25 @@ export default {
this.update(value);
},
+ dragStarted(event) {
+ const source = event?.source || event?.originalSource;
+ const root = this.$refs.sets;
+
+ keepElementUnderPointer(source, () => {
+ this.dragging = true;
+ root?.classList.add('replicator-dragging');
+ });
+
+ this.collapseAll();
+ this.$emit('focus');
+ },
+
+ dragEnded() {
+ this.dragging = false;
+ this.$refs.sets?.classList.remove('replicator-dragging');
+ this.$emit('blur');
+ },
+
addSet(handle, index) {
this.loadingSet = handle;
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 3b7ef4c3a72..cd4fc672433 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,5 +1,5 @@
@@ -143,8 +206,9 @@ reveal.use(rootEl, () => emit('expanded'));
@@ -211,7 +277,7 @@ reveal.use(rootEl, () => emit('expanded'));
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index a6bb3dd7d9c..b4e94fad73e 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -109,6 +109,19 @@ import { router } from '@inertiajs/vue3';
import axios from 'axios';
const inFlightRequests = new Map();
+// Settled responses reused for the page-view lifetime. Cleared on Inertia
+// navigation and when selections are confirmed from the selector stack
+// (items may have been edited there).
+const settledResponses = new Map();
+let navigationListenerAttached = false;
+
+function ensureSettledCacheClearedOnNavigation() {
+ if (navigationListenerAttached) return;
+ navigationListenerAttached = true;
+ router.on('before', () => {
+ settledResponses.clear();
+ });
+}
function detachFromInFlightRequest(component) {
const entry = component._activeRequest;
@@ -258,6 +271,8 @@ export default {
},
created() {
+ ensureSettledCacheClearedOnNavigation();
+
this.removeNavigationListener = router.on('before', () => {
detachFromInFlightRequest(this);
});
@@ -334,6 +349,9 @@ export default {
},
selectionsUpdated(selections) {
+ // Items may have been edited inside the selector stack — invalidate settled cache.
+ settledResponses.clear();
+
this.getDataForSelections(selections).then(() => {
this.update(selections);
});
@@ -354,6 +372,14 @@ export default {
detachFromInFlightRequest(this);
const cacheKey = JSON.stringify([this.itemDataUrl, this.site, selections?.slice().sort()]);
+
+ const settled = settledResponses.get(cacheKey);
+ if (settled) {
+ this.$emit('item-data-updated', settled.data.data);
+ this.loading = false;
+ return Promise.resolve(settled);
+ }
+
let entry = inFlightRequests.get(cacheKey);
if (!entry) {
@@ -361,6 +387,10 @@ export default {
entry = { cacheKey, controller, subscribers: 0 };
entry.promise = this.$axios
.post(this.itemDataUrl, { site: this.site, selections }, { signal: controller.signal })
+ .then((response) => {
+ settledResponses.set(cacheKey, response);
+ return response;
+ })
.finally(() => {
if (inFlightRequests.get(cacheKey) === entry) {
inFlightRequests.delete(cacheKey);
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 628d716ae12..d5b1b9d5b21 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -41,12 +41,34 @@