ActionBlock

Props

Prop name	Description	Type	Values	Default
style		StyleValue	-
className		string	-

Slots

Name	Description	Bindings
default
left
right

---

ExpandedNavMenu

Props

Prop name	Description	Type	Values	Default
items		Array	-
screenMenu		boolean	-

---

ItemGrid

Props

Prop name	Description	Type	Values	Default
title	The title above the items	string	-
description	A small text describing what items are	string	-
action	The action to show below the items. Can either: - show more items - link to another page	union	-
amount	The total amount of items to show	number	-	3
rowSize	The amount of items in each row	number	-	3
disableExternalLinkIcons	Do not show external links in actions	boolean	-	false
descriptionLength	The maximum length of an item's description	number	-	100
descriptionEllipsis	The text to render at the end of the description when cut off	string	-
createSlug		TSFunctionType	-
createUrl		TSFunctionType	-
useActionLink		boolean	-	false
maxItemActions		number	-	2
itemHeight		string	-	'400px'
data		Array	-	() => []
dataUrl		string	-	undefined

---

action

Props

Prop name	Description	Type	Values	Default
states		Array<string>	-

Slots

Name	Description	Bindings
intro
state-${state}

---

steps

Props

Prop name	Description	Type	Values	Default
length	The maximum amount of steps that are rendered	number	-	20
color	The color of the step numbers Can be one of the theme colors or a CSS color value	string	-	'brand'

Slots

Name	Description	Bindings
getSlotName(num)

---

• Alias: StepsWindow

Make a step by step tutorial in markdown with this component. Note that only length items are shown, if you need more steps change this property to the amount you need!

Example

<StepsWindow color="indigo">
<template #step-1>

### Install the installer

do some trick

do another trick

- list item
- another one

</template>
<template #step-2>

### Run the installer

press start

</template>
</StepsWindow>

1

Install the installer

do some trick

do another trick

• list item
• another one

2

Run the installer

press start

tabs

Props

Prop name	Description	Type	Values	Default
tabs		Array	-
startTab		string	-
storage		{ key: string hideSelectorOnSet?: boolean }	-
hideSelector		boolean	-	false
searchParam		union	-	null
updateSearchParam		boolean	-	true
tabStyle		object	-	() => ({})
activeTabStyle		object	-	() => ({})
alignLeft		boolean	-	false

Slots

Name	Description	Bindings
toSlug(name)

---

• Alias: TabsWindow

Splits a window with tabs.

Each tab is a separate <template> with the name tab-${name_in_snake_case}

<TabsWindow :tabs="['Snake case']">

<template #tab-snake_case>
This is a tab
</template>
</TabsWindow>

Snake case

---

This is a tab

To add more tabs, add the name in the array with the title and add the tab with the corresponding snake case name by adding a new template. Then you can write in markdown what to display when the tab is active.

Example

The tabs property is defining the order, so you can change the order of the templates without changing the view.

<TabsWindow :tabs="['a', 'c', 'b']">

<template #tab-a>
This is Tab A
</template>
<template #tab-b>
This is Tab B
</template>
<template #tab-c>
This is Tab C
</template>

</TabsWindow>

A

C

B

---

This is Tab A

Set alignLeft to disable the headers from using the full width:

A

C

B

---

This is Tab A

PreferenceSetting

Props

Prop name	Description	Type	Values	Default
isAppearance		boolean	-	false
type		SettingType	-	'switch'
text		string	-
storeKey		string	-
cssVariable		string	-
options		Array	-
defaultValue		SettingValue	-	false
renderValue		boolean	-	false
documentClassToToggle		string	-
onChanged		TSParenthesizedType	-	({ key, value }) => { console.debug("Changing preference:", key, value) }

Slots

Name	Description	Bindings
default

---

Component to show or allow to set a value that gets stored in the local storage of the current browser.

The default slot is the text associated with the action. Use the storeKey property to decide which local storage key the value will get and defaultValue to set the current value if nothing has been set yet.

Setting types

The allowed types are:

• 'switch': toggle for boolean values
• 'input': input field for string values
• 'select': select field for string array values
• 'color': color pick

<PreferenceSetting
  storeKey="rlmm-path-udk"
  defaultValue="C:\UDK\RLMM\"
  type="input"
>
  UDK Installation folder
</PreferenceSetting>

Get settings value

To get a setting value in a component, use the useSettings function

Show value

Showing a value is handled with renderValue property set to true. You don't need to set the default slot when showing the value.

Example

<PreferenceSetting :renderValue="true" storeKey="rlmm-path-udk" defaultValue="C:\UDK\RLMM\" type="input" />

false

Your UDK folder

SteamMaps

Props

Prop name	Description	Type	Values	Default
amount	The amount of maps to display	number	-	3
title	The title above the map(s)	union	-	'New workshop maps'
sortBy	Whether to show recent published or updated maps	SteamSortType	-	'created'
urlProtocol	Where to open Steam urls	union	-	'setting-windows'
displayTime	The amount of ms before the next map is shown. Set to a negative number to disable this	number	-	10_000
disableClick	Change the clicking behaviour	boolean	-	false
enabled	Option to disable the component	boolean	-	true
iconsEnabled	Whether to have the arrow icons enabled, or only the left or right arrow.	union	-	true
downloadUrlTemplate	The template to use for downloading maps	union	-	null
maxLengthTitle	The maximum length of the map title	number	-	30
maxLengthUsername	The maximum length of the creator name	number	-	24
containerStyle	Additional styles for the component's container	StyleValue	-	() => ({})
handleException	Method to handle errors / empty responses @params The error that is thrown	TSFunctionType	-	console.error
addActions	Add more actions beside the default ones (view, download) @params The map that is currently displayed	TSFunctionType	-	() => []

Slots

Name	Description	Bindings
fallback	The content to render when fetching the maps failed

---

Shows the most recent published / updated maps on the Rocket League Steam workshop.

Colored title

The title option renders as HTML making it customisable to style. By default any span element in the title will be the brand color.

type AddSteamMapsAction = (map: SteamMap) => { text: string, link: string }[]
type SteamDownloadUrlTemplate = string | (id: string) => string

Hide on home page

The hideHomeSteamMaps local storage option for the key will allow to hide the Steam maps component to be hidden on the home page if the steam maps are enabled by default. Otherwise the storage option will allow to show the Steam maps component.

Url protocol

The local storage key option for hideHomeSteamMaps is used to read the user settings

Available options:

• 'setting-windows': if on Windows and the setting is enabled, open urls in the Steam app
• 'setting': if the setting is enabled, always open urls in the Steam app
• 'app-windows': if on Windows, open urls in the Steam app
• 'app': always open urls in the Steam app
• 'browser': always open urls in the internet browser

Click action

Use the disableClick option to disable going to the next map by clicking on the current map. This will open the map on clicking using the url protocol.

Title switcher

Examples

<!-- Shows only the most recent map -->
<SteamMaps :amount="1" :displayTime="-1" :disableClick="true"/>

<SteamMaps />

New workshop maps

DocFeatures

Props

Prop name	Description	Type	Values	Default
frontmatterKey		string	-	'features'
features		Array	-

---

CarTree

---

KismetNodes

---

SteamStats

Props

Prop name	Description	Type	Values	Default
title		string	-	'By the numbers: <span style="color: var(--vp-c-brand-1);">Steam workshop</span>'
joinChar		string	-	'.'
icons		Record	-
image		string	-	'https://community.cloudflare.steamstatic.com/public/shared/images/apphubs/bg_workshop_piston.png'
background		string	-	'https://community.cloudflare.steamstatic.com/public/shared/images/apphubs/bg_workshop_header.png?v=3'

---

ListView

Props

Prop name	Description	Type	Values	Default
dataUrl		string	-
data		Array	-	() => []
itemStyle		object	-	() => ({})
filter		TSFunctionType	-	() => true
sort		{ key: string | number, // descending?: boolean }	-
idKey		string	-	'id'
dataKey		string	-
categoryKey		string	-
groupByCategory		boolean	-	false

Slots

Name	Description	Bindings
default

---

NotificationListView

Slots

Name	Description	Bindings
default

---

SearchBlock

Props

Prop name	Description	Type	Values	Default
searchKey		string	-
urlSearchParam		string	-
text		{ reset: string searchPlaceholder: string }	-	() => ({ reset: 'Reset', searchPlaceholder: 'Search...', })
filters		Array	-	() => []

Slots

Name	Description	Bindings
search-input
reset-btn
default

---

BookmarkManager

Slots

Name	Description	Bindings
actions
items

---

WatchSubscription

Props

Prop name	Description	Type	Values	Default
subscription		SubscriptionOptions	-
storageKeys		Record	-
settings		{ watchAll?: { key: string text: string } watchPages?: { title: string description: string prefix?: string filter?: (path: string) => boolean } }	-
errorMessage		string	-

---

TeamPage

Props

Prop name	Description	Type	Values	Default
frontmatterKey		string	-	'teams'
index	The index of the main team to showcase	number	-	0
style	Additional styles for the component	StyleValue	-	() => ({ margin: '0px 0px 60px' })

---

TreeItem

Props

Prop name	Description	Type	Values	Default
getItem		TSFunctionType	-
search		union	-
isParentKey		string	-
parent		boolean	-
parents		Array	-
mainBgColor		boolean	-
idKey		string	-
nameKey		string	-
item		Item	-

Slots

Name	Description	Bindings
name
details

---

TreeView

Props

Prop name	Description	Type	Values	Default
data		union	-
dataUrl		string	-
dataKey		string	-
parentKey		string	-
parentListKey		string	-
isParentKey		string	-
childrenKey		string	-	'children'
idChildKey		string	-
nameChildKey		string	-
idKey		string	-	'id'
search		union	-
transformLoadedItem		TSFunctionType	-

Slots

Name	Description	Bindings
header
item-name
item-details

---