CaptainCodeman / svelte-headlessui

HeadlessUI components for Svelte
https://captaincodeman.github.io/svelte-headlessui/
MIT License
554 stars 25 forks source link

Stricter 'value' type for list items #21

Open CaptainCodeman opened 1 year ago

CaptainCodeman commented 1 year ago

It's a little "loosey-goosey" right now, using "any" for the value but really expecting / treating things as a string in some places.

It either needs to be a string consistently or could allow an object if the component is also provided with a "get me the string value" function.

This would also allow stricter lint checks.

CaptainCodeman commented 1 year ago

It's nice to be able to use "any" object for the item data, but some components need to match on string values. So if the item value isn't a string, and it may not always make sense to use the textContent of the item elements, we need to provide a property name or selector function to extract the value.

bertramdesigns commented 1 year ago

Any more thoughts on this? I have run into a situation that has caused a bit of confusion.

It seems that when you call $menu.active it returns the text value of (node: HTMLElement). So if I have something like the following:

{#each projectItems as project, i}
    {@const menuID = 'menuItem-' + (i + 1)}
    <a use:menu.item href="" id={menuID}>content {i} 
        <span>extra fancy stuff</span>
    </a>
{/each}

$menu.active would return "content # extra fancy stuff"

In a situation where the menu has more banner-like items that include additional content this could become verbose and complicated, especially if the banners are components.

Given it is possible to control the id and that "aria-activedescendant" is identified based on the item id would it make sense to include something like $menu.activeID to return this id for easier addressing and identifying the active element?