I'm building a customizable and flex menu component for Svelte Kit. It should have the following properties:
it can hold a variable items count : a title, a form with arbitrary controls, an optional notification area, and a list of Call-To-Action buttons;
it must wrap all this subsequent items in ...
it should abstract item components importation
it should simple to use
Basically, something using slots and fragment like that :
<!-- $lib/GameMenu.svelte -->
<script lang="ts">
// abstraction of importing calls here...
import Heading from '$lib/game-menu/Heading.svelte'
import Norice from '$lib/game-menu/Notice.svelte'
import Button from '$lib/game-menu/Button.svelte'
// and so forth...
</script>
<div class="game-menu">
</div>
To invoke it an another templare, we just do this:
<!-- src/routes/index.svelte -->
<script lang="ts">
import GameMenu from '$lib/GameMenu.svelte'
</script>
<GameMenu>
<slot name="title">
An awesome title...
</slot>
<slot name="notice">
<p> How to add a varialbe numbver of buttons at the bottom of the menu ?</p>
<p> title, menu and buttons each needs to be wrapped inside their own div.item ? </p>
</slot>
<svelte:frgement slot="buttons">
<!-- each button should be wrapped in a div.item -->
<button class="buttons">Call To Action 1</button>
<button class="buttons">Call To Action 2</button>
<button class="buttons">Call To Action 3</button>
<button class="buttons">Call To Action 4</button>
</svelte:fragment>
</GameMenu>
How to make that stuff ?
Regards.
==== EDIT =====
My first thought was to write something like:
<!-- $lib/GameMenu.svelte -->
...
{#each Object.keys($$slots) as key }
<div class="item">
{#if key === "title" }
....
{/if}
...
</div>
{/each}
...but it not ensures the ordering of the keys...
Another solution was to define keys a priori with :
let keys = ['title', 'form', 'notice', 'buttons']
in the script tag of GameMenu.... but how about considering multiple buttons ?
My first goals were to automate the flex menu creation aspects, and, removing repetitive calls to import to sub-components, when creating multiple, wizard-like, series of GameMenu pages.
O