TyphonJSWasp

Svelecte Alternatives

I'm looking to implement a searchable list of sorts, and I found Svelecte: https://mskocik.github.io/svelecte/ However, as with most plugins, obviously it has little chance to fit into Foundry applications - is there any similar things I could use in its place with TJS? TJSContextMenu seems the closest approximation!

Wasp•187d ago

The reason why I don't want to use datalists is because of their absolutely garbage styling options and lack of separated text & value pairs

kgar•187d ago

What causes it to be unable to fit? (more a selfish question for my svelte education)

Wasp•187d ago

Wasp•187d ago

It is bound to the application, unfortunately

Nekro Darkmoon•187d ago

https://www.npmjs.com/package/svelte-select

npm

svelte-select

A component for Svelte apps. Latest version: 5.7.0, last published: 2 months ago. Start using svelte-select in your project by running npm i svelte-select. There are 41 other projects in the npm registry using svelte-select.

Nekro Darkmoon•187d ago

@Wasp this is the one we're using in the a5e system can pretty much style it to how you like

Wasp•187d ago

Oh nice! Does it support a floating absolute dropdown element?

Nekro Darkmoon•187d ago

floatingConfig there's an option that you can pass the floating config to have it be absolute I believe 🤔 https://github.com/Pjb518/FoundryVTT-Level-Up-Official/blob/main/src/apps/components/effectChanges/ChangeConfiguration.svelte#L29-L48 Here's our usecase of it

Wasp•187d ago

Very nice! I can't seem to find where to pass a different parent to the config tho

TyphonJS (Michael)•187d ago

Just as an interesting aside since I'm doing so much work on supporting PopOut in the next TRL release (hopefully out today). Most 3rd party components will not work w/ PopOut. In svelte-select this dooms it: https://github.com/rob-balfre/svelte-select/blob/master/src/lib/Select.svelte#L667

Nekro Darkmoon•187d ago

😄 https://github.com/fedorovvvv/svelte-floating-ui This is the repo for the flaoting ui wrapper.

{
    strategy: "absolute",
    placement: "top",
    middleware: [
      offset(6),
      flip(),
      shift(),
    ]
  }

{
    strategy: "absolute",
    placement: "top",
    middleware: [
      offset(6),
      flip(),
      shift(),
    ]
  }

you wanna pass it an object like this. Doesn't have to include everything

Wasp•187d ago

<:thonk_cry:918876481965400114>

Nekro Darkmoon•187d ago

hmm you should prolly be able to override it via css 🤔

Wasp•187d ago

Ah, it is because the app itself is a TJSDialog, which has overflow hidden Yep, it was!

Wasp•187d ago

Woop!

Wasp•187d ago

Thanks once again @Nekro Darkmoon ! 😄

Nekro Darkmoon•187d ago

Wasp•187d ago

Did you have problems with clicking elements in the dropdown list? Mine doesn't trigger a change when I click elements

Nekro Darkmoon•187d ago

ah yes thats the focus manager 😄 https://github.com/Pjb518/FoundryVTT-Level-Up-Official/blob/main/src/apps/ActiveEffectConfig.js#L29 setting focusAuto to false fixes it 😄

Wasp•187d ago

So it does

TyphonJS (Michael)•187d ago

Also a note... A lot of 3rd party components may not be oriented around pointer events. If this one line was changed to pointerdown instead of mousedown then it likely would work without adjusting the TRL focus manager: https://github.com/rob-balfre/svelte-select/blob/master/src/lib/Select.svelte#L679C1-L679C32 But this is why there are options for the focus manager to change behavior as necessary.

Nekro Darkmoon•187d ago

^ yup

TyphonJS (Michael)•187d ago

Eventually I will be flushing out the standard library with lots of components that play nice 100%. A fancy select is on the table for the future. However, other priorities like converting existing resources to Svelte 5 and generalizing the architecture to run on top of vanilla Svelte / SvelteKit + continued Foundry support are up first before adding more components to the standard library. In the meantime for whatever is not provided you have to take into consideration that 3rd party libraries won't have the design considerations that one encounters in Foundry. I'm designing all components in the standard library to the latest good practices and mileage may vary w/ 3rd party components. TJSMenu / TJSContextMenu / TJSColordPicker are getting an upgrade to work w/ PopOut. There is a new activeWindow reactive parameter in in app.reactive.activeWindow and associated store for when the browser window changes. For any component that pops up additional elements and requires event listening external to the component there is now a solution that is easy to implement in custom components. I also got the focus management to work super smooth in popped out state. Re: PopOut... No 3rd party components that you find will have any expectation of switching browser windows.

Wasp•187d ago

Final result

Wasp•187d ago

❤️ modal TJSDialogs

TyphonJS Join

293Members

View on Discord

Want results from more Discord servers?

Add your server

Setting up TRL / contributing to existing module (Item Piles)Hi @Paith. I have started this forum post where we can continue to discuss setting up TRL and gettin Reactivty and prepareDerivedDataFrom @Wasp > So I'm using prepareDerivedData to, well, derive some data for my items; some of them a Local Development w/ NPM LinkFrom @Gerark: > Hello! this is probably a base webdev question but I can't find a good reference for Issues Configuring TyphonJS in TSI'm receiving this message in my TS Files: `Cannot find module '#runtime/svelte/application' or its TRL / Svelte based game systemsThis post is a list of repos for game systems built with TRL / Svelte for Foundry. Please DM me if y List of TjsdocumentsLink to original response: https://discord.com/channels/737953117999726592/1067337319041998869/11562 Is there a way to export the quest log?I'm trying to setup a world for the PF2E Beginner Box but right now I working in a beta testing wor Fabricate@MisterPotts. Just starting a forum post to keep track of the conversation. > Fabricate doesn't ma Svelte 5 TJSDocument PrototypeGreets @FVTT ▹ Developer. As some of you might have seen there is a bit of paradigm shift that is Funky interaction with fokus managementTJS's Focus Management is creating fun issues for me again. focusKeep = true causes my drag and drop How to get rid of funky Prosemirror overlapHi. I'm getting some overlap with Prosemirror (see image) any ideas how to avoid that? ``` "@ty FQL / TextEditor enrichment issueFrom @ooblekie: > can anyone give me a hand as to why the text keeps coming up as object promise in TJSDocument not working properly with Module Sub-Types (Data Models)In Foundry, modules can define a [Sub-Types](<https://foundryvtt.com/article/module-sub-types/>) usi TRL `0.1.2` - Fine Tuning releaseGreets @FVTT ▹ Developer! I have just released a fine tuning release that brings a few more feature Embed a DropDown/MenuList made with SvelteHello again! 😄 I've been pondering creating a second module for Foundry and a few questions popped Slide Animations for SvelteApplicationI'd like my window ( which is an EmptyApplicationShell ) to play a slide-in animation when open and Bug: Multiple ProseMirror editors on same svelte component do not save properlySimple reproduction in a foundry world with at least one actor defined: ``` <svelte:options accessor System Works in Dev Mode but not after buildAfter updating to 0.1.1, I noticed something odd happening. The TITAN system now seems to work when Error building after updating to TRL 0.1.1Recently updated the TITAN system to TRL 0.1.1, but when I `npm run build` it errors out. Not sure w TJSApplication Character Sheet odd behavior with unlinked tokensHas anyone else experienced weird when using a TJSApplication as a character sheet with unlinked tok

Gaming

Programming

Svelecte Alternatives