@dosgato/templating 1.0.7 → 1.0.9

package/dist/component.d.ts

@@ -325,6 +325,16 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
     reqHeaders: IncomingHttpHeaders;
     reqQuery: ParsedUrlQuery;
     indexInArea: number;
+    /**
+     * the full array of components in the same area as this component, including self
+     *
+     * empty for page component
+     */
+    siblings: Component[];
+    /** the component before this one inside the area, null if this component is first */
+    prevSibling?: Component;
+    /** the component after this one inside the area, null if this component is last */
+    nextSibling?: Component;
     /**
      * For logging errors during rendering without crashing the render. If your fetch, setContext,
      * render, or renderVariation functions throw, the error will be logged but the page render will
@@ -439,6 +449,7 @@ export interface RenderAreaEditBarOpts extends Omit<Omit<EditBarOpts, 'label'>,
 }
 export interface NewBarOpts extends BarOpts {
     disabled?: boolean;
+    disableAddToTop?: boolean;
 }
 export interface RenderComponentsWrapParams {
     /**
@@ -483,6 +494,21 @@ export interface RenderComponentsWrapParams {
      * Will be undefined for the new bar, so check that it is not null.
      */
     component?: Component;
+    /**
+     * Contains all the components in the same area as the component being rendered.
+     *
+     * Use this if you need to wrap multiple components together inside the same
+     * box. For instance, if you have several components of the same type in a row,
+     * perhaps you want them to automatically appear side by side in a flexbox.
+     *
+     * Your wrap function could inspect the components before and after the current
+     * component, based on indexInArea, and decide to open a div when the preceding is
+     * not the right type and the following is, then close the div when the preceding
+     * is the right type and the following is not.
+     *
+     * Will be defined when rendering the new bar.
+     */
+    siblings: Component[];
 }
 export interface RenderComponentsOpts {
     /**

package/dist/component.js

@@ -110,15 +110,16 @@ export class Component extends ResourceProvider {
     renderComponents(components = [], opts) {
         if (!Array.isArray(components))
             components = this.renderedAreas.get(components) ?? [];
+        const siblings = components.map(c => c.component);
         const wrap = opts?.wrap ?? defaultWrap;
         if (opts?.skipContent && !this.editMode)
             return '';
         if (opts?.skipBars || opts?.skipEditBars || !this.editMode)
-            return components.map((c, indexInArea) => wrap({ ...c, content: c.output, bar: '', indexInArea })).join('');
+            return components.map((c, indexInArea) => wrap({ ...c, content: c.output, bar: '', indexInArea, siblings })).join('');
         return components
             .map((c, indexInArea) => {
             if (c.component.inheritedFrom && opts?.hideInheritBars) {
-                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '', indexInArea });
+                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '', indexInArea, siblings });
             }
             else {
                 const bar = c.component.editBar({
@@ -127,7 +128,7 @@ export class Component extends ResourceProvider {
                     extraClass: typeof opts?.editBarOpts?.extraClass === 'function' ? opts.editBarOpts.extraClass(c.component) : opts?.editBarOpts?.extraClass
                 });
                 const content = opts?.skipContent ? '' : c.output;
-                return wrap({ output: bar + content, content, bar, component: c.component, indexInArea });
+                return wrap({ output: bar + content, content, bar, component: c.component, indexInArea, siblings });
             }
         }).join('');
     }
@@ -159,7 +160,7 @@ export class Component extends ResourceProvider {
                 bar = this.newBar(areaName, opts?.newBarOpts);
             }
             if (bar != null)
-                output += wrap({ output: bar, content: '', bar, indexInArea: components.length });
+                output += wrap({ output: bar, content: '', bar, indexInArea: components.length, siblings: components.map(c => c.component) });
         }
         return output;
     }

package/dist/uitemplate.d.ts

@@ -108,6 +108,28 @@ export interface UITemplate extends UITemplateBase {
          */
         shouldAppear?: (data: PageData, path: string) => boolean;
     }[];
+    /**
+     * Customize the device preview dropdown. Only applies to page templates. Default is to show
+     * Mobile and Desktop in preview mode only.
+     */
+    devicePreview?: {
+        /**
+         * Set this to an object to customize the sizes available on the preview device dropdown.
+         * Leave width undefined to use all available space. The first entry marked default will be
+         * active on first page load. If none are default, the largest is default.
+         * Example: [{ label: 'Mobile', width: 400 }, { label: 'Desktop', default: true }]
+         */
+        sizes?: {
+            label: string;
+            width?: number;
+            default?: boolean;
+        }[];
+        /**
+         * If your template is heavily mobile focused, you may want editors to have the device
+         * dropdown while editing, in addition to previewing. Set this true to enable that.
+         */
+        showWhileEditing?: boolean;
+    };
 }
 export interface ExtraDataColumn {
     /**

package/package.json

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