add missing defaults and clean code

app/src/interfaces/checkboxes/index.ts

@@ -77,6 +77,9 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
+			schema: {
+				default_value: 'check_box'
+			}
 		},
 		{
 			field: 'iconOff',
@@ -86,6 +89,9 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
+			schema: {
+				default_value: 'check_box_outline_blank'
+			}
 		},
 	],
 	recommendedDisplays: ['tags'],

app/src/interfaces/code/code.vue

@@ -275,10 +275,9 @@ export default defineComponent({
 
 		function fillTemplate() {
 			try {
-				const parse = JSON.parse(props.template);
-				emit('input', parse || props.template);
+				emit('input', JSON.parse(props.template));
 			} catch {
-				// We won't stage invalid JSON
+				emit('input', props.template);
 			}
 		}
 	},
@@ -302,12 +301,6 @@ export default defineComponent({
 	text-align: right;
 }
 
-::v-deep .CodeMirror {
-	.CodeMirror-placeholder {
-		color: var(--foreground-subdued);
-	}
-}
-
 .v-button {
 	position: absolute;
 	top: 10px;

app/src/interfaces/code/index.ts

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

app/src/interfaces/divider/divider.vue

@@ -1,13 +1,12 @@
 <template>
 	<v-divider
-		:inline-title="false"
 		:class="{ margin: icon || title }"
 		:style="{
 			'--v-divider-color': color,
 			'--v-divider-label-color': color,
 		}"
 		large
-		:inlineTitle="inlineTitle"
+		:inline-title="inlineTitle"
 	>
 		<template v-if="icon" #icon><v-icon :name="icon" /></template>
 		<template v-if="title" #default>{{ title }}</template>

app/src/interfaces/divider/index.ts

@@ -10,7 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	recommendedDisplays: ['raw'],
 	options: [
 		{
 			field: 'color',

app/src/interfaces/dropdown-multiselect/dropdown-multiselect.vue

@@ -12,6 +12,7 @@
 		:show-deselect="allowNone"
 		:placeholder="placeholder"
 		:allow-other="allowOther"
+		:close-on-content-click="false"
 	>
 		<template #prepend v-if="icon">
 			<v-icon :name="icon" />

app/src/interfaces/markdown/index.ts

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

app/src/interfaces/notice/index.ts

@@ -10,7 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	recommendedDisplays: ['raw'],
 	options: [
 		{
 			field: 'color',

app/src/interfaces/numeric/index.ts

@@ -8,7 +8,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'dialpad',
 	component: InterfaceNumeric,
 	types: ['integer', 'decimal', 'float', 'bigInteger'],
-	recommendedDisplays: ['raw'],
 	options: [
 		{
 			field: 'min',

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

@@ -53,6 +53,9 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
+			schema: {
+				default_value: 'radio_button_checked'
+			}
 		},
 		{
 			field: 'iconOff',
@@ -62,6 +65,9 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
+			schema: {
+				default_value: 'radio_button_unchecked'
+			}
 		},
 		{
 			field: 'color',

app/src/interfaces/repeater/index.ts

@@ -10,5 +10,4 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceRepeater,
 	types: ['json'],
 	options: RepeaterOptions,
-	recommendedDisplays: ['related-values'],
 }));

app/src/interfaces/repeater/options.vue

@@ -1,20 +1,10 @@
 <template>
 	<div>
 		<div class="grid">
-			<div class="grid-element">
+			<div class="grid-element full">
 				<p class="type-label">{{ $t('template') }}</p>
 				<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
 			</div>
-			<div class="grid-element">
-				<p class="type-label">{{ $t('interfaces.repeater.max_amount') }}</p>
-				<v-input
-					class="input"
-					type="number"
-					v-model="limit"
-					:min="1"
-					:placeholder="$t('interfaces.repeater.max_amount_placeholder')"
-				/>
-			</div>
 			<div class="grid-element full">
 				<p class="type-label">{{ $t('interfaces.repeater.edit_fields') }}</p>
 				<repeater
@@ -134,18 +124,6 @@ export default defineComponent({
 			},
 		];
 
-		const limit = computed({
-			get() {
-				return props.value?.limit;
-			},
-			set(newLimit: string) {
-				emit('input', {
-					...(props.value || {}),
-					limit: newLimit,
-				});
-			},
-		});
-
 		const template = computed({
 			get() {
 				return props.value?.template;
@@ -158,7 +136,7 @@ export default defineComponent({
 			},
 		});
 
-		return { repeaterValue, repeaterFields, template, limit };
+		return { repeaterValue, repeaterFields, template };
 	},
 });
 </script>

app/src/interfaces/repeater/repeater.vue

@@ -14,7 +14,7 @@
 		</draggable>
 		<button @click="addNew" class="add-new" v-if="showAddNew">
 			<v-icon name="add" />
-			{{ placeholder }}
+			{{ createItemText }}
 		</button>
 	</v-item-group>
 </template>
@@ -42,7 +42,7 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
-		placeholder: {
+		createItemText: {
 			type: String,
 			default: i18n.t('add_a_new_item'),
 		},

app/src/interfaces/slider/index.ts

@@ -8,7 +8,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'linear_scale',
 	component: InterfaceSlider,
 	types: ['integer', 'decimal', 'float', 'bigInteger'],
-	recommendedDisplays: ['rating'],
 	options: [
 		{
 			field: 'minValue',

app/src/interfaces/slug/index.ts

@@ -8,13 +8,12 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'link',
 	component: InterfaceSlug,
 	types: ['string'],
-	recommendedDisplays: ['formatted-value'],
 	options: [
 		{
 			field: 'placeholder',
 			name: i18n.t('placeholder'),
 			meta: {
-				width: 'half',
+				width: 'full',
 				interface: 'text-input',
 				options: {
 					placeholder: i18n.t('enter_a_placeholder'),

app/src/interfaces/tags/tags.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 		},
 		value: {
 			type: Array as PropType<string[]>,
-			default: () => [],
+			default: null,
 		},
 		placeholder: {
 			type: String,

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

@@ -8,7 +8,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'text_fields',
 	component: InterfaceTextInput,
 	types: ['string', 'uuid'],
-	recommendedDisplays: ['raw'],
 	options: [
 		{
 			field: 'placeholder',
@@ -74,7 +73,7 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 		{
-			field: 'mask',
+			field: 'masked',
 			name: i18n.t('interfaces.text-input.mask'),
 			type: 'boolean',
 			meta: {

app/src/interfaces/textarea/index.ts

@@ -8,7 +8,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'text_fields',
 	component: InterfaceTextarea,
 	types: ['text'],
-	recommendedDisplays: ['raw'],
 	options: [
 		{
 			field: 'placeholder',

app/src/interfaces/user/user.vue

@@ -102,7 +102,7 @@ export default defineComponent({
 	components: { ModalDetail, ModalBrowse },
 	props: {
 		value: {
-			type: [String, Object],
+			type: String,
 			default: null,
 		},
 		template: {
@@ -178,16 +178,8 @@ export default defineComponent({
 			const currentPrimaryKey = computed<string | number>(() => {
 				if (!currentUser.value) return '+';
 				if (!props.value) return '+';
-
-				if (typeof props.value === 'number' || typeof props.value === 'string') {
-					return props.value;
-				}
-
-				if (typeof props.value === 'object' && props.value.hasOwnProperty('id')) {
-					return props.value.id;
-				}
-
-				return '+';
+				
+				return props.value;
 			});
 
 			return { setCurrent, currentUser, loading, currentPrimaryKey };
@@ -312,15 +304,7 @@ export default defineComponent({
 			const selection = computed<(number | string)[]>(() => {
 				if (!props.value) return [];
 
-				if (typeof props.value === 'object' && props.value.hasOwnProperty('id')) {
-					return [props.value.id];
-				}
-
-				if (typeof props.value === 'string' || typeof props.value === 'number') {
-					return [props.value];
-				}
-
-				return [];
+				return [props.value];
 			});
 
 			return { selection, stageSelection, selectModalActive };

app/src/interfaces/wysiwyg/index.ts

@@ -8,7 +8,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'format_quote',
 	component: InterfaceWYSIWYG,
 	types: ['text'],
-	recommendedDisplays: ['formatted-value'],
 	options: [
 		{
 			field: 'toolbar',
@@ -38,7 +37,6 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'dropdown-multiselect',
 				options: {
-					closeOnContentClick: false,
 					choices: [
 						{
 							value: 'aligncenter',

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

@@ -43,41 +43,41 @@
 			<div class="field" v-if="fieldData.schema" :class="{ full: ['text', 'json'].includes(default_type) }">
 				<div class="label type-label">{{ $t('default_value') }}</div>
 				<v-input
-					v-if="default_type === 'string'"
+					v-if="['string', 'uuid'].includes(fieldData.type)"
 					class="monospace"
-					v-model="default_value"
+					v-model="defaultValue"
 					:placeholder="$t('add_a_default_value')"
 				/>
 				<v-textarea
-					v-else-if="default_type === 'text' || default_type === 'json'"
+					v-else-if="['text', 'json'].includes(fieldData.type)"
 					class="monospace"
-					v-model="default_value"
+					v-model="defaultValue"
 					:placeholder="$t('add_a_default_value')"
 				/>
 				<v-input
-					v-else-if="default_type === 'number'"
+					v-else-if="['integer', 'bigInteger', 'float', 'decimal'].includes(fieldData.type)"
 					type="number"
 					class="monospace"
-					v-model="default_value"
+					v-model="defaultValue"
 					:placeholder="$t('add_a_default_value')"
 				/>
 				<v-input
-					v-else-if="default_type === 'datetime'"
+					v-else-if="['timestamp', 'datetime', 'date', 'time'].includes(fieldData.type)"
 					class="monospace"
-					v-model="default_value"
+					v-model="defaultValue"
 					:placeholder="$t('add_a_default_value')"
 				/>
 				<v-checkbox
-					v-else-if="default_type === 'boolean'"
+					v-else-if="fieldData.type === 'boolean'"
 					class="monospace"
-					v-model="default_value"
-					:label="default_value ? $t('true') : $t('false')"
+					v-model="defaultValue"
+					:label="defaultValue ? $t('true') : $t('false')"
 					block
 				/>
 				<v-input
 					v-else
 					class="monospace"
-					v-model="default_value"
+					v-model="defaultValue"
 					disabled
 					:placeholder="$t('add_a_default_value')"
 				/>
@@ -235,7 +235,7 @@ export default defineComponent({
 			return i18n.t('choose_a_type');
 		});
 
-		const default_value = computed({
+		const defaultValue = computed({
 			get() {
 				return state.fieldData.schema.default_value;
 			},
@@ -244,32 +244,16 @@ export default defineComponent({
 			},
 		});
 
-		const default_type = computed(() => {
-			if (['integer', 'bigInteger', 'float', 'decimal'].includes(state.fieldData.type)) return 'number';
-			else if (['string', 'uuid'].includes(state.fieldData.type)) {
-				return 'string';
-			} else if (['timestamp', 'datetime', 'date', 'time'].includes(state.fieldData.type)) {
-				return 'datetime';
-			} else {
-				return state.fieldData.type;
-			}
-		});
-
 		return {
 			fieldData: state.fieldData,
 			typesWithLabels,
 			setType,
 			typeDisabled,
 			typePlaceholder,
-			default_value,
-			default_type,
+			defaultValue,
 		};
 
 		function setType(value: typeof types[number]) {
-			if (value === 'uuid') {
-				state.fieldData.meta.special = 'uuid';
-			}
-
 			// We'll reset the interface/display as they most likely won't work for the newly selected
 			// type
 			state.fieldData.meta.interface = null;

app/src/modules/settings/routes/data-model/field-detail/store.ts

@@ -297,6 +297,9 @@ function initLocalStore(
 			() => state.fieldData.type,
 			() => {
 				switch (state.fieldData.type) {
+					case 'uuid':
+						state.fieldData.meta.special = 'uuid';
+						break;
 					case 'json':
 						state.fieldData.meta.special = 'json';
 						break;

app/src/styles/lib/_codemirror.scss

@@ -18,6 +18,10 @@
 	transition: all var(--fast) var(--transition);
 }
 
+.CodeMirror .CodeMirror-placeholder{
+	color: var(--foreground-subdued);
+}
+
 .CodeMirror:hover {
 	border-color: var(--border-normal-alt);
 }