Class TJSSettingsEdit

TJSSettingsEdit provides the main Svelte component to display and modify settings registered with TJSGameSettingsWithUI. Refer to the documentation in TJSGameSettings.register and TJSGameSettings.registerAll. Adding custom defined sections is accomplished with TJSGameSettingsWithUI.uiControl.addSection. You must pass an instance of TJSGameSettingsWithUI as the settings prop.

Note: to group settings into specific folders instead of a single top level section use the folder option when registering settings with TJSGameSettings. Also, please refer to the extra folder options described by TJSGameSettingsWithUI.uiControl.addSection.

The other prop options is an object instance defined by TJSSettingsCreateOptions. This allows you to associate a TJSWebStorage instance that automatically will track open / closed state of any section folders configured along with the scrolling position of the scrollbar.

TJSSettingsEdit supports two additional named slots settings-header and settings-footer allowing you to set Svelte components as a fixed header and / or footer to the main scrollable settings content.

When TJSSettingsEdit is displayed the UI display data is generated from TJSGameSettingsWithUI.uiControl automatically. When the TJSSettingsEdit component is destroyed any settings registered for UI display will be checked for requiresReload setting option. If the setting has changed while TJSSettingsEdit is displayed a modal dialog is opened to inform the user that a setting changed that requires reloading.

If you need an easy to use slotted component that allows swapping from the main slot and TJSSettingsEdit please refer to TJSSettingsSwap.

CSS Variables

CSS variables available include the following options:

Top level 'main' element:
--tjs-settings-section-background - none

Scrollable div element:
--tjs-settings-padding - 0

Each section element for a grouping of settings:
--tjs-settings-section-background - none
--tjs-settings-section-border - none
--tjs-settings-section-border-radius - 0
--tjs-settings-section-margin-bottom - 0.75em
--tjs-settings-section-padding - 0.5em
Copy