Components
CallbackEntry
Uses ActionBarEntry.
An ActionBarEntry with an on:click callback action associated with it.
Props
label: string
The label of this ActionBar entry.
icon: string
The icon of this ActionBar entry.
action: () => void
Callback function that is executed on click.
disabled: boolean | undefined
When true, the action cannot be clicked.
class: string | undefined
The class of this ActionBar entry.
ActionBar
Uses CallbackEntry, HrefEntry.
The action bar contains actions that can be performed when in edit mode.
Props
entries: ActionBarEntryProps[]
Actions that are displayed.
ActionBarEntryTemplate
Props
disabled: boolean | undefined
When true, the action cannot be clicked.
class: string | undefined
The class of this ActionBar entry.
Slots
default
label
ActionBarEntry
Uses ActionBarEntryTemplate.
Represents one of the entries of the ActionBar.
Props
label: string
The label of this ActionBar entry.
icon: string
The icon of this ActionBar entry.
disabled: boolean | undefined
When true, the action cannot be clicked.
class: string | undefined
The class of this ActionBar entry.
HrefEntry
Uses ActionBarEntry.
An ActionBarEntry that acts as a link to the specified URL.
Props
label: string
The label of this ActionBar entry.
icon: string
The icon of this ActionBar entry.
action: string | undefined
URL for hyperlink
disabled: boolean | undefined
When true, the action cannot be clicked.
class: string | undefined
The class of this ActionBar entry.
Breadcrumbs
Displays a breadcrumb trail with the given routes.
Props
routes: Route[] | undefined
The route that will be displayed in the breadcrumbs.
Pill
A pill component. A pill is a small rounded rectangle with a label and/or text and/or icon.
Slot:
The content of the pill. If no slot is provided, the text prop will be used.
Props
label: string | undefined
The label of the pill. Will be placed on the left side of the pill. The background of the label is bg-crust.
text: string | undefined
The text of the pill. Will be placed in the middle of the pill.
icon: string | undefined
The icon of the pill. Will be placed on the left side of the pill. If a label is present, the icon will be placed on the left side of the label.
class: string | undefined
Class that should be applied to the pill.
style: string | undefined
Some style overrides. When possible, the class prop should be used instead.
action: { icon: string; class?: string | undefined; onClick: () => void; } | undefined
Define the action icon. Icon is the icon name from iconify. onClick is the on:click event. class is a class overload.
title: string | undefined
Pill tooltip
Slots
default
Boolean
Uses Pill.
Displays a boolean value as a text using the Pill component. The background is green if the value is true and red if the value is false.
Props
isTrue: string | boolean | undefined
Displays a boolean value as a text using the Pill component. Also parses strings to booleans. String must be either 'true' or 'false'.
class: string | undefined
Additional classes to be applied to the Pill component.
Input
The default input component. A prefix icon can be added inside of the icon slot, and/or a suffix icon in the suffix slot.
In order to use this component in forms, the name prop should be set.
You can also set the value prop, if you want to set an initial value. Or bind to it if you want to use this outside of a form. You can also set the placeholder prop, if you want to set an placeholder.
Props
placeholder: string | undefined
Placeholder of the input.
name: string | undefined
The name of the input. Used for the label and for form submission.
value: string | undefined
The current value of the input.
icon: string | undefined
The icon to be displayed inside of the input.
type: HTMLInputTypeAttribute | undefined
The type of the input.
disabled: boolean | undefined
When true, the input is disabled an cannot be changed.
required: boolean | undefined
Whether the input is required.
class: string | undefined
Additional classes to be applied.
title: string | undefined
The title to apply to the input.
setValue: ((value: string) => void) | undefined
Slots
icon
suffix
Events
blur: FocusEvent
focus: FocusEvent
value: CustomEvent<string>
formValue: CustomEvent<Record<string, string>>
HrefPill
Uses Pill.
A pill component that acts as a link. This pill's text will be blue:
Props
label: string | undefined
The label of the pill. Will be placed on the left side of the pill. The background of the label is bg-crust.
text: string | undefined
The text of the pill. Will be placed in the middle of the pill.
icon: string | undefined
The icon of the pill. Will be placed on the left side of the pill. If a label is present, the icon will be placed on the left side of the label.
href: string
The target URL of the pill, which will be navigated to when the pill is clicked.
target: HTMLAttributeAnchorTarget | undefined
The target browsing context i.e. where to open the URL.
style: string | undefined
Some style overrides.
enforceTextColor: boolean | undefined
Whether to force the text to be blue.
action: { icon: string; class?: string | undefined; onClick: () => void; } | undefined
Action of this pill
Checkbox
A checkbox component.
In order to receive changes, the checked prop can be reactively bound or
the on:change event can be listened to for changes.
Internal:
Uses some tailwind css trickery to make the checkbox value to look like a switch. Basically hides the input and sets the focus state via the label. The div is the actual switch and is moved via the peer-checked class where the peer class is set in the input.
Props
checked: boolean
Whether the checkbox is checked or not.
name: string | undefined
The form name of this checkbox.
disabled: boolean | undefined
If true, the checkbox can't be toggled.
Events
change: Event
formValue: CustomEvent<Record<string, boolean>>
Info
Displays a text with a default background color of surface1. Also sets the default padding and border radius. You can override this by passing your own classes.
Props
text: string | undefined
The text to be displayed.
class: string | undefined
Additional classes to be applied.
Slots
default
DatePill
Uses Pill.
Displays a date in a pill with the default format. The date format can be configured in the config.ts file.
Props
date: Date | null
The date of the to be displayed.
onNullText: string | undefined
The text that should be displayed if the date is null.
label: string | undefined
Label of the DatePill
icon: string | undefined
Icon of the pill, defaults to a clock
class: string | undefined
Class that should be applied to the pill.
RelativeDatePill
Uses DatePill.
Displays a relative date in a pill. The color of the pill is based on the date.
- If the date is in the past, the pill will be red.
- If the date is over one week in the future, the pill will be green.
- If the date is less then one week in the future, the pill will be orange.
Props
date: Date | null
The date of the to be displayed.
onNullText: string | undefined
The text that should be displayed if the date is null.
PillCollection
Uses Pill.
Displays a collection of pills. The pill component that should be used for each pill can be specified by setting the base prop.
Props
Generics: T extends PillProps
pills: T[]
The Pills that should be displayed.
base: ComponentType<SvelteComponent<T, any, any>> | undefined
The pill component to be used for each pill.
class: string | undefined
The class of the pill wrapper.
InputWithCheckbox
Props
inputProps: { placeholder?: string | undefined; name?: string | undefined; value?: string | undefined; icon?: string | undefined; type?: HTMLInputTypeAttribute | undefined; ... 4 more ...; setValue?: ((value: string) => void) | undefined; }
The props for the input.
checked: boolean | undefined
Default value for the checkbox.
Select
A select component that uses the native select element.
The options are passed as a prop and the value is bound to the value prop.
The options prop should be anas const array of objects with a value and a label property to allow full type safety.
Props
Generics: T extends string
options: readonly { value: T; label: string; }[]
The options of the select. The value is the value of the option and the label is the label of the option.
value: T | undefined
The value that is currently selected.
Because of the template variable, full type safety should be enforced if using consts as options.
name: string | undefined
Name of this select element. Used for forms.
disabled: boolean | undefined
When true, selection is disabled.
changeCallback: ChangeEventHandler<HTMLSelectElement> | undefined
Function that gets called when the selected value changes. For most use cases, you should prefer value binding over this.
class: string | undefined
The class of the select element.
Events
formValue: CustomEvent<Record<string, string>>
Button
A button with a slot for content.
Props
class: string | undefined
Additional classes to be applied to this component.
prefixIcon: string | undefined
The prefix icon to be displayed inside of the input.
suffixIcon: string | undefined
The suffix icon to be displayed inside of the input.
type: "button" | "reset" | "submit" | null | undefined
Specify the button type. Default is button
Slots
default
Events
click: MouseEvent
LookupPill
Uses Pill.
Converts the value given by the value prop to an entry from the options lookup array and displays the result as a pill.
Props
value: number | undefined
The index corresponding to the entry in the options array.
options: { label?: string | undefined; text?: string | undefined; icon?: string | undefined; class?: string | undefined; style?: string | undefined; action?: { icon: string; class?: string | undefined; onClick: () => void; } | undefined; title?: string | undefined; }[]
Array with props of Pills, indexed by value.
class: string | undefined
The class of the pill.
Picker
Uses Pill.
An input for picking from a list of pre-defined items.
Props
pickedItems: PickerPill[] | undefined
The items that have been picked.
pickableItems: PickerPill[] | undefined
The items that can be picked.
placeholder: string | undefined
Placeholder of the input.
popUpClass: string | undefined
Popup Class Override
name: string | undefined
The name of the input. Used for form submission.
disabled: boolean | undefined
When true, the picker cannot be used.
maxAutoComplete: number | undefined
Max Elements to show for Autocomplete
arbitraryInput: ((x: string) => PickerPill) | undefined
Allow inputting arbitrary
matchFunction: ((pill: PickerPill, value: string) => boolean | undefined) | undefined
Override the match function while typing in the input
Param:
The pill
Param:
the input value
Returns:
true if the pill should match the value
Events
formValue: CustomEvent<Record<string, PickerPill[]>>
update: CustomEvent<PickerPill[]>
TagPicker
Uses Picker.
Props
pickedItems: PickerPill[] | undefined
The tags that got picket. Should probably bind to this.
name: string | undefined
Form name of the picker.
Events
formValue: CustomEvent<Record<string, PickerPill[]>>
ActiveEntry
Uses ActionBarEntry.
An ActionBarEntry with an on:click callback action associated with it.
Props
label: string
The label of this ActionBar entry.
icon: string
The icon of this ActionBar entry.
active: boolean | undefined
Is this entry active. You should bind to this
class: string | undefined
The class of this ActionBar entry.
Events
click: MouseEvent
Card
A card with a slot for content. Sets the default padding and border radius. You can override this by passing your own classes.
Props
class: string | undefined
Additional classes to be applied to this component.
title: string | undefined
Title of this component.
Slots
default
CardRow
This component should be used to display rows inside of a Card.
It's recommended to only use up to two children in the slot, which will be displayed at both ends of the row.
Props
class: string | undefined
Additional classes to be applied to this component.
Slots
default
CardHeading
Props
class: string | undefined
Slots
default
AddGalaxyClusterForm
Uses Card, CardRow, Checkbox, Select, CardHeading, Picker.
Props
selection: PickerPill<{ local_only: boolean; relation: string; }>[] | undefined
The tags that can be picked.
relation: "Unspecified" | undefined
The relation of the tags.
local_only: boolean | undefined
If the tags should be local only.
Events
formValue: CustomEvent<Record<string, PickerPill[]>>
OidcButton
Uses Button.
A button that represents an OIDC provider.
Props
name: string | null
The name of the OIDC provider to be displayed.
url: string
The OIDC provider's URL.
Table
Creates an HTML table element with specific styling.
Slot:
The full table.
Slots
default
Td
Creates an HTML td element for the table with specific styling.
Slot:
- The content of the td.
Props
href: string | undefined
The url to navigate to when clicking on the td.
Slots
default
Th
Creates an HTML th element for the table with specific styling.
Slot:
- The content of the th.
Props
label: string
The label of the column.
icon: string
The icon of the column.
class: string | undefined
The class to be applied to the table head.
Events
click: MouseEvent
DynTable
Creates a dynamic Table using the header and data props.
The header props specifies the columns of the table,
while the data prop provides rows of data that conform to the structure of the header.
Type safety of this is enforced at compile time using Typescript.
Can enable selectMode. Where you can navigate to href by double click, and it adds the row to activeRows on click. Removes it, if it is present.
Props
Generics: T extends IRecord[]
header: Readable<TableHead<T[number]> & DynTableHeadExtent>[]
The header of the table. Also includes the icon and the href.
When setting this, it's recommended to use the createTableHeadGenerator util function.
data: T
The data that will be displayed in the table.
href: ((row: T[number]) => string | undefined) | undefined
The callback that will be called when the user clicks on the row.
groupInfo: ((x: T[number]) => unknown) | undefined
The callback that will be called to determine if the row should be grouped with other rows, and what info to show
selectMode: boolean | undefined
Is the table in select mode. Aka. Select rows by single click. Navigate to href on double click
activeRows: T | undefined
currentlyActive rows. Should probably bind to this.
DynCard
Uses CardHeading, Card, CardRow.
A card that displays the data of the given header.
This works dynamically similar to the DynTable component. So you should probably use the createTableHeadGenerator util function to create the header.
Props
Generics: T
header: Readable<TableHead<T>>[]
The header of the table. Also includes the icon and the href.
data: T
The data that will be displayed in the table.
title: string | undefined
The titel of the card.
description: string | undefined
The description of the card.
Flow
This component contains a node-based editor or interactive diagram provided by SvelteFlow.
It acts like a canvas. All elements, such as nodes, edges and controls, are rendered inside.
Props
nodes: Writable<Node[]>
Nodes that are rendered on the flow
edges: Writable<Edge[]>
Edges that are rendered on the flow
nodeTypes: NodeTypes | undefined
Custom node types to pass to SvelteFlow.
edgeTypes: EdgeTypes | undefined
Custom edge types to pass to SvelteFlow.
snapGrid: [number, number] | undefined
Dimensions of the grid that nodes will snap onto
defaultEdgeOptions: DefaultEdgeOptions | undefined
Default options to set for edges.
Slots
controls
default
Events
init: CustomEvent<any>
nodeclick: CustomEvent<{ node: Node<any, string | undefined>; event: MouseEvent | TouchEvent; }>
nodedrag: CustomEvent<{ node: Node<any, string | undefined>; nodes: Node<any, string | undefined>[]; event: MouseEvent | TouchEvent; }>
nodedragstop: CustomEvent<{ node: Node<any, string | undefined>; nodes: Node<any, string | undefined>[]; event: MouseEvent | TouchEvent; }>
nodecontextmenu: CustomEvent<{ node: Node<any, string | undefined>; event: MouseEvent | TouchEvent; }>
edgecontextmenu: CustomEvent<{ edge: Edge<any>; event: MouseEvent; }>
paneclick: CustomEvent<{ event: MouseEvent | TouchEvent; }>
dragover: DragEvent
drop: DragEvent
ObjectNode
A node representing a generic event graph object node.
Props
id: string
Id of the node
data: Pick<any, "id" | "uuid" | "event_id" | "distribution" | "name" | "description" | "comment">
dragHandle: string | undefined
type: string | undefined
selected: boolean | undefined
isConnectable: boolean | undefined
zIndex: number | undefined
positionAbsoluteX: number
positionAbsoluteY: number
width: number | undefined
height: number | undefined
dragging: boolean | undefined
sourcePosition: Position | undefined
targetPosition: Position | undefined
AttributeNode
Uses HrefPill.
A node representing a generic event graph attribute node.
Props
id: string
Id of the node
data: Pick<any, "value" | "id" | "type" | "uuid" | "event_id" | "distribution" | "comment" | "object_id" | "object_relation" | "category">
dragHandle: string | undefined
type: string | undefined
selected: boolean | undefined
isConnectable: boolean | undefined
zIndex: number | undefined
positionAbsoluteX: number
positionAbsoluteY: number
width: number | undefined
height: number | undefined
dragging: boolean | undefined
sourcePosition: Position | undefined
targetPosition: Position | undefined
BaseNode
The base component for all custom diagram nodes. Other custom node types should use this as their container.
Props
id: string
Node id
data: any
Node data
dragHandle: string | undefined
Node drag handle
type: string | undefined
Node type
selected: boolean | undefined
Node selected
isConnectable: boolean | undefined
Node is connectable
zIndex: number | undefined
Node z index
width: number | undefined
Node width
height: number | undefined
Node height
dragging: boolean | undefined
Node dragging
targetPosition: Position | undefined
Node target position
sourcePosition: Position | undefined
Node source position
positionAbsoluteX: number
Node absolute x position
positionAbsoluteY: number
Node absolute y position
class: string | undefined
Additional classes applied to outer div.
Slots
default
CategoryNode
Uses BaseNode.
A node representing a generic event graph category node.
Props
id: string
Id of the node
data: any
dragHandle: string | undefined
type: string | undefined
selected: boolean | undefined
isConnectable: boolean | undefined
zIndex: number | undefined
positionAbsoluteX: number
positionAbsoluteY: number
width: number | undefined
height: number | undefined
dragging: boolean | undefined
sourcePosition: Position | undefined
targetPosition: Position | undefined
MinimizedNode
Uses BaseNode.
A node representing a generic minimized event graph object node.
Props
id: string
Id of the node
data: any
dragHandle: string | undefined
type: string | undefined
selected: boolean | undefined
isConnectable: boolean | undefined
zIndex: number | undefined
positionAbsoluteX: number
positionAbsoluteY: number
width: number | undefined
height: number | undefined
dragging: boolean | undefined
sourcePosition: Position | undefined
targetPosition: Position | undefined
ReferenceEdge
An edge representing a generic event graph reference.
Props
hidden: boolean | undefined
class: string | undefined
id: string
source: string
target: string
selected: boolean | undefined
animated: boolean | undefined
deletable: boolean | undefined
selectable: boolean | undefined
data: any
markerStart: (EdgeMarkerType & string) | undefined
markerEnd: (EdgeMarkerType & string) | undefined
zIndex: number | undefined
ariaLabel: string | undefined
interactionWidth: number | undefined
label: string | undefined
labelStyle: string | undefined
style: string | undefined
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
sourceHandleId: string | null | undefined
targetHandleId: string | null | undefined
RelationEdge
An edge representing a generic event graph relation.
Props
hidden: boolean | undefined
class: string | undefined
id: string
source: string
target: string
selected: boolean | undefined
animated: boolean | undefined
deletable: boolean | undefined
selectable: boolean | undefined
data: any
markerStart: (EdgeMarkerType & string) | undefined
markerEnd: (EdgeMarkerType & string) | undefined
zIndex: number | undefined
ariaLabel: string | undefined
interactionWidth: number | undefined
label: string | undefined
labelStyle: string | undefined
style: string | undefined
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
sourceHandleId: string | null | undefined
targetHandleId: string | null | undefined
IconCard
Uses Card.
A card with a slot for content (Icon and Text). Sets the default padding and border radius. You can override this by passing your own classes.
Props
class: string | undefined
Additional classes to be applied to this component.
icon: string
The icon to be displayed in this card.
text: string
The text to be displayed in this card.
href: string | undefined
The target URL of the Card, which will be navigated to when the Card is clicked.
Events
click: MouseEvent
IconCardRow
Uses CardRow.
A row of icon cards Sets the default padding and border radius. You can override this by passing your own classes.
Props
class: string | undefined
Additional classes to be applied to this component.
Slots
default
ContextMenu
Uses IconCard, IconCardRow.
A ContextMenu component. A custom context menu is displayed when right-clicking a node.
Props
id: string
type: string
UnreferencedMenu
Uses IconCard, IconCardRow.
A custom sidemenu to display unreferenced objects and attributes. Allows to drag and drop nodes.
Props
objects: any[]
attributes: any[]
EventGraph
Uses Flow, ObjectNode, AttributeNode, CategoryNode, MinimizedNode, ReferenceEdge, RelationEdge, ContextMenu, UnreferencedMenu, Select.
The Event Graph component. Uses the Flow component to render the graph. Uses the IconCard component to render action bar buttons.
Props
event: any
The Event to be displayed on this page.
eventGraphReferences: EventGraphReferences
The event graph references for the event to be displayed.
FilterCard
Uses Card, CardHeading.
Slots
heading
default
Filter
Uses Button, FilterCard, Select, Input, Pill.
Props
header: Readable<TableHead<undefined>>[]
All possible filter
currentFilter: Record<string, string> | undefined
The current filter values. You should probably bind this.
Form
Props
callback: (formData: Record<string, string>) => void
The callback to call on submit.
actions: ActionBarEntryProps[] | undefined
Default save action. You should bind to this.
additionalActions: ActionBarEntryProps[] | undefined
Additional actions to display.
Slots
default
Heatmap
Uses Select.
A Heatmap component. This component is a wrapper around the svelte-heatmap component.
Props
class: string | undefined
Additional classes to be applied to this component.
title: string | undefined
Title of this component.
description: string | undefined
The description of this component.
data: dateData[]
The data that will be displayed in the heatmap.
settings: settings | undefined
The settings for the heatmap.
dropdown: dropdown | undefined
The dropdown settings for the heatmap.
Histogram
Props
class: string | undefined
Additional classes to be applied to this component.
title: string | undefined
Title of this component.
description: string | undefined
The description of this component.
data: histogramData[] | undefined
The data that will be displayed in the histogram.
dataTypes: histogramDataType[] | undefined
The types of data that will be displayed in the histogram.
dataType: string | undefined
the histogram dataType that will be displayed in the histogram.
maxLabelSize: number | undefined
The maximum size of the lable text (in %)
KeyValueEditor
Props
entries: [string, string][]
The map of key value pairs.
Notifications
Uses Pill.
SideMenuDivider
A divider for the side menu.
Props
class: string | undefined
SideMenuEntry
The side menu entry component.
It can be opened by clicking on it when the parent side menu is open.
When open, all the children will be displayed as subentries using this component.
Props
name: string
The name to be displayed in this side menu entry.
icon: string
The icon to be displayed in this side menu entry.
href: string
The href to be used in this side menu entry.
This is the URL of the page this entry links to.
active: boolean | undefined
Whether this side menu entry is active or not.
Active entries are highlighted visually.
isMenuOpen: boolean | undefined
Whether the parent side menu is open or not.
children: Route[] | undefined
The children of this side menu entry.
Will be displayed as subentries.
isChild: boolean | undefined
Whether this side menu entry is a child of another SideMenuEntry, meaning it is a subentry.
SideMenu
Uses SideMenuDivider, SideMenuEntry.
The side menu component. It contains the SideMenuEntry and SideMenuDivider components.
You can override the default SideMenuEntry list display by using the default slot.
You can also override the logo by using the logo slot.
Internal:
When setting a logo, do not forget to set the global FADE_OPTIONS constant, otherwise it may look weird.
Props
isOpen: boolean | undefined
The current state of the side menu.
Can be bound in order to change the state from other components.
routes: SideMenuRoute[] | undefined
The routes to be displayed in the side menu.
contextRoutes: SideMenuRoute[] | undefined
Context dependant routes to be displayed in a separate section.
activeRoute: string | null | undefined
The current route that is active.
Should usually be the current URL provided by SvelteKit ($page.url.href).
Slots
logo
default
ToggleModeEntry
Uses Checkbox, ActionBarEntryTemplate.
The ActionBar entry responsible for toggling modes.
Props
mode: Mode | undefined
The current mode of this Entry.
disabled: boolean | undefined
If true, the mode can't be toggled.
ContextInfo
Uses Info.
Indicate context specific information that is displayed as a popover on click.
Props
info: string[]
Contextual info messages.
UserInfo
Indicate context specific information that is displayed as a popover on click.
Props
userData: { email: string; admin: boolean; }
Information about the current user.
TopMenu
Uses ActionBar, ToggleModeEntry, ContextInfo, UserInfo.
The top menu component.
The search bar and the ActionBar are located here.
Props
mode: Mode | undefined
The mode of the current page. Possible modes are currently "view" and "edit"
isOpen: boolean | undefined
Whether the side menu is open or not.
userData: { email: string; admin: boolean; }
Data about the current user.
Slots
default
Layout
Uses Notifications, SideMenu, TopMenu, Breadcrumbs.
The basic component for the layout of the application.
This Component is intended to be used in Layouts, where the page body will automatically be inserted into the default slot.
You can also override the SideMenu by using the sideMenu slot.
Props
routes: SideMenuRoute[]
The routes to be displayed in the side menu.
contextRoutes: SideMenuRoute[] | undefined
Context dependant routes to be displayed in a separate side menu section.
currentRoute: Route[] | undefined
The current route to be displayed in the Breadcrumbs.
userData: { email: string; admin: boolean; }
Data about the current user
Slots
sideMenu
default
List
Uses CardHeading.
Displays a list of items with a title.
You can add classes to an element by passing a function to elemClass.
Props
items: string[]
List of items to display.
elemClass: ((item: string) => string) | undefined
Function to determine the class of an element based on its value.
Returns:
the classed that will be applied
title: string
Title of the list.
bodyClass: string | undefined
Override the list body class
Slots
moreHeader
default
ListEdit
Displays a list of items with a title.
You can add classes to an element by passing a function to elemClass.
Props
items: string[]
List of items to display.
name: string | undefined
Form name for the input.
elemClass: ((item: string) => string) | undefined
Function to determine the class of an element based on its value.
Returns:
the classed that will be applied
title: string
Title of the list.
Pagination
Uses Input.
A pagination component that allows the user to navigate through pages of a list.
Props
Generics: T
page: number | undefined
The current page.
length: number
The total number of pages.
PillCollectionWithDeleteAndAdd
Uses PillCollection.
Props
Generics: T
add: boolean | undefined
The current mode of the page.
selection: PickerPill<T>[] | undefined
The currently selected pills
deletion: PickerPill<T>[] | undefined
Pills that are currently marked for deletion
Slots
default
footer
deletion
addition
Events
delete: CustomEvent<PickerPill<T>[]>
save: CustomEvent<PickerPill<T>[]>
open: CustomEvent<void>
close: CustomEvent<void>
GalaxyCollection
Uses PillCollectionWithDeleteAndAdd, CardHeading, HrefPill, PillCollection.
Props
Generics: T
galaxies: any[] | undefined
The Page data.
selection: PickerPill<T>[] | undefined
The currently selected pills
deletion: PickerPill<T>[] | undefined
Pills that are marked for deletion
Events
close: CustomEvent<void>
open: CustomEvent<void>
delete: CustomEvent<PickerPill<unknown>[]>
save: CustomEvent<PickerPill<unknown>[]>
TagCollection
Uses HrefPill, PillCollection, PillCollectionWithDeleteAndAdd.
Props
Generics: T
tags: any[]
The Page data.
selection: PickerPill<T>[] | undefined
The currently selected pills
Events
close: CustomEvent<void>
save: CustomEvent<PickerPill<unknown>[]>
open: CustomEvent<void>
delete: CustomEvent<PickerPill<unknown>[]>
SettingsEntry
Represents a single settings entry on /settings.
Slot:
The component/html (e.g. a Checkbox or Select to display in the entry.
Props
label: string
The label of the settings entry.
Slots
default
ActionCard
Props
class: string | undefined
Slots
default
DynActionCard
Uses CallbackEntry, ActionCard.
Props
Generics: T
header: DynCardActionHeader<T[]>[]
The header of the table. Also includes the icon and the href.
data: T[]
The data that will be displayed in the table.
class: string | undefined
Class overload
Slots
default
FilterCard
Uses ActiveEntry, Pill, ActionCard.
Props
filterOpen: boolean | undefined
Are the Filter open
currentFilter: Record<string, string> | undefined
Currently Filter
Slots
default
SelectionCard
Uses DynActionCard.
Display number of selected rows alongside actions for selecting/unselecting all rows.
Props
numSelected: number
Number of rows that are currently selected.
selectAll: () => void
Callback for selecting all rows.
unselectAll: () => void
Callback for unselecting all rows.
ComplexTableLayout
Uses ActiveEntry, FilterCard, Pagination, DynTable, DynActionCard, SelectionCard, Filter.
Props
Generics: T extends IRecord
tableData: T[]
Your initial data
header: Readable<TableHead<T> & DynTableHeadExtent>[]
Your table header. DynTable.header
filter: Readable<TableHead<undefined>>[] | undefined
Your filter header. Filter.header
editActions: DynCardActionHeader<T[]>[] | undefined
Your edit actions. DynActionCard.header
topMenuActions: ActionBarEntryProps[] | undefined
Your top menu actions. actionBar
pagination: boolean | undefined
Do you want to include pagination in the request and in the page. Default: true
maxCount: number | undefined
max number of elements.
groupInfo: ((x: T) => unknown | undefined) | undefined
The callback that will be called to determine if the row should be grouped with other rows, and what info to show
tableHref: ((row: T) => string | undefined) | undefined
The href where the user will be navigated, if clicked on a row {@see DynTable.href}
Param:
The row the user clicked. Defaults to the id. You should define this, if your data does not include an id.
Param:
Defaults to the id of the row
Returns:
The href the user will be navigated to
endpoint: ((body: Record<string, unknown>) => any) | undefined
The endpoint where the requests will be sent to.
dataAccess: ((body: any) => T[]) | undefined
A transform function for the response data, after more data gets loaded (by pagination, filter). Default: (x) => x as T[] (no transformation)
Param:
response data (untransformed)
Returns:
The transformed data
fastFilter: FastFilter[] | undefined
Defined some fast filter attributes
Slots
filter
actionList
editActions
moreActions
default
table
added
pagination
AddTagForm
Uses TagPicker, Button, Card, CardRow, Checkbox, Select, CardHeading.
Props
selection: PickerPill<{ local_only: boolean; relation: string; }>[] | undefined
The tags that can be picked.
Events
close: CustomEvent<void>
add: CustomEvent<{ id: string; relation: string; local: boolean; }[]>
createTag: CustomEvent<void>
CreateTagForm
Uses CardRow, Checkbox, Select, Button, Input, Pill.