From 8accf93107f3ad87c6e3471f1b51485689e607e7 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 22 Jul 2024 18:22:18 +0200
Subject: [PATCH] Models dialogs: use choice input instead icons

Fixes #6044
---
 panel/src/components/Dialogs/ModelsDialog.vue | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/panel/src/components/Dialogs/ModelsDialog.vue b/panel/src/components/Dialogs/ModelsDialog.vue
index 6b8e7cd22a..5fb2fcd7f3 100644
--- a/panel/src/components/Dialogs/ModelsDialog.vue
+++ b/panel/src/components/Dialogs/ModelsDialog.vue
@@ -28,17 +28,10 @@
 			@paginate="paginate"
 		>
 			<template #options="{ item: row }">
-				<k-button
-					v-if="isSelected(row)"
-					:icon="multiple && max !== 1 ? 'check' : 'circle-nested'"
-					:title="$t('remove')"
-					theme="info"
-					@click.stop="toggle(row)"
-				/>
-				<k-button
-					v-else
-					:title="$t('select')"
-					icon="circle-outline"
+				<k-choice-input
+					:checked="isSelected(row)"
+					:type="multiple && max !== 1 ? 'checkbox' : 'radio'"
+					:title="isSelected(row) ? $t('remove') : $t('select')"
 					@click.stop="toggle(row)"
 				/>
 				<slot name="options" v-bind="{ item: row }" />
@@ -166,6 +159,18 @@ export default {
 .k-models-dialog .k-list-item {
 	cursor: pointer;
 }
+.k-models-dialog .k-choice-input {
+	--choice-color-checked: var(--color-focus);
+
+	display: flex;
+	align-items: center;
+	height: var(--item-button-height);
+	margin-inline-end: var(--spacing-3);
+}
+.k-models-dialog .k-choice-input input {
+	top: 0;
+}
+
 .k-models-dialog .k-collection-footer .k-pagination {
 	margin-bottom: 0;
 }