Package dev.fritz2.components

Types

AlertComponent

open class AlertComponent : Component<Unit>

A component to display an alert consisting of an icon, title and description.

AppFrameComponent

@ExperimentalCoroutinesApi()

open class AppFrameComponent : Component<Unit>

This class combines the configuration and the core rendering of the app-frame.

CheckboxComponent

open class CheckboxComponent(value: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties

This class combines the configuration and the core styling of a checkbox.

CheckboxGroupComponent

open class CheckboxGroupComponent<T>(items: List<T>, values: Store<List<T>>?) : Component<Unit> , InputFormProperties, SeverityProperties

This class combines the configuration and the core styling of a checkbox group.

CloseButtonMixin

class CloseButtonMixin(closeButtonPrefix: String, defaultStyle: Style<BasicParams>) : CloseButtonProperty

Default implementation of the CloseButtonProperty interface in order to apply this as mixin for a component

CloseButtonProperty

interface CloseButtonProperty

This interface offers some convenience properties for adding a close button to a component.

Component

interface Component<T>

Marker interface that every component should implement, so that the central render method appears in a unified way throughout this framework.

ComponentProperty

class ComponentProperty<T>(value: T)

Generic container for modeling a property for a component class.

ControlGroupRenderer

class ControlGroupRenderer(component: FormControlComponent) : ControlRenderer

ControlRenderer

interface ControlRenderer

DefaultOverlay

class DefaultOverlay(method: OverlayMethod, styling: Style<BasicParams>) : Overlay

DynamicComponentProperty

class DynamicComponentProperty<T>(values: Flow<T>)

Generic container for modeling a property for a component class that could be either consist on a value or on a Flow of a value.

ElementMixin

class ElementMixin<T> : ElementProperties<T>

Default implementation of the ElementProperties interface in order to apply this as mixin for a component

ElementProperties

interface ElementProperties<T>

An interface for exposing an HTML element.

EventMixin

class EventMixin<T : Element> : EventProperties<T>

Default implementation of the EventProperties interface in order to apply this as mixin for a component

EventProperties

interface EventProperties<T : Element>

An interface for exposing the events of a component.

FileReadingStrategy

typealias FileReadingStrategy = (File) -> Flow<File>

function for reading the jsFile to a File with File.content as a String

FileSelectionBaseComponent

abstract class FileSelectionBaseComponent

This abstract class is the base configuration for file inputs.

FormControlComponent

open class FormControlComponent : Component<Unit> , FormProperties

This component class manages the configuration of a formControl and some render centric functionalities.

FormMixin

open class FormMixin : FormProperties

Default implementation of the FormProperties interface in order to apply this as mixin for a component

FormProperties

interface FormProperties

This interface add typical state properties for en- or disabling form components.

IconComponent

open class IconComponent : Component<Unit> , EventProperties<SVGElement>

Class for configuring the appearance of an icon.

InputFieldComponent

open class InputFieldComponent(valueStore: Store<String>?) : Component<Unit> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties

This class deals with the configuration of an input element.

InputFormMixin

class InputFormMixin : FormMixin, InputFormProperties

Default implementation of the InputFormProperties interface in order to apply this as mixin for a component

InputFormProperties

interface InputFormProperties : FormProperties

This interface offers a convenience property for input form based components.

LineUpComponent

class LineUpComponent : StackComponent

This component class just defines the core styling in order to render child items within a flexBox layout horizontally.

ManagedComponent

interface ManagedComponent<T>

This interface marks

ModalComponent

open class ModalComponent(build: ModalComponent.(SimpleHandler<Unit>) -> Unit) : ManagedComponent<SimpleHandler<Unit>> , CloseButtonProperty

This component class offers primarily some configuration options for modal dialogs.

ModalRenderContext

typealias ModalRenderContext = RenderContext.(level: Int) -> Div

MultiFileSelectionComponent

open class MultiFileSelectionComponent : FileSelectionBaseComponent, Component<Flow<List<File>>>

Specific component for handling the upload for an arbitrary amount of files.

MultiSelectionStore

open class MultiSelectionStore<T> : RootStore<List<T>>

This store can be used for components with an internal store that has to deal with a List of some type T.

NavbarComponent

open class NavbarComponent : Component<Unit>

NullableDynamicComponentProperty

class NullableDynamicComponentProperty<T>(values: Flow<T?>)

Generic container for modeling a property for a component class that could be either consist on a nullable value or on a Flow of a nullable value.

Overlay

interface Overlay

OverlayMethod

enum OverlayMethod : Enum<OverlayMethod>

PopoverComponent

open class PopoverComponent : Component<Unit> , CloseButtonProperty

Class for configuring the appearance of a PopoverComponent.

PushButtonComponent

open class PushButtonComponent : Component<Unit> , EventProperties<HTMLButtonElement> , ElementProperties<Button> , FormProperties

This class combines the configuration and the core rendering of a button.

RadioComponent

open class RadioComponent(value: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties

This class combines the configuration and the core styling of a switch.

RadioGroupComponent

open class RadioGroupComponent<T>(items: List<T>, value: Store<T>?) : Component<Unit> , InputFormProperties, SeverityProperties

This class combines the configuration and the core styling of a radio group.

SeverityMixin

class SeverityMixin : SeverityProperties

Default implementation of the SeverityProperties interface in order to apply this as mixin for a component

SeverityProperties

interface SeverityProperties

This interface defines convenience properties and helper functions to easily apply Severity based behaviour to a component.

SingleControlRenderer

class SingleControlRenderer(component: FormControlComponent) : ControlRenderer

SingleFileSelectionComponent

open class SingleFileSelectionComponent : FileSelectionBaseComponent, Component<Flow<File>>

Specific component for handling the upload for one file at once.

SingleSelectionStore

open class SingleSelectionStore : RootStore<Int?>

This store can be used for components with an internal store that has to deal with a single element selection from a collection of predefined values (like for a selectField or radioGroup component)It is based upon the index of an item from the list represented by the Int type.

SpinnerComponent

open class SpinnerComponent : Component<Unit> , EventProperties<HTMLDivElement>

This component class offers different configuration values of a spinner.

StackComponent

abstract class StackComponent : Component<Div> , EventProperties<HTMLDivElement>

This base component class for stacking components offer some configuration properties.

StackUpComponent

class StackUpComponent : StackComponent

This component class just defines the core styling in order to render child items within a flexBox layout vertically.

SwitchComponent

open class SwitchComponent(value: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties

This class combines the configuration and the core styling of a switch.

TextAreaComponent

open class TextAreaComponent(valueStore: Store<String>?) : Component<Unit> , EventProperties<HTMLTextAreaElement> , ElementProperties<TextArea> , InputFormProperties, SeverityProperties

This class handles the configuration of an textarea elementThe TextArea can be configured for the following aspects:

the size of the element
the direction of resizing
some predefined styles
a default value
the base options of the HTML input element can be set. Attributes

For a detailed explanation and examples of usage have a look at the textArea function !

ToastComponent

open class ToastComponent : ManagedComponent<Unit> , CloseButtonProperty

This class combines the configuration and the core styling of a toast.

Functions

alert

fun RenderContext.alert(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "alert", build: AlertComponent.() -> Unit)

Creates an alert and renders it right away.

appFrame

@ExperimentalCoroutinesApi()

fun RenderContext.appFrame(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "app", build: AppFrameComponent.() -> Unit = {})

This component implements a standard responsive layout for web-apps.

asAlert

fun ComponentValidationMessage.asAlert(renderContext: RenderContext, size: FormSizes.() -> Style<BasicParams> = { normal }, stacking: AlertStacking.() -> Style<BasicParams> = { separated })

Convenience extension to display a ComponentValidationMessage as an alert.

box

fun RenderContext.box(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "box", content: Div.() -> Unit): Div

This component represents the simplest layout component possible: A simple `div` that acts as a container for arbitrary content.

checkbox

fun RenderContext.checkbox(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "checkboxComponent", build: CheckboxComponent.() -> Unit = {}): Label

This component generates a single checkbox.

checkboxGroup

fun <T> RenderContext.checkboxGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, values: Store<List<T>>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "checkboxGroupComponent", build: CheckboxGroupComponent<T>.() -> Unit = {})

This component generates a group of checkboxes.

clickButton

fun RenderContext.clickButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "push-button", build: PushButtonComponent.() -> Unit = {}): DomListener<MouseEvent, HTMLButtonElement>

This component generates a simple button.

dataTable

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, selection: Store<T?>, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, selection: Store<List<T>>, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

file

fun RenderContext.file(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "file", build: FileSelectionBaseComponent.() -> Unit = {}): Flow<File>

This factory generates a single file selection context.

files

fun RenderContext.files(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "file", build: FileSelectionBaseComponent.() -> Unit = {}): Flow<List<File>>

This factory generates a multiple file selection context.

flexBox

fun RenderContext.flexBox(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "flex-box", content: Div.() -> Unit): Div

This component represents a layout component with flex property.

formControl

fun RenderContext.formControl(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "formControl", build: FormControlComponent.() -> Unit = {})

This component wraps input elements like inputField, selectField, checkbox, checkboxGroup, radioGroup.

gridBox

fun RenderContext.gridBox(styling: GridParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "grid-box", content: Div.() -> Unit): Div

This component represents a layout component with grid property.

icon

fun RenderContext.icon(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = IconComponent.prefix, build: IconComponent.() -> Unit = {})

This component enables to render an icon.

inputField

fun RenderContext.inputField(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "inputField", build: InputFieldComponent.() -> Unit = {})

This component generates a text based input field.

lineUp

fun RenderContext.lineUp(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "line-up", build: LineUpComponent.() -> Unit = {}): Div

This layout component enables the horizontal stacking of child components.

modal

fun modal(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "modal", build: ModalComponent.(SimpleHandler<Unit>) -> Unit): SimpleHandler<Unit>

This component provides some modal dialog or messagebox.

navBar

fun RenderContext.navBar(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "navbar", build: NavbarComponent.() -> Unit = {})

popover

fun RenderContext.popover(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "popover", build: PopoverComponent.() -> Unit = {})

This component enables to render a popover thats floats around a toggle element.

pushButton

fun RenderContext.pushButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "push-button", build: PushButtonComponent.() -> Unit = {})

This component generates a simple button.

radio

fun RenderContext.radio(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "radioComponent", build: RadioComponent.() -> Unit = {}): Label

This component generates a single checkbox.

radioGroup

fun <T> RenderContext.radioGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "radioGroupComponent", build: RadioGroupComponent<T>.() -> Unit = {})

This component generates a group of radio buttons.

randomId

fun randomId(): String

Creates a random id based on random number and timestamp.

showToast

fun showToast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ToastComponent.defaultToastContainerPrefix, build: ToastComponent.() -> Unit)

This factory method creates a toast and displays it right away.

spinner

fun RenderContext.spinner(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "spinner", build: SpinnerComponent.() -> Unit)

This component generates an animated spinner.

stackUp

fun RenderContext.stackUp(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "stack-up", build: StackUpComponent.() -> Unit = {}): Div

This layout component enables the vertical stacking of child components.

switch

fun RenderContext.switch(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "switchComponent", build: SwitchComponent.() -> Unit = {}): Label

This component generates a single switch.

textArea

fun RenderContext.textArea(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "textArea", build: TextAreaComponent.() -> Unit)

This component generates a TextArea.

toast

fun toast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ToastComponent.defaultToastContainerPrefix, build: ToastComponent.() -> Unit): SimpleHandler<Unit>

This factory method creates a toast that will be shown when the returned handler is triggered, eg.

tooltip

fun StyleParams.tooltip(vararg text: String): BasicParams.() -> Unit

fun StyleParams.tooltip(vararg text: String, tooltipPlacement: TooltipPlacements.() -> Style<BasicParams>): BasicParams.() -> Unit