Merge pull request #6843 from getkirby/v5/batch-item-fully-selectable

Selectable item: click anywhere to select
getkirby · Dec 7, 2024 · ebad25e · ebad25e
2 parents 5dedcc3 + ff14454
commit ebad25e
Showing 1 changed file with 32 additions and 11 deletions.
diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
@@ -4,9 +4,10 @@
 		:class="['k-item', `k-${layout}-item`, $attrs.class]"
 		:data-has-image="hasFigure"
 		:data-layout="layout"
+		:data-selectable="selectable"
 		:data-theme="theme"
 		:style="$attrs.style"
-		@click="$emit('click', $event)"
+		@click="onClick"
 		@dragstart="$emit('drag', $event)"
 	>
 		<!-- Image -->
@@ -25,7 +26,11 @@
 		<!-- Content -->
 		<div class="k-item-content">
 			<h3 class="k-item-title" :title="title(text)">
-				<k-link v-if="link !== false" :target="target" :to="link">
+				<k-link
+					v-if="link !== false && selectable !== true"
+					:target="target"
+					:to="link"
+				>
 					<!-- eslint-disable-next-line vue/no-v-html -->
 					<span v-html="text ?? '–'" />
 				</k-link>
@@ -49,7 +54,11 @@
 			/>
 
 			<label v-if="selectable" class="k-item-options-checkbox">
-				<input type="checkbox" @change="$emit('select', $event)" />
+				<input
+					ref="selector"
+					type="checkbox"
+					@change="$emit('select', $event)"
+				/>
 			</label>
 
 			<!-- Options -->
@@ -131,6 +140,13 @@ export default {
 		}
 	},
 	methods: {
+		onClick(event) {
+			if (this.selectable) {
+				return this.$refs.selector.click();
+			}
+
+			this.$emit("click", event);
+		},
 		onOption(event) {
 			this.$emit("action", event);
 			this.$emit("option", event);
@@ -206,14 +222,6 @@ export default {
 	--button-height: var(--item-button-height);
 	--button-width: var(--item-button-width);
 }
-.k-item-options-checkbox {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	height: var(--item-button-height);
-	width: var(--item-button-height);
-	flex-shrink: 0;
-}
 
 .k-item .k-sort-button {
 	position: absolute;
@@ -346,4 +354,17 @@ export default {
 	outline: 1px solid var(--color-border);
 	outline-offset: -1px;
 }
+
+/** Selectable state */
+.k-item[data-selectable="true"] {
+	cursor: pointer;
+}
+.k-item-options-checkbox {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--item-button-height);
+	width: var(--item-button-height);
+	flex-shrink: 0;
+}
 </style>