Support dividers in v-select, add dividers to field type setup

app/src/components/v-select/v-select.vue

@@ -42,24 +42,28 @@
 				<v-divider />
 			</template>
 
-			<v-list-item
-				v-for="item in _items"
-				:key="item.text + item.value"
-				:active="multiple ? (value || []).includes(item.value) : value === item.value"
-				:disabled="item.disabled"
-				@click="multiple ? null : $emit('input', item.value)"
-			>
-				<v-list-item-content>
-					<span v-if="multiple === false" class="item-text">{{ item.text }}</span>
-					<v-checkbox
-						v-else
-						:inputValue="value || []"
-						:label="item.text"
-						:value="item.value"
-						@change="$emit('input', $event.length > 0 ? $event : null)"
-					/>
-				</v-list-item-content>
-			</v-list-item>
+			<template v-for="(item, index) in _items">
+				<v-divider :key="index" v-if="item.divider === true" />
+
+				<v-list-item
+					v-else
+					:key="item.text + item.value"
+					:active="multiple ? (value || []).includes(item.value) : value === item.value"
+					:disabled="item.disabled"
+					@click="multiple ? null : $emit('input', item.value)"
+				>
+					<v-list-item-content>
+						<span v-if="multiple === false" class="item-text">{{ item.text }}</span>
+						<v-checkbox
+							v-else
+							:inputValue="value || []"
+							:label="item.text"
+							:value="item.value"
+							@change="$emit('input', $event.length > 0 ? $event : null)"
+						/>
+					</v-list-item-content>
+				</v-list-item>
+			</template>
 
 			<v-list-item v-if="allowOther && multiple === false" :active="usesOtherValue" @click.stop>
 				<v-list-item-content>
@@ -206,6 +210,8 @@ export default defineComponent({
 						};
 					}
 
+					if (item.divider === true) return { divider: true };
+
 					return {
 						text: item[props.itemText],
 						value: item[props.itemValue],

app/src/composables/use-custom-selection/use-custom-selection.ts

@@ -3,17 +3,7 @@ import { nanoid } from 'nanoid';
 
 type EmitFunction = (event: string, ...args: any[]) => void;
 
-type Items = Readonly<
-	Ref<
-		| readonly {
-				text: string;
-				value: string | boolean | number;
-		  }[]
-		| null
-	>
->;
-
-export function useCustomSelection(currentValue: Ref<string>, items: Items, emit: EmitFunction) {
+export function useCustomSelection(currentValue: Ref<string>, items: Ref<any[]>, emit: EmitFunction) {
 	const localOtherValue = ref('');
 
 	const otherValue = computed({
@@ -46,7 +36,7 @@ export function useCustomSelection(currentValue: Ref<string>, items: Items, emit
 	return { otherValue, usesOtherValue };
 }
 
-export function useCustomSelectionMultiple(currentValues: Ref<string[]>, items: Items, emit: EmitFunction) {
+export function useCustomSelectionMultiple(currentValues: Ref<string[]>, items: Ref<any[]>, emit: EmitFunction) {
 	type OtherValue = {
 		key: string;
 		value: string;

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

@@ -22,9 +22,9 @@
 					v-else
 					:disabled="typeDisabled || isExisting"
 					:value="fieldData.type"
-					@input="setType"
 					:items="typesWithLabels"
 					:placeholder="typePlaceholder"
+					@input="setType"
 				/>
 			</div>
 
@@ -88,24 +88,66 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const typesWithLabels = computed(() =>
-			types
-				.filter((type) => {
-					// Only allow primary key types in m2o fields
-					if (props.type === 'm2o') {
-						return ['integer', 'string', 'uuid'].includes(type);
-					}
-
-					// Remove alias and unknown, as those aren't real column types you can use
-					return ['alias', 'unknown'].includes(type) === false;
-				})
-				.map((type) => {
-					return {
-						value: type,
-						text: i18n.t(type),
-					};
-				})
-		);
+		const typesWithLabels = computed(() => {
+			return [
+				{
+					text: i18n.t('string'),
+					value: 'string',
+				},
+				{
+					text: i18n.t('text'),
+					value: 'text',
+				},
+				{ divider: true },
+				{
+					text: i18n.t('boolean'),
+					value: 'boolean',
+				},
+				{ divider: true },
+				{
+					text: i18n.t('integer'),
+					value: 'integer',
+				},
+				{
+					text: i18n.t('bigInteger'),
+					value: 'bigInteger',
+				},
+				{
+					text: i18n.t('float'),
+					value: 'float',
+				},
+				{
+					text: i18n.t('decimal'),
+					value: 'decimal',
+				},
+				{ divider: true },
+				{
+					text: i18n.t('timestamp'),
+					value: 'timestamp',
+				},
+				{
+					text: i18n.t('datetime'),
+					value: 'datetime',
+				},
+				{
+					text: i18n.t('date'),
+					value: 'date',
+				},
+				{
+					text: i18n.t('time'),
+					value: 'time',
+				},
+				{ divider: true },
+				{
+					text: i18n.t('json'),
+					value: 'json',
+				},
+				{
+					text: i18n.t('uuid'),
+					value: 'uuid',
+				},
+			];
+		});
 
 		const typeDisabled = computed(() => {
 			return ['file', 'files', 'o2m', 'm2m', 'm2o'].includes(props.type);