Tags field preview fixes + improvements

panel/lab/components/fieldpreviews/tag/index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-tag-field-preview',
+];

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>

panel/lab/components/fieldpreviews/users/index.vue

@@ -7,12 +7,12 @@
 					:value="[
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: '[email protected]',
+							email: '[email protected]',
 							link: '/'
 						},
 						{
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: '[email protected]',
+							email: '[email protected]',
 							link: '/'
 						}
 					]"
@@ -28,7 +28,7 @@
 					:value="
 						Array(20).fill({
 							image: { icon: 'user', back: 'black', color: 'white' },
-							text: '[email protected]',
+							email: '[email protected]',
 							link: '/'
 						})
 					"

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>
 

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;

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>

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]

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
 				};

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);
@@ -42,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);
 	}
 };

panel/src/components/Navigation/Tag.vue

@@ -1,8 +1,9 @@
 <template>
 	<component
-		:is="element"
+		:is="element ?? (link ? 'k-link' : 'button')"
 		:aria-disabled="disabled"
 		:data-theme="theme"
+		:to="link"
 		class="k-tag"
 		type="button"
 		@keydown.delete.prevent="remove"
@@ -74,16 +75,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
 		 */

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
@@ -237,7 +234,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
 			};
 		}
 	}