Merge branch 'develop-minor' into v6/develop

Author: distantnative

panel/src/components/Collection/Items.vue

@@ -28,18 +28,18 @@
 		@change="$emit('change', $event)"
 		@end="$emit('sort', items, $event)"
 	>
-		<template v-for="(item, itemIndex) in items">
+		<template v-for="(item, itemIndex) in itemsWithIds">
 			<slot v-bind="{ item, itemIndex }">
 				<k-item
-					:key="item.id ?? itemIndex"
+					:key="item.id"
 					v-bind="item"
-					:class="{ 'k-draggable-item': sortable && item.sortable }"
+					:class="{ 'k-draggable-item': sortable && item.sortable !== false }"
 					:image="imageOptions(item)"
 					:layout="layout"
 					:link="link ? item.link : false"
 					:selecting="selecting"
 					:selectable="item.selectable"
-					:sortable="sortable && item.sortable"
+					:sortable="sortable && item.sortable !== false"
 					:theme="item.theme ?? theme"
 					:width="item.column"
 					@click="$emit('item', item, itemIndex)"
@@ -140,6 +140,16 @@ export default {
 				draggable: ".k-draggable-item"
 			};
 		},
+		/**
+		 * Adds a unique id to each item if it doesn't have one
+		 * to be used for `:key` in the `v-for` loop
+		 */
+		itemsWithIds() {
+			return this.items.map((item) => ({
+				...item,
+				id: item.id ?? item.uuid ?? this.$helper.uuid()
+			}));
+		},
 		table() {
 			return {
 				columns: this.columns,

panel/src/components/Lab/Docs/Props.vue

@@ -4,10 +4,12 @@
 		<div class="k-table">
 			<table>
 				<thead>
-					<th style="width: 10rem">Name</th>
-					<th style="width: 10rem">Type</th>
-					<th style="width: 10rem">Default</th>
-					<th>Description</th>
+					<tr>
+						<th style="width: 10rem">Name</th>
+						<th style="width: 10rem">Type</th>
+						<th style="width: 10rem">Default</th>
+						<th>Description</th>
+					</tr>
 				</thead>
 				<tbody>
 					<tr v-for="prop in props" :key="prop.name">