@dosgato/templating 0.0.71 → 0.0.73

package/dist/component.d.ts

@@ -308,9 +308,13 @@ export interface RenderComponentsOpts {
     skipContent?: boolean;
     /**
      * Provide a function that wraps each component, e.g.
-     * (c: RenderedComponent) => `<li>${c.output}</li>`
+     * (output: string) => `<li>${output}</li>`
+     *
+     * Note that the wrap will also go around the edit bar.
+     *
+     * If you need it (unlikely), the full component object is provided as a second parameter.
      */
-    wrap?: (c: RenderedComponent) => string;
+    wrap?: (output: string, c?: Component) => string;
     /**
      * Options for each edit bar; also accepts functions for label and extraClass
      */

package/dist/component.js

@@ -1,5 +1,6 @@
 import { isNotBlank } from 'txstate-utils';
 import { ResourceProvider } from './provider.js';
+function defaultWrap(output) { return output; }
 /**
  * This is the primary templating class to build your templates. Subclass it and provide
  * at least a render function.
@@ -95,16 +96,17 @@ export class Component extends ResourceProvider {
     renderComponents(components = [], opts) {
         if (!Array.isArray(components))
             components = this.renderedAreas.get(components) ?? [];
+        const wrap = opts?.wrap ?? defaultWrap;
         if (opts?.skipBars)
-            return components.map(c => opts.wrap?.(c) ?? c.output).join('');
+            return components.map(c => wrap(c.output, c.component)).join('');
         return components
-            .flatMap(c => c.component.inheritedFrom && opts?.hideInheritBars
-            ? [opts.skipContent ? '' : opts.wrap?.(c) ?? c.output]
-            : [c.component.editBar({
+            .map(c => c.component.inheritedFrom && opts?.hideInheritBars
+            ? (opts.skipContent ? '' : wrap(c.output, c.component))
+            : wrap([c.component.editBar({
                     ...opts?.editBarOpts,
                     label: typeof opts?.editBarOpts?.label === 'function' ? opts.editBarOpts.label(c.component) : opts?.editBarOpts?.label,
                     extraClass: typeof opts?.editBarOpts?.extraClass === 'function' ? opts.editBarOpts.extraClass(c.component) : opts?.editBarOpts?.extraClass
-                }), opts?.skipContent ? '' : opts?.wrap?.(c) ?? c.output]).join('');
+                }), opts?.skipContent ? '' : c.output].join(''), c.component)).join('');
     }
     /**
      * helper function to print an area and set a minimum or maximum number of components
@@ -121,14 +123,15 @@ export class Component extends ResourceProvider {
         const components = this.renderedAreas.get(areaName) ?? [];
         const ownedComponentCount = components.filter(c => !c.component.inheritedFrom).length;
         const full = !!(opts?.max && ownedComponentCount >= opts.max);
+        const wrap = opts?.wrap ?? defaultWrap;
         let output = this.renderComponents(components, { ...opts, editBarOpts: { ...opts?.editBarOpts, disableDelete: ownedComponentCount <= (opts?.min ?? 0), disableDrop: full } });
         if (!opts?.skipBars) {
             if (full) {
                 if (!opts.hideMaxWarning)
-                    output += this.newBar(areaName, { ...opts.newBarOpts, label: opts.maxWarning ?? 'Maximum Reached', disabled: true });
+                    output += wrap(this.newBar(areaName, { ...opts.newBarOpts, label: opts.maxWarning ?? 'Maximum Reached', disabled: true }));
             }
             else {
-                output += this.newBar(areaName, opts?.newBarOpts);
+                output += wrap(this.newBar(areaName, opts?.newBarOpts));
             }
         }
         return output;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dosgato/templating",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "description": "A library to support building templates for dosgato CMS.",
   "type": "module",
   "exports": {