Status display (#453)

* Convert render function into component

* Allow types definition in display registration

* Add status-dot interface

* Fix render display rendering in tabular view

* Add types to other displays

* Export tooltip from index

* Start on readme

* Add tests for status dot

src/views/private/components/render-display/index.ts

@@ -1,38 +1,4 @@
-import { defineComponent } from '@vue/composition-api';
-import displays from '@/displays';
-import { DisplayHandlerFunction } from '@/displays/types';
+import RenderDisplay from './render-display.vue';
 
-export default defineComponent({
-	props: {
-		display: {
-			type: String,
-			default: null,
-		},
-		options: {
-			type: Object,
-			default: () => ({}),
-		},
-		value: {
-			type: [String, Number, Object, Array],
-			default: null,
-		},
-	},
-	render(createElement, { props }) {
-		const display = displays.find((display) => display.id === props.display);
-
-		if (!display) {
-			return props.value;
-		}
-
-		if (typeof display.handler === 'function') {
-			return (display.handler as DisplayHandlerFunction)(props.value, props.options);
-		}
-
-		return createElement(`display-${props.display}`, {
-			props: {
-				...props.options,
-				value: props.value,
-			},
-		});
-	},
-});
+export { RenderDisplay };
+export default RenderDisplay;

src/views/private/components/render-display/render-display.vue

@@ -0,0 +1,48 @@
+<template>
+	<span v-if="!displayInfo">{{ value }}</span>
+	<span v-else-if="typeof displayInfo.handler === 'function'">
+		{{ display.handler(value, options) }}
+	</span>
+	<component
+		v-else
+		:is="`display-${display}`"
+		v-bind="options"
+		:interface="$props.interface"
+		:interface-options="interfaceOptions"
+		:value="value"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import displays from '@/displays';
+
+export default defineComponent({
+	props: {
+		display: {
+			type: String,
+			default: null,
+		},
+		options: {
+			type: Object,
+			default: () => ({}),
+		},
+		interface: {
+			type: String,
+			default: null,
+		},
+		interfaceOptions: {
+			type: Object,
+			default: null,
+		},
+		value: {
+			type: [String, Number, Object, Array],
+			default: null,
+		},
+	},
+	setup(props) {
+		const displayInfo = displays.find((display) => display.id === props.display) || null;
+		return { displayInfo };
+	},
+});
+</script>