terrier-engine 4.0.21 → 4.3.0

package/app.ts

@@ -1,14 +1,14 @@
 import { Logger } from "tuff-core/logging"
-import {Part, PartParent} from "tuff-core/parts"
-import {TerrierPart} from "./parts"
+import {Part, PartConstructor, PartParent} from "tuff-core/parts"
+import TerrierPart from "./parts/terrier-part"
 import Tooltips from "./tooltips"
 import Lightbox from "./lightbox"
+import Theme from "./theme"
+import {ModalPart, ModalStackPart} from "./modals"
+import {OverlayLayerType, OverlayPart} from "./overlays"
 
 // @ts-ignore
 import logoUrl from './images/optimized/terrier-hub-logo-light.svg'
-import Theme, {ThemeType} from "./theme"
-import {ModalPart, ModalStackPart} from "./modals"
-import {OverlayLayer, OverlayPart} from "./overlays"
 
 const log = new Logger('App')
 Logger.level = 'info'
@@ -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> {
-
-    _theme!: TTheme
+export abstract class TerrierApp<TState> extends TerrierPart<TState> {
 
-    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,42 +40,56 @@ 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')
     }
 
 
     /// Overlays
 
-    makeOverlay<OverlayType extends Part<StateType>, StateType>(
+    addOverlay<OverlayType extends Part<StateType>, StateType extends {}>(
         constructor: { new(p: PartParent, id: string, state: StateType): OverlayType; },
         state: StateType,
-        layer: OverlayLayer
-    ): OverlayType {
-        return this.overlayPart.makeLayer(constructor, state, layer)
+        type: OverlayLayerType
+    ) {
+        return this.overlayPart.pushLayer(constructor, state, type)
     }
 
-    clearOverlay(layer: OverlayLayer) {
-        this.overlayPart.clearLayer(layer)
-        this.lastDropdownTarget = undefined
+    removeOverlay<StateType extends {}>(state: StateType): boolean {
+        return this.overlayPart.removeLayer(state)
+    }
+
+    popOverlay(type?: OverlayLayerType) {
+        this.overlayPart.popLayer(type)
     }
 
     clearOverlays() {
         this.overlayPart.clearAll()
     }
 
+    removeDropdown<StateType>(state: StateType): boolean {
+        this.lastDropdownTarget = undefined
+        return this.overlayPart.removeLayer(state)
+    }
+
+    clearDropdowns() {
+        this.lastDropdownTarget = undefined
+        this.popOverlay('dropdown')
+    }
+
 
     lastDropdownTarget?: HTMLElement
 
 
     /// Modals
 
-    showModal<ModalType extends ModalPart<StateType, TThemeType, TSelf, TTheme>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
-        const modalStack =
-            (this.overlayPart.parts.modal as ModalStackPart<TThemeType, TSelf, TTheme, ModalType>)
-                ?? this.makeOverlay(ModalStackPart, {}, 'modal')
+    showModal<ModalType extends ModalPart<StateType>, StateType>(
+        constructor: PartConstructor<ModalType, StateType>,
+        state: StateType
+    ): ModalType {
+        const modalStack = this.overlayPart.getOrCreateLayer(ModalStackPart, {}, 'modal')
         const modal = modalStack.pushModal(constructor, state)
         modalStack.dirty()
-        return modal
+        return modal as 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"
+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,
-    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
 
@@ -29,12 +23,20 @@ export abstract class Dropdown<
         return ['tt-dropdown', ...super.parentClasses]
     }
 
+    /**
+     * Override and return true to have the dropdown close when the user clicks anywhere outside of it.
+     */
+    get autoClose(): boolean {
+        return false
+    }
+
     // the computed absolute position of the
     left = 0
     top = 0
 
     async init() {
-        this.onClick(clearDropdownKey, _ => {
+        this.onClick(clearDropdownKey, m => {
+            log.info("Clearing dropdown", m)
             this.clear()
         })
     }
@@ -44,11 +46,15 @@ export abstract class Dropdown<
      */
     clear() {
         log.info("Clearing dropdown")
-        this.app.clearOverlay('dropdown')
+        this.app.removeDropdown(this.state)
     }
 
     render(parent: PartTag) {
-        parent.div('.dropdown-content', content => {
+        if (this.autoClose) {
+            parent.div('.tt-dropdown-backdrop')
+                .emitClick(clearDropdownKey)
+        }
+        parent.div('.tt-dropdown-content', content => {
             this.renderContent(content)
         })
     }
@@ -71,7 +77,7 @@ export abstract class Dropdown<
     }
 
     update(_elem: HTMLElement) {
-        const content = _elem.querySelector('.dropdown-content')
+        const content = _elem.querySelector('.tt-dropdown-content')
         if (this.anchorTarget && content) {
             log.info(`Anchoring dropdown`, content, this.anchorTarget)
             Overlays.anchorElement(content as HTMLElement, this.anchorTarget)
@@ -84,12 +90,11 @@ 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
+    }
 
     get parentClasses(): Array<string> {
         return ['tt-actions-dropdown', ...super.parentClasses]
@@ -101,7 +106,7 @@ export class ActionsDropdown<
         const keys = unique(this.state.map(action => action.click?.key).filter(Objects.notNull))
         for (const key of keys) {
             this.onClick(key, m => {
-                this.app.clearOverlay('dropdown')
+                this.clear()
                 log.info(`Re-emitting ${key.id} message`, m, this.parentPart)
                 if (this.parentPart) {
                     this.parentPart.emit('click', key, m.event, m.data)

package/forms.ts

@@ -0,0 +1,33 @@
+import {SelectOptions} from "tuff-core/forms"
+import {strings} from "tuff-core"
+
+////////////////////////////////////////////////////////////////////////////////
+// Options
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Computes a `SelectOptions` array by titleizing the values in a plain string array.
+ * @param opts
+ */
+function titleizeOptions(opts: string[], blank?: string): SelectOptions {
+    const out = opts.map(c => {
+        return {value: c, title: strings.titleize(c)}
+    })
+    if (blank != undefined) { // don't test length, allow it to be a blank string
+        out.unshift({title: blank, value: ''})
+    }
+    return out
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Forms = {
+    titleizeOptions
+}
+
+export default Forms
+
+

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 {ActionLevel, PanelActions} from "./parts"
+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
     }
@@ -102,16 +102,18 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
  * Render the primary and secondary actions to the bottom of a panel
  * @param panel the .panel container
  * @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 => {
-            actionsContainer.div('.secondary-actions', secondaryContainer => {
-                theme.renderActions(secondaryContainer, actions.secondary, {iconColor: 'white', defaultClass: 'link'})
-            })
-            actionsContainer.div('.primary-actions', primaryContainer => {
-                theme.renderActions(primaryContainer, actions.primary, {iconColor: 'white'})
-            })
+            for (const level of ['secondary', 'primary'] as const) {
+                const levelActions = actions[level]
+                if (!levelActions?.length) continue;
+                actionsContainer.div(`.${level}-actions`, container => {
+                    theme.renderActions(container, levelActions, { iconColor: 'white', defaultClass: level })
+                })
+            }
         })
     }
 }
@@ -120,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)
     }
 
@@ -162,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
@@ -180,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
@@ -256,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)
     }
 
@@ -305,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)
 }
 
@@ -314,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)
 }
 
@@ -322,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})
@@ -344,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})
@@ -354,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')