terrier-engine 4.1.0 → 4.3.0

package/app.ts

@@ -3,7 +3,7 @@ import {Part, PartConstructor, PartParent} from "tuff-core/parts"
 import TerrierPart from "./parts/terrier-part"
 import Tooltips from "./tooltips"
 import Lightbox from "./lightbox"
-import Theme, {ThemeType} from "./theme"
+import Theme from "./theme"
 import {ModalPart, ModalStackPart} from "./modals"
 import {OverlayLayerType, OverlayPart} from "./overlays"
 
@@ -16,22 +16,18 @@ Logger.level = 'info'
 /**
  * Main application part that renders the entire page.
  */
-export abstract class TerrierApp<
-    TThemeType extends ThemeType,
-    TSelf extends TerrierApp<TThemeType, TSelf, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends TerrierPart<{theme: TTheme}, TThemeType, TSelf, TTheme> {
+export abstract class TerrierApp<TState> extends TerrierPart<TState> {
 
-    _theme!: TTheme
-
-    get theme(): TTheme {
+    _theme!: Theme
+    
+    get theme(): Theme {
         return this._theme
     }
 
     overlayPart!: OverlayPart
 
     async init() {
-        this._theme = this.state.theme
+        this._theme = new Theme()
         this.overlayPart = this.makePart(OverlayPart, {})
         log.info("Initialized")
     }
@@ -44,7 +40,7 @@ export abstract class TerrierApp<
     update(root: HTMLElement) {
         log.info(`Update`, root)
         Tooltips.init(root)
-        Lightbox.init<TThemeType, TSelf, TTheme>(root, this as unknown as TSelf, 'body-content')
+        Lightbox.init(root, this, 'body-content')
     }
 
 
@@ -70,7 +66,7 @@ export abstract class TerrierApp<
         this.overlayPart.clearAll()
     }
 
-    removeDropdown<StateType extends {}>(state: StateType): boolean {
+    removeDropdown<StateType>(state: StateType): boolean {
         this.lastDropdownTarget = undefined
         return this.overlayPart.removeLayer(state)
     }
@@ -86,7 +82,7 @@ export abstract class TerrierApp<
 
     /// Modals
 
-    showModal<ModalType extends ModalPart<StateType, TThemeType, TSelf, TTheme>, StateType>(
+    showModal<ModalType extends ModalPart<StateType>, StateType>(
         constructor: PartConstructor<ModalType, StateType>,
         state: StateType
     ): ModalType {

package/dropdowns.ts

@@ -1,12 +1,11 @@
-import { Logger } from "tuff-core/logging"
-import { untypedKey } from "tuff-core/messages"
-import { unique } from "tuff-core/arrays"
+import {Logger} from "tuff-core/logging"
+import {untypedKey} from "tuff-core/messages"
+import {unique} from "tuff-core/arrays"
 import {PartTag, StatelessPart} from "tuff-core/parts"
 import Overlays from "./overlays"
 import TerrierPart from "./parts/terrier-part"
 import Objects from "tuff-core/objects"
-import Theme, {Action, ThemeType} from "./theme"
-import {TerrierApp} from "./app"
+import {Action} from "./theme"
 
 const log = new Logger('Dropdowns')
 
@@ -16,12 +15,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<
-    TState extends {},
-    TThemeType extends ThemeType,
-    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends TerrierPart<TState, TThemeType, TApp, TTheme> {
+export abstract class Dropdown<TState> extends TerrierPart<TState> {
 
     parentPart?: StatelessPart
 
@@ -96,12 +90,7 @@ export abstract class Dropdown<
 /**
  * A concrete dropdown part that shows a list of actions.
  */
-export class ActionsDropdown<
-    TThemeType extends ThemeType,
-    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends Dropdown<Array<Action<TThemeType>>, TThemeType, TApp, TTheme> {
-
+export class ActionsDropdown extends Dropdown<Array<Action>> {
 
     get autoClose(): boolean {
         return true

package/fragments.ts

@@ -1,14 +1,14 @@
 import {PartTag} from "tuff-core/parts"
 import {AnchorTagAttrs, HtmlParentTag} from "tuff-core/html"
-import Theme, {Action, Packet, ThemeType} from "./theme"
+import Theme, {Action, ColorName, IconName, Packet} from "./theme"
 import {ActionLevel, PanelActions} from "./parts/content-part"
 
 /**
  * Base class for Panel and Card fragment builders.
  */
-abstract class ContentFragment<TT extends ThemeType> {
-    protected constructor(readonly prefix: string, readonly theme: Theme<TT>) {
-
+abstract class ContentFragment {
+    protected constructor(readonly prefix: string, readonly theme: Theme) {
+        
     }
 
     protected _title?: string
@@ -17,18 +17,18 @@ abstract class ContentFragment<TT extends ThemeType> {
      * @param t the title
      * @param icon the optional icon
      */
-    title(t: string, icon?: TT['icons']) {
+    title(t: string, icon?: IconName) {
         this._title = t
         this._icon = icon
         return this
     }
 
-    protected _icon?: TT['icons']
+    protected _icon?: IconName
 
     /**
      * @param i the panel icon
      */
-    icon(i: TT['icons']) {
+    icon(i: IconName) {
         this._icon = i
         return this
     }
@@ -46,17 +46,17 @@ abstract class ContentFragment<TT extends ThemeType> {
 }
 
 
-export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
-    constructor(theme: Theme<TT>) {
+export class PanelFragment extends ContentFragment {
+    constructor(theme: Theme) {
         super('tt-panel', theme)
     }
 
     /// Actions
 
     actions = {
-        primary: Array<Action<TT>>(),
-        secondary: Array<Action<TT>>(),
-        tertiary: Array<Action<TT>>()
+        primary: Array<Action>(),
+        secondary: Array<Action>(),
+        tertiary: Array<Action>()
     }
 
     /**
@@ -64,7 +64,7 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
      * @param action the action to add
      * @param level whether it's a primary, secondary, or tertiary action
      */
-    addAction(action: Action<TT>, level: ActionLevel = 'primary') {
+    addAction(action: Action, level: ActionLevel = 'primary') {
         this.actions[level].push(action)
         return this
     }
@@ -104,7 +104,7 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
  * @param actions the actions
  * @param theme the theme with which to render actions
  */
-function panelActions<TT extends ThemeType>(panel: PartTag, actions: PanelActions<TT>, theme: Theme<TT>) {
+function panelActions(panel: PartTag, actions: PanelActions, theme: Theme) {
     if (actions.primary.length || actions.secondary.length) {
         panel.div('.panel-actions', actionsContainer => {
             for (const level of ['secondary', 'primary'] as const) {
@@ -122,8 +122,8 @@ function panelActions<TT extends ThemeType>(panel: PartTag, actions: PanelAction
 /**
  * Cards are like panels except they don't have any actions and are themselves an anchor.
  */
-class CardFragment<TT extends ThemeType> extends ContentFragment<TT> {
-    constructor(theme: Theme<TT>) {
+class CardFragment extends ContentFragment {
+    constructor(theme: Theme) {
         super('tt-card', theme)
     }
 
@@ -164,15 +164,15 @@ class CardFragment<TT extends ThemeType> extends ContentFragment<TT> {
 }
 
 
-class LabeledValueFragment<TT extends ThemeType> extends ContentFragment<TT> {
+class LabeledValueFragment extends ContentFragment {
 
-    constructor(theme: Theme<TT>) {
+    constructor(theme: Theme) {
         super('tt-labeled-value', theme)
     }
 
     private _value?: string
-    private _valueIcon?: TT['icons']
-    private _valueIconColor?: TT['colors'] | null
+    private _valueIcon?: IconName
+    private _valueIconColor?: ColorName | null
     private _valueClass?: string[]
 
     private _href?: string
@@ -182,7 +182,7 @@ class LabeledValueFragment<TT extends ThemeType> extends ContentFragment<TT> {
 
     private _tooltip?: string
 
-    value(value: string, icon?: TT['icons'], iconColor?: TT['colors'] | null) {
+    value(value: string, icon?: IconName, iconColor?: ColorName | null) {
         this._value = value
         this._valueIcon = icon
         this._valueIconColor = iconColor
@@ -258,10 +258,10 @@ type ListValueDefinition = {
     tooltip?: string
 }
 
-class LabeledListFragment<TT extends ThemeType> extends ContentFragment<TT> {
+class LabeledListFragment extends ContentFragment {
     private _values?: ListValueDefinition[]
 
-    constructor(theme: Theme<TT>) {
+    constructor(theme: Theme) {
         super('tt-labeled-list', theme)
     }
 
@@ -307,7 +307,7 @@ class LabeledListFragment<TT extends ThemeType> extends ContentFragment<TT> {
  * Creates a new card fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function card<TT extends ThemeType>(theme: Theme<TT>) {
+function card(theme: Theme) {
     return new CardFragment(theme)
 }
 
@@ -316,7 +316,7 @@ function card<TT extends ThemeType>(theme: Theme<TT>) {
  * Creates a new panel fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function panel<TT extends ThemeType>(theme: Theme<TT>) {
+function panel(theme: Theme) {
     return new PanelFragment(theme)
 }
 
@@ -324,18 +324,18 @@ function panel<TT extends ThemeType>(theme: Theme<TT>) {
  * Creates a new labeled value fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function labeledValue<TT extends ThemeType>(theme: Theme<TT>) {
+function labeledValue(theme: Theme) {
     return new LabeledValueFragment(theme)
 }
 
-function labeledList<TT extends ThemeType>(theme: Theme<TT>) {
+function labeledList(theme: Theme) {
     return new LabeledListFragment(theme)
 }
 
 /**
  * Create a new button in the parent.
  */
-function button<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title?: string, icon?: TT['icons'], iconColor: TT['colors'] | null = null) {
+function button(parent: PartTag, theme: Theme, title?: string, icon?: IconName, iconColor: ColorName | null = null) {
     return parent.a('.tt-button', button => {
         if (icon) theme.renderIcon(button, icon, iconColor)
         if (title?.length) button.div('.title', {text: title})
@@ -346,7 +346,7 @@ function button<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title?:
  * Create a new simple value display in the parent.
  * This is just some text with an optional icon that doesn't have a separate label.
  */
-function simpleValue<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons'], iconColor: TT['colors'] | null = 'link') {
+function simpleValue(parent: PartTag, theme: Theme, title: string, icon?: IconName, iconColor: ColorName | null = 'link') {
     return parent.div('.tt-simple-value.shrink', button => {
         if (icon) theme.renderIcon(button, icon, iconColor)
         button.div('.title', {text: title})
@@ -356,7 +356,7 @@ function simpleValue<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, ti
 /**
  * Helper to create a heading with an optional icon.
  */
-function simpleHeading<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons']) {
+function simpleHeading(parent: PartTag, theme: Theme, title: string, icon?: IconName) {
     return parent.h3('.shrink', heading => {
         if (icon) {
             theme.renderIcon(heading, icon, 'link')