terrier-engine 4.0.16 → 4.0.18

package/app.ts

@@ -16,11 +16,19 @@ Logger.level = 'info'
 /**
  * Main application part that renders the entire page.
  */
-export abstract class TerrierApp<TT extends ThemeType> extends TerrierPart<{theme: Theme<TT>}, TT> {
-
-    _theme!: Theme<TT>
-
-    get theme(): Theme<TT> {
+export abstract class TerrierApp<
+    TThemeType extends ThemeType,
+    TTheme extends Theme<TThemeType>
+> extends TerrierPart<
+    {theme: TTheme},
+    TThemeType,
+    TerrierApp<TThemeType, TTheme>,
+    TTheme
+> {
+
+    _theme!: TTheme
+
+    get theme(): TTheme {
         return this._theme
     }
 
@@ -68,9 +76,9 @@ export abstract class TerrierApp<TT extends ThemeType> extends TerrierPart<{them
 
     /// Modals
 
-    showModal<ModalType extends ModalPart<StateType, TT>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
+    showModal<ModalType extends ModalPart<StateType, TThemeType>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
         const modalStack =
-            (this.overlayPart.parts.modal as ModalStackPart<TT>)
+            (this.overlayPart.parts.modal as ModalStackPart<TThemeType>)
                 ?? this.makeOverlay(ModalStackPart, {}, 'modal')
         const modal = modalStack.pushModal(constructor, state)
         modalStack.dirty()

package/dropdowns.ts

@@ -5,7 +5,8 @@ import {PartTag, StatelessPart} from "tuff-core/parts"
 import Overlays from "./overlays"
 import {TerrierPart} from "./parts"
 import Objects from "tuff-core/objects"
-import {Action, ThemeType} from "./theme"
+import Theme, {Action, ThemeType} from "./theme"
+import {TerrierApp} from "./app";
 
 const log = new Logger('Dropdowns')
 
@@ -15,7 +16,7 @@ const clearDropdownKey = untypedKey()
  * Abstract base class for dropdown parts.
  * Subclasses must implement the `renderContent()` method to render the dropdown content.
  */
-export abstract class Dropdown<T, TT extends ThemeType> extends TerrierPart<T, TT> {
+export abstract class Dropdown<T, TT extends ThemeType> extends TerrierPart<T, TT, TerrierApp<TT, Theme<TT>>, Theme<TT>> {
 
     parentPart?: StatelessPart
 

package/lightbox.ts

@@ -2,6 +2,7 @@ import { Logger } from "tuff-core/logging"
 import { untypedKey } from "tuff-core/messages"
 import {Part, PartTag} from "tuff-core/parts"
 import {TerrierApp} from "./app"
+import Theme, {ThemeType} from "./theme";
 
 const log = new Logger('Lightbox')
 
@@ -12,9 +13,10 @@ const log = new Logger('Lightbox')
 /**
  * Initializes a global event listener for image elements contained in the `containerClass`
  * @param root
+ * @param app
  * @param containerClass
  */
-function init(root: HTMLElement, app: TerrierApp<any>, containerClass: string) {
+function init<TT extends ThemeType>(root: HTMLElement, app: TerrierApp<TT, Theme<TT>>, containerClass: string) {
     log.info("Init", root)
     root.addEventListener("click", evt => {
         if (!(evt.target instanceof HTMLElement) || evt.target.tagName != 'IMG') {
@@ -47,13 +49,13 @@ function init(root: HTMLElement, app: TerrierApp<any>, containerClass: string) {
 
 type LightboxState = { src: string }
 
-function showPart(app: TerrierApp<any>, state: LightboxState) {
+function showPart<TT extends ThemeType>(app: TerrierApp<TT, Theme<TT>>, state: LightboxState) {
     app.makeOverlay(LightboxPart, {app,...state}, 'lightbox')
 }
 
 const closeKey = untypedKey()
 
-class LightboxPart extends Part<LightboxState & {app: TerrierApp<any>}> {
+class LightboxPart<TT extends ThemeType> extends Part<LightboxState & {app: TerrierApp<TT, Theme<TT>>}> {
 
     async init() {
         this.onClick(closeKey, _ => {

package/modals.ts

@@ -2,7 +2,8 @@ import { Logger } from "tuff-core/logging"
 import { untypedKey } from "tuff-core/messages"
 import {ContentPart, TerrierPart} from "./parts"
 import {PartParent, PartTag} from "tuff-core/parts"
-import {ThemeType} from "./theme";
+import Theme, {ThemeType} from "./theme";
+import {TerrierApp} from "./app";
 
 const log = new Logger('Modals')
 
@@ -67,7 +68,7 @@ export abstract class ModalPart<T, TT extends ThemeType> extends ContentPart<T,
  */
 export const modalPopKey = untypedKey()
 
-export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT> {
+export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT, TerrierApp<TT, Theme<TT>>, Theme<TT>> {
 
     displayClass: 'show' | 'hide' = 'show'
 

package/package.json

@@ -4,14 +4,14 @@
   "files": [
     "*"
   ],
-  "version": "4.0.16",
+  "version": "4.0.18",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"
   },
   "license": "MIT",
   "scripts": {
-    "check": "tsc -p app/frontend -noEmit",
+    "check": "tsc -p app/frontend --noEmit",
     "test": "vitest"
   },
   "dependencies": {

package/parts.ts

@@ -5,7 +5,7 @@ import Fragments from "./fragments"
 import {Dropdown} from "./dropdowns"
 import {TerrierApp} from "./app"
 import Loading from "./loading"
-import Theme, {Action, ThemeType} from "./theme"
+import Theme, {Action, RenderActionOptions, ThemeType} from "./theme"
 import Toasts, {ToastOptions} from "./toasts";
 
 const log = new Logger('Parts')
@@ -26,13 +26,18 @@ export type ActionLevel = keyof PanelActions<any>
 /**
  * Base class for ALL parts in a Terrier application.
  */
-export abstract class TerrierPart<T, TT extends ThemeType> extends Part<T> {
-
-    get app(): TerrierApp<TT> {
-        return this.root as TerrierApp<TT> // this should always be true
+export abstract class TerrierPart<
+    TState,
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends Part<TState> {
+
+    get app(): TApp {
+        return this.root as TApp // this should always be true
     }
 
-    get theme(): Theme<TT> {
+    get theme(): TTheme {
         return this.app.theme
     }
 
@@ -101,7 +106,7 @@ export abstract class TerrierPart<T, TT extends ThemeType> extends Part<T> {
      * @param message the message text
      * @param options
      */
-    showToast(message: string, options: ToastOptions<TT>) {
+    showToast(message: string, options: ToastOptions<TThemeType>) {
         Toasts.show(message, options, this.theme)
     }
 
@@ -115,7 +120,12 @@ export abstract class TerrierPart<T, TT extends ThemeType> extends Part<T> {
 /**
  * Base class for all Parts that render some main content, like pages, panels, and modals.
  */
-export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T, TT> {
+export abstract class ContentPart<TState, TThemeType extends ThemeType> extends TerrierPart<
+    TState,
+    TThemeType,
+    TerrierApp<TThemeType, Theme<TThemeType>>,
+    Theme<TThemeType>
+> {
 
     /**
      * All ContentParts must implement this to render their actual content.
@@ -123,10 +133,6 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
      */
     abstract renderContent(parent: PartTag): void
 
-    get app(): TerrierApp<TT> {
-        return this.root as TerrierApp<TT> // this should always be true
-    }
-
 
     protected _title = ''
 
@@ -138,9 +144,9 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
         this._title = title
     }
 
-    protected _icon: TT['icons'] | null = null
+    protected _icon: TThemeType['icons'] | null = null
 
-    setIcon(icon: TT['icons']) {
+    setIcon(icon: TThemeType['icons']) {
         this._icon = icon
     }
 
@@ -155,12 +161,12 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
 
     // stored actions can be either an action object or a reference to a named action
     actions = {
-        primary: Array<Action<TT> | string>(),
-        secondary: Array<Action<TT> | string>(),
-        tertiary: Array<Action<TT> | string>()
+        primary: Array<Action<TThemeType> | string>(),
+        secondary: Array<Action<TThemeType> | string>(),
+        tertiary: Array<Action<TThemeType> | string>()
     }
 
-    namedActions: Record<string, { action: Action<TT>, level: ActionLevel }> = {}
+    namedActions: Record<string, { action: Action<TThemeType>, level: ActionLevel }> = {}
 
     /**
      * Add an action to the part, or replace a named action if it already exists.
@@ -168,7 +174,7 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
      * @param level whether it's a primary, secondary, or tertiary action
      * @param name a name to be given to this action, so it can be accessed later
      */
-    addAction(action: Action<TT>, level: ActionLevel = 'primary', name?: string) {
+    addAction(action: Action<TThemeType>, level: ActionLevel = 'primary', name?: string) {
         if (name?.length) {
             if (name in this.namedActions) {
                 const currentLevel = this.namedActions[name].level
@@ -191,7 +197,7 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
      * Returns the action definition for the action with the given name, or undefined if there is no action with that name
      * @param name
      */
-    getNamedAction(name: string): Action<TT> | undefined {
+    getNamedAction(name: string): Action<TThemeType> | undefined {
         return this.namedActions[name].action
     }
 
@@ -222,7 +228,7 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
         this.actions[level] = []
     }
 
-    getAllActions(): PanelActions<TT> {
+    getAllActions(): PanelActions<TThemeType> {
         return {
             primary: this.getActions('primary'),
             secondary: this.getActions('secondary'),
@@ -230,7 +236,7 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
         }
     }
 
-    getActions(level: ActionLevel): Action<TT>[] {
+    getActions(level: ActionLevel): Action<TThemeType>[] {
         return this.actions[level].map(action => {
             return (typeof action === 'string') ? this.namedActions[action].action : action
         })
@@ -247,14 +253,14 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
      * @param state the dropdown's state
      * @param target the target element around which to show the dropdown
      */
-    makeDropdown<DropdownType extends Dropdown<DropdownStateType, TT>, DropdownStateType>(
+    makeDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType>, DropdownStateType>(
         constructor: {new(p: PartParent, id: string, state: DropdownStateType): DropdownType;},
         state: DropdownStateType,
         target: EventTarget | null) {
         if (!(target && target instanceof HTMLElement)) {
             throw "Trying to show a dropdown without an element target!"
         }
-        const dropdown = this.app.makeOverlay(constructor, state, 'dropdown') as Dropdown<DropdownStateType, TT>
+        const dropdown = this.app.makeOverlay(constructor, state, 'dropdown') as Dropdown<DropdownStateType, TThemeType>
         dropdown.parentPart = this
         dropdown.anchor(target)
         this.app.lastDropdownTarget = target
@@ -270,7 +276,7 @@ export abstract class ContentPart<T, TT extends ThemeType> extends TerrierPart<T
      * @param state the dropdown's state
      * @param target the target element around which to show the dropdown
      */
-    toggleDropdown<DropdownType extends Dropdown<DropdownStateType, TT>, DropdownStateType>(
+    toggleDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType>, DropdownStateType>(
         constructor: { new(p: PartParent, id: string, state: DropdownStateType): DropdownType; },
         state: DropdownStateType,
         target: EventTarget | null) {
@@ -335,50 +341,52 @@ export abstract class PagePart<T, TT extends ThemeType> extends ContentPart<T, T
     render(parent: PartTag) {
         parent.div(`.tt-page-part.content-width-${this.mainContentWidth}`, page => {
             page.div('.tt-flex.top-row', topRow => {
-                // breadcrumbs
-                if (this._breadcrumbs.length || this._title?.length) {
-                    topRow.h1('.breadcrumbs', h1 => {
-                        const crumbs = Array.from(this._breadcrumbs)
-
-                        // add a breadcrumb for the page title
-                        const titleCrumb: Action<TT> = {
-                            title: this._title,
-                            icon: this._icon || undefined,
-                        }
-                        if (this._titleHref) {
-                            titleCrumb.href = this._titleHref
-                        }
-                        if (this._breadcrumbClasses?.length) {
-                            titleCrumb.classes = this._breadcrumbClasses
-                        }
-                        crumbs.push(titleCrumb)
+                this.renderBreadcrumbs(topRow);
 
-                        this.app.theme.renderActions(h1, crumbs)
-                    })
-                }
-
-                // tertiary actions
                 if (this.actions.tertiary.length) {
-                    topRow.div('.tertiary-actions', actions => {
-                        this.app.theme.renderActions(actions, this.getActions('tertiary'))
-                    })
+                    this.renderActions(topRow, 'tertiary');
                 }
-            }) // topRow
+            })
 
             page.div('.lighting')
             page.div('.page-main', main => {
                 this.renderContent(main)
                 main.div('.page-actions', actions => {
-                    actions.div('.secondary-actions', container => {
-                        this.app.theme.renderActions(container, this.getActions('secondary'), {iconColor: 'white', defaultClass: 'secondary'})
-                    })
-                    actions.div('.primary-actions', container => {
-                        this.app.theme.renderActions(container, this.getActions('primary'), {iconColor: 'white', defaultClass: 'primary'})
-                    })
+                    this.renderActions(actions, 'secondary', {iconColor: null, defaultClass: 'secondary'})
+                    this.renderActions(actions, 'primary', {iconColor: null, defaultClass: 'primary'})
                 })
             })
         })
     }
+
+    protected renderActions(parent: PartTag, level: ActionLevel, options?: RenderActionOptions<TT>) {
+        parent.div(`.${level}-actions`, actions => {
+            this.app.theme.renderActions(actions, this.getActions(level), options)
+        })
+    }
+
+    protected renderBreadcrumbs(parent: PartTag) {
+        if (!this._breadcrumbs.length && !this._title?.length) return
+
+        parent.h1('.breadcrumbs', h1 => {
+            const crumbs = Array.from(this._breadcrumbs)
+
+            // add a breadcrumb for the page title
+            const titleCrumb: Action<TT> = {
+                title: this._title,
+                icon: this._icon || undefined,
+            }
+            if (this._titleHref) {
+                titleCrumb.href = this._titleHref
+            }
+            if (this._breadcrumbClasses?.length) {
+                titleCrumb.classes = this._breadcrumbClasses
+            }
+            crumbs.push(titleCrumb)
+
+            this.app.theme.renderActions(h1, crumbs)
+        })
+    }
 }