apostrophe 4.28.0 → 4.29.0

package/modules/@apostrophecms/recently-edited/ui/apos/composables/useRecentlyEditedFilters.js

@@ -0,0 +1,100 @@
+import { computed, ref } from 'vue';
+
+/**
+ * Manages filter state for the recently-edited document manager.
+ *
+ * @param {import('vue').ComputedRef<Array>} managerFilters - computed ref of
+ *  filter definitions
+ * @param {Object} [initialFilters={}] - Optional initial filter values.
+ *  When provided (non-empty), fully replaces the default filter state
+ *  (filter `def` values are NOT used). Values should be arrays and are
+ *  coerced to scalar/array based on the filter's inputType.
+ */
+export function useRecentlyEditedFilters(managerFilters, initialFilters = {}) {
+  const hasInitial = Object.keys(initialFilters).length > 0;
+  const filterState = ref(
+    Object.fromEntries(
+      (managerFilters.value || []).map(f => {
+        if (!hasInitial) {
+          return [ f.name, filterDefault(f) ];
+        }
+        return [ f.name, coerceInitialValue(f, initialFilters[f.name]) ];
+      })
+    )
+  );
+
+  const hasActiveFilters = computed(() => {
+    return Object.values(filterState.value)
+      .some(value => {
+        if (Array.isArray(value)) {
+          return value.length > 0;
+        }
+        return value !== null && value !== undefined && value !== '';
+      });
+  });
+
+  function updateFilter(name, value) {
+    filterState.value = {
+      ...filterState.value,
+      [name]: value
+    };
+  }
+
+  function updateFilters(nextState) {
+    filterState.value = nextState;
+  }
+
+  function clearFilter(name, value) {
+    const filter = managerFilters.value.find(f => f.name === name);
+    const current = filterState.value[name];
+    // For array-valued filters, remove just the specified value.
+    if (Array.isArray(current) && value !== undefined) {
+      filterState.value = {
+        ...filterState.value,
+        [name]: current.filter(v => v !== value)
+      };
+      return;
+    }
+    filterState.value = {
+      ...filterState.value,
+      [name]: filterDefault(filter || {})
+    };
+  }
+
+  function clearAllFilters() {
+    filterState.value = Object.fromEntries(
+      managerFilters.value.map(f => [ f.name, filterDefault(f) ])
+    );
+  }
+
+  return {
+    filterState,
+    hasActiveFilters,
+    updateFilter,
+    updateFilters,
+    clearFilter,
+    clearAllFilters
+  };
+}
+
+function filterDefault(filter) {
+  if (filter.def !== undefined) {
+    return filter.def;
+  }
+  return (filter.inputType || 'select') === 'checkbox' ? [] : null;
+}
+
+// Coerce an initial filter value based on the filter's inputType.
+// When initialFilters is active, absent keys get empty defaults (not `def`).
+function coerceInitialValue(filter, value) {
+  const isCheckbox = (filter.inputType || 'select') === 'checkbox';
+  if (value === undefined || value === null) {
+    return isCheckbox ? [] : null;
+  }
+  const arr = Array.isArray(value) ? value : [ value ];
+  if (isCheckbox) {
+    return arr;
+  }
+  // Scalar filter: use value only if exactly one item
+  return arr.length === 1 ? arr[0] : null;
+}

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js

@@ -51,10 +51,14 @@ export default {
     },
     // TODO get 'Search' server for better i18n
     placeholder() {
-      return this.field.placeholder || {
-        key: 'apostrophe:searchDocType',
-        type: this.$t(this.pluralLabel)
-      };
+      return this.modifiers.some(m => [ 'small', 'micro' ].includes(m))
+        ? {
+          key: 'apostrophe:search'
+        }
+        : {
+          key: 'apostrophe:searchDocType',
+          type: this.$t(this.pluralLabel)
+        };
     },
     // TODO get 'Browse' for better i18n
     browseLabel() {

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js

@@ -26,7 +26,7 @@ export default {
       default: null
     },
     uid: {
-      type: Number,
+      type: [ String, Number ],
       required: true
     },
     modifiers: {

package/modules/@apostrophecms/styles/index.js

@@ -87,6 +87,16 @@ module.exports = {
     self.prependNodes('body', 'stylesheet');
     self.prependNodes('body', 'ui');
 
+    // Detect if any top-level style field uses a background preset
+    // (which includes image relationships requiring attachment annotation).
+    // A hack until we analyze the relationship/attachment racing
+    // problem more thoroughly and implement a more robust solution.
+    // This signals the API render route and post save hook to explicitly
+    // re-annotate attachments.
+    self.hasBackgroundFields = self.schema.some(
+      field => field.customType === 'background'
+    );
+
     // Removes some automatically added top level groups and
     // provides a default group if none are provided.
     const nonFields = [ 'archived' ];

package/modules/@apostrophecms/styles/lib/apiRoutes.js

@@ -40,6 +40,12 @@ module.exports = self => {
         const piece = {};
         await self.convert(req, req.body.data, piece);
 
+        // Re-annotate attachments so that relationship _fields
+        // (crop/focal-point) are reflected in _urls for CSS generation.
+        if (self.hasBackgroundFields) {
+          self.apos.attachment.all([ piece ], { annotate: true });
+        }
+
         req.res.setHeader('Content-Type', 'text/css');
 
         return self.getStylesheet(piece);

package/modules/@apostrophecms/styles/lib/handlers.js

@@ -23,6 +23,11 @@ node app @apostrophecms-pro/palette:migrate-to-styles
     afterSave: {
       async mirrorToGlobal(req, doc, options) {
         // mirror the stylesheet to @apostrophecms/global
+        // Re-annotate attachments so that relationship _fields
+        // (crop/focal-point) are reflected in _urls for CSS generation.
+        if (self.hasBackgroundFields) {
+          self.apos.attachment.all([ doc ], { annotate: true });
+        }
         const { css, classes } = self.getStylesheet(doc);
         const $set = {
           stylesStylesheet: css,

package/modules/@apostrophecms/styles/lib/methods.js

@@ -125,6 +125,8 @@ module.exports = (self, options) => {
         });
       }
       if (!hasLink) {
+        // Prevent an XSS attack even if a styles exploit is found
+        const css = (req.data.global.stylesStylesheet || '').replaceAll('</', '<\\/');
         nodes.push({
           name: 'style',
           attrs: {
@@ -132,7 +134,7 @@ module.exports = (self, options) => {
           },
           body: [
             {
-              raw: req.data.global.stylesStylesheet || ''
+              raw: css
             }
           ]
         });
@@ -156,7 +158,8 @@ module.exports = (self, options) => {
     // to the <body> element (`class` attribute).
     getStylesheet(doc) {
       return self.stylesheetGlobalRender(self.schema, doc, {
-        checkIfConditionsFn: self.styleCheckIfConditions
+        checkIfConditionsFn: self.styleCheckIfConditions,
+        imageSizes: self.apos.attachment.imageSizes
       });
     },
     // Returns object with `css` (string), `inline` (string) and `classes` (array)
@@ -172,7 +175,8 @@ module.exports = (self, options) => {
     getWidgetStylesheet(schema, doc, options = {}) {
       return self.stylesheetScopedRender(schema, doc, {
         ...options,
-        checkIfConditionsFn: self.styleCheckIfConditions
+        checkIfConditionsFn: self.styleCheckIfConditions,
+        imageSizes: self.apos.attachment.imageSizes
       });
     },
     // Generate unique ID, Invoke the widget owned `getStylesheet` method
@@ -229,6 +233,8 @@ module.exports = (self, options) => {
           transform: assetOptions.transform || null
         });
       }
+      // Prevent an XSS attack even if a styles exploit is found
+      css = css.replaceAll('</', '<\\/');
       return `<style data-apos-widget-style-for="${widgetId}" data-apos-widget-style-id="${styleId}">\n` +
         css +
         '\n</style>';

package/modules/@apostrophecms/styles/lib/presets.js

@@ -179,6 +179,125 @@ module.exports = (moduleOptions) => {
           }
         }
       }
+    },
+    background: {
+      label: 'apostrophe:styleBackground',
+      type: 'object',
+      customType: 'background',
+      options: {
+        flat: true,
+        hideLabel: true
+      },
+      property: '--preset-bg',
+      fields: {
+        add: {
+          enabled: {
+            label: 'apostrophe:styleBackground',
+            type: 'boolean',
+            def: false
+          },
+          backgroundType: {
+            label: 'apostrophe:styleBackgroundType',
+            type: 'select',
+            def: 'color',
+            if: { enabled: true },
+            choices: [
+              {
+                label: 'apostrophe:styleBackgroundColor',
+                value: 'color'
+              },
+              {
+                label: 'apostrophe:styleBackgroundGradient',
+                value: 'gradient'
+              },
+              {
+                label: 'apostrophe:styleBackgroundImage',
+                value: 'image'
+              }
+            ]
+          },
+          color: {
+            label: 'apostrophe:styleBackgroundColor',
+            type: 'color',
+            if: {
+              enabled: true,
+              backgroundType: 'color'
+            }
+          },
+          gradientStart: {
+            label: 'apostrophe:styleGradientStart',
+            type: 'color',
+            def: '#000000',
+            if: {
+              enabled: true,
+              backgroundType: 'gradient'
+            }
+          },
+          gradientEnd: {
+            label: 'apostrophe:styleGradientEnd',
+            type: 'color',
+            def: '#ffffff',
+            if: {
+              enabled: true,
+              backgroundType: 'gradient'
+            }
+          },
+          gradientAngle: {
+            label: 'apostrophe:styleGradientAngle',
+            type: 'range',
+            min: 0,
+            max: 360,
+            step: 5,
+            def: 180,
+            unit: 'deg',
+            if: {
+              enabled: true,
+              backgroundType: 'gradient'
+            }
+          },
+          _image: {
+            label: 'apostrophe:styleBackgroundImage',
+            type: 'relationship',
+            withType: '@apostrophecms/image',
+            max: 1,
+            if: {
+              enabled: true,
+              backgroundType: 'image'
+            }
+          },
+          overlay: {
+            label: 'apostrophe:styleBackgroundOverlay',
+            type: 'boolean',
+            def: false,
+            if: {
+              enabled: true,
+              backgroundType: 'image'
+            }
+          },
+          overlayColor: {
+            label: 'apostrophe:styleOverlayColor',
+            type: 'color',
+            def: '#000000',
+            if: {
+              enabled: true,
+              backgroundType: 'image',
+              overlay: true
+            }
+          },
+          overlayOpacity: {
+            label: 'apostrophe:styleOverlayOpacity',
+            type: 'range',
+            min: 0,
+            max: 100,
+            def: 50,
+            if: {
+              enabled: true,
+              backgroundType: 'image',
+              overlay: true
+            }
+          }
+        }
+      }
     }
   };
 };

package/modules/@apostrophecms/styles/ui/apos/components/TheAposStyles.vue

@@ -85,9 +85,8 @@
 // via alias `Modules/@apostrophecms/ui/schema/universal/check-if-conditions.mjs`.
 // Replace the backend imports to import
 // from `../path-to/@apostrophecms/ui/apos/schema/universal/check-if-conditions.mjs`.
-import checkIfConditions from 'apostrophe/lib/universal/check-if-conditions.mjs';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
-import renderCss from 'Modules/@apostrophecms/styles/universal/render.mjs';
+import { renderGlobalStyles as renderCss } from 'Modules/@apostrophecms/styles/render-factory.js';
 import { klona } from 'klona';
 import breakpointPreviewTransformer from 'postcss-viewport-to-container-toggle/standalone.js';
 import { useDraggableWindow } from 'Modules/@apostrophecms/ui/composables/useDraggableWindow.js';
@@ -342,9 +341,7 @@ export default {
       if (Object.keys(this.docFields.data).length === 0) {
         return;
       }
-      const { classes } = renderCss(this.schema, this.docFields.data, {
-        checkIfConditionsFn: checkIfConditions
-      });
+      const { classes } = renderCss(this.schema, this.docFields.data);
       document.body.setAttribute(this.bodyAttr, classes.join(' '));
     },
     fillGroupData(group) {
@@ -425,9 +422,7 @@ export default {
     },
     async renderBrowserSide() {
       await this.setStyleMarkup(
-        renderCss(this.schema, this.docFields.data, {
-          checkIfConditionsFn: checkIfConditions
-        })
+        renderCss(this.schema, this.docFields.data)
       );
     },
     async setStyleMarkup({ css, classes }) {

package/modules/@apostrophecms/styles/ui/apos/composables/AposStyles.js

@@ -3,8 +3,7 @@ import {
 } from 'vue';
 import { createId } from '@paralleldrive/cuid2';
 import { isEqual } from 'lodash';
-import { renderScopedStyles } from 'Modules/@apostrophecms/styles/universal/render.mjs';
-import checkIfConditions from 'apostrophe/lib/universal/check-if-conditions.mjs';
+import { renderScopedStyles } from 'Modules/@apostrophecms/styles/render-factory.js';
 import breakpointPreviewTransformer from 'postcss-viewport-to-container-toggle/standalone.js';
 
 export function useAposStyles() {
@@ -28,7 +27,6 @@ export function useAposStyles() {
 
     const styles = renderScopedStyles(schema, doc, {
       rootSelector: `#${widgetId.value}`,
-      checkIfConditionsFn: checkIfConditions,
       subset: stylesFields
     });
 

package/modules/@apostrophecms/styles/ui/apos/render-factory.js

@@ -0,0 +1,29 @@
+import { createRenderer } from './universal/render.mjs';
+import checkIfConditions from 'apostrophe/lib/universal/check-if-conditions.mjs';
+
+let instance = null;
+
+export function getRenderer(overrides = {}) {
+  if (Object.keys(overrides).length) {
+    return createRenderer({
+      checkIfConditionsFn: checkIfConditions,
+      imageSizes: window.apos.attachment.imageSizes,
+      ...overrides
+    });
+  }
+  if (!instance) {
+    instance = createRenderer({
+      checkIfConditionsFn: checkIfConditions,
+      imageSizes: window.apos.attachment.imageSizes
+    });
+  }
+  return instance;
+}
+
+export function renderGlobalStyles(schema, doc, options = {}) {
+  return getRenderer().renderGlobalStyles(schema, doc, options);
+}
+
+export function renderScopedStyles(schema, doc, options = {}) {
+  return getRenderer().renderScopedStyles(schema, doc, options);
+}

package/modules/@apostrophecms/styles/ui/apos/universal/backgroundHelpers.mjs

@@ -0,0 +1,140 @@
+// Hardcoded fallback widths — used only when imageSizes is not provided
+const KNOWN_SIZE_WIDTHS = {
+  'one-sixth': 190,
+  'one-third': 380,
+  'one-half': 570,
+  'two-thirds': 760,
+  full: 1140,
+  max: 1600
+};
+
+export function extractImageData(value) {
+  if (!value || value.group !== 'images') {
+    return null;
+  }
+
+  const urls = value._urls;
+  if (!urls || !Object.keys(urls).length) {
+    return null;
+  }
+
+  return urls;
+}
+
+function getSizeWidths(imageSizes) {
+  if (!Array.isArray(imageSizes) || !imageSizes.length) {
+    return KNOWN_SIZE_WIDTHS;
+  }
+  const map = {};
+  for (const size of imageSizes) {
+    map[size.name] = size.width;
+  }
+  return map;
+}
+
+// Assume 2× device-pixel-ratio when selecting images for a
+// breakpoint. Covers the vast majority of modern displays
+// (retina / HiDPI) without needing resolution media queries.
+const DPR_FACTOR = 2;
+
+// Internal breakpoints for responsive background images.
+// Sorted ascending — each breakpoint generates a non-overlapping
+// range query so there is no cascade/specificity dependency.
+const BREAKPOINTS = [
+  {
+    maxWidth: 480,
+    label: 'mobile'
+  },
+  {
+    maxWidth: 768,
+    label: 'tablet'
+  }
+];
+
+// For a given breakpoint width, find the best image URL.
+// Multiplies the target by DPR_FACTOR so that retina/HiDPI
+// displays get enough pixel data for crisp rendering.
+// Falls back to the largest available image when nothing qualifies.
+function bestUrlForWidth(entries, targetWidth) {
+  const adjusted = targetWidth * DPR_FACTOR;
+  for (const entry of entries) {
+    if (entry.width >= adjusted) {
+      return entry.url;
+    }
+  }
+
+  return entries[entries.length - 1]?.url || null;
+}
+
+export function buildResponsiveImageRules(property, urls, imageSizes) {
+  const sizeWidths = getSizeWidths(imageSizes);
+
+  // Build sorted entries ascending by width
+  const entries = [];
+  for (const [ name, sizedUrl ] of Object.entries(urls)) {
+    if (
+      name === 'original' ||
+      name === 'uncropped' ||
+      !sizedUrl ||
+      typeof sizedUrl !== 'string'
+    ) {
+      continue;
+    }
+    const width = sizeWidths[name];
+    if (width) {
+      entries.push({
+        url: sizedUrl,
+        width
+      });
+    }
+  }
+  entries.sort((a, b) => a.width - b.width);
+
+  // Use the largest sized image as the base (covers the widest viewport).
+  // Fall back to `original` when no sized entries exist (e.g. SVG).
+  const baseUrl = entries.length
+    ? entries[entries.length - 1].url
+    : urls.original;
+
+  if (!baseUrl) {
+    return {
+      rules: [],
+      mediaRules: []
+    };
+  }
+
+  const rules = [ `${property}: url(${baseUrl})` ];
+  const mediaRules = [];
+
+  if (entries.length > 1) {
+    for (let i = 0; i < BREAKPOINTS.length; i++) {
+      const bp = BREAKPOINTS[i];
+      const bpUrl = bestUrlForWidth(entries, bp.maxWidth);
+      // Skip if the breakpoint would use the same URL as the base —
+      // the base rule already covers it at every viewport.
+      if (bpUrl && bpUrl !== baseUrl) {
+        // First breakpoint: (width <= Npx)
+        // Subsequent:       (Ppx < width <= Npx)
+        const query = i === 0
+          ? `(width <= ${bp.maxWidth}px)`
+          : `(${BREAKPOINTS[i - 1].maxWidth}px < width <= ${bp.maxWidth}px)`;
+        mediaRules.push({
+          query,
+          rules: [ `${property}: url(${bpUrl})` ]
+        });
+      }
+    }
+  }
+
+  return {
+    rules,
+    mediaRules
+  };
+}
+
+export function hexToRgba(hex, opacity) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}

package/modules/@apostrophecms/styles/ui/apos/universal/customRules.mjs

@@ -1,3 +1,9 @@
+import {
+  extractImageData,
+  buildResponsiveImageRules,
+  hexToRgba
+} from './backgroundHelpers.mjs';
+
 export default {
   /**
    * Custom render functions for fields with nuanced data structures
@@ -60,5 +66,104 @@ export default {
       field,
       rule
     };
+  },
+
+  background: function ({
+    field, subfields, options
+  }) {
+    const varBase = field.raw.property || '--preset-bg';
+    const bgType = subfields.backgroundType?.value || 'color';
+
+    const PROCESSED = [
+      'enabled', 'backgroundType',
+      'color',
+      'gradientStart', 'gradientEnd', 'gradientAngle',
+      '_image',
+      'overlay', 'overlayColor', 'overlayOpacity'
+    ];
+
+    // Color Mode
+    if (bgType === 'color') {
+      const color = subfields.color?.value;
+      if (!color) {
+        return {
+          field,
+          rules: [],
+          processedFields: PROCESSED
+        };
+      }
+      return {
+        field,
+        rules: [ `background-color: ${color}` ],
+        processedFields: PROCESSED
+      };
+    }
+
+    // Gradient Mode
+    if (bgType === 'gradient') {
+      const start = subfields.gradientStart?.value || '#000000';
+      const end = subfields.gradientEnd?.value || '#ffffff';
+      const angle = subfields.gradientAngle?.value ?? 180;
+      const unit = subfields.gradientAngle?.unit || 'deg';
+      return {
+        field,
+        rules: [ `background: linear-gradient(${angle}${unit}, ${start}, ${end})` ],
+        processedFields: PROCESSED
+      };
+    }
+
+    // Image Mode
+    const rel = subfields._image?.value;
+    const urls = extractImageData(rel?.[0]?.attachment);
+    if (!urls) {
+      return {
+        field,
+        rules: [],
+        processedFields: PROCESSED
+      };
+    }
+
+    const rules = [];
+
+    // --- CSS Variable Export ---
+    const responsive = buildResponsiveImageRules(
+      `${varBase}-image`, urls, options.imageSizes
+    );
+    rules.push(...responsive.rules);
+
+    // --- Overlay ---
+    const layers = [];
+    const overlay = subfields.overlay?.value;
+    const overlayColor = subfields.overlayColor?.value || '#000000';
+    const overlayOpacity = (subfields.overlayOpacity?.value ?? 50) / 100;
+
+    if (overlay && overlayColor) {
+      const rgba = hexToRgba(overlayColor, overlayOpacity);
+      rules.push(`${varBase}-overlay: linear-gradient(${rgba}, ${rgba})`);
+      layers.push(`var(${varBase}-overlay-layer, var(${varBase}-overlay))`);
+    }
+
+    // --- Override Hook Reset ---
+    // Reset inherited hook values so nested widgets aren't affected
+    // by a parent's blur recipe setting these to `none`.
+    rules.push(`${varBase}-image-layer: initial`);
+    rules.push(`${varBase}-overlay-layer: initial`);
+
+    // --- Image Layer ---
+    const imageFallback =
+      `var(${varBase}-image) center / cover no-repeat`;
+    layers.push(`var(${varBase}-image-layer, ${imageFallback})`);
+
+    // --- Composite background shorthand ---
+    rules.push(`background: ${layers.join(', ')}`);
+
+    return {
+      field,
+      rules,
+      processedFields: PROCESSED,
+      ...responsive.mediaRules.length > 0 && {
+        mediaRules: responsive.mediaRules
+      }
+    };
   }
 };