Add badge display

app/src/displays/badge/badge.vue

@@ -0,0 +1,69 @@
+<template>
+	<div>
+		<value-null v-if="value === null" />
+		<div class="badge" :style="styles">{{ displayValue }}</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+
+type Choice = {
+	value: string;
+	text: string;
+	foreground: string | null;
+	background: string | null;
+};
+
+export default defineComponent({
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		choices: {
+			type: Array as PropType<Choice[]>,
+			default: () => [],
+		},
+		defaultBackground: {
+			type: String,
+			required: true,
+		},
+		defaultForeground: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const currentChoice = computed(() => {
+			return props.choices.find((choice) => {
+				return choice.value === props.value;
+			});
+		});
+
+		const displayValue = computed(() => {
+			if (!currentChoice.value) return props.value;
+			return currentChoice.value.text;
+		});
+
+		const styles = computed(() => {
+			return {
+				color: currentChoice.value?.foreground || props.defaultForeground,
+				backgroundColor: currentChoice.value?.background || props.defaultBackground,
+			};
+		});
+
+		return { displayValue, styles };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.badge {
+	display: inline-block;
+	padding: 8px;
+	line-height: 1;
+	vertical-align: middle;
+	border-radius: var(--border-radius);
+}
+</style>

app/src/displays/badge/index.ts

@@ -0,0 +1,82 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayBadge from './badge.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'badge',
+	name: i18n.t('badge'),
+	types: ['string'],
+	icon: 'flag',
+	handler: DisplayBadge,
+	options: [
+		{
+			field: 'defaultForeground',
+			name: i18n.t('default_foreground'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+		},
+		{
+			field: 'defaultBackground',
+			name: i18n.t('default_background'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+		},
+		{
+			field: 'choices',
+			name: i18n.t('choices'),
+			type: 'json',
+			meta: {
+				interface: 'repeater',
+				options: {
+					template: '{{text}}',
+					fields: [
+						{
+							field: 'value',
+							name: i18n.t('value'),
+							type: 'string',
+							meta: {
+								interface: 'text-input',
+								options: {
+									font: 'monospace',
+								},
+								width: 'half',
+							},
+						},
+						{
+							field: 'text',
+							name: i18n.t('text'),
+							type: 'string',
+							meta: {
+								interface: 'text-input',
+								width: 'half',
+							},
+						},
+						{
+							field: 'foreground',
+							name: i18n.t('foreground_color'),
+							type: 'string',
+							meta: {
+								interface: 'color',
+								width: 'half',
+							},
+						},
+						{
+							field: 'background',
+							name: i18n.t('background_color'),
+							type: 'string',
+							meta: {
+								interface: 'color',
+								width: 'half',
+							},
+						},
+					],
+				},
+			},
+		},
+	],
+}));

app/src/displays/index.ts

@@ -1,34 +1,36 @@
-import DisplayIcon from './icon/';
-import DisplayFormatTitle from './format-title/';
-import DisplayStatusDot from './status-dot/';
-import DisplayStatusBadge from './status-badge/';
-import DisplayTags from './tags/';
-import DisplayFormattedText from './formatted-text';
-import DisplayImage from './image';
-import DisplayUser from './user';
-import DisplayRating from './rating';
+import DisplayBadge from './badge';
 import DisplayDateTime from './datetime';
-import DisplayTemplate from './template';
-import DisplayFilesize from './filesize';
-import DisplayMimeType from './mime-type';
 import DisplayFile from './file';
+import DisplayFilesize from './filesize';
+import DisplayFormattedText from './formatted-text';
+import DisplayFormatTitle from './format-title/';
+import DisplayIcon from './icon/';
+import DisplayImage from './image';
+import DisplayMimeType from './mime-type';
+import DisplayRating from './rating';
 import DisplayRaw from './raw';
+import DisplayStatusBadge from './status-badge/';
+import DisplayStatusDot from './status-dot/';
+import DisplayTags from './tags/';
+import DisplayTemplate from './template';
+import DisplayUser from './user';
 
 export const displays = [
-	DisplayIcon,
-	DisplayFormatTitle,
-	DisplayStatusDot,
-	DisplayStatusBadge,
-	DisplayTags,
-	DisplayFormattedText,
-	DisplayImage,
-	DisplayUser,
-	DisplayRating,
+	DisplayBadge,
 	DisplayDateTime,
-	DisplayTemplate,
-	DisplayFilesize,
-	DisplayMimeType,
 	DisplayFile,
+	DisplayFilesize,
+	DisplayFormattedText,
+	DisplayFormatTitle,
+	DisplayIcon,
+	DisplayImage,
+	DisplayMimeType,
+	DisplayRating,
 	DisplayRaw,
+	DisplayStatusBadge,
+	DisplayStatusDot,
+	DisplayTags,
+	DisplayTemplate,
+	DisplayUser,
 ];
 export default displays;