Tabular displays (#452)

* Add render-display component

* Render displays in tabular layout

* Add readme for render-display

src/components/register.ts

@@ -99,6 +99,8 @@ import TransitionExpand from './transition/expand';
 
 Vue.component('transition-expand', TransitionExpand);
 
+import RenderDisplay from '@/views/private/components/render-display';
 import RenderTemplate from '@/views/private/components/render-template';
 
+Vue.component('render-display', RenderDisplay);
 Vue.component('render-template', RenderTemplate);

src/layouts/tabular/tabular.vue

@@ -68,6 +68,17 @@
 			@click:row="onRowClick"
 			@update:sort="onSortChange"
 		>
+			<template v-for="header in tableHeaders" v-slot:[`item.${header.value}`]="{ item }">
+				<span :key="header.value" v-if="!header.display">{{ item[header.value] }}</span>
+				<render-display
+					v-else
+					:key="header.value"
+					:options="header.display_options"
+					:value="header.value"
+					:display="header.display"
+				/>
+			</template>
+
 			<template #footer>
 				<div class="footer">
 					<div class="pagination">
@@ -320,6 +331,8 @@ export default defineComponent({
 							localWidths.value[field.field] ||
 							_viewOptions.value?.widths?.[field.field] ||
 							null,
+						display: field.display,
+						display_options: field.display_options,
 					}));
 				},
 				set(val) {
@@ -369,6 +382,7 @@ export default defineComponent({
 				onRowClick,
 				onSortChange,
 				activeFields,
+				getFieldDisplay,
 			};
 
 			function onRowClick(item: Item) {
@@ -398,6 +412,18 @@ export default defineComponent({
 
 				sort.value = sortString;
 			}
+
+			function getFieldDisplay(fieldKey: string) {
+				const field = availableFields.value.find((field) => field.field === fieldKey);
+
+				if (field === undefined) return null;
+				if (!field.display) return null;
+
+				return {
+					display: field.display,
+					options: field.display_options,
+				};
+			}
 		}
 	},
 });

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