diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte index 21cecbeada..eae7018d1b 100644 --- a/packages/materialdesign-components/src/List/List.svelte +++ b/packages/materialdesign-components/src/List/List.svelte @@ -17,31 +17,25 @@ export let onSelect = selectedItems => {} export let singleSelection = false - export let variant = "two-line" + export let variant = "one-line" export let inputElement = null let selectedItemsStore let role = "listbox" - 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() + let ctx = getContext("BBMD:list:context") + + selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore)) + _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore) _bb.setContext("BBMD:list:props", { inputElement, variant, singleSelection, }) + if (!!list) { if (!inputElement) { instance = new MDCList(list) diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte index 775d73d2e2..979ea3e8b3 100644 --- a/packages/materialdesign-components/src/List/ListItem.svelte +++ b/packages/materialdesign-components/src/List/ListItem.svelte @@ -7,8 +7,6 @@ const cb = new ClassBuilder("list-item") - export let onClick = item => {} - let _id let listProps = null @@ -24,6 +22,7 @@ export let trailingIcon = "" export let selected = false export let disabled = false + export let dividerAfter = false let role = "option" @@ -110,3 +109,6 @@ {/if} +{#if dividerAfter} +
+{/if} diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte index 89c2404f4c..5782652376 100644 --- a/packages/materialdesign-components/src/Menu/Menu.svelte +++ b/packages/materialdesign-components/src/Menu/Menu.svelte @@ -2,8 +2,10 @@ import { List } from "../List" import { MDCMenu } from "@material/menu" import { onMount, setContext } from "svelte" - export let items = [] - export let singleSelection = true + import createItemsStore from "../Common/ItemStore.js" + + export let onSelect = selectedItems => {} + export let width = "400px" export let open = true export let useFixedPosition = false @@ -11,10 +13,20 @@ //{x: number, y: number} export let absolutePositionCoords = null + export let _bb + let menu = null + let menuList = null let instance = null + let selectedItemsStore onMount(() => { + _bb.setContext("BBMD:list:context", "menu") + _bb.setContext("BBMD:list:props", { singleSelection: true }) + + selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore)) + _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore) + if (!!menu) { instance = new MDCMenu(menu) instance.open = open @@ -25,8 +37,9 @@ instance.setAbsolutePosition(x | 0, y | 0) } } - setContext("BBMD:list:context", "menu") }) + + $: menuList && _bb.attachChildren(menuList) {#if useFixedPosition || useAbsolutePosition} @@ -34,17 +47,17 @@ bind:this={menu} class="mdc-menu mdc-menu-surface" style={`width: ${width}`}> -