terrier-engine 4.67.10 → 4.67.13

package/tmp/dist/terrier/parts/panel-part.ts

@@ -1,109 +0,0 @@
-import { DivTag, DivTagAttrs } from "tuff-core/html"
-import { PartTag } from "tuff-core/parts"
-import { TagArgs } from "tuff-core/tags"
-import Fragments from "../fragments"
-import CollapsiblePlugin, { CollapsibleOptions, CollapsibleState } from "../plugins/collapsible-plugin"
-import ContentPart from "./content-part"
-
-export type CollapsibleConfig = {
-    collapsed?: boolean
-    chevronSide?: 'left' | 'right'
-}
-/**
- * A part that renders content inside a panel.
- */
-export default abstract class PanelPart<TState> extends ContentPart<TState & { collapsible?: CollapsibleConfig | CollapsibleOptions}> {
-    collapsiblePlugin?: CollapsiblePlugin
-
-    async init() {
-        const collapsibleConfig = this.state.collapsible
-        if (collapsibleConfig) {
-            this.collapsiblePlugin = this.makePlugin(CollapsiblePlugin, { collapsibleState: this.getCollapsibleState(collapsibleConfig) })
-        }
-    }
-
-    getCollapsibleState(collapsibleConfig: CollapsibleConfig | CollapsibleOptions): CollapsibleState {
-        if ('collapsibleState' in collapsibleConfig && collapsibleConfig.collapsibleState) {
-            return collapsibleConfig.collapsibleState
-        } else if ('collapsed' in collapsibleConfig) {
-            return collapsibleConfig.collapsed ? 'collapsed' : 'expanded'
-        } else {
-            return 'expanded'
-        }
-    }
-
-    assignState(state: TState & { collapsible?: CollapsibleConfig | CollapsibleOptions }): boolean {
-        if (state.collapsible) {
-            const collapsibleState = this.getCollapsibleState(state.collapsible)
-            if (this.collapsiblePlugin) {
-                this.collapsiblePlugin.assignState({...this.collapsiblePlugin.state, collapsibleState})
-            } else {
-                this.collapsiblePlugin = this.makePlugin(CollapsiblePlugin, {collapsibleState})
-            }
-        }
-        return super.assignState(state);
-    }
-
-    getLoadingContainer() {
-        return this.element?.getElementsByClassName('tt-panel')[0]
-    }
-
-    protected get panelClasses(): string[] {
-        return []
-    }
-
-    render(parent: PartTag) {
-        const collapsibleConfig = this.state.collapsible
-        parent.div('.tt-panel', panel => {
-            panel.class(...this.panelClasses)
-            if (this._title?.length || this.hasActions('tertiary')) {
-                panel.div('.panel-header', header => {
-                    if (collapsibleConfig && (!('chevronSide' in collapsibleConfig) || collapsibleConfig?.chevronSide == 'left')) {
-                        this.collapsiblePlugin!.renderCollapser(header, collapser => {
-                            this.renderChevronIcon(collapser, this.collapsiblePlugin!.state.collapsibleState!)
-                        })
-                    }
-
-                    header.h2(h2 => {
-                        if (this._icon) {
-                            this.app.theme.renderIcon(h2, this._icon, 'link')
-                        }
-                        h2.div('.title', {text: this._title || 'Call setTitle()'})
-                    })
-                    header.div('.tertiary-actions', actions => {
-                        this.theme.renderActions(actions, this.getActions('tertiary'))
-                    })
-
-                    if (collapsibleConfig && ('chevronSide' in collapsibleConfig) && collapsibleConfig?.chevronSide == 'right') {
-                        this.collapsiblePlugin!.renderCollapser(header, collapser => {
-                            this.renderChevronIcon(collapser, this.collapsiblePlugin!.state.collapsibleState!)
-                        })
-                    }
-                })
-            }
-
-            this.renderPanelContent(panel, wrapper => {
-                wrapper.class('panel-content', ...this.contentClasses)
-                wrapper.div('.content-container', container => {
-                    this.renderContent(container)
-                })
-            })
-
-            Fragments.panelActions(panel, this.getAllActions(), this.theme)
-        })
-    }
-
-    renderPanelContent(parent: PartTag, ...args: TagArgs<DivTag,DivTagAttrs>[]): DivTag {
-        if (this.collapsiblePlugin) {
-            return this.collapsiblePlugin.renderContainer(parent, collapsibleWrapper => {
-                collapsibleWrapper.div(...args)
-            })
-        } else {
-            return parent.div(...args)
-        }
-    }
-
-    renderChevronIcon(parent: PartTag, _collapsibleState: CollapsibleState) {
-        this.app.theme.renderIcon(parent, 'glyp-chevron_down', null)
-    }
-}

package/tmp/dist/terrier/parts/select-field-part.ts

@@ -1,213 +0,0 @@
-import {SelectOption, SelectOptions} from "tuff-core/forms"
-import Messages, { TypedKey } from "tuff-core/messages"
-import {PartTag} from "tuff-core/parts"
-import {Dropdown} from "../dropdowns"
-import Overlays, {AnchorResult} from "../overlays"
-import TerrierPart from "./terrier-part";
-
-/**
- * Replacement part for a 'select' field that retrieves its options from a centralized data source
- * rather than appending them to the DOM. When there are multiple select fields on the same page
- * with the same set of options, this is more efficient than the standard 'select' field.
- */
-
-export type SelectFieldState = {
-    /** the options to add */
-    options: SelectOptions
-    /** the currently selected option value */
-    selected_option: SelectOption
-}
-
-export class SelectFieldPart<T extends SelectFieldState> extends TerrierPart<T> {
-    _toggleDropdownKey = Messages.untypedKey()
-
-    selectedOptionKey = Messages.typedKey<{ selected_option: SelectOption }>()
-
-    async init() {
-        await super.init()
-        this.state.selected_option = this.populateOptionIfBlank(this.state.selected_option)
-        this.onClick(this._toggleDropdownKey, m => {
-            const target = m.event.currentTarget as HTMLElement
-            if (target.classList.contains('disabled')) return
-            this.toggleDropdown(SelectOptionsDropdown, {
-                options: this.state.options,
-                selected_option: this.state.selected_option,
-                select_key: this.selectedOptionKey
-            }, this.element)
-        })
-        this.listenMessage(this.selectedOptionKey, m => {
-            this.onOptionSelected(m.data.selected_option)
-        }, { attach: "passive" })
-    }
-
-    get parentClasses(): Array<string> {
-        return ['tt-select-field', ...super.parentClasses]
-    }
-
-    onOptionSelected(selectedOption: SelectOption) {
-        this.assignState({ ...this.state, selected_option: selectedOption })
-    }
-
-    assignState(state: T) {
-        if (state == this.state) {
-            return false
-        }
-        this.state = state
-        this.state.selected_option = this.populateOptionIfBlank(this.state.selected_option)
-        this.dirty()
-        return true
-    }
-
-    populateOptionIfBlank(option: SelectOption) {
-        if (option.title === undefined) {
-            // consider option groups and flatten the options
-            const options = this.state.options.flatMap((option) => {
-                if ('group' in option) {
-                    return option.options
-                } else return option
-            })
-
-            // find the option where title is empty and use that as the blank option value
-            return options.find((opt) => {
-                if ('value' in opt) {
-                    return opt.value == ''
-                } else return false
-            }) || option
-        } else {
-            return option
-        }
-    }
-
-    render(parent: PartTag) {
-        parent.div({ text: this.state.selected_option.title })
-        parent.emitClick(this._toggleDropdownKey)
-    }
-}
-
-/**
- * Dropdown part to accompany the centralized data select field
- */
-
-export type SelectFieldDropdownState = SelectFieldState & {
-    select_key: TypedKey<{ selected_option: SelectOption }>
-}
-export class SelectOptionsDropdown extends Dropdown<SelectFieldDropdownState> {
-    _clickedOptionKey = Messages.typedKey<{ selected_option: SelectOption }>()
-    _clearDropdownKey = Messages.untypedKey()
-
-    async init() {
-        await super.init()
-        this.onClick(this._clickedOptionKey, m => {
-            this.emitMessage(this.state.select_key, {selected_option: m.data.selected_option})
-            this.clear()
-        })
-
-        this.onClick(this._clearDropdownKey, _ => {
-            this.clear()
-        })
-    }
-
-    get autoClose(): boolean {
-        return true
-    }
-
-    get parentClasses(): Array<string> {
-        return ['tt-select-options-dropdown-container', ...super.parentClasses]
-    }
-
-    renderContent(parent: PartTag) {
-        parent.div('.tt-select-options-dropdown', dropdown => {
-            for (const opt of this.state.options) {
-                if ('group' in opt) {
-                    dropdown.div('.tt-select-options-group-header', {text: opt.group})
-                    for (const groupOpt of opt.options) {
-                        this.renderOption(dropdown, groupOpt)
-                    }
-                } else {
-                    this.renderOption(dropdown, opt)
-                }
-            }
-        })
-        parent.emitClick(this._clearDropdownKey)
-    }
-
-    renderOption(parent: PartTag, opt: SelectOption) {
-        parent.div({text: opt.title}, option => {
-            if (this.state.selected_option.value == opt.value) option.class('selected')
-        }).emitClick(this._clickedOptionKey, {selected_option: opt})
-    }
-
-    update(elem: HTMLElement) {
-        const dropdown = elem.querySelector('.tt-dropdown-content') as HTMLElement
-        if (dropdown) {
-            const selectedElement = dropdown.querySelector('.selected') as HTMLElement
-            if (this.anchorTarget && selectedElement) {
-                this.anchorSelectDropdown(dropdown, this.anchorTarget, selectedElement)
-            }
-        }
-    }
-
-    /**
-     * Anchors a select dropdown on top of a select field. Uses the currently selected child option to determine positioning.
-     * Assumes that all child elements have the same height.
-     * @param dropdown the element to reposition
-     * @param selectField the anchor select field
-     * @param selectedElement the selected option that will be positioned directly above the select field
-     */
-    anchorSelectDropdown(dropdownContainer: HTMLElement, selectField: HTMLElement, selectedElement: HTMLElement) {
-        const dropdown = dropdownContainer.querySelector('.tt-select-options-dropdown') as HTMLElement
-        const dropdownContainerSize = Overlays.getElementSize(dropdownContainer)
-        const selectOptionSize = Overlays.getElementSize(selectedElement)
-
-        const selectedOptionIndex = Array.prototype.indexOf.call(dropdown.childNodes, selectedElement)
-
-        const anchorRect = selectField.getBoundingClientRect()
-        const win = Overlays.getWindowSize()
-
-        const result: AnchorResult = {
-            top: 0,
-            left: anchorRect.x,
-            valid: true
-        }
-
-        Overlays.clampAnchorResult(result, dropdownContainerSize, win)
-
-        if (dropdownContainerSize.width < anchorRect.width) {
-            result.width = anchorRect.width
-        }
-
-        let scrollAmount = selectedElement.offsetTop - anchorRect.top
-        let scrollTop = anchorRect.y + (anchorRect.height / 2) - (selectOptionSize.height / 2)
-
-        if (dropdown.offsetHeight > win.height - anchorRect.top || anchorRect.top - dropdown.offsetHeight < 0) { // attempting to fill the whole window height with the dropdownContainer, so we need to adjust scroll of dropdownContainer
-            if (scrollAmount < 0) { // space above the dropdown
-                dropdown.style.marginTop = `${-scrollAmount}px`
-                scrollTop = 0
-            } else if (dropdown.offsetHeight - scrollAmount < win.height) { // space below the dropdown
-                dropdown.style.marginBottom = `${win.height - (dropdown.offsetHeight - scrollAmount) - 8}px`
-                scrollTop = scrollAmount
-            } else { // fills the whole screen
-                scrollTop = scrollAmount
-            }
-        } else { // dropdown is less tall than the window
-            result.top = anchorRect.y - (selectOptionSize.height * selectedOptionIndex) - 4
-            if (this.state.options.find((o) => 'group' in o)) {
-                result.top += selectOptionSize.height
-            }
-        }
-
-        let styleString = ""
-        for (const key of ['top', 'left', 'width', 'height'] as const) {
-            if (result[key] != null) {
-                styleString += `${key}: ${result[key]}px;`
-            }
-        }
-
-        dropdownContainer.setAttribute('style', styleString)
-        dropdownContainer.scrollTo({top: scrollTop})
-
-        dropdownContainer.classList.add('show')
-        selectedElement.classList.add('hover')
-        selectedElement.addEventListener('mouseleave', () => selectedElement.classList.remove('hover'))
-    }
-}

package/tmp/dist/terrier/parts/terrier-form-part.ts

@@ -1,23 +0,0 @@
-import {FormPart, FormPartData} from "tuff-core/forms"
-import Theme from "../theme"
-import {TerrierApp} from "../app"
-
-
-/**
- * Form part that implements the Terrier platform methods like `app` and `theme`.
- */
-export default abstract class TerrierFormPart<TState extends FormPartData> extends FormPart<TState> {
-
-    get app(): TerrierApp<any> {
-        return this.root as unknown as TerrierApp<any> // this should always be true
-    }
-
-    get theme(): Theme {
-        return this.app.theme
-    }
-
-
-    get parentClasses(): Array<string> {
-        return ['tt-form']
-    }
-}

package/tmp/dist/terrier/parts/terrier-part.ts

@@ -1,206 +0,0 @@
-import { Part, PartConstructor, PartTag } from "tuff-core/parts"
-import {TerrierApp} from "../app"
-import Loading from "../loading"
-import Theme, {IconName} from "../theme"
-import Toasts, {ToastOptions} from "../toasts"
-import {DbErrors} from "../db-client"
-import * as inflection from "inflection"
-import {Dropdown} from "../dropdowns";
-
-/**
- * Base class for ALL parts in a Terrier application.
- */
-export default abstract class TerrierPart<TState> extends Part<TState> {
-
-    get app(): TerrierApp<any> {
-        return this.root as TerrierApp<any>
-    }
-
-    get theme(): Theme {
-        return this.app.theme
-    }
-
-    /// Loading
-
-    /**
-     * This can be overloaded if the loading overlay should go
-     * somewhere other than the part's root element.
-     */
-    getLoadingContainer(): Element | null | undefined {
-        return this.element
-    }
-
-    protected _isLoading = false
-
-
-    /**
-     * Shows the loading animation on top of the part.
-     */
-    startLoading() {
-        this._isLoading = true
-        const elem = this.getLoadingContainer()
-        if (!elem) {
-            return
-        }
-        Loading.showOverlay(elem, this.theme)
-    }
-
-    /**
-     * Removes the loading animation from the part.
-     */
-    stopLoading() {
-        this._isLoading = false
-        const elem = this.getLoadingContainer()
-        if (!elem) {
-            return
-        }
-        Loading.removeOverlay(elem)
-    }
-
-    /**
-     * Shows the loading overlay until the given function completes (either returns successfully or throws an exception)
-     * @param func
-     */
-    showLoading(func: () => void): void
-    showLoading(func: () => Promise<void>): Promise<void>
-    showLoading(func: () => void | Promise<void>): void | Promise<void>  {
-        this.startLoading()
-        let stopImmediately = true
-        try {
-            const res = func()
-            if (res) {
-                stopImmediately = false
-                return res.finally(() => {
-                    this.stopLoading()
-                })
-            }
-        } finally {
-            if (stopImmediately) {
-                this.stopLoading()
-            }
-        }
-    }
-
-    update(elem: HTMLElement) {
-        super.update(elem);
-        if (!this._isLoading) return
-
-        const loadingContainer = this.getLoadingContainer()
-        if (!loadingContainer) return
-
-        const existingOverlay = Loading.getOverlay(elem)
-        const existingLoadingContainer = existingOverlay?.parentElement
-
-        if (
-            existingLoadingContainer &&
-            existingLoadingContainer != loadingContainer &&
-            existingLoadingContainer.contains(loadingContainer)
-        ) {
-            // If there's an existing overlay on this part, but on an ancestor of our loading container,
-            // remove the existing overlay so our loading container gets the overlay.
-            // This case happens most frequently when the loading container doesn't yet exist on first render, but
-            // does exist on subsequent renders. In that case, we prefer the more specific loading container.
-            Loading.removeOverlay(elem)
-        }
-
-        Loading.showOverlay(loadingContainer, this.theme)
-    }
-
-
-    /// Errors
-
-    renderErrorBubble(parent: PartTag, errors: DbErrors<any>) {
-        parent.div('.tt-bubble.alert', bubble => {
-            bubble.ul(ul => {
-                for (const kv of Object.entries(errors)) {
-                    const name = inflection.titleize(kv[0])
-                    ul.li().text(`${name} ${kv[1]}`)
-                }
-            })
-        })
-    }
-
-
-    /// Toasts
-
-    /**
-     * Shows a toast message in a bubble in the upper right corner.
-     * @param message the message text
-     * @param options
-     */
-    showToast(message: string, options: ToastOptions) {
-        Toasts.show(message, options, this.theme)
-    }
-
-    /**
-     * Show an alert toast with the given message.
-     * @param message
-     * @param icon
-     */
-    alertToast(message: string, icon?: IconName) {
-        this.showToast(message, {icon, color: 'alert'})
-    }
-
-    /**
-     * Show an info toast with the given message.
-     * @param message
-     * @param icon
-     */
-    infoToast(message: string, icon?: IconName) {
-        this.showToast(message, {icon, color: 'primary'})
-    }
-
-    /**
-     * Show a success toast with the given message.
-     * @param message
-     * @param icon
-     */
-    successToast(message: string, icon?: IconName) {
-        this.showToast(message, {icon, color: 'success'})
-    }
-
-
-    /// Dropdowns
-
-    /**
-     * Shows the given dropdown part on the page.
-     * It's generally better to call `toggleDropdown` instead so that the dropdown will be
-     * hidden upon a subsequent click on the target.
-     * @param constructor a constructor for a dropdown part
-     * @param state the dropdown's state
-     * @param target the target element around which to show the dropdown
-     */
-    makeDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
-        constructor: PartConstructor<DropdownType, DropdownStateType>,
-        state: NoInfer<DropdownStateType>,
-        target: EventTarget | null) {
-        const dropdown = this.app.addOverlay(constructor, state, 'dropdown')
-        dropdown.parentPart = this
-        if (target && target instanceof HTMLElement) {
-            dropdown.anchor(target)
-            this.app.lastDropdownTarget = target
-        }
-    }
-
-    clearDropdowns() {
-        this.app.clearDropdowns()
-    }
-
-    /**
-     * Calls `makeDropdown` only if there's not a dropdown currently originating from the target.
-     * @param constructor a constructor for a dropdown part
-     * @param state the dropdown's state
-     * @param target the target element around which to show the dropdown
-     */
-    toggleDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
-        constructor: PartConstructor<DropdownType, DropdownStateType>,
-        state: NoInfer<DropdownStateType>,
-        target: EventTarget | null) {
-        if (target && target instanceof HTMLElement && target == this.app.lastDropdownTarget) {
-            this.clearDropdowns()
-        } else {
-            this.makeDropdown(constructor, state, target)
-        }
-    }
-
-}

package/tmp/dist/terrier/plugins/collapsible-plugin.ts

@@ -1,118 +0,0 @@
-import { AnchorTag, AnchorTagAttrs, DivTag, DivTagAttrs } from "tuff-core/html"
-import Messages from "tuff-core/messages"
-import { PartTag } from "tuff-core/parts"
-import { PartPlugin } from "tuff-core/plugins"
-import Strings from "tuff-core/strings"
-import { InlineStyle, TagArgs } from "tuff-core/tags"
-
-export type CollapsibleState = 'expanded' | 'collapsed'
-export type CollapsibleOptions = {
-    collapsibleState?: CollapsibleState
-    collapserTransitionOptions?: TransitionOptions
-    containerTransitionOptions?: TransitionOptions
-}
-export type TransitionOptions = {
-    css?: InlineStyle
-    durationMs?: number
-}
-
-export default class CollapsiblePlugin extends PartPlugin<CollapsibleOptions> {
-    transitionKey = Messages.typedKey<{ forceState?: CollapsibleState }>()
-
-    async init() {
-        this.state.collapsibleState ??= 'expanded'
-        this.state.collapserTransitionOptions ??= {}
-        this.state.collapserTransitionOptions.css ??= { rotate: '-0.25turn' }
-
-        this.part.onClick(this.transitionKey, () => {
-            this.toggleState()
-        })
-    }
-
-    toggleState(forceState?: CollapsibleState) {
-        if (this.state.collapsibleState === forceState) return
-        if (forceState) {
-            this.state.collapsibleState = forceState
-        } else {
-            this.state.collapsibleState = this.state.collapsibleState == 'collapsed' ? 'expanded' : 'collapsed'
-        }
-        this.part.stale()
-    }
-
-    renderCollapser(parent: PartTag, ...args: TagArgs<AnchorTag,AnchorTagAttrs>[]): AnchorTag {
-        const collapser = parent.child(AnchorTag, 'a', '.tt-collapser', ...args)
-            .dataAttr('collapsibleState', this.state.collapsibleState)
-            .dataAttr('collapsiblePluginId', this.id)
-
-        if (this.state.collapsibleState == 'collapsed') {
-            collapser.css(this.state.collapserTransitionOptions!.css!)
-        }
-
-        collapser.css({ transitionProperty: Object.keys(this.state.collapserTransitionOptions!.css!).join(", ") })
-        if (this.state.collapserTransitionOptions?.durationMs) {
-            collapser.cssVar('--tt-animation-duration', `${this.state.collapserTransitionOptions.durationMs}ms`)
-        }
-
-        collapser.emitClick(this.transitionKey, {})
-        return collapser
-    }
-
-    renderContainer(parent: PartTag, ...args: TagArgs<DivTag,DivTagAttrs>[]): DivTag {
-        const container = parent.div('.tt-collapsible-container')
-            .dataAttr('collapsible-state', this.state.collapsibleState)
-            .dataAttr('collapsiblePluginId', this.id)
-
-        container.child(DivTag, 'div', '.tt-collapsible-content', ...args)
-
-        const transitionProperties = ['grid-template-rows']
-        if (this.state.containerTransitionOptions?.css) {
-            transitionProperties.push(...Object.keys(this.state.containerTransitionOptions.css).map(Strings.ropeCase))
-
-            if (this.state.collapsibleState == 'collapsed') {
-                container.css(this.state.containerTransitionOptions.css)
-            }
-        }
-        container.css({ transitionProperty: transitionProperties.join(", ") })
-        if (this.state.containerTransitionOptions?.durationMs) {
-            container.cssVar('--tt-animation-duration', `${this.state.containerTransitionOptions.durationMs}ms`)
-        }
-        return container
-    }
-
-    update(elem: HTMLElement) {
-        super.update(elem)
-
-        const containers = elem.querySelectorAll<HTMLElement>(`.tt-collapsible-container[data-collapsible-plugin-id=${this.id}]`)
-        const collapsers = elem.querySelectorAll<HTMLElement>(`.tt-collapser[data-collapsible-plugin-id=${this.id}]`)
-
-        containers.forEach(container => {
-            container.dataset.collapsibleState = this.state.collapsibleState
-            if (this.state.containerTransitionOptions?.css && this.state.collapsibleState == 'collapsed') {
-                setCssProperties(container, this.state.containerTransitionOptions.css)
-            } else if (this.state.containerTransitionOptions?.css) {
-                unsetCssProperties(container, Object.keys(this.state.containerTransitionOptions.css))
-            }
-        })
-
-        collapsers.forEach(collapser => {
-            collapser.dataset.collapsibleState = this.state.collapsibleState
-            if (this.state.collapsibleState == 'collapsed') {
-                setCssProperties(collapser, this.state.collapserTransitionOptions!.css!)
-            } else {
-                unsetCssProperties(collapser, Object.keys(this.state.collapserTransitionOptions!.css!))
-            }
-        })
-    }
-}
-
-function setCssProperties(elem: HTMLElement, properties: InlineStyle) {
-    for (const [prop, value] of Object.entries(properties)) {
-        elem.style.setProperty(Strings.ropeCase(prop), value as string)
-    }
-}
-
-function unsetCssProperties(elem: HTMLElement, properties: string[]) {
-    for (const prop of properties) {
-        elem.style.removeProperty(Strings.ropeCase(prop))
-    }
-}