Cleanup interfaces/displays options and types

app/src/displays/file/index.ts

@@ -6,7 +6,7 @@ export default defineDisplay(({ i18n }) => ({
 	name: i18n.t('file'),
 	icon: 'insert_photo',
 	handler: DisplayFile,
-	types: ['string'],
+	types: ['uuid'],
 	options: [],
 	fields: ['data', 'type', 'title'],
 }));

app/src/displays/formatted-text/index.ts

@@ -4,7 +4,7 @@ import DisplayFormattedText from './formatted-text.vue';
 export default defineDisplay(({ i18n }) => ({
 	id: 'formatted-text',
 	name: i18n.t('formatted_text'),
-	types: ['string'],
+	types: ['string', 'text'],
 	icon: 'text_format',
 	handler: DisplayFormattedText,
 	options: [

app/src/displays/icon/index.ts

@@ -1,5 +1,6 @@
 import { defineDisplay } from '@/displays/define';
 import DisplayIcon from './icon.vue';
+import { types } from '@/stores/fields/types';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'icon',
@@ -9,10 +10,13 @@ export default defineDisplay(({ i18n }) => ({
 	options: [
 		{
 			field: 'icon',
-			name: 'Icon',
-			interface: 'icon',
-			width: 'half',
+			name: i18n.t('icon'),
+			type: 'string',
+			system: {
+				interface: 'icon',
+				width: 'half',
+			}
 		},
 	],
-	types: ['string'],
+	types: types,
 }));

app/src/displays/image/index.ts

@@ -4,16 +4,19 @@ import DisplayImage from './image.vue';
 export default defineDisplay(({ i18n }) => ({
 	id: 'image',
 	name: i18n.t('image'),
-	types: ['string'],
+	types: ['uuid'],
 	icon: 'insert_photo',
 	handler: DisplayImage,
 	options: [
 		{
 			field: 'circle',
 			name: i18n.t('circle'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 	],
 	fields: ['data', 'type', 'title'],

app/src/displays/mime-type/index.ts

@@ -10,11 +10,14 @@ export default defineDisplay(({ i18n }) => ({
 		{
 			field: 'showAsExtension',
 			name: i18n.t('extension_only'),
-			interface: 'toggle',
-			options: {
-				label: i18n.t('only_show_the_file_extension'),
-			},
-			default_value: false,
+			type: 'boolean',
+			system: {
+				interface: 'toggle',
+				options: {
+					label: i18n.t('only_show_the_file_extension'),
+				},
+				default_value: false,
+			}
 		},
 	],
 	types: ['string'],

app/src/displays/rating/index.ts

@@ -7,5 +7,5 @@ export default defineDisplay(({ i18n }) => ({
 	icon: 'star',
 	handler: DisplayRating,
 	options: null,
-	types: ['integer', 'decimal'],
+	types: ['integer', 'decimal', 'float'],
 }));

app/src/displays/tags/index.ts

@@ -11,9 +11,12 @@ export default defineDisplay(({ i18n }) => ({
 		{
 			field: 'format',
 			name: i18n.t('format_text'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: true,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: true,
+			}
 		},
 	],
 }));

app/src/displays/template/index.ts

@@ -16,14 +16,18 @@ export default defineDisplay(({ i18n }) => ({
 	icon: 'text_fields',
 	handler: DisplayTemplate,
 	options: [
+		/** @todo make this a component so we have dynamic collection for display template component */
 		{
 			field: 'template',
 			name: i18n.t('display_template'),
-			interface: 'text-input',
-			width: 'full',
+			type: 'string',
+			system: {
+				interface: 'text-input',
+				width: 'full',
+			}
 		},
 	],
-	types: ['alias', 'string', 'integer', 'bigInteger', 'text'],
+	types: ['alias', 'string', 'uuid', 'integer', 'bigInteger', 'json'],
 	fields: (options: Options, { field, collection }) => {
 		const relatedCollection = getRelatedCollection(collection, field);
 		const { primaryKeyField } = useCollection(ref(relatedCollection as string));

app/src/displays/types.ts

@@ -27,8 +27,8 @@ export type DisplayConfig = {
 	name: string | VueI18n.TranslateResult;
 
 	handler: DisplayHandlerFunction | Component;
-	options: null | Partial<Field>[] | Component;
-	types: typeof types[number][];
+	options: null | DeepPartial<Field>[] | Component;
+	types: readonly typeof types[number][];
 	fields?: string[] | DisplayFieldsFunction;
 };
 

app/src/displays/user/index.ts

@@ -4,29 +4,42 @@ import DisplayUser from './user.vue';
 export default defineDisplay(({ i18n }) => ({
 	id: 'user',
 	name: i18n.t('user'),
-	types: ['string'],
+	types: ['uuid'],
 	icon: 'person',
 	handler: DisplayUser,
 	options: [
 		{
 			field: 'display',
 			name: i18n.t('display'),
-			default_value: 'avatar',
-			interface: 'dropdown',
-			options: {
-				choices: `
-				avatar :: Avatar
-				name :: Name
-				both :: Both
-				`,
-			},
+			type: 'string',
+			system: {
+				default_value: 'avatar',
+				interface: 'dropdown',
+				options: [
+					{
+						text: i18n.t('avatar'),
+						value: 'avatar',
+					},
+					{
+						text: i18n.t('name'),
+						value: 'name',
+					},
+					{
+						text: i18n.t('both'),
+						value: 'both',
+					},
+				]
+			}
 		},
 		{
 			field: 'circle',
 			name: i18n.t('circle'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 	],
 	fields: ['id', 'avatar.id', 'first_name', 'last_name'],

app/src/interfaces/checkboxes/index.ts

@@ -10,38 +10,84 @@ export default defineInterface(({ i18n }) => ({
 	options: [
 		{
 			field: 'choices',
+			type: 'json',
 			name: i18n.t('choices'),
-			note: i18n.t('use_double_colon_for_key'),
-			width: 'full',
-			interface: 'textarea',
+			system: {
+				width: 'full',
+				interface: 'repeater',
+				options: {
+					template: '{{ text }}',
+					fields: [
+						{
+							field: 'text',
+							type: 'string',
+							name: i18n.t('text'),
+							system: {
+								interface: 'text-input',
+							}
+						},
+						{
+							field: 'value',
+							type: 'string',
+							name: i18n.t('value'),
+							system: {
+								interface: 'text-input',
+								options: {
+									font: 'monospace'
+								},
+							}
+						},
+					]
+				}
+			}
 		},
 		{
 			field: 'allowOther',
 			name: i18n.t('allow_other'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			database: {
+				default_value: false,
+			}
 		},
 		{
 			field: 'iconOff',
 			name: i18n.t('icon_off'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box_outline_blank',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			},
+			database: {
+				default_value: 'check_box_outline_blank',
+			}
 		},
 		{
 			field: 'iconOn',
 			name: i18n.t('icon_on'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			},
+			database: {
+				default_value: 'check_box',
+			}
 		},
 		{
 			field: 'color',
 			name: i18n.t('color'),
-			width: 'half',
-			interface: 'color',
-			default_value: 'var(--primary)',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'color',
+			},
+			database: {
+				default_value: '#2f80ed',
+			}
 		},
 	],
 }));

app/src/interfaces/code/code.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 		},
 		language: {
 			type: String,
-			default: 'json',
+			default: 'text/plain',
 		},
 	},
 	setup(props, { emit }) {

app/src/interfaces/code/index.ts

@@ -20,30 +20,39 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'template',
 			name: i18n.t('template'),
-			width: 'full',
-			interface: 'code',
-			default_value: null,
+			type: 'text',
+			system: {
+				width: 'full',
+				interface: 'code',
+				options: {
+					language: 'text/plain'
+				}
+			},
+			database: {
+				default_value: null,
+			}
 		},
 		{
 			field: 'lineNumber',
 			name: i18n.t('line_number'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			database: {
+				default_value: false,
+			}
 		},
 		{
 			field: 'language',
 			name: i18n.t('language'),
-			width: 'half',
-			interface: 'dropdown',
-			options: choices,
-		},
-		{
-			field: 'altOptions',
-			name: i18n.t('alt_options'),
-			width: 'full',
-			interface: 'code',
-			default_value: null,
-		},
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'dropdown',
+				options: { choices },
+			},
+		}
 	],
 }));

app/src/interfaces/collections/index.ts

@@ -11,12 +11,17 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'includeSystem',
 			name: i18n.t('system'),
-			width: 'half',
-			interface: 'toggle',
-			options: {
-				label: i18n.t('include_system_collections'),
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('include_system_collections'),
+				},
 			},
-			default_value: false,
+			database: {
+				default_value: false,
+			}
 		},
 	],
 }));

app/src/interfaces/color/color.vue

@@ -102,12 +102,13 @@
 		<div class="presets" v-if="presets">
 			<v-button
 				v-for="preset in presets"
-				:key="preset"
+				:key="preset.color"
 				class="preset"
 				rounded
 				icon
-				:style="{ '--v-button-background-color': preset }"
-				@click="() => (hexValue = preset)"
+				:style="{ '--v-button-background-color': preset.color }"
+				v-tooltip="preset.name"
+				@click="() => (hexValue = preset.color)"
 			/>
 		</div>
 	</v-menu>
@@ -130,16 +131,46 @@ export default defineComponent({
 		presets: {
 			type: Array as PropType<string[]>,
 			default: () => [
-				'#EB5757',
-				'#F2994A',
-				'#F2C94C',
-				'#6FCF97',
-				'#27AE60',
-				'#56CCF2',
-				'#2F80ED',
-				'#9B51E0',
-				'#BB6BD9',
-				'#607D8B',
+				{
+					name: 'Red',
+					color: '#EB5757',
+				},
+				{
+					name: 'Orange',
+					color: '#F2994A',
+				},
+				{
+					name: 'Yellow',
+					color: '#F2C94C',
+				},
+				{
+					name: 'Teal',
+					color: '#6FCF97',
+				},
+				{
+					name: 'Green',
+					color: '#27AE60',
+				},
+				{
+					name: 'Light Blue',
+					color: '#56CCF2',
+				},
+				{
+					name: 'Blue',
+					color: '#2F80ED',
+				},
+				{
+					name: 'Purple',
+					color: '#9B51E0',
+				},
+				{
+					name: 'Pink',
+					color: '#BB6BD9',
+				},
+				{
+					name: 'Gray',
+					color: '#607D8B',
+				},
 			],
 		},
 	},

app/src/interfaces/color/index.ts

@@ -10,9 +10,35 @@ export default defineInterface(({ i18n }) => ({
 	options: [
 		{
 			field: 'presets',
-			name: 'Preset Colors',
-			width: 'full',
-			interface: 'repeater<color>',
+			name: i18n.t('preset_colors'),
+			type: 'string',
+			system: {
+				width: 'full',
+				interface: 'repeater',
+				options: {
+					template: '{{ name }} - {{ color }}',
+					fields: [
+						{
+							field: 'name',
+							type: 'string',
+							name: i18n.t('name'),
+							system: {
+								interface: 'text-input',
+								width: 'half',
+							}
+						},
+						{
+							field: 'color',
+							type: 'string',
+							name: i18n.t('color'),
+							system: {
+								interface: 'color',
+								width: 'half'
+							}
+						}
+					]
+				}
+			}
 		},
 	],
 }));

app/src/interfaces/divider/index.ts

@@ -13,20 +13,29 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'color',
 			name: i18n.t('color'),
-			width: 'half',
-			interface: 'color',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'color',
+			}
 		},
 		{
 			field: 'icon',
 			name: i18n.t('icon'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'title',
 			name: i18n.t('title'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 	],
 }));

app/src/interfaces/dropdown-multiselect/index.ts

@@ -10,30 +10,65 @@ export default defineInterface(({ i18n }) => ({
 	options: [
 		{
 			field: 'choices',
+			type: 'json',
 			name: i18n.t('choices'),
-			note: i18n.t('use_double_colon_for_key'),
-			width: 'full',
-			interface: 'textarea',
+			system: {
+				width: 'full',
+				interface: 'repeater',
+				options: {
+					template: '{{ text }}',
+					fields: [
+						{
+							field: 'text',
+							type: 'string',
+							name: i18n.t('text'),
+							system: {
+								interface: 'text-input',
+							}
+						},
+						{
+							field: 'value',
+							type: 'string',
+							name: i18n.t('value'),
+							system: {
+								interface: 'text-input',
+								options: {
+									font: 'monospace'
+								},
+							}
+						},
+					]
+				}
+			}
 		},
 		{
 			field: 'allowOther',
 			name: i18n.t('allow_other'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 		{
 			field: 'allowNone',
 			name: i18n.t('allow_none'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 		{
 			field: 'icon',
 			name: i18n.t('icon'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 	],
 }));

app/src/interfaces/dropdown/index.ts

@@ -10,36 +10,74 @@ export default defineInterface(({ i18n }) => ({
 	options: [
 		{
 			field: 'choices',
+			type: 'json',
 			name: i18n.t('choices'),
-			note: i18n.t('use_double_colon_for_key'),
-			width: 'full',
-			interface: 'textarea',
+			system: {
+				width: 'full',
+				interface: 'repeater',
+				options: {
+					template: '{{ text }}',
+					fields: [
+						{
+							field: 'text',
+							type: 'string',
+							name: i18n.t('text'),
+							system: {
+								interface: 'text-input',
+							}
+						},
+						{
+							field: 'value',
+							type: 'string',
+							name: i18n.t('value'),
+							system: {
+								interface: 'text-input',
+								options: {
+									font: 'monospace'
+								},
+							}
+						},
+					]
+				}
+			}
 		},
 		{
 			field: 'allowOther',
 			name: i18n.t('allow_other'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 		{
 			field: 'allowNone',
 			name: i18n.t('allow_none'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 		{
 			field: 'icon',
 			name: i18n.t('icon'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'placeholder',
 			name: i18n.t('placeholder'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 	],
 }));

app/src/interfaces/hash/index.ts

@@ -11,14 +11,20 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'placeholder',
 			name: i18n.t('placeholder'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 		{
 			field: 'masked',
 			name: i18n.t('masked'),
-			width: 'half',
-			interface: 'toggle',
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			}
 		},
 	],
 }));

app/src/interfaces/many-to-one/index.ts

@@ -12,8 +12,11 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'template',
 			name: i18n.t('display_template'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 	],
 }));

app/src/interfaces/notice/index.ts

@@ -13,30 +13,39 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'color',
 			name: i18n.t('color'),
-			width: 'half',
-			interface: 'dropdown',
-			default_value: 'normal',
-			options: {
-				items: [
-					{ itemText: i18n.t('normal'), itemValue: 'normal' },
-					{ itemText: i18n.t('info'), itemValue: 'info' },
-					{ itemText: i18n.t('success'), itemValue: 'success' },
-					{ itemText: i18n.t('warning'), itemValue: 'warning' },
-					{ itemText: i18n.t('danger'), itemValue: 'danger' },
-				],
-			},
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'dropdown',
+				default_value: 'normal',
+				options: {
+					items: [
+						{ itemText: i18n.t('normal'), itemValue: 'normal' },
+						{ itemText: i18n.t('info'), itemValue: 'info' },
+						{ itemText: i18n.t('success'), itemValue: 'success' },
+						{ itemText: i18n.t('warning'), itemValue: 'warning' },
+						{ itemText: i18n.t('danger'), itemValue: 'danger' },
+					],
+				},
+			}
 		},
 		{
 			field: 'icon',
 			name: i18n.t('icon'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'text',
 			name: i18n.t('text'),
-			width: 'full',
-			interface: 'textarea',
+			type: 'string',
+			system: {
+				width: 'full',
+				interface: 'textarea',
+			}
 		},
 	],
 }));

app/src/interfaces/numeric/index.ts

@@ -6,56 +6,77 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('numeric'),
 	icon: 'dialpad',
 	component: InterfaceNumeric,
-	types: ['integer', 'decimal', 'float'],
+	types: ['integer', 'decimal', 'float', 'bigInteger'],
 	options: [
 		{
 			field: 'placeholder',
 			name: i18n.t('placeholder'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 		{
 			field: 'min',
 			name: i18n.t('minimum_value'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 		{
 			field: 'max',
 			name: i18n.t('maximum_value'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 		{
 			field: 'step',
 			name: i18n.t('step_interval'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 		{
 			field: 'iconLeft',
 			name: i18n.t('icon_left'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'iconRight',
 			name: i18n.t('icon_right'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'font',
 			name: i18n.t('font'),
-			width: 'half',
-			interface: 'dropdown',
-			options: {
-				items: [
-					{ itemText: i18n.t('sans_serif'), itemValue: 'sans-serif' },
-					{ itemText: i18n.t('monospace'), itemValue: 'monospace' },
-					{ itemText: i18n.t('serif'), itemValue: 'serif' },
-				],
-			},
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'dropdown',
+				options: {
+					items: [
+						{ itemText: i18n.t('sans_serif'), itemValue: 'sans-serif' },
+						{ itemText: i18n.t('monospace'), itemValue: 'monospace' },
+						{ itemText: i18n.t('serif'), itemValue: 'serif' },
+					],
+				},
+			}
 		},
 	],
 }));

app/src/interfaces/radio-buttons/index.ts

@@ -10,38 +10,76 @@ export default defineInterface(({ i18n }) => ({
 	options: [
 		{
 			field: 'choices',
+			type: 'json',
 			name: i18n.t('choices'),
-			note: i18n.t('use_double_colon_for_key'),
-			width: 'full',
-			interface: 'textarea',
+			system: {
+				width: 'full',
+				interface: 'repeater',
+				options: {
+					template: '{{ text }}',
+					fields: [
+						{
+							field: 'text',
+							type: 'string',
+							name: i18n.t('text'),
+							system: {
+								interface: 'text-input',
+							}
+						},
+						{
+							field: 'value',
+							type: 'string',
+							name: i18n.t('value'),
+							system: {
+								interface: 'text-input',
+								options: {
+									font: 'monospace'
+								},
+							}
+						},
+					]
+				}
+			}
 		},
 		{
 			field: 'allowOther',
 			name: i18n.t('allow_other'),
-			width: 'half',
-			interface: 'toggle',
-			default_value: false,
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+				default_value: false,
+			}
 		},
 		{
 			field: 'iconOff',
 			name: i18n.t('icon_off'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box_outline_blank',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+				default_value: 'check_box_outline_blank',
+			}
 		},
 		{
 			field: 'iconOn',
 			name: i18n.t('icon_on'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+				default_value: 'check_box',
+			}
 		},
 		{
 			field: 'color',
 			name: i18n.t('color'),
-			width: 'half',
-			interface: 'color',
-			default_value: 'var(--primary)',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'color',
+				default_value: 'var(--primary)',
+			}
 		},
 	],
 }));

app/src/interfaces/repeater/repeater-row-header.vue

@@ -11,6 +11,7 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import { render } from 'micromustache';
 import i18n from '@/lang';
+import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 
 export default defineComponent({
 	props: {
@@ -40,7 +41,18 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayValue = computed(() => (props.value ? render(props.template, props.value) : null));
+		const fieldsInTemplate = computed(() => getFieldsFromTemplate(props.template));
+		const displayValue = computed(() => {
+			if (!props.value) return;
+
+			for (const [key, value] of Object.entries(props.value)) {
+				if (fieldsInTemplate.value.includes(key) === false) continue;
+
+				if (value === undefined) return null;
+			}
+
+			return render(props.template, props.value);
+		});
 
 		return { displayValue };
 	},

app/src/interfaces/slider/index.ts

@@ -6,25 +6,34 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('slider'),
 	icon: 'linear_scale',
 	component: InterfaceSlider,
-	types: ['integer', 'decimal', 'float'],
+	types: ['integer', 'decimal', 'float', 'bigInteger'],
 	options: [
 		{
 			field: 'minValue',
 			name: i18n.t('minimum_value'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 		{
 			field: 'maxValue',
 			name: i18n.t('maximum_value'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 		{
 			field: 'stepInterval',
 			name: i18n.t('step_interval'),
-			width: 'half',
-			interface: 'numeric',
+			type: 'integer',
+			system: {
+				width: 'half',
+				interface: 'numeric',
+			}
 		},
 	],
 }));

app/src/interfaces/status/index.ts

@@ -8,11 +8,18 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceStatus,
 	types: ['string'],
 	options: [
+		/** @TODO change this to a custom options element */
 		{
 			field: 'status_mapping',
 			name: i18n.t('status_mapping'),
-			width: 'full',
-			interface: 'code',
+			type: 'json',
+			system: {
+				width: 'full',
+				interface: 'code',
+				options: {
+					language: 'json'
+				}
+			}
 		},
 	],
 }));

app/src/interfaces/tags/index.ts

@@ -11,44 +11,65 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'placeholder',
 			name: i18n.t('placeholder'),
-			width: 'half',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+			}
 		},
 		{
 			field: 'lowercase',
 			name: i18n.t('lowercase'),
-			width: 'half',
-			interface: 'toggle',
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			}
 		},
 		{
 			field: 'alphabetize',
 			name: i18n.t('alphabetize'),
-			width: 'half',
-			interface: 'toggle',
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			}
 		},
 		{
 			field: 'iconLeft',
 			name: i18n.t('icon_left'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'iconRight',
 			name: i18n.t('icon_right'),
-			width: 'half',
-			interface: 'icon',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+			}
 		},
 		{
 			field: 'presets',
 			name: i18n.t('presets'),
-			width: 'full',
-			interface: 'text-input',
+			type: 'string',
+			system: {
+				width: 'full',
+				interface: 'text-input',
+			}
 		},
 		{
 			field: 'allowCustom',
 			name: i18n.t('allow_custom'),
-			width: 'half',
-			interface: 'toggle',
+			type: 'boolean',
+			system: {
+				width: 'half',
+				interface: 'toggle',
+			}
 		},
 	],
 }));

app/src/interfaces/text-input/index.ts

@@ -6,7 +6,7 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('text_input'),
 	icon: 'text_fields',
 	component: InterfaceTextInput,
-	types: ['string', 'text'],
+	types: ['string'],
 	options: [
 		{
 			field: 'placeholder',

app/src/interfaces/textarea/index.ts

@@ -6,7 +6,7 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('textarea'),
 	icon: 'text_fields',
 	component: InterfaceTextarea,
-	types: ['string', 'text'],
+	types: ['text'],
 	options: [
 		{
 			field: 'placeholder',

app/src/interfaces/toggle/index.ts

@@ -11,30 +11,42 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'iconOff',
 			name: i18n.t('icon_off'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box_outline_blank',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+				default_value: 'check_box_outline_blank',
+			}
 		},
 		{
 			field: 'iconOn',
 			name: i18n.t('icon_on'),
-			width: 'half',
-			interface: 'icon',
-			default_value: 'check_box',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'icon',
+				default_value: 'check_box',
+			}
 		},
 		{
 			field: 'label',
 			name: i18n.t('label'),
-			width: 'half',
-			interface: 'text-input',
-			default_value: i18n.t('active'),
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'text-input',
+				default_value: i18n.t('active'),
+			}
 		},
 		{
 			field: 'color',
 			name: i18n.t('color'),
-			width: 'half',
-			interface: 'color',
-			default_value: 'var(--primary)',
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'color',
+				default_value: 'var(--primary)',
+			}
 		},
 	],
 }));

app/src/interfaces/translations/index.ts

@@ -7,5 +7,7 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'replay',
 	types: ['alias'],
 	component: InterfaceTranslations,
-	options: [],
+	options: [
+		/** @todo add custom options component */
+	],
 }));

app/src/interfaces/user/index.ts

@@ -6,6 +6,6 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('user'),
 	icon: 'person',
 	component: InterfaceUser,
-	types: ['integer', 'bigInteger', 'string', 'text'],
+	types: ['uuid'],
 	options: [],
 }));

app/src/interfaces/wysiwyg/index.ts

@@ -6,248 +6,260 @@ export default defineInterface(({ i18n }) => ({
 	name: i18n.t('wysiwyg'),
 	icon: 'format_quote',
 	component: InterfaceWYSIWYG,
-	types: ['string', 'text'],
+	types: ['text'],
 	options: [
 		{
 			field: 'toolbar',
 			name: i18n.t('toolbar'),
-			width: 'full',
-			interface: 'checkboxes',
-			default_value: [
-				'bold',
-				'italic',
-				'underline',
-				'removeformat',
-				'link',
-				'bullist',
-				'numlist',
-				'blockquote',
-				'h1',
-				'h2',
-				'h3',
-				'image',
-				'media',
-				'hr',
-				'code',
-				'fullscreen',
-			],
-			options: {
-				choices: [
-					{
-						value: 'aligncenter',
-						text: i18n.t('wysiwyg_options.aligncenter'),
-					},
-					{
-						value: 'alignjustify',
-						text: i18n.t('wysiwyg_options.alignjustify'),
-					},
-					{
-						value: 'alignleft',
-						text: i18n.t('wysiwyg_options.alignleft'),
-					},
-					{
-						value: 'alignnone',
-						text: i18n.t('wysiwyg_options.alignnone'),
-					},
-					{
-						value: 'alignright',
-						text: i18n.t('wysiwyg_options.alignright'),
-					},
-					{
-						value: 'forecolor',
-						text: i18n.t('wysiwyg_options.forecolor'),
-					},
-					{
-						value: 'backcolor',
-						text: i18n.t('wysiwyg_options.backcolor'),
-					},
-					{
-						value: 'bold',
-						text: i18n.t('wysiwyg_options.bold'),
-					},
-					{
-						value: 'italic',
-						text: i18n.t('wysiwyg_options.italic'),
-					},
-					{
-						value: 'underline',
-						text: i18n.t('wysiwyg_options.underline'),
-					},
-					{
-						value: 'strikethrough',
-						text: i18n.t('wysiwyg_options.strikethrough'),
-					},
-					{
-						value: 'subscript',
-						text: i18n.t('wysiwyg_options.subscript'),
-					},
-					{
-						value: 'superscript',
-						text: i18n.t('wysiwyg_options.superscript'),
-					},
-					{
-						value: 'blockquote',
-						text: i18n.t('wysiwyg_options.blockquote'),
-					},
-					{
-						value: 'bullist',
-						text: i18n.t('wysiwyg_options.bullist'),
-					},
-					{
-						value: 'numlist',
-						text: i18n.t('wysiwyg_options.numlist'),
-					},
-					{
-						value: 'hr',
-						text: i18n.t('wysiwyg_options.hr'),
-					},
-					{
-						value: 'link',
-						text: i18n.t('wysiwyg_options.link'),
-					},
-					{
-						value: 'unlink',
-						text: i18n.t('wysiwyg_options.unlink'),
-					},
-					{
-						value: 'media',
-						text: i18n.t('wysiwyg_options.media'),
-					},
-					{
-						value: 'image',
-						text: i18n.t('wysiwyg_options.image'),
-					},
-					{
-						value: 'copy',
-						text: i18n.t('wysiwyg_options.copy'),
-					},
-					{
-						value: 'cut',
-						text: i18n.t('wysiwyg_options.cut'),
-					},
-					{
-						value: 'paste',
-						text: i18n.t('wysiwyg_options.paste'),
-					},
-					{
-						value: 'h1',
-						text: i18n.t('wysiwyg_options.h1'),
-					},
-					{
-						value: 'h2',
-						text: i18n.t('wysiwyg_options.h2'),
-					},
-					{
-						value: 'h3',
-						text: i18n.t('wysiwyg_options.h3'),
-					},
-					{
-						value: 'h4',
-						text: i18n.t('wysiwyg_options.h4'),
-					},
-					{
-						value: 'h5',
-						text: i18n.t('wysiwyg_options.h5'),
-					},
-					{
-						value: 'h6',
-						text: i18n.t('wysiwyg_options.h6'),
-					},
-					{
-						value: 'fontselect',
-						text: i18n.t('wysiwyg_options.fontselect'),
-					},
-					{
-						value: 'fontsizeselect',
-						text: i18n.t('wysiwyg_options.fontsizeselect'),
-					},
-					{
-						value: 'indent',
-						text: i18n.t('wysiwyg_options.indent'),
-					},
-					{
-						value: 'outdent',
-						text: i18n.t('wysiwyg_options.outdent'),
-					},
-					{
-						value: 'undo',
-						text: i18n.t('wysiwyg_options.undo'),
-					},
-					{
-						value: 'redo',
-						text: i18n.t('wysiwyg_options.redo'),
-					},
-					{
-						value: 'remove',
-						text: i18n.t('wysiwyg_options.remove'),
-					},
-					{
-						value: 'removeformat',
-						text: i18n.t('wysiwyg_options.removeformat'),
-					},
-					{
-						value: 'selectall',
-						text: i18n.t('wysiwyg_options.selectall'),
-					},
-					{
-						value: 'table',
-						text: i18n.t('wysiwyg_options.table'),
-					},
-					{
-						value: 'visualaid',
-						text: i18n.t('wysiwyg_options.visualaid'),
-					},
-					{
-						value: 'code',
-						text: i18n.t('wysiwyg_options.code'),
-					},
-					{
-						value: 'fullscreen',
-						text: i18n.t('wysiwyg_options.fullscreen'),
-					},
-					{
-						value: 'ltr rtl',
-						text: i18n.t('wysiwyg_options.directionality'),
-					},
+			type: 'json',
+			system: {
+				width: 'full',
+				interface: 'checkboxes',
+				default_value: [
+					'bold',
+					'italic',
+					'underline',
+					'removeformat',
+					'link',
+					'bullist',
+					'numlist',
+					'blockquote',
+					'h1',
+					'h2',
+					'h3',
+					'image',
+					'media',
+					'hr',
+					'code',
+					'fullscreen',
 				],
-			},
+				options: {
+					choices: [
+						{
+							value: 'aligncenter',
+							text: i18n.t('wysiwyg_options.aligncenter'),
+						},
+						{
+							value: 'alignjustify',
+							text: i18n.t('wysiwyg_options.alignjustify'),
+						},
+						{
+							value: 'alignleft',
+							text: i18n.t('wysiwyg_options.alignleft'),
+						},
+						{
+							value: 'alignnone',
+							text: i18n.t('wysiwyg_options.alignnone'),
+						},
+						{
+							value: 'alignright',
+							text: i18n.t('wysiwyg_options.alignright'),
+						},
+						{
+							value: 'forecolor',
+							text: i18n.t('wysiwyg_options.forecolor'),
+						},
+						{
+							value: 'backcolor',
+							text: i18n.t('wysiwyg_options.backcolor'),
+						},
+						{
+							value: 'bold',
+							text: i18n.t('wysiwyg_options.bold'),
+						},
+						{
+							value: 'italic',
+							text: i18n.t('wysiwyg_options.italic'),
+						},
+						{
+							value: 'underline',
+							text: i18n.t('wysiwyg_options.underline'),
+						},
+						{
+							value: 'strikethrough',
+							text: i18n.t('wysiwyg_options.strikethrough'),
+						},
+						{
+							value: 'subscript',
+							text: i18n.t('wysiwyg_options.subscript'),
+						},
+						{
+							value: 'superscript',
+							text: i18n.t('wysiwyg_options.superscript'),
+						},
+						{
+							value: 'blockquote',
+							text: i18n.t('wysiwyg_options.blockquote'),
+						},
+						{
+							value: 'bullist',
+							text: i18n.t('wysiwyg_options.bullist'),
+						},
+						{
+							value: 'numlist',
+							text: i18n.t('wysiwyg_options.numlist'),
+						},
+						{
+							value: 'hr',
+							text: i18n.t('wysiwyg_options.hr'),
+						},
+						{
+							value: 'link',
+							text: i18n.t('wysiwyg_options.link'),
+						},
+						{
+							value: 'unlink',
+							text: i18n.t('wysiwyg_options.unlink'),
+						},
+						{
+							value: 'media',
+							text: i18n.t('wysiwyg_options.media'),
+						},
+						{
+							value: 'image',
+							text: i18n.t('wysiwyg_options.image'),
+						},
+						{
+							value: 'copy',
+							text: i18n.t('wysiwyg_options.copy'),
+						},
+						{
+							value: 'cut',
+							text: i18n.t('wysiwyg_options.cut'),
+						},
+						{
+							value: 'paste',
+							text: i18n.t('wysiwyg_options.paste'),
+						},
+						{
+							value: 'h1',
+							text: i18n.t('wysiwyg_options.h1'),
+						},
+						{
+							value: 'h2',
+							text: i18n.t('wysiwyg_options.h2'),
+						},
+						{
+							value: 'h3',
+							text: i18n.t('wysiwyg_options.h3'),
+						},
+						{
+							value: 'h4',
+							text: i18n.t('wysiwyg_options.h4'),
+						},
+						{
+							value: 'h5',
+							text: i18n.t('wysiwyg_options.h5'),
+						},
+						{
+							value: 'h6',
+							text: i18n.t('wysiwyg_options.h6'),
+						},
+						{
+							value: 'fontselect',
+							text: i18n.t('wysiwyg_options.fontselect'),
+						},
+						{
+							value: 'fontsizeselect',
+							text: i18n.t('wysiwyg_options.fontsizeselect'),
+						},
+						{
+							value: 'indent',
+							text: i18n.t('wysiwyg_options.indent'),
+						},
+						{
+							value: 'outdent',
+							text: i18n.t('wysiwyg_options.outdent'),
+						},
+						{
+							value: 'undo',
+							text: i18n.t('wysiwyg_options.undo'),
+						},
+						{
+							value: 'redo',
+							text: i18n.t('wysiwyg_options.redo'),
+						},
+						{
+							value: 'remove',
+							text: i18n.t('wysiwyg_options.remove'),
+						},
+						{
+							value: 'removeformat',
+							text: i18n.t('wysiwyg_options.removeformat'),
+						},
+						{
+							value: 'selectall',
+							text: i18n.t('wysiwyg_options.selectall'),
+						},
+						{
+							value: 'table',
+							text: i18n.t('wysiwyg_options.table'),
+						},
+						{
+							value: 'visualaid',
+							text: i18n.t('wysiwyg_options.visualaid'),
+						},
+						{
+							value: 'code',
+							text: i18n.t('wysiwyg_options.code'),
+						},
+						{
+							value: 'fullscreen',
+							text: i18n.t('wysiwyg_options.fullscreen'),
+						},
+						{
+							value: 'ltr rtl',
+							text: i18n.t('wysiwyg_options.directionality'),
+						},
+					],
+				},
+			}
 		},
 		{
 			field: 'font',
 			name: i18n.t('font'),
-			width: 'half',
-			interface: 'dropdown',
-			default: 'sans-serif',
-			options: {
-				choices: [
-					{ text: i18n.t('sans_serif'), value: 'sans-serif' },
-					{ text: i18n.t('monospace'), value: 'monospace' },
-					{ text: i18n.t('serif'), value: 'serif' },
-				],
-			},
+			type: 'string',
+			system: {
+				width: 'half',
+				interface: 'dropdown',
+				default: 'sans-serif',
+				options: {
+					choices: [
+						{ text: i18n.t('sans_serif'), value: 'sans-serif' },
+						{ text: i18n.t('monospace'), value: 'monospace' },
+						{ text: i18n.t('serif'), value: 'serif' },
+					],
+				},
+			}
 		},
 		{
 			field: 'customFormats',
 			name: i18n.t('custom_formats'),
-			interface: 'code',
-			options: {
-				type: 'application/json',
-				template: {
-					title: 'My Custom Format',
-					inline: 'span',
-					classes: 'custom-wrapper',
-					styles: { color: '#00ff00', 'font-size': '20px' },
-					attributes: { title: 'My Custom Wrapper' },
+			type: 'json',
+			system: {
+				interface: 'code',
+				options: {
+					language: 'json',
+					template: JSON.stringify({
+						title: 'My Custom Format',
+						inline: 'span',
+						classes: 'custom-wrapper',
+						styles: { color: '#00ff00', 'font-size': '20px' },
+						attributes: { title: 'My Custom Wrapper' },
+					}, null, 4),
 				},
-			},
+			}
 		},
 		{
 			field: 'tinymceOverrides',
 			name: i18n.t('tinymce_options_override'),
-			interface: 'code',
-			options: {
-				type: 'application/json',
-			},
+			type: 'json',
+			system: {
+				interface: 'code',
+				options: {
+					language: 'json',
+				},
+			}
 		},
 	],
 }));

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

@@ -27,6 +27,11 @@
 	"editing_field": "Editing {field}",
 	"within_collectoin": "within {collection}",
 
+	"line_number": "Line Number",
+	"language": "Language",
+
+	"preset_colors": "Preset Colors",
+
 	"global": "Global",
 
 	"admins_have_all_permissions": "Admins have all permissions",

app/src/stores/fields/types.ts

@@ -62,7 +62,7 @@ export type SystemField = {
 	special: string | null;
 	translation: null | Translation[];
 	width: Width | null;
-	note: string | null;
+	note: string | TranslateResult | null;
 };
 
 export interface FieldRaw {