update slug, markdown, hash, collections, code

app/src/interfaces/code/code.vue

@@ -268,8 +268,12 @@ export default defineComponent({
 		};
 
 		function fillTemplate() {
-			const parse = JSON.parse(props.template);
-			emit('input', parse || props.template);
+			try {
+				const parse = JSON.parse(props.template);
+				emit('input', parse || props.template);
+			} catch {
+				// We won't stage invalid JSON
+			}
 		}
 	},
 });

app/src/interfaces/code/index.ts

@@ -55,4 +55,5 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
+	recommendedDisplays: ['raw'],
 }));

app/src/interfaces/collections/index.ts

@@ -21,7 +21,8 @@ export default defineInterface(({ i18n }) => ({
 			},
 			schema: {
 				default_value: false,
-			}
+			},
 		},
 	],
+	recommendedDisplays: ['collection'],
 }));

app/src/interfaces/hash/index.ts

@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'hash',
 	name: i18n.t('hash'),
-	icon: 'text_fields',
+	icon: 'fingerprint',
 	component: InterfaceHash,
 	types: ['string'],
 	options: [
@@ -15,7 +15,7 @@ export default defineInterface(({ i18n }) => ({
 			meta: {
 				width: 'half',
 				interface: 'text-input',
-			}
+			},
 		},
 		{
 			field: 'masked',
@@ -24,7 +24,7 @@ export default defineInterface(({ i18n }) => ({
 			meta: {
 				width: 'half',
 				interface: 'toggle',
-			}
+			},
 		},
 	],
 }));

app/src/interfaces/markdown/index.ts

@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'markdown',
 	name: i18n.t('markdown'),
-	icon: 'text_fields',
+	icon: 'functions',
 	component: InterfaceMarkdown,
 	types: ['text'],
 	options: [

app/src/interfaces/slug/index.ts

@@ -7,5 +7,35 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'link',
 	component: InterfaceSlug,
 	types: ['string'],
-	options: [],
+	options: [
+		{
+			field: 'placeholder',
+			name: i18n.t('placeholder'),
+			meta: {
+				width: 'half',
+				interface: 'text-input',
+				options: {
+					placeholder: i18n.t('text_shown_when_no_value'),
+				},
+			},
+		},
+		{
+			field: 'iconLeft',
+			name: i18n.t('icon_left'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'icon',
+			},
+		},
+		{
+			field: 'iconRight',
+			name: i18n.t('icon_right'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'icon',
+			},
+		},
+	],
 }));

app/src/interfaces/slug/slug.vue

@@ -1,5 +1,16 @@
 <template>
-	<v-input :value="value" :disabled="disabled" @input="$emit('input', $event)" slug />
+	<v-input
+		:value="value"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:iconLeft="iconLeft"
+		:iconRight="iconRight"
+		@input="$emit('input', $event)"
+		slug
+	>
+		<template v-if="iconLeft" #prepend><v-icon :name="iconLeft" /></template>
+		<template v-if="iconRight" #append><v-icon :name="iconRight" /></template>
+	</v-input>
 </template>
 
 <script lang="ts">
@@ -15,6 +26,18 @@ export default defineComponent({
 			type: Boolean,
 			default: null,
 		},
+		iconLeft: {
+			type: String,
+			default: null,
+		},
+		iconRight: {
+			type: String,
+			default: null,
+		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
 	},
 });
 </script>

app/src/modules/settings/routes/data-model/field-detail/components/interface.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 				datetime: ['datetime'],
 				date: ['datetime'],
 				time: ['datetime'],
-				json: ['code'],
+				json: ['checkboxes', 'tags'],
 				uuid: ['text-input'],
 			};
 
@@ -85,15 +85,18 @@ export default defineComponent({
 				return item;
 			});
 
+			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [
+				...recommended.map((key) => interfaceItems.find((item) => item.value === key)),
+			];
+
 			if (interfaceItems.length >= 5 && recommended.length > 0) {
-				return [
-					...recommended.map((key) => interfaceItems.find((item) => item.value === key)),
-					{ divider: true },
-					...interfaceItems.filter((item) => recommended.includes(item.value as string) === false),
-				];
-			} else {
-				return interfaceItems;
+				recommendedItems.push({ divider: true });
 			}
+
+			recommendedItems.push(
+				...interfaceItems.filter((item) => recommended.includes(item.value as string) === false)
+			);
+			return recommendedItems;
 		});
 
 		const selectedInterface = computed(() => {