diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte index ac375da4f3..3ba864e355 100644 --- a/packages/materialdesign-components/src/List/List.svelte +++ b/packages/materialdesign-components/src/List/List.svelte @@ -17,11 +17,21 @@ //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n] export let items = [] export let singleSelection = false + export let inputElement = null let role = "listbox" onMount(() => { + createOrAcceptItemStore() + + if (!_bb.getContext("BBMD:list:props")) { + _bb.setContext("BBMD:list:props", { + inputElement, + variant, + singleSelection, + }) + } if (!!list) { instance = new MDCList(list) instance.singleSelection = singleSelection diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte index 89c2404f4c..4121f41340 100644 --- a/packages/materialdesign-components/src/Menu/Menu.svelte +++ b/packages/materialdesign-components/src/Menu/Menu.svelte @@ -2,7 +2,10 @@ import { List } from "../List" import { MDCMenu } from "@material/menu" import { onMount, setContext } from "svelte" - export let items = [] + import createItemsStore from "../Common/ItemStore.js" + + export let onSelect = selectedItems => {} + export let singleSelection = true export let width = "400px" export let open = true @@ -11,10 +14,25 @@ //{x: number, y: number} export let absolutePositionCoords = null + export let _bb + let menu = null let instance = null + let selectedItemsStore + + function createOrAcceptItemStore() { + let store = _bb.getContext("BBMD:list:selectItemStore") + if (!!store) { + selectedItemsStore = store + } else { + selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore)) + _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore) + } + } onMount(() => { + createOrAcceptItemStore() + if (!!menu) { instance = new MDCMenu(menu) instance.open = open @@ -27,6 +45,8 @@ } setContext("BBMD:list:context", "menu") }) + + $: menu && _bb.attachChildren(menu) {#if useFixedPosition || useAbsolutePosition} @@ -34,7 +54,7 @@ bind:this={menu} class="mdc-menu mdc-menu-surface" style={`width: ${width}`}> - + {:else}
@@ -44,7 +64,7 @@ bind:this={menu} class="mdc-menu mdc-menu-surface" style={`width: ${width}`}> - +
{/if}