@dosgato/templating 0.0.82 → 0.0.84

package/dist/component.d.ts

@@ -251,6 +251,7 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
     autoLabel: string;
     reqHeaders: IncomingHttpHeaders;
     reqQuery: ParsedUrlQuery;
+    indexInArea: number;
     /**
      * 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
@@ -360,6 +361,12 @@ export interface RenderComponentsWrapParams {
      * wrapping or you'll end up with an empty wrapper element.
      */
     bar: string;
+    /**
+     * The index of the component currently being wrapped
+     *
+     * After pulling in any inherited components.
+     */
+    indexInArea: number;
     /**
      * Contains the full component being wrapped.
      *

package/dist/component.js

@@ -114,11 +114,11 @@ export class Component extends ResourceProvider {
             components = this.renderedAreas.get(components) ?? [];
         const wrap = opts?.wrap ?? defaultWrap;
         if (opts?.skipBars || opts?.skipEditBars)
-            return components.map(c => wrap({ ...c, content: c.output, bar: '' })).join('');
+            return components.map((c, indexInArea) => wrap({ ...c, content: c.output, bar: '', indexInArea })).join('');
         return components
-            .map(c => {
+            .map((c, indexInArea) => {
             if (c.component.inheritedFrom && opts?.hideInheritBars) {
-                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '' });
+                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '', indexInArea });
             }
             else {
                 const bar = c.component.editBar({
@@ -126,7 +126,7 @@ export class Component extends ResourceProvider {
                     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
                 });
-                return wrap({ output: bar + c.output, content: c.output, bar, component: c.component });
+                return wrap({ output: bar + c.output, content: c.output, bar, component: c.component, indexInArea });
             }
         }).join('');
     }
@@ -158,7 +158,7 @@ export class Component extends ResourceProvider {
                 bar = this.newBar(areaName, opts?.newBarOpts);
             }
             if (bar != null)
-                output += wrap({ output: bar, content: '', bar });
+                output += wrap({ output: bar, content: '', bar, indexInArea: components.length });
         }
         return output;
     }

package/dist/render.js

@@ -6,7 +6,7 @@ export function printHeader(ctx, content) {
     if (level < 1)
         return `<h1>${content}</h1>`;
     if (level > 6)
-        return `<h6>${content}</h1>`;
+        return `<h6>${content}</h6>`;
     return `<h${level}>${content}</h${level}>`;
 }
 export function advanceHeader(ctx, content) {

package/dist/uitemplate.d.ts

@@ -1,4 +1,4 @@
-import { ComponentData } from './component.js';
+import { ComponentData, PageData } from './component.js';
 interface IconifyIcon {
     body: string;
     rotate?: number;
@@ -26,6 +26,8 @@ export interface UITemplate {
      * - creating: boolean, true when creating component for the first time, false when editing
      * - data: ComponentData, the current data on the page, should not be mutated during editing,
      *   undefined when creating
+     * - page: DialogPageProp, the current page so that you can reference the full page data or
+     *   make a further graphql query based on its id/path.
      * - templateProperties: the template properties for the current page template, so you can make
      *   things like color pickers that visually match the colors of the current page template
      * - environmentConfig: base URLs in case you need to generate a link to the API or something
@@ -60,4 +62,18 @@ export interface UITemplate {
      */
     icon?: IconOrSVG;
 }
+/**
+ * This is a type for the data that will be passed to dialog Svelte components as
+ * the `page` prop.
+ */
+export interface DialogPageProp {
+    id: string;
+    path: string;
+    data: PageData;
+}
+/**
+ * A function you may use in your dialogs to make an authenticated graphql request to the DosGato
+ * API.
+ */
+export declare function dialogQuery<T = any>(query: string, variables: any): Promise<T>;
 export {};

package/dist/uitemplate.js

@@ -1 +1,7 @@
-export {};
+/**
+ * A function you may use in your dialogs to make an authenticated graphql request to the DosGato
+ * API.
+ */
+export async function dialogQuery(query, variables) {
+    return await window.api.query(query, variables);
+}

package/package.json

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