@dosgato/templating 0.0.14 → 0.0.17

package/dist/component.d.ts

@@ -1,3 +1,4 @@
+import { EditBarOpts } from './editbar';
 import { ResourceProvider } from './provider';
 /**
  * This is the primary templating class to build your templates. Subclass it and provide
@@ -87,6 +88,43 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * Same as cssBlocks() but for javascript.
      */
     jsBlocks(): string[];
+    /**
+     * Components may override this function to give their edit bars a custom
+     * label instead of using the templateName property
+     *
+     * For instance, you could return this.data.title
+     */
+    editLabel(): string;
+    /**
+     * Components may override this function to give their edit bars a custom
+     * CSS class
+     */
+    editClass(): undefined;
+    /**
+     * Components may override this function to give their new bars a custom
+     * label
+     *
+     * For instance, an area that only accepts 'layout' components could
+     * return "Add Layout"
+     */
+    newLabel(areaName: string): string;
+    /**
+     * Components may override this function to give their new bars a custom
+     * CSS class
+     */
+    newClass(areaName: string): undefined;
+    /**
+     * Components may override this function to provide a custom edit bar
+     *
+     * Generally should not be overridden - override editLabel and editClass instead
+     */
+    editBar(opts?: EditBarOpts): string;
+    /**
+     * Components may override this function to provide a custom new bar
+     *
+     * Generally should not be overridden - override newLabel and newClass instead
+     */
+    newBar(areaName: string, opts?: EditBarOpts): string;
 }
 export interface PageRecord<DataType extends PageData = PageData> {
     id: string;

package/dist/component.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Page = exports.Component = void 0;
+const editbar_1 = require("./editbar");
 const provider_1 = require("./provider");
 /**
  * This is the primary templating class to build your templates. Subclass it and provide
@@ -109,6 +110,62 @@ class Component extends provider_1.ResourceProvider {
     jsBlocks() {
         return Array.from(this.constructor.jsBlocks.keys());
     }
+    /**
+     * Components may override this function to give their edit bars a custom
+     * label instead of using the templateName property
+     *
+     * For instance, you could return this.data.title
+     */
+    editLabel() {
+        const This = this.constructor;
+        return This.templateName;
+    }
+    /**
+     * Components may override this function to give their edit bars a custom
+     * CSS class
+     */
+    editClass() {
+        return undefined;
+    }
+    /**
+     * Components may override this function to give their new bars a custom
+     * label
+     *
+     * For instance, an area that only accepts 'layout' components could
+     * return "Add Layout"
+     */
+    newLabel(areaName) {
+        return 'Add Content';
+    }
+    /**
+     * Components may override this function to give their new bars a custom
+     * CSS class
+     */
+    newClass(areaName) {
+        return undefined;
+    }
+    /**
+     * Components may override this function to provide a custom edit bar
+     *
+     * Generally should not be overridden - override editLabel and editClass instead
+     */
+    editBar(opts = {}) {
+        var _a, _b;
+        (_a = opts.label) !== null && _a !== void 0 ? _a : (opts.label = this.editLabel());
+        (_b = opts.extraClass) !== null && _b !== void 0 ? _b : (opts.extraClass = this.editClass());
+        return (0, editbar_1.editBar)(this.path, opts);
+    }
+    /**
+     * Components may override this function to provide a custom new bar
+     *
+     * Generally should not be overridden - override newLabel and newClass instead
+     */
+    newBar(areaName, opts = {}) {
+        var _a, _b;
+        (_a = opts.label) !== null && _a !== void 0 ? _a : (opts.label = this.newLabel(areaName));
+        (_b = opts.extraClass) !== null && _b !== void 0 ? _b : (opts.extraClass = this.newClass(areaName));
+        return (0, editbar_1.newBar)(this.path + '.' + areaName, opts);
+    }
 }
 exports.Component = Component;
 class Page extends Component {

package/dist/editbar.d.ts

@@ -0,0 +1,11 @@
+export interface EditBarOpts {
+    extraClass?: string;
+    label?: string;
+    editMode?: boolean;
+}
+export declare function editBar(path: string, opts: EditBarOpts & {
+    label: string;
+}): string;
+export declare function newBar(path: string, opts: EditBarOpts & {
+    label: string;
+}): string;

package/dist/editbar.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newBar = exports.editBar = void 0;
+const txstate_utils_1 = require("txstate-utils");
+function editBar(path, opts) {
+    var _a;
+    if (!opts.editMode)
+        return '';
+    const id = (0, txstate_utils_1.randomid)();
+    return `
+<div class="dg-edit-bar ${(_a = opts.extraClass) !== null && _a !== void 0 ? _a : ''}" data-path="${(0, txstate_utils_1.htmlEncode)(path)}" draggable="true" ondragstart="window.dgEditing.drag(event)" ondragover="window.dgEditing.over(event)" ondragend="window.dgEditing.drop(event)">
+  <span id="${id}" class="dg-edit-bar-label">${(0, txstate_utils_1.htmlEncode)(opts.label)}</span>
+  <button onclick="window.dgEditing.edit(event)" aria-describedby="${id}">Edit</button>
+  <button onclick="window.dgEditing.move(event)" aria-describedby="${id}">Move</button>
+  <button onclick="window.dgEditing.del(event)" aria-describedby="${id}">Trash</button>
+</div>
+  `.trim();
+}
+exports.editBar = editBar;
+function newBar(path, opts) {
+    var _a;
+    if (!opts.editMode)
+        return '';
+    return `
+<div role="button" onclick="window.dgEditing.create(event)" class="dg-new-bar ${(_a = opts.extraClass) !== null && _a !== void 0 ? _a : ''}" data-path="${(0, txstate_utils_1.htmlEncode)(path)}">
+  ${(0, txstate_utils_1.htmlEncode)(opts.label)}
+</div>
+  `.trim();
+}
+exports.newBar = newBar;

package/dist/uitemplate.d.ts

@@ -1,8 +1,11 @@
 import { IconifyIcon } from '@iconify/svelte';
 import { SvelteComponent } from 'svelte';
+export interface IconOrSVG extends IconifyIcon {
+    raw?: true;
+}
 export interface UITemplate {
     templateKey: string;
-    dialog: SvelteComponent;
-    preview?: IconifyIcon;
-    icon?: IconifyIcon;
+    dialog: typeof SvelteComponent;
+    preview?: IconOrSVG;
+    icon?: IconOrSVG;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dosgato/templating",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "description": "A library to support building templates for dosgato CMS.",
   "exports": {
     "require": "./dist/index.js",
@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "@iconify/svelte": "^2.2.1",
-    "svelte": "^3.48.0"
+    "svelte": "^3.48.0",
+    "txstate-utils": "^1.7.1"
   },
   "devDependencies": {
     "eslint-config-standard-with-typescript": "^21.0.1",