@dosgato/templating 0.0.61 → 0.0.62

package/dist/component.d.ts

@@ -110,9 +110,26 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * will be skipped.
      */
     renderVariation(extension: string): string;
+    /**
+     * helper function to print an area's component list, but you can also override this if you
+     * need to do something advanced like wrap each component in a div
+     */
     renderComponents(components?: RenderedComponent[] | string, opts?: {
         hideInheritBars?: boolean;
+        editBarOpts?: EditBarOpts;
     }): string;
+    /**
+     * helper function to print an area and set a minimum or maximum number of components
+     */
+    renderArea(areaName: string, opts?: {
+        min?: number;
+        max?: number;
+        hideMaxWarning?: boolean;
+        maxWarning?: string;
+        hideInheritBars?: boolean;
+        newBarOpts: NewBarOpts;
+        editBarOpts: EditBarOpts;
+    }): void;
     /**
      * During rendering, each component should determine the CSS blocks that it needs. This may
      * change depending on the data. For instance, if you need some CSS to style up an image, but
@@ -165,13 +182,13 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      *
      * Generally should not be overridden - override newLabel and newClass instead
      */
-    newBar(areaName: string, opts?: EditBarOpts): string;
+    newBar(areaName: string, opts?: NewBarOpts): string;
     /**
      * These functions will be provided by the rendering server to assist in the
      * rendering process.
      */
     static editBar: (path: string, opts: EditBarOpts) => string;
-    static newBar: (path: string, opts: EditBarOpts) => string;
+    static newBar: (path: string, opts: NewBarOpts) => string;
     constructor(data: DataType, path: string, parent: Component | undefined, editMode: boolean);
     areas: Map<string, Component<any, any, any>[]>;
     data: Omit<DataType, 'areas'>;
@@ -205,6 +222,8 @@ export interface SiteInfo {
 export interface PageRecord<DataType extends PageData = PageData> {
     id: string;
     linkId: string;
+    createdAt: Date;
+    modifiedAt: Date;
     path: string;
     data: DataType;
     site: SiteInfo;
@@ -235,11 +254,19 @@ export interface ContextBase {
      */
     headerLevel: number;
 }
-export interface EditBarOpts {
-    extraClass?: string;
-    label?: string;
+interface BarOpts {
     editMode?: boolean;
+}
+export interface EditBarOpts extends BarOpts {
+    label?: string | ((c: Component) => string);
+    extraClass?: string | ((c: Component) => string);
     inheritedFrom?: string;
+    disableDelete?: boolean;
+}
+export interface NewBarOpts extends BarOpts {
+    label?: string;
+    extraClass?: string;
+    disabled?: boolean;
 }
 export interface RenderedComponent<C extends Component = Component> {
     component: C;
@@ -278,3 +305,4 @@ export declare abstract class Page<DataType extends PageData = any, FetchedType
     protected passError(e: Error, path: string): void;
     constructor(page: PageRecord<DataType>, editMode: boolean);
 }
+export {};

package/dist/component.js

@@ -82,12 +82,29 @@ export class Component extends ResourceProvider {
     renderVariation(extension) {
         return Array.from(this.renderedAreas.values()).flatMap(ras => ras.map(ra => ra.output)).join('');
     }
-    // helper function to help you print an area, but you can also override this if you
-    // need to do something advanced like wrap each component in a div
+    /**
+     * helper function to print an area's component list, but you can also override this if you
+     * need to do something advanced like wrap each component in a div
+     */
     renderComponents(components = [], opts) {
         if (!Array.isArray(components))
             components = this.renderedAreas.get(components) ?? [];
-        return components.flatMap(c => c.component.inheritedFrom && opts?.hideInheritBars ? [c.output] : [c.component.editBar(), c.output]).join('');
+        return components.flatMap(c => c.component.inheritedFrom && opts?.hideInheritBars ? [c.output] : [c.component.editBar(opts?.editBarOpts), c.output]).join('');
+    }
+    /**
+     * helper function to print an area and set a minimum or maximum number of components
+     */
+    renderArea(areaName, opts) {
+        const components = this.renderedAreas.get(areaName) ?? [];
+        const ownedComponentCount = components.filter(c => !c.component.inheritedFrom).length;
+        let output = this.renderComponents(components, { hideInheritBars: opts?.hideInheritBars, editBarOpts: { ...opts?.editBarOpts, disableDelete: ownedComponentCount <= (opts?.min ?? 0) } });
+        if (opts?.max && ownedComponentCount >= opts.max) {
+            if (!opts.hideMaxWarning)
+                output += this.newBar(areaName, { ...opts.newBarOpts, label: opts.maxWarning ?? 'Maximum Reached', disabled: true });
+        }
+        else {
+            output += this.newBar(areaName, opts?.newBarOpts);
+        }
     }
     /**
      * During rendering, each component should determine the CSS blocks that it needs. This may
@@ -155,7 +172,6 @@ export class Component extends ResourceProvider {
         opts.label ?? (opts.label = this.newLabel(areaName) ?? (this.areas.size > 1 ? `Add ${areaName} Content` : `Add ${this.autoLabel} Content`));
         opts.extraClass ?? (opts.extraClass = this.newClass(areaName));
         opts.editMode ?? (opts.editMode = this.editMode);
-        opts.inheritedFrom ?? (opts.inheritedFrom = this.inheritedFrom);
         return Component.newBar([this.path, 'areas', areaName].filter(isNotBlank).join('.'), opts);
     }
     /**

package/dist/uitemplate.d.ts

@@ -1,11 +1,16 @@
-import { IconifyIcon } from '@iconify/svelte';
-import { SvelteComponent } from 'svelte';
+import type { IconifyIcon } from '@iconify/svelte';
+export interface SvelteComponent {
+    $set: (props?: Record<string, any>) => void;
+    $on: (event: string, callback: (event: any) => void) => () => void;
+    $destroy: () => void;
+    [accessor: string]: any;
+}
 export interface IconOrSVG extends IconifyIcon {
     raw?: true;
 }
 export interface UITemplate {
     templateKey: string;
-    dialog: typeof SvelteComponent;
+    dialog: SvelteComponent;
     preview?: IconOrSVG;
     icon?: IconOrSVG;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dosgato/templating",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "description": "A library to support building templates for dosgato CMS.",
   "type": "module",
   "exports": {
@@ -10,16 +10,16 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prepublishOnly": "npm run build",
+    "lint": "eslint --ignore-path .gitignore .",
     "build": "rm -rf dist && tsc"
   },
   "dependencies": {
-    "@iconify/svelte": "^2.2.1",
-    "svelte": "^3.48.0",
+    "@iconify/svelte": "^3.0.0",
     "txstate-utils": "^1.7.4"
   },
   "devDependencies": {
     "@types/node": "^18.7.11",
-    "eslint-config-standard-with-typescript": "^22.0.0",
+    "eslint-config-standard-with-typescript": "^23.0.0",
     "typescript": "^4.4.2"
   },
   "repository": {