TyphonJS•3y ago•

3 replies

Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)

Greets @FVTT ▹ Developer. I'm very happy to announce the availability of the latest TRL release. This is a big one as I revisited everything and made comprehensive improvements everywhere that could use a little tune up. There is now sophisticated focus management baked into all application shells and all relevant components have keyboard support as well. I haven't made a comprehensive overview video yet, but will hopefully get that complete in the next couple of days. All dependencies are updated including Vite 4 support. Overall this is the most rock solid release to date and I really refined everything along with thorough testing. Looks like things are fine on Foundry v11 as well!

This dev cycle started with the goal of finishing off the editor components, but I got pulled into building an advanced color picker component using a new browser feature called

container queries

container queries

. While this component

TJSColordPicker

TJSColordPicker

is in

svelte-standard

svelte-standard

the main export is currently commented out. I am submitting a PR tomorrow to add container query support to Svelte that I have been refining since December. It hopefully will make it through the review process and I'll post an update to TRL / svelte-standard w/ the mainline Svelte release supporting it. The color picker component made it clear that proper keyboard navigation was lacking in TRL. It's completely lacking in core Foundry; in fact you need to redefine the core key binding for the

tab

tab

key from

Cycle Canvas View

Cycle Canvas View

to be able to navigate by keyboard. A comprehensive system for advanced focus management and focus trapping in applications and TJSContextMenu / TJSMenu are now enabled by default; several new options in SvelteApplication to control focus management:

focusAuto

focusAuto

focusKeep

focusKeep

focusTrap

focusTrap

with auto & trap set to true. All relevant components from

svelte-standard

svelte-standard

have key activation baked into the components. Any components that needed to be brought up to solid release parity like TJSContextMenu are now complete. CSS variables were overhauled and there is now increased cohesion between all components for

focus-visible

focus-visible

/ keyboard navigation with default variables that can broadly control the look and feel across your entire package. Major refactoring to TJSDialog now makes it super flexible and powerful and I'll certainly expand on the options available now.

Relevant Code Changes (these are required):
- The external context for application shells is now

#external

#external

instead of

external

external

you just have to do a search and replace for

getContext("external")

getContext("external")

getContext("#external")

getContext("#external")

. A deprecated warning will be posted until you make this change.

-

SessionStorage

SessionStorage

LocalStorage

LocalStorage

store managers are renamed to

TJSSessionStorage

TJSSessionStorage

TJSLocalStorage

TJSLocalStorage

.

- For data defined

svelte-standard

svelte-standard

components

onClick

onClick

is now

onPress

onPress

and activates for pointer / mouse / keyboard input. Rename any usage of

onClick

onClick

onclick

onclick

callback

callback

onPress

onPress

. There is now an

on:press

on:press

event binding that supports both forms of input. This is pertinent for TJSMenu / TJSContextMenu data and any other data defined components.

--

I have streamlined the default Vite config file and this requires a little compare and contrast from

essential-svelte-esm

essential-svelte-esm

template-svelte-esm

template-svelte-esm

repos to update.

There are many more cool features to check out and additions that make it easier to create attractive apps. For instance it is highly recommended to check out the

Header Buttons

Header Buttons

demo as you can now provide additional options for header buttons including:

alignLeft: true

alignLeft: true

keepMinimized: true

keepMinimized: true

onContextMenu

onContextMenu

callback for right click of header button. In SvelteApplication there is a new option for

headerIcon

headerIcon

sets an app header icon. It should be 32x32px.

--

Please post any concerns or problems in this forum post. I want to cover anything in the video that might cause anyone issues.

First codename release:

Echo

Echo

for my little furry tiger who passed in Dec.

TyphonJS•3y ago•

3 replies

TyphonJS (Michael)

Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)

container queries

container queries

. While this component

TJSColordPicker

TJSColordPicker

is in

svelte-standard

svelte-standard

tab

tab

key from

Cycle Canvas View

Cycle Canvas View

focusAuto

focusAuto

focusKeep

focusKeep

focusTrap

focusTrap

with auto & trap set to true. All relevant components from

svelte-standard

svelte-standard

focus-visible

focus-visible

#external

#external

instead of

external

external

you just have to do a search and replace for

getContext("external")

getContext("external")

getContext("#external")

getContext("#external")

. A deprecated warning will be posted until you make this change.

-

SessionStorage

SessionStorage

LocalStorage

LocalStorage

store managers are renamed to

TJSSessionStorage

TJSSessionStorage

TJSLocalStorage

TJSLocalStorage

.

- For data defined

svelte-standard

svelte-standard

components

onClick

onClick

is now

onPress

onPress

and activates for pointer / mouse / keyboard input. Rename any usage of

onClick

onClick

onclick

onclick

callback

callback

onPress

onPress

. There is now an

on:press

on:press

essential-svelte-esm

essential-svelte-esm

template-svelte-esm

template-svelte-esm

repos to update.

There are many more cool features to check out and additions that make it easier to create attractive apps. For instance it is highly recommended to check out the

Header Buttons

Header Buttons

demo as you can now provide additional options for header buttons including:

alignLeft: true

alignLeft: true

keepMinimized: true

keepMinimized: true

onContextMenu

onContextMenu

callback for right click of header button. In SvelteApplication there is a new option for

headerIcon

headerIcon

Echo

Echo

for my little furry tiger who passed in Dec.

Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)

Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)

Similar Threads

Similar Threads

Similar Threads