From d082a62b3e706cfc2dd739f84c613fa995f782aa Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 13 Dec 2024 13:36:22 +0100
Subject: [PATCH] Fix selectable examples

---
 panel/lab/components/items/1_list/index.vue   | 10 +--
 panel/lab/components/items/2_cards/index.vue  | 15 ++--
 .../lab/components/items/3_cardlets/index.vue | 15 ++--
 panel/lab/components/items/4_table/index.vue  | 68 +++++++++++++++----
 panel/lab/components/items/index.php          |  2 +-
 5 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/panel/lab/components/items/1_list/index.vue b/panel/lab/components/items/1_list/index.vue
index 905fbc5877..2a4d279a62 100644
--- a/panel/lab/components/items/1_list/index.vue
+++ b/panel/lab/components/items/1_list/index.vue
@@ -4,7 +4,7 @@
 			<k-items :items="items" />
 		</k-lab-example>
 		<k-lab-example label="Selectable">
-			<k-items :items="selectableItems" @select="onSelect" />
+			<k-items :items="selectableItems" :selectable="true" @select="onSelect" />
 			<br />
 			<k-code>Selected: {{ selected.join(", ") }}</k-code>
 		</k-lab-example>
@@ -32,11 +32,11 @@ export default {
 		}
 	},
 	methods: {
-		onSelect(event, item, index) {
-			if (event.target.checked) {
-				this.selected.push(index);
-			} else {
+		onSelect(item, index) {
+			if (this.selected.includes(index)) {
 				this.selected = this.selected.filter((i) => i !== index);
+			} else {
+				this.selected.push(index);
 			}
 		}
 	}
diff --git a/panel/lab/components/items/2_cards/index.vue b/panel/lab/components/items/2_cards/index.vue
index a212ef07a5..02d8735100 100644
--- a/panel/lab/components/items/2_cards/index.vue
+++ b/panel/lab/components/items/2_cards/index.vue
@@ -4,7 +4,12 @@
 			<k-items :items="items" layout="cards" />
 		</k-lab-example>
 		<k-lab-example label="Selectable">
-			<k-items :items="selectableItems" layout="cards" @select="onSelect" />
+			<k-items
+				:items="selectableItems"
+				:selectable="true"
+				layout="cards"
+				@select="onSelect"
+			/>
 			<br />
 			<k-code>Selected: {{ selected.join(", ") }}</k-code>
 		</k-lab-example>
@@ -32,11 +37,11 @@ export default {
 		}
 	},
 	methods: {
-		onSelect(event, item, index) {
-			if (event.target.checked) {
-				this.selected.push(index);
-			} else {
+		onSelect(item, index) {
+			if (this.selected.includes(index)) {
 				this.selected = this.selected.filter((i) => i !== index);
+			} else {
+				this.selected.push(index);
 			}
 		}
 	}
diff --git a/panel/lab/components/items/3_cardlets/index.vue b/panel/lab/components/items/3_cardlets/index.vue
index ae3c9246e2..ca6f85b0b9 100644
--- a/panel/lab/components/items/3_cardlets/index.vue
+++ b/panel/lab/components/items/3_cardlets/index.vue
@@ -4,7 +4,12 @@
 			<k-items :items="items" layout="cardlets" />
 		</k-lab-example>
 		<k-lab-example label="Selectable">
-			<k-items :items="selectableItems" layout="cardlets" @select="onSelect" />
+			<k-items
+				:items="selectableItems"
+				:selectable="true"
+				layout="cardlets"
+				@select="onSelect"
+			/>
 			<br />
 			<k-code>Selected: {{ selected.join(", ") }}</k-code>
 		</k-lab-example>
@@ -32,11 +37,11 @@ export default {
 		}
 	},
 	methods: {
-		onSelect(event, item, index) {
-			if (event.target.checked) {
-				this.selected.push(index);
-			} else {
+		onSelect(item, index) {
+			if (this.selected.includes(index)) {
 				this.selected = this.selected.filter((i) => i !== index);
+			} else {
+				this.selected.push(index);
 			}
 		}
 	}
diff --git a/panel/lab/components/items/4_table/index.vue b/panel/lab/components/items/4_table/index.vue
index a760189118..ecc6464580 100644
--- a/panel/lab/components/items/4_table/index.vue
+++ b/panel/lab/components/items/4_table/index.vue
@@ -2,26 +2,23 @@
 	<k-lab-examples>
 		<k-lab-example label="table">
 			<k-items
-				:columns="{
-					image: {
-						label: '',
-						type: 'image',
-						width: 'var(--table-row-height)'
-					},
-					text: {
-						label: 'Text',
-						type: 'text'
-					},
-					info: {
-						label: 'Info',
-						type: 'text'
-					}
-				}"
+				:columns="columns"
 				:items="items"
 				:sortable="true"
 				layout="table"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Selectable">
+			<k-items
+				:columns="columns"
+				:items="selectableItems"
+				:selectable="true"
+				layout="table"
+				@select="onSelect"
+			/>
+			<br />
+			<k-code>Selected: {{ selected.join(", ") }}</k-code>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 
@@ -29,6 +26,47 @@
 export default {
 	props: {
 		items: Array
+	},
+	data() {
+		return {
+			selected: []
+		};
+	},
+	computed: {
+		columns() {
+			return {
+				image: {
+					label: "",
+					type: "image",
+					width: "var(--table-row-height)"
+				},
+				text: {
+					label: "Text",
+					type: "text"
+				},
+				info: {
+					label: "Info",
+					type: "text"
+				}
+			};
+		},
+		selectableItems() {
+			return this.items.map((item) => {
+				return {
+					...item,
+					selectable: true
+				};
+			});
+		}
+	},
+	methods: {
+		onSelect(item, index) {
+			if (this.selected.includes(index)) {
+				this.selected = this.selected.filter((i) => i !== index);
+			} else {
+				this.selected.push(index);
+			}
+		}
 	}
 };
 </script>
diff --git a/panel/lab/components/items/index.php b/panel/lab/components/items/index.php
index 75b3ab7e5b..3ff50bece9 100644
--- a/panel/lab/components/items/index.php
+++ b/panel/lab/components/items/index.php
@@ -5,7 +5,7 @@
 
 return [
 	'docs' => 'k-items',
-	'items' => A::map(range(0, 20), function ($item) {
+	'items' => A::map(range(0, 10), function ($item) {
 		return [
 			'text' => 'This is item ' . $item,
 			'info' => 'Some info text',