public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Menu: fix typo slot => slotProps

Browse Source 
This will have caused class as a function to not work correctly for Menu
This commit is contained in:
Ryan Gossiaux
2021-12-30 18:37:33 -10:00
parent 48f50d65d9
commit b5b6854d2d
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/menu/Menu.svelte
View File

@@ -58,6 +58,7 @@
export let use: HTMLActionArray = []; export let use: HTMLActionArray = [];
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
const forwardEvents = forwardEventsBuilder(get_current_component()); const forwardEvents = forwardEventsBuilder(get_current_component());
let menuState: StateDefinition["menuState"] = MenuStates.Closed; let menuState: StateDefinition["menuState"] = MenuStates.Closed;
let buttonStore: StateDefinition["buttonStore"] = writable(null); let buttonStore: StateDefinition["buttonStore"] = writable(null);
let itemsStore: StateDefinition["itemsStore"] = writable(null); let itemsStore: StateDefinition["itemsStore"] = writable(null);
@@ -163,7 +164,7 @@
[MenuStates.Closed]: State.Closed, [MenuStates.Closed]: State.Closed,
}); });
$: slot = { open: menuState === MenuStates.Open }; $: slotProps = { open: menuState === MenuStates.Open };
</script> </script>
<svelte:window on:mousedown={handleWindowMousedown} /> <svelte:window on:mousedown={handleWindowMousedown} />
@@ -171,8 +172,8 @@
{...$$restProps} {...$$restProps}
use={[...use, forwardEvents]} use={[...use, forwardEvents]}
{as} {as}
{slot} {slotProps}
name={"Menu"} name={"Menu"}
> >
<slot {...slot} /> <slot {...slotProps} />
</Render> </Render>

13
src/lib/components/menu/menu.test.ts vendored
View File

@@ -337,9 +337,9 @@ describe('Rendering composition', () => {
render( render(
TestRenderer, { TestRenderer, {
allProps: [ allProps: [
[Menu, {}, [ [Menu, { class: (bag: any) => JSON.stringify(bag), id: "menu" }, [
[MenuButton, {}, "Trigger"], [MenuButton, { class: (bag: any) => JSON.stringify(bag) }, "Trigger"],
[MenuItems, {}, [ [MenuItems, { class: (bag: any) => JSON.stringify(bag) }, [
[MenuItem, { as: "a", class: (bag: any) => JSON.stringify(bag) }, "Item A"], [MenuItem, { as: "a", class: (bag: any) => JSON.stringify(bag) }, "Item A"],
[MenuItem, { as: "a", disabled: true, class: (bag: any) => JSON.stringify(bag) }, "Item B"], [MenuItem, { as: "a", disabled: true, class: (bag: any) => JSON.stringify(bag) }, "Item B"],
[MenuItem, { as: "a", class: "no-special-treatment" }, "Item C"], [MenuItem, { as: "a", class: "no-special-treatment" }, "Item C"],
@@ -354,12 +354,19 @@ describe('Rendering composition', () => {
}) })
assertMenu({ state: MenuState.InvisibleUnmounted }) assertMenu({ state: MenuState.InvisibleUnmounted })
// Verify correct classNames
expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: false }))
expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: false }))
// Open menu // Open menu
await click(getMenuButton()) await click(getMenuButton())
let items = getMenuItems() let items = getMenuItems()
// Verify correct classNames // Verify correct classNames
expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: true }))
expect("" + getMenu()?.classList).toEqual(JSON.stringify({ open: true }))
expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: true }))
expect('' + items[0].classList).toEqual(JSON.stringify({ active: false, disabled: false })) expect('' + items[0].classList).toEqual(JSON.stringify({ active: false, disabled: false }))
expect('' + items[1].classList).toEqual(JSON.stringify({ active: false, disabled: true })) expect('' + items[1].classList).toEqual(JSON.stringify({ active: false, disabled: true }))
expect('' + items[2].classList).toEqual('no-special-treatment') expect('' + items[2].classList).toEqual('no-special-treatment')