Support for disabling list items

packages/materialdesign-components/src/List/List.svelte

@@ -32,6 +32,7 @@
   })
 
   function handleSelectedItem(item) {
+    if (!item.disabled) {
       if (singleSelection || inputElement === "radiobutton") {
         items.forEach(i => {
           if (i.selected) i.selected = false
@@ -46,6 +47,7 @@
       }
       onSelect(items.filter(item => item.selected))
     }
+  }
 
   $: useDoubleLine =
     variant == "two-line" &&

packages/materialdesign-components/src/List/ListItem.svelte

@@ -1,27 +1,30 @@
 <script>
-  import { setContext } from "svelte";
-  import { Radiobutton } from "../Radiobutton";
-  import { Checkbox } from "../Checkbox";
-  import ClassBuilder from "../ClassBuilder.js";
+  import { setContext } from "svelte"
+  import { Radiobutton } from "../Radiobutton"
+  import { Checkbox } from "../Checkbox"
+  import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("list-item");
+  const cb = new ClassBuilder("list-item")
 
-  export let onClick = item => {};
+  export let onClick = item => {}
 
-  export let item = null;
-  export let useDoubleLine = false;
-  export let inputElement = null; //radiobutton or checkbox
+  export let item = null
+  export let useDoubleLine = false
+  export let inputElement = null //radiobutton or checkbox
 
   $: if (!!inputElement) {
-    setContext("BBMD:input:context", "list-item");
+    setContext("BBMD:input:context", "list-item")
   }
 
-  $: modifiers = { selected: !inputElement ? item.selected : null };
-  $: props = { modifiers };
-  $: listItemClass = cb.build({ props });
+  $: modifiers = {
+    selected: !inputElement ? item.selected : null,
+    disabled: item.disabled,
+  }
+  $: props = { modifiers }
+  $: listItemClass = cb.build({ props })
 
   $: useSecondaryText =
-    typeof item.text === "object" && "secondary" in item.text;
+    typeof item.text === "object" && "secondary" in item.text
 </script>
 
 <li

packages/materialdesign-components/src/Test/props.js

@@ -129,6 +129,7 @@ export const props = {
       {
         text: { primary: "Pastie", secondary: "Bap with Mayo" },
         value: 1,
+        disabled: true,
       },
       { text: { primary: "Fish", secondary: "Salmon or Cod" }, value: 2 },
     ],