TyphonJS•14mo ago

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!

38 Replies

WaspOP•14mo 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•14mo ago

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

WaspOP•14mo ago

WaspOP•14mo ago

It is bound to the application, unfortunately

Nekro Darkmoon•14mo 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•14mo ago

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

WaspOP•14mo ago

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

Nekro Darkmoon•14mo 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

WaspOP•14mo ago

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

TyphonJS (Michael)•14mo 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•14mo 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

WaspOP•14mo ago

<:thonk_cry:918876481965400114>

Nekro Darkmoon•14mo ago

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

WaspOP•14mo ago

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

WaspOP•14mo ago

Woop!

WaspOP•14mo ago

Thanks once again @Nekro Darkmoon ! 😄

Nekro Darkmoon•14mo ago

WaspOP•14mo ago

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

Nekro Darkmoon•14mo 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 😄

WaspOP•14mo ago

So it does

TyphonJS (Michael)•14mo 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•14mo ago

^ yup

TyphonJS (Michael)•14mo 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.

WaspOP•14mo ago

Final result

WaspOP•14mo ago

❤️ modal TJSDialogs

geoidesic•7mo ago

Did this component work out well for you? Considering it. Also which module is this?

WaspOP•7mo ago

svelte-select, and the app has --tjs-app-overflow: visible;

TyphonJS (Michael)•7mo ago

You should create a new forum post as this is a different topic.

geoidesic•7mo ago

How do I use --tjs-app-overflow: visible; ? I'm not sure where to put that. I tried putting it in a css file, nothing happened.

TyphonJS (Michael)•7mo ago

You should scope it to the particular app ID that you want to apply it to. So add an app ID in the defaultOptions of the specific app then in your separate CSS file use:

#app-id {
  --tjs-app-overflow: visible;
}

#app-id {
  --tjs-app-overflow: visible;
}

geoidesic•7mo ago

E.g. my tab content, which is a child component of the ApplicationShell. I also tried it in the ApplicationShell itself

<script>
import SvelteSelect from 'svelte-select';
let items = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' },
    { value: 'three', label: 'Three' },
];
let filterText;
</script>

<template lang="pug">
div.tab-content
    h1 Race
    p {filterText}
    SvelteSelect({items} bind:filterText)


</template>

<style lang="scss" scoped>
.tab-content {
    --tjs-app-overflow: visible;
}
</style>

<script>
import SvelteSelect from 'svelte-select';
let items = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' },
    { value: 'three', label: 'Three' },
];
let filterText;
</script>

<template lang="pug">
div.tab-content
    h1 Race
    p {filterText}
    SvelteSelect({items} bind:filterText)


</template>

<style lang="scss" scoped>
.tab-content {
    --tjs-app-overflow: visible;
}
</style>

TyphonJS (Michael)•7mo ago

The CSS variable corresponds to the ApplicationShell so you either need to add it via inline styles through props to ApplicationShell or as a separate CSS file you include scoped by the app ID.

geoidesic•7mo ago

Like this?

<template lang="pug">
ApplicationShell(bind:elementRoot)
  main 
    header {localize("GAS.PCTitle")} 
    section 
      Tabs( {tabs} bind:activeTab="{activeTab}" sheet="PC")
</template>

<style lang="scss">
     main {
        --tjs-app-overflow: visible;
        text-align: center;
        display: flex;
        flex-direction: column;
     }
</style>

<template lang="pug">
ApplicationShell(bind:elementRoot)
  main 
    header {localize("GAS.PCTitle")} 
    section 
      Tabs( {tabs} bind:activeTab="{activeTab}" sheet="PC")
</template>

<style lang="scss">
     main {
        --tjs-app-overflow: visible;
        text-align: center;
        display: flex;
        flex-direction: column;
     }
</style>

Probably not. I don't understand the bit where you say "add in an app ID in the defaultOptions". I know what the defaultOptions are but I don't know anything about the app-id or it's key value format / signature.

TyphonJS (Michael)•7mo ago

No... main is in your template. The CSS variable needs to apply ApplicationShell. You can apply inline styles via a prop like.

<script>
   export let elementRoot;

   const stylesApp = {
     '--tjs-app-overflow': 'visible'
   };
</script>

<ApplicationShell bind:elementRoot {stylesApp}>
</ApplicationShell>

<script>
   export let elementRoot;

   const stylesApp = {
     '--tjs-app-overflow': 'visible'
   };
</script>

<ApplicationShell bind:elementRoot {stylesApp}>
</ApplicationShell>

or through a separate CSS file that is scoped to the app ID set in defaultOptions.

geoidesic•7mo ago

hmm.. I've done both but I'm still getting overflow hidden.

<script>
    let stylesApp = {
        '--tjs-app-overflow': 'visible'
        };
</script>

<svelte:options accessors={true}/>

<template lang="pug">
    ApplicationShell(bind:elementRoot bind:stylesApp)
    {activeTab}" sheet="PC")
</template>

<script>
    let stylesApp = {
        '--tjs-app-overflow': 'visible'
        };
</script>

<svelte:options accessors={true}/>

<template lang="pug">
    ApplicationShell(bind:elementRoot bind:stylesApp)
    {activeTab}" sheet="PC")
</template>

and in index.js

import '../styles/init.scss';

import '../styles/init.scss';

and in init.scss

#my-app-id{
  --tjs-app-overflow: visible;
}

#my-app-id{
  --tjs-app-overflow: visible;
}

and in the defaultOptions

   static get defaultOptions()
   {
      return foundry.utils.mergeObject(super.defaultOptions, {
         id: 'my-app-id',

   static get defaultOptions()
   {
      return foundry.utils.mergeObject(super.defaultOptions, {
         id: 'my-app-id',

TyphonJS (Michael)•7mo ago

Yeah... Well.. It's not bind: stylesApp. To pass a prop it's like the code that provided above if you are going the inline styles route. Could be handy to review the Svelte interactive tutorial on how props work. And of course I can't help you with any of the Pug aspects. You are on your own there.

geoidesic•7mo ago

The binding is working and the style is being registered to the application but it doesn't seem to affect the outcome. Hopefully this video explains what I mean.

TyphonJS (Michael)•7mo ago

Maybe Wasp can offer some insight as perhaps you have to configure svelte-select. Have you even read the documentation for svelte-select? It looks like there is a floatingConfig prop. You have to do a little bit of the work here. I can't help you with 3rd party Svelte components much. Re: props.. You should still learn how props work and just use standard prop passing instead of a binding regardless if that works in this particular instance.

Gaming

Programming

Svelecte Alternatives