Tabular displays (#452)

* Add render-display component

* Render displays in tabular layout

* Add readme for render-display

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

@@ -0,0 +1,38 @@
+import { defineComponent } from '@vue/composition-api';
+import displays from '@/displays';
+import { DisplayHandlerFunction } from '@/displays/types';
+
+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,
+			},
+		});
+	},
+});

src/views/private/components/render-display/readme.md

@@ -0,0 +1,32 @@
+# Render Display
+
+Renders the display component with the provided options and value. This will do the display function
+check and uses the functional handler if that's set.
+
+## Usage
+
+```html
+<render-display
+	display="array"
+	:options="{
+		wrap: false
+	}"
+	value="example,value"
+/>
+```
+
+## Props
+| Prop       | Description                          | Default |
+|------------|--------------------------------------|---------|
+| `display`* | The display to render the value with |         |
+| `options`  | The display options for the display  | `null`  |
+| `value`    | The value to render in the display   | `null`  |
+
+## Events
+n/a
+
+## Slots
+n/a
+
+## CSS Variables
+n/a