From a1d3e1459159e5b1859e276b3af92c107bb3a074 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:40:52 +0100
Subject: [PATCH 1/9] `k-tag`: `link` support

---
 panel/src/components/Navigation/Tag.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index a2b3e0feca..35d0f633ff 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		:is="element"
+		v-bind="attrs"
 		:aria-disabled="disabled"
 		:data-theme="theme"
 		class="k-tag"
@@ -74,16 +74,17 @@ export default {
 		/**
 		 * HTML element to use
 		 */
-		element: {
-			type: String,
-			default: "button"
-		},
+		element: String,
 		/**
 		 * See `k-image-frame` or `k-icon-frame` for available options
 		 */
 		image: {
 			type: Object
 		},
+		/**
+		 * Sets a link on the tag. Link can be absolute or relative.
+		 */
+		link: String,
 		/**
 		 * Text to display in the bubble
 		 */
@@ -91,6 +92,17 @@ export default {
 	},
 	emits: ["remove"],
 	computed: {
+		attrs() {
+			const attrs = {
+				is: this.element ?? (this.link ? "k-link" : "button")
+			};
+
+			if (this.link) {
+				attrs.to = this.link;
+			}
+
+			return attrs;
+		},
 		isRemovable() {
 			return this.removable && !this.disabled;
 		}

From cf9bb887461ef846f6f7f01b8fa9f3b96fd21a1d Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:41:19 +0100
Subject: [PATCH 2/9] Better `k-tags-field-preview`

---
 .../Forms/Previews/TagsFieldPreview.vue       | 37 ++++++++++++-------
 panel/src/components/Navigation/Tags.vue      |  2 +-
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/panel/src/components/Forms/Previews/TagsFieldPreview.vue b/panel/src/components/Forms/Previews/TagsFieldPreview.vue
index c0e166609e..458cd8a6bd 100644
--- a/panel/src/components/Forms/Previews/TagsFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/TagsFieldPreview.vue
@@ -1,26 +1,37 @@
 <template>
-	<div
-		:class="['k-tags-field-preview', $options.class, $attrs.class]"
+	<ul
+		:class="['k-tags-field-preview', 'k-tags', $options.class, $attrs.class]"
 		:style="$attrs.style"
 	>
-		<k-tags
-			:draggable="false"
-			:html="html"
-			:value="tags"
-			element="ul"
-			element-tag="li"
-			theme="light"
-		/>
-	</div>
+		<li
+			v-for="(tag, tagIndex) in tags"
+			:key="tag.id ?? tag.value ?? tag.text ?? tagIndex"
+		>
+			<k-tag
+				:html="html"
+				:image="tag.image"
+				:link="tag.link"
+				:text="tag.text"
+				theme="light"
+				@click.native.stop
+			/>
+		</li>
+	</ul>
 </template>
 
 <script>
 import FieldPreview from "@/mixins/forms/fieldPreview.js";
-import { props as TagsProps } from "@/components/Navigation/Tags.vue";
 
 export default {
-	mixins: [FieldPreview, TagsProps],
+	mixins: [FieldPreview],
 	props: {
+		/**
+		 * If set to `true`, the `text` is rendered as HTML code,
+		 * otherwise as plain text
+		 */
+		html: {
+			type: Boolean
+		},
 		value: {
 			default: () => [],
 			type: [Array, String]
diff --git a/panel/src/components/Navigation/Tags.vue b/panel/src/components/Navigation/Tags.vue
index 21a514c91d..f7ba142710 100644
--- a/panel/src/components/Navigation/Tags.vue
+++ b/panel/src/components/Navigation/Tags.vue
@@ -237,7 +237,7 @@ export default {
 				// can't be matched with any defined option
 				// to avoid XSS when displaying via `v-html`
 				text: this.$helper.string.escapeHTML(tag.text ?? tag.value),
-				value: tag.value
+				...tag
 			};
 		}
 	}

From 0763474880b768e134730fdd78718cd1818cb6ca Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:42:00 +0100
Subject: [PATCH 3/9] `k-tags`: remove unused `elementTag`

---
 panel/src/components/Navigation/Tags.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/panel/src/components/Navigation/Tags.vue b/panel/src/components/Navigation/Tags.vue
index f7ba142710..0220daec0a 100644
--- a/panel/src/components/Navigation/Tags.vue
+++ b/panel/src/components/Navigation/Tags.vue
@@ -17,9 +17,10 @@
 				v-for="(item, itemIndex) in tags"
 				:key="item.id ?? item.value ?? item.text"
 				:disabled="disabled"
-				:element="elementTag"
+				:element="element"
 				:html="html"
 				:image="item.image"
+				:link="item.link"
 				:removable="removable && !disabled"
 				:theme="theme"
 				name="tag"
@@ -48,16 +49,12 @@ export const props = {
 	inheritAttrs: false,
 	props: {
 		/**
-		 * HTML element to use for the tags list
+		 * HTML element to use for each tag
 		 */
 		element: {
 			type: String,
 			default: "div"
 		},
-		/**
-		 * HTML element to use for each tag
-		 */
-		elementTag: String,
 		/**
 		 * You can set the layout to `"list"` to extend the width of each tag
 		 * to 100% and show them in a list. This is handy in narrow columns

From 1ee6e179e14a5e0aac5a1126cb6d249e5a2d16a6 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:42:20 +0100
Subject: [PATCH 4/9] `k-users-field-preview`: fix tag props

---
 panel/lab/components/fieldpreviews/users/index.vue        | 6 +++---
 panel/src/components/Forms/Previews/UsersFieldPreview.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/panel/lab/components/fieldpreviews/users/index.vue b/panel/lab/components/fieldpreviews/users/index.vue
index 03dfa06a4c..992f059bc9 100644
--- a/panel/lab/components/fieldpreviews/users/index.vue
+++ b/panel/lab/components/fieldpreviews/users/index.vue
@@ -7,12 +7,12 @@
 					:value="[
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'marge@getkirby.com',
+							email: 'marge@getkirby.com',
 							link: '/'
 						},
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'maggie@getkirby.com',
+							email: 'maggie@getkirby.com',
 							link: '/'
 						}
 					]"
@@ -28,7 +28,7 @@
 					:value="
 						Array(20).fill({
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: 'marge@getkirby.com',
+							email: 'marge@getkirby.com',
 							link: '/'
 						})
 					"
diff --git a/panel/src/components/Forms/Previews/UsersFieldPreview.vue b/panel/src/components/Forms/Previews/UsersFieldPreview.vue
index b9af66e2f2..8996302599 100644
--- a/panel/src/components/Forms/Previews/UsersFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/UsersFieldPreview.vue
@@ -5,10 +5,10 @@ export default {
 	extends: TagsFieldPreview,
 	class: "k-users-field-preview",
 	computed: {
-		bubble() {
+		tags() {
 			return this.value.map((user) => {
 				return {
-					text: user.username,
+					text: user.username ?? user.email,
 					link: user.link,
 					image: user.image
 				};

From 90bc5fc9e251956a6446b1d5e70657e6ba00b949 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:43:02 +0100
Subject: [PATCH 5/9] Link field: fix deprecated CSS class

---
 panel/src/components/Forms/Field/LinkField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/components/Forms/Field/LinkField.vue b/panel/src/components/Forms/Field/LinkField.vue
index b3bb201e6d..ed243b61e5 100644
--- a/panel/src/components/Forms/Field/LinkField.vue
+++ b/panel/src/components/Forms/Field/LinkField.vue
@@ -334,7 +334,7 @@ export default {
 	container-type: inline-size;
 	overflow: auto;
 }
-.k-link-field .k-bubbles-field-preview {
+.k-link-field .k-tags-field-preview {
 	--tag-rounded: var(--rounded-sm);
 	--tag-size: var(--height-sm);
 	padding-inline: 0;

From 692abb3640a86904ca639648d66bada7fe27ae1f Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:48:11 +0100
Subject: [PATCH 6/9] `k-tag-preview` for single tag as field preview

---
 .../components/fieldpreviews/tag/index.php    |  5 +++
 .../components/fieldpreviews/tag/index.vue    | 29 ++++++++++++++++
 .../Forms/Previews/TagFieldPreview.vue        | 34 +++++++++++++++++++
 panel/src/components/Forms/Previews/index.js  |  2 ++
 4 files changed, 70 insertions(+)
 create mode 100644 panel/lab/components/fieldpreviews/tag/index.php
 create mode 100644 panel/lab/components/fieldpreviews/tag/index.vue
 create mode 100644 panel/src/components/Forms/Previews/TagFieldPreview.vue

diff --git a/panel/lab/components/fieldpreviews/tag/index.php b/panel/lab/components/fieldpreviews/tag/index.php
new file mode 100644
index 0000000000..44c52a38d7
--- /dev/null
+++ b/panel/lab/components/fieldpreviews/tag/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-tag-field-preview',
+];
diff --git a/panel/lab/components/fieldpreviews/tag/index.vue b/panel/lab/components/fieldpreviews/tag/index.vue
new file mode 100644
index 0000000000..c68ab6b4d5
--- /dev/null
+++ b/panel/lab/components/fieldpreviews/tag/index.vue
@@ -0,0 +1,29 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview value="A" />
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+
+		<k-lab-example label="Overlow">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview
+					value="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
+				/>
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+
+		<k-lab-example label="Empty">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-tag-field-preview />
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
+	</k-lab-examples>
+</template>
diff --git a/panel/src/components/Forms/Previews/TagFieldPreview.vue b/panel/src/components/Forms/Previews/TagFieldPreview.vue
new file mode 100644
index 0000000000..1ce439b26d
--- /dev/null
+++ b/panel/src/components/Forms/Previews/TagFieldPreview.vue
@@ -0,0 +1,34 @@
+<template>
+	<ul
+		:class="[
+			'k-tag-field-preview',
+			'k-tags-field-preview',
+			'k-tags',
+			$options.class,
+			$attrs.class
+		]"
+		:style="$attrs.style"
+	>
+		<li>
+			<k-tag :html="html" :text="value" theme="light" @click.native.stop />
+		</li>
+	</ul>
+</template>
+
+<script>
+import FieldPreview from "@/mixins/forms/fieldPreview.js";
+
+export default {
+	mixins: [FieldPreview],
+	props: {
+		/**
+		 * If set to `true`, the `text` is rendered as HTML code,
+		 * otherwise as plain text
+		 */
+		html: {
+			type: Boolean
+		},
+		value: String
+	}
+};
+</script>
diff --git a/panel/src/components/Forms/Previews/index.js b/panel/src/components/Forms/Previews/index.js
index 09a1801232..05010a9f55 100644
--- a/panel/src/components/Forms/Previews/index.js
+++ b/panel/src/components/Forms/Previews/index.js
@@ -10,6 +10,7 @@ import ImageFieldPreview from "./ImageFieldPreview.vue";
 import LinkFieldPreview from "./LinkFieldPreview.vue";
 import ObjectFieldPreview from "./ObjectFieldPreview.vue";
 import PagesFieldPreview from "./PagesFieldPreview.vue";
+import TagFieldPreview from "./TagFieldPreview.vue";
 import TagsFieldPreview from "./TagsFieldPreview.vue";
 import TextFieldPreview from "./TextFieldPreview.vue";
 import TimeFieldPreview from "./TimeFieldPreview.vue";
@@ -31,6 +32,7 @@ export default {
 		app.component("k-link-field-preview", LinkFieldPreview);
 		app.component("k-object-field-preview", ObjectFieldPreview);
 		app.component("k-pages-field-preview", PagesFieldPreview);
+		app.component("k-tag-field-preview", TagFieldPreview);
 		app.component("k-tags-field-preview", TagsFieldPreview);
 		app.component("k-text-field-preview", TextFieldPreview);
 		app.component("k-toggle-field-preview", ToggleFieldPreview);

From 4a61c4d5dfb347169a3669edc4f7790bb39f85a9 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 16:49:59 +0100
Subject: [PATCH 7/9] Use aliases for tag and tags field previews

---
 panel/src/components/Forms/Previews/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/panel/src/components/Forms/Previews/index.js b/panel/src/components/Forms/Previews/index.js
index 05010a9f55..7aec6a293e 100644
--- a/panel/src/components/Forms/Previews/index.js
+++ b/panel/src/components/Forms/Previews/index.js
@@ -44,10 +44,10 @@ export default {
 		app.component("k-list-field-preview", HtmlFieldPreview);
 		app.component("k-writer-field-preview", HtmlFieldPreview);
 
-		app.component("k-checkboxes-field-preview", BubblesFieldPreview);
-		app.component("k-multiselect-field-preview", BubblesFieldPreview);
-		app.component("k-radio-field-preview", BubblesFieldPreview);
-		app.component("k-select-field-preview", BubblesFieldPreview);
-		app.component("k-toggles-field-preview", BubblesFieldPreview);
+		app.component("k-checkboxes-field-preview", TagsFieldPreview);
+		app.component("k-multiselect-field-preview", TagsFieldPreview);
+		app.component("k-radio-field-preview", TagFieldPreview);
+		app.component("k-select-field-preview", TagFieldPreview);
+		app.component("k-toggles-field-preview", TagsFieldPreview);
 	}
 };

From f86ddd52b969666984fd8c0c6a2f4a3590c32425 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 23 Jan 2025 17:00:02 +0100
Subject: [PATCH 8/9] Fix cs

---
 panel/src/components/Navigation/Tag.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index 35d0f633ff..d499d0f5ea 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -1,8 +1,9 @@
 <template>
 	<component
-		v-bind="attrs"
+		:is="element ?? (link ? 'k-link' : 'button')"
 		:aria-disabled="disabled"
 		:data-theme="theme"
+		:to="link"
 		class="k-tag"
 		type="button"
 		@keydown.delete.prevent="remove"
@@ -92,17 +93,6 @@ export default {
 	},
 	emits: ["remove"],
 	computed: {
-		attrs() {
-			const attrs = {
-				is: this.element ?? (this.link ? "k-link" : "button")
-			};
-
-			if (this.link) {
-				attrs.to = this.link;
-			}
-
-			return attrs;
-		},
 		isRemovable() {
 			return this.removable && !this.disabled;
 		}

From 6a9d32642a225f0352069eb6bfb136e778bce03b Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 24 Jan 2025 12:25:22 +0100
Subject: [PATCH 9/9] Add lab example for tags with links

---
 panel/lab/components/tags/1_tag/index.vue | 30 ++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/panel/lab/components/tags/1_tag/index.vue b/panel/lab/components/tags/1_tag/index.vue
index c824c32b60..9634af6863 100644
--- a/panel/lab/components/tags/1_tag/index.vue
+++ b/panel/lab/components/tags/1_tag/index.vue
@@ -7,7 +7,7 @@
 				{ value: 'light', text: 'Light', icon: 'sun' }
 			]"
 			:value="theme"
-			@input="theme = $event"
+			@input="(theme = $event)"
 		/>
 
 		<k-lab-example label="Slot">
@@ -66,6 +66,34 @@
 				text="Foo"
 			/>
 		</k-lab-example>
+		<k-lab-example :flex="true" label="Image & Link">
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:theme="theme"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:theme="theme"
+				text="Foo"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:removable="true"
+				:theme="theme"
+				text="Foo"
+			/>
+			<k-tag
+				link="https://getkirby.com"
+				:disabled="true"
+				:image="{ src: 'https://picsum.photos/100/100/', crop: true }"
+				:removable="true"
+				:theme="theme"
+				text="Foo"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>