Add formatted-json-value display

app/src/displays/formatted-json-value/formatted-json-value.vue

@@ -0,0 +1,37 @@
+<template>
+	<value-null v-if="!displayValue" />
+
+	<span v-else>
+		{{ displayValue }}
+	</span>
+</template>
+
+<script lang="ts">
+import { render } from 'micromustache';
+import { defineComponent, computed } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Object,
+			default: null,
+		},
+		format: {
+			type: String,
+			default: false,
+		},
+	},
+	setup(props) {
+		const displayValue = computed(() => {
+			if (!props.value) return null;
+			try {
+				return render(props.format, props.value);
+			} catch (error) {
+				return null;
+			}
+		});
+
+		return { displayValue };
+	},
+});
+</script>

app/src/displays/formatted-json-value/index.ts

@@ -0,0 +1,25 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayJsonValue from './formatted-json-value.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'formatted-json-value',
+	name: i18n.t('displays.formatted-json-value.formatted-json-value'),
+	description: i18n.t('displays.formatted-json-value.description'),
+	types: ['json'],
+	icon: 'settings_ethernet',
+	handler: DisplayJsonValue,
+	options: [
+		{
+			field: 'format',
+			name: i18n.t('display_template'),
+			type: 'string',
+			meta: {
+				width: 'full',
+				interface: 'text-input',
+				options: {
+					placeholder: '{{ field }}',
+				},
+			},
+		},
+	],
+}));

app/src/lang/en-US/displays.json

@@ -48,6 +48,10 @@
 			"format_title_label": "Auto-format casing",
 			"bold_label": "Use bold style"
 		},
+		"formatted-json-value": {
+			"formatted-json-value": "Formatted JSON value",
+			"description": "Display a formatted version of the object"
+		},
 		"icon": {
 			"icon": "Icon",
 			"description": "Display an icon",