@@ -117,9 +119,13 @@ 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 analyzeSetConditions from '@/components/field-conditions/analyzeSetConditions.js';
+import { keepElementUnderPointer } from '@/util/keepElementUnderPointer.js';
export default {
props: nodeViewProps,
@@ -127,6 +133,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,
};
},
@@ -154,6 +171,10 @@ export default {
},
computed: {
+ conditionScope() {
+ return analyzeSetConditions(this.config);
+ },
+
fields() {
return this.config.fields;
},
@@ -321,6 +342,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 +375,43 @@ 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.hideSetBodiesForDrag, { once: true });
+ // The drop recreates this node view, so dragend fires on an element that's no
+ // longer in the document and never reaches the listener below. No mouseup is
+ // dispatched during a native drag either, hence the listener on the element too.
+ this.$el.addEventListener('dragend', this.disableDragging, { once: true });
document.addEventListener('mouseup', this.disableDragging, { once: true });
document.addEventListener('dragend', this.disableDragging, { once: true });
},
+ // The .bard-dragging class hides the set bodies for the duration of the drag.
+ // Don't actually collapse the sets — that would persist to meta and leave
+ // everything collapsed after the drop.
+ hideSetBodiesForDrag(event) {
+ const bard = this.extension.options.bard;
+
+ // Held onto so it can be cleaned up from a detached element.
+ this._dragRoot = this.$el.closest('.bard-fieldtype');
+
+ keepElementUnderPointer(this.$el, () => {
+ bard.dragging = true;
+ this._dragRoot?.classList.add('bard-dragging');
+ });
+
+ const rect = this.$el.getBoundingClientRect();
+ event.dataTransfer?.setDragImage(this.$el, event.clientX - rect.left, event.clientY - rect.top);
+ },
+
disableDragging() {
+ this.$el.removeEventListener('dragstart', this.hideSetBodiesForDrag);
this.$el.setAttribute('draggable', false);
this._draggableObserver?.observe(this.$el, { attributes: true, attributeFilter: ['draggable'] });
+
+ const bard = this.extension.options.bard;
+ bard.dragging = false;
+ this._dragRoot?.classList.remove('bard-dragging');
+ this._dragRoot = null;
},
preventNodeSelectionDrag(event) {
@@ -379,6 +440,78 @@ 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;
+ }
+ },
+ );
+
+ // Some of what mounting used to do can't be done headlessly — nothing evaluates
+ // the conditions of fields nested inside this set's fields, and revealers only
+ // register themselves when they mount. Those sets get mounted anyway, but off
+ // the critical path.
+ if (!this.conditionScope.canDeferMount) this.prewarmFields();
+
+ // Headlessly evaluate conditions for never-mounted sets so omitValue
+ // bookkeeping stays correct for the save payload. Sets whose conditions only
+ // look at their own values keep a narrow dependency; the rest have to watch
+ // the whole tree.
+ const sources = [
+ () => this.values,
+ () => this.fieldsReady,
+ () => this.publishContainer.revealerValues.value,
+ ];
+
+ if (this.conditionScope.needsRootValues) {
+ sources.push(() => this.publishContainer.visibleValues.value);
+ }
+
+ watch(
+ sources,
+ () => {
+ 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 },
+ );
+
+ // Auto-expand when validation errors point at this set. Errors arrive from a
+ // failed save without remounting, so mount alone isn't enough of a hook.
+ watch(
+ () => this.hasError,
+ (hasError) => {
+ if (hasError && this.collapsed) this.expand();
+ },
+ { immediate: true },
+ );
+
reveal.mount(this.$refs.container, this.expand);
// Firefox bug 739071: text selection doesn't work inside elements with a
@@ -398,6 +531,7 @@ export default {
},
beforeUnmount() {
+ this._setUnmounted = true;
this._draggableObserver?.disconnect();
},
};
diff --git a/resources/js/components/fieldtypes/bard/evaluateSetConditions.js b/resources/js/components/fieldtypes/bard/evaluateSetConditions.js
new file mode 100644
index 00000000000..0b6b2516095
--- /dev/null
+++ b/resources/js/components/fieldtypes/bard/evaluateSetConditions.js
@@ -0,0 +1,168 @@
+import { isPlainObject } from 'lodash-es';
+import ShowField from '@/components/field-conditions/ShowField.js';
+import analyzeSetConditions from '@/components/field-conditions/analyzeSetConditions.js';
+import { KEYS } from '@/components/field-conditions/Constants.js';
+
+// A Bard field that has never been scrolled into view has no editor, so it has no set
+// node views either — there is no `bard/Set.vue` to evaluate the conditions of the fields
+// inside its sets, headlessly or otherwise. Nothing writes their omitValue bookkeeping,
+// and a save keeps fields the blueprint says are hidden.
+//
+// So evaluate them from the stored value instead. The paths have to match exactly what a
+// mounted set would write, because a wrong key writes bookkeeping for a field that isn't
+// the one we evaluated. A set's fields live at `
..attrs.values.`,
+// where the index is the node's position in the document. Without an editor the stored
+// value *is* the document — and it's the tree the container omits from — so the index is
+// unambiguous.
+//
+// That last part is also why this must stop the moment an editor exists. From then on the
+// editor's copy of the document is the authoritative one, the indexes are its, and the
+// node views own the bookkeeping.
+export default function evaluateBardSetConditions({ value, setConfigs, fieldPathPrefix, container }) {
+ if (!Array.isArray(value) || !Array.isArray(setConfigs) || setConfigs.length === 0) return;
+
+ // Revealers are the other thing this path can't answer for. A field gated on one is
+ // only kept because the revealer registered itself with the container when it mounted,
+ // and the condition pointing at a registered revealer is then filtered out before
+ // anything decides to omit the value. Nothing in a field with no editor ever mounts,
+ // so its revealers never register, and every field gated on one looks like it simply
+ // failed an ordinary condition — dropped from the save.
+ //
+ // `analyzeSetConditions` handles this everywhere else by refusing to defer the set's
+ // mount. There's no mount to force here, so decline instead.
+ //
+ // The decline covers the whole field rather than only the sets that contain a
+ // revealer, and it doesn't look at what the conditions target. A narrower rule would
+ // have to trust that it recognises every way a condition can reach a revealer, and
+ // that's the trust that lost data before: a `$root.` condition can point across sets,
+ // a bare custom condition names no target at all, and `prefix` rewrites handles before
+ // they're compared. Being wrong about one of those drops content; declining too often
+ // only keeps a value the blueprint would have hidden, and only until the field is
+ // scrolled into view.
+ //
+ // A revealer in *another* never-rendered field is the same bug seen from the far side:
+ // that field's registration is missing too, and a `$root.` condition can point straight
+ // at it. Nothing here can tell whose revealer it is, so the second half of the rule is
+ // blunter — decline whenever a `$root.` condition targets a path that isn't in the root
+ // values at all. An unregistered revealer is always such a path, because a revealer's
+ // own value is omitted and so never survives into `visibleValues`.
+ //
+ // Absent has to mean genuinely missing. A field that's present and null, or present and
+ // an empty string, resolves fine and its conditions are still evaluated normally —
+ // treating those as unresolvable would switch omission off across most forms.
+ //
+ // This does catch more than revealers: a typo'd handle, or a target that some other
+ // condition has already omitted, declines too. Accepted — the alternative is guessing
+ // at what a path was meant to reach.
+ const declineAll = setConfigs.some((config) => {
+ const { hasRevealer, rootPaths } = analyzeSetConditions(config);
+
+ return hasRevealer || rootPaths.some((path) => !isPresent(container.visibleValues.value, path));
+ });
+
+ value.forEach((node, index) => {
+ if (!isPlainObject(node) || node.type !== 'set') return;
+
+ const values = node.attrs?.values;
+ if (!isPlainObject(values)) return;
+
+ const config = setConfigs.find((set) => set?.handle === values.type);
+ if (!isPlainObject(config)) return;
+
+ const fields = fieldList(config.fields);
+ if (fields.length === 0) return;
+
+ const prefix = `${fieldPathPrefix}.${index}.attrs.values`;
+
+ let showField = null;
+
+ fields.forEach((field) => {
+ if (!isPlainObject(field) || !field.handle) return;
+
+ const dottedKey = `${prefix}.${field.handle}`;
+
+ // A revealer's own value is never saved whatever its conditions resolve to,
+ // so the decline doesn't need to cover it — and covering it would write the
+ // toggle state into the entry.
+ const declining = declineAll && field.type !== 'revealer';
+
+ if (declining || !conditionsResolveFromPath(field)) {
+ keepValue(container, dottedKey);
+ return;
+ }
+
+ showField ??= new ShowField(
+ values,
+ {},
+ container.visibleValues.value,
+ container.revealerValues.value,
+ container.hiddenFields.value,
+ container.setHiddenField,
+ { container: container.container },
+ );
+
+ showField.showField(field, dottedKey);
+ });
+ });
+}
+
+// The field path isn't only a key to write bookkeeping under, it's an input to the
+// conditions themselves: `$parent.` is resolved by walking up it. A Bard set's field path
+// carries two more segments than a Replicator's — `bard.0.attrs.values.foo` against
+// `rep.0.foo` — so the walk lands on a path that doesn't exist and the condition can never
+// pass. That's a pre-existing bug, and a mounted set gets the same wrong answer; the
+// difference is that a mounted set is on screen, whereas here the answer would be applied
+// to a field nobody has ever looked at, and would drop it from every save.
+//
+// So don't answer at all. Keeping a field the blueprint would have dropped is noise;
+// dropping one it would have kept is lost content.
+//
+// Nothing else about a set's conditions reads the field path. `$root.` reads the
+// container's values and a bare or dotted handle reads the set's own, and both are the
+// same values a mounted set would be handed.
+const PARENT_RE = /^\$parent\./;
+
+function conditionsResolveFromPath(field) {
+ return KEYS.filter((key) => field[key]).every((key) => resolvableConditions(field[key]));
+}
+
+function resolvableConditions(conditions) {
+ // A bare string is a custom condition without a target. Its callback is handed the
+ // same field path either way, so there's nothing here a mounted set resolves better.
+ if (typeof conditions === 'string') return true;
+
+ if (!isPlainObject(conditions)) return false;
+
+ return Object.keys(conditions).every((lhs) => !PARENT_RE.test(lhs));
+}
+
+// `data_get` can't answer this: it returns its fallback for a missing path and for a null
+// one alike, and it short-circuits on any falsy step along the way.
+function isPresent(values, path) {
+ let current = values;
+
+ for (const segment of path.split('.')) {
+ if (current === null || typeof current !== 'object') return false;
+ if (!(segment in current)) return false;
+
+ current = current[segment];
+ }
+
+ return true;
+}
+
+function keepValue(container, dottedKey) {
+ const current = container.hiddenFields.value[dottedKey];
+
+ // Writing unconditionally would retrigger the watcher this runs from.
+ if (current && current.hidden === false && current.omitValue === false) return;
+
+ container.setHiddenField({ dottedKey, hidden: false, omitValue: false });
+}
+
+function fieldList(fields) {
+ if (Array.isArray(fields)) return fields;
+ if (isPlainObject(fields)) return Object.values(fields);
+
+ return [];
+}
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 d2843c3f0ba..f81d3b3818d 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,27 @@ export default {
this.update(value);
},
+ dragStarted(event) {
+ const source = event?.source || event?.originalSource;
+ const root = this.$refs.sets;
+
+ // The .replicator-dragging class hides the set bodies for the duration of the
+ // drag. Don't actually collapse the sets — that would persist to meta and
+ // leave everything collapsed after the drop.
+ keepElementUnderPointer(source, () => {
+ this.dragging = true;
+ root?.classList.add('replicator-dragging');
+ });
+
+ 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..3cb70b385bb 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,5 +1,5 @@
@@ -143,8 +216,9 @@ reveal.use(rootEl, () => emit('expanded'));
@@ -211,7 +287,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 @@