Support for disabling list items

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

@@ -32,19 +32,21 @@
   })
 
   function handleSelectedItem(item) {
-    if (singleSelection || inputElement === "radiobutton") {
-      items.forEach(i => {
-        if (i.selected) i.selected = false
-      })
-    }
+    if (!item.disabled) {
+      if (singleSelection || inputElement === "radiobutton") {
+        items.forEach(i => {
+          if (i.selected) i.selected = false
+        })
+      }
 
-    let idx = items.indexOf(item)
-    if (!!item.selected) {
-      items[idx].selected = !item.selected
-    } else {
-      items[idx].selected = true
+      let idx = items.indexOf(item)
+      if (!!item.selected) {
+        items[idx].selected = !item.selected
+      } else {
+        items[idx].selected = true
+      }
+      onSelect(items.filter(item => item.selected))
     }
-    onSelect(items.filter(item => item.selected))
   }
 
   $: useDoubleLine =

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 },
     ],