Move define extension functions to shared and expose them through extension-sdk (#6880)

* Move defineInterface to shared

* Split up utils into node and browser utils

* Move defineDisplay to shared

* Move defineLayout to shared

* Move defineModule to shared

* Add defineEndpoint and defineHook to define-extensions

* Expose define extension functions through extension-sdk

* Make route type of defineEndpoint more specific

* Simplify define extension functions

* Deduplicate types and local types definition

* Do not allow functional components in display handler

* Make interface options nullable

* Deduplicate extension types definition

* Fix utils/node exports

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

@@ -45,7 +45,8 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs, ref, PropType, computed } from 'vue';
 import FieldListItem from '../v-field-template/field-list-item.vue';
-import { Field, Collection, Relation } from '@/types';
+import { Collection, Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import Draggable from 'vuedraggable';
 import useFieldTree from '@/composables/use-field-tree';
 import useCollection from '@/composables/use-collection';

app/src/components/v-field-template/v-field-template.vue

@@ -33,7 +33,8 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType }
 import FieldListItem from './field-list-item.vue';
 import useFieldTree from '@/composables/use-field-tree';
 import { FieldTree } from './types';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { FieldListItem },

app/src/components/v-form/form-field-interface.vue

@@ -37,10 +37,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field, InterfaceConfig } from '@directus/shared/types';
 import { getInterfaces } from '@/interfaces';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
-import { InterfaceConfig } from '@/interfaces/types';
 
 export default defineComponent({
 	props: {

app/src/components/v-form/form-field-label.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType } from 'vue';
-import { Field } from '@/types/';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/components/v-form/form-field-menu.vue

@@ -41,7 +41,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/components/v-form/form-field.vue

@@ -65,7 +65,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref } from 'vue';
-import { Field } from '@/types/';
+import { Field } from '@directus/shared/types';
 import FormFieldLabel from './form-field-label.vue';
 import FormFieldMenu from './form-field-menu.vue';
 import FormFieldInterface from './form-field-interface.vue';

app/src/components/v-form/types.ts

@@ -1,5 +1,4 @@
-import { Field } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
+import { DeepPartial, Field } from '@directus/shared/types';
 
 export type FormField = DeepPartial<Field> & {
 	field: string;

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

@@ -62,7 +62,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, provide } from 'vue';
 import { useFieldsStore } from '@/stores/';
-import { Field, FieldRaw } from '@/types';
+import { Field, FieldRaw } from '@directus/shared/types';
 import { clone, cloneDeep, isNil, merge, omit } from 'lodash';
 import useFormFields from '@/composables/use-form-fields';
 import { ValidationError } from '@/types';

app/src/composables/use-collection/use-collection.ts

@@ -1,5 +1,6 @@
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Collection, Field } from '@/types';
+import { Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ref, Ref, ComputedRef } from 'vue';
 
 type UsableCollection = {

app/src/composables/use-field-tree/use-field-tree.ts

@@ -1,5 +1,6 @@
 import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores/';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { getRelationType } from '@/utils/get-relation-type';
 import { cloneDeep, orderBy } from 'lodash';
 import { computed, Ref, ComputedRef } from 'vue';

app/src/composables/use-form-fields/use-form-fields.ts

@@ -2,8 +2,7 @@
 
 import { FormField } from '@/components/v-form/types';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
-import { Field } from '@/types';
+import { Field, InterfaceConfig } from '@directus/shared/types';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 import { clone, orderBy } from 'lodash';
 import { computed, ComputedRef, Ref } from 'vue';

app/src/composables/use-permissions.ts

@@ -1,5 +1,5 @@
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ComputedRef, Ref } from 'vue';
 import { cloneDeep } from 'lodash';
 import { isAllowed } from '../utils/is-allowed';

app/src/displays/boolean/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayBoolean from './boolean.vue';
 
 export default defineDisplay({

app/src/displays/collection/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayCollection from './collection.vue';
 
 export default defineDisplay({

app/src/displays/color/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayColor from './color.vue';
 
 export default defineDisplay({

app/src/displays/datetime/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayDateTime from './datetime.vue';
 
 export default defineDisplay({

app/src/displays/define.ts

@@ -1,13 +0,0 @@
-import { DisplayConfig, DisplayDefineParam } from './types';
-
-export function defineDisplay(config: DisplayDefineParam): DisplayConfig {
-	let options: DisplayConfig;
-
-	if (typeof config === 'function') {
-		options = config();
-	} else {
-		options = config;
-	}
-
-	return options;
-}

app/src/displays/file/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayFile from './file.vue';
 
 export default defineDisplay({

app/src/displays/filesize/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import handler from './handler';
 
 export default defineDisplay({

app/src/displays/formatted-json-value/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayJsonValue from './formatted-json-value.vue';
 
 export default defineDisplay({

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

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayFormattedValue from './formatted-value.vue';
 
 export default defineDisplay({

app/src/displays/icon/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayIcon from './icon.vue';
 
 export default defineDisplay({

app/src/displays/image/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayImage from './image.vue';
 
 export default defineDisplay({

app/src/displays/index.ts

@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { DisplayConfig } from './types';
+import { DisplayConfig } from '@directus/shared/types';
 
 const displaysRaw: Ref<DisplayConfig[]> = shallowRef([]);
 const displays: Ref<DisplayConfig[]> = shallowRef([]);

app/src/displays/labels/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayLabels from './labels.vue';
 
 export default defineDisplay({

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

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import readableMimeType from '@/utils/readable-mime-type';
 import mime from 'mime/lite';
 

app/src/displays/rating/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayRating from './rating.vue';
 
 export default defineDisplay({

app/src/displays/raw/index.ts

@@ -1,5 +1,5 @@
-import { defineDisplay } from '@/displays/define';
-import { types } from '@/types';
+import { defineDisplay } from '@directus/shared/utils/browser';
+import { TYPES } from '@directus/shared/constants';
 
 export default defineDisplay({
 	id: 'raw',
@@ -7,5 +7,5 @@ export default defineDisplay({
 	icon: 'code',
 	handler: (value) => value,
 	options: [],
-	types: types,
+	types: TYPES,
 });

app/src/displays/register.ts

@@ -1,7 +1,7 @@
 import { getRootPath } from '@/utils/get-root-path';
 import { App } from 'vue';
 import { getDisplays } from './index';
-import { DisplayConfig } from './types';
+import { DisplayConfig } from '@directus/shared/types';
 
 const { displaysRaw } = getDisplays();
 

app/src/displays/related-values/index.ts

@@ -1,5 +1,5 @@
 import useCollection from '@/composables/use-collection';
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import getRelatedCollection from '@/utils/get-related-collection';
@@ -11,7 +11,7 @@ type Options = {
 	template: string;
 };
 
-export default defineDisplay(() => ({
+export default defineDisplay({
 	id: 'related-values',
 	name: '$t:displays.related-values.related-values',
 	description: '$t:displays.related-values.description',
@@ -36,4 +36,4 @@ export default defineDisplay(() => ({
 
 		return fields;
 	},
-}));
+});

app/src/displays/related-values/options.vue

@@ -12,7 +12,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 
 export default defineComponent({

app/src/displays/types.ts

@@ -1,38 +0,0 @@
-import { Field, localTypes, types } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
-import { Component } from 'vue';
-
-export type DisplayHandlerFunctionContext = {
-	type: string;
-};
-
-export type DisplayHandlerFunction = (
-	value: any,
-	options: any,
-	context?: DisplayHandlerFunctionContext
-) => string | null;
-
-export type DisplayFieldsFunction = (
-	options: any,
-	context: {
-		collection: string;
-		field: string;
-		type: string;
-	}
-) => string[];
-
-export interface DisplayConfig {
-	id: string;
-	name: string;
-	icon: string;
-	description?: string;
-
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	handler: DisplayHandlerFunction | Component | Function;
-	options: null | DeepPartial<Field>[] | Component;
-	types: readonly typeof types[number][];
-	groups?: readonly typeof localTypes[number][];
-	fields?: string[] | DisplayFieldsFunction;
-}
-
-export type DisplayDefineParam = DisplayConfig | (() => DisplayConfig);

app/src/displays/user/index.ts

@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayUser from './user.vue';
 
 export default defineDisplay({

app/src/interfaces/_system/system-collection/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemCollection from './system-collection.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-collections/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemCollections from './system-collections.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-display-template/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemDisplayTemplate from './system-display-template.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-field-tree/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemFieldTree from './system-field-tree.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-field/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemField from './system-field.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-field/system-field.vue

@@ -20,7 +20,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, PropType } from 'vue';
 import { useFieldsStore } from '@/stores';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/interfaces/_system/system-folder/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemFolder from './folder.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-interface-options/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemInterfaceOptions from './system-interface-options.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-interface-options/system-interface-options.vue

@@ -30,7 +30,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref } from 'vue';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/interfaces/_system/system-interface/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemInterface from './system-interface.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-interface/system-interface.vue

@@ -15,7 +15,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, watch } from 'vue';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/interfaces/_system/system-language/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemLanguage from './system-language.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-mfa-setup/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemMFASetup from './system-mfa-setup.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-scope/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemScope from './system-scope.vue';
 
 export default defineInterface({

app/src/interfaces/boolean/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceBoolean from './boolean.vue';
 
 export default defineInterface({

app/src/interfaces/datetime/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceDateTime from './datetime.vue';
 
 export default defineInterface({

app/src/interfaces/define.ts

@@ -1,13 +0,0 @@
-import { InterfaceConfig, InterfaceDefineParam } from './types';
-
-export function defineInterface(config: InterfaceDefineParam): InterfaceConfig {
-	let options: InterfaceConfig;
-
-	if (typeof config === 'function') {
-		options = config();
-	} else {
-		options = config;
-	}
-
-	return options;
-}

app/src/interfaces/file-image/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceFileImage from './file-image.vue';
 
 export default defineInterface({

app/src/interfaces/file/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceFile from './file.vue';
 
 export default defineInterface({

app/src/interfaces/group-divider/group-divider.vue

@@ -35,7 +35,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { Field, ValidationError } from '@/types';
+import { ValidationError } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/interfaces/group-divider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceGroupDivider from './group-divider.vue';
 
 export default defineInterface({

app/src/interfaces/group-raw/group-raw.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType } from 'vue';
 import { ValidationError } from '@/types';
 

app/src/interfaces/group-raw/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceGroupRaw from './group-raw.vue';
 
 export default defineInterface({

app/src/interfaces/index.ts

@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { InterfaceConfig } from './types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 const interfacesRaw: Ref<InterfaceConfig[]> = shallowRef([]);
 const interfaces: Ref<InterfaceConfig[]> = shallowRef([]);

app/src/interfaces/input-autocomplete-api/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputAutocompleteAPI from './input-autocomplete-api.vue';
 
 export default defineInterface({

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputHash from './input-hash.vue';
 
 export default defineInterface({

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputMultiline from './input-multiline.vue';
 
 export default defineInterface({

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import { defineAsyncComponent } from 'vue';
 
 const InterfaceWYSIWYG = defineAsyncComponent(() => import('./input-rich-text-html.vue'));

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputRichTextMD from './input-rich-text-md.vue';
 
 export default defineInterface({

app/src/interfaces/input/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInput from './input.vue';
 import Options from './options.vue';
 

app/src/interfaces/input/options.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {

app/src/interfaces/list-m2a/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListM2A from './list-m2a.vue';
 
 export default defineInterface({

app/src/interfaces/list-m2a/list-m2a.vue

@@ -140,7 +140,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType, ref, watch } from 'vue';
 import { useRelationsStore, useCollectionsStore, useFieldsStore } from '@/stores';
-import { Relation, Collection } from '@/types/';
+import { Relation, Collection } from '@/types';
 import DrawerCollection from '@/views/private/components/drawer-collection/';
 import DrawerItem from '@/views/private/components/drawer-item/';
 import api from '@/api';

app/src/interfaces/list-m2m/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListM2M from './list-m2m.vue';
 import Options from './options.vue';
 

app/src/interfaces/list-m2m/list-m2m.vue

@@ -104,7 +104,7 @@ import useSort from './use-sort';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { DisplayConfig } from '@/displays/types';
+import { DisplayConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { DrawerItem, DrawerCollection, Draggable },

app/src/interfaces/list-m2m/options.vue

@@ -30,7 +30,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Relation, Collection, Field } from '@/types';
+import { Relation, Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores';
 export default defineComponent({

app/src/interfaces/list-m2m/use-preview.ts

@@ -1,7 +1,7 @@
 import api from '@/api';
 import { Header } from '@/components/v-table/types';
 import { useFieldsStore } from '@/stores/';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 import { cloneDeep, get, merge } from 'lodash';
 import { Ref, ref, watch } from 'vue';

app/src/interfaces/list-m2m/use-relation.ts

@@ -1,6 +1,7 @@
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore } from '@/stores/';
-import { Collection, Field, Relation } from '@/types';
+import { Collection, Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ComputedRef, Ref } from 'vue';
 
 export type RelationInfo = {

app/src/interfaces/list-o2m-tree-view/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import Options from './options.vue';
 import InterfaceListO2MTreeView from './list-o2m-tree-view.vue';
 

app/src/interfaces/list-o2m-tree-view/options.vue

@@ -22,7 +22,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 export default defineComponent({
 	props: {

app/src/interfaces/list-o2m/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListO2M from './list-o2m.vue';
 import Options from './options.vue';
 

app/src/interfaces/list-o2m/list-o2m.vue

@@ -86,7 +86,8 @@ import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore, usePermissionsStore, useUserStore } from '@/stores/';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
-import { Filter, Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Filter, Field } from '@directus/shared/types';
 import { isEqual, sortBy } from 'lodash';
 import { get } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';

app/src/interfaces/list-o2m/options.vue

@@ -30,7 +30,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation, Collection } from '@/types';
+import { Relation, Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores/';
 

app/src/interfaces/list/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import RepeaterOptions from './options.vue';
 import InterfaceList from './list.vue';
 

app/src/interfaces/list/list.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, toRefs } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import Draggable from 'vuedraggable';
 import { i18n } from '@/lang';
 import { renderStringTemplate } from '@/utils/render-string-template';

app/src/interfaces/list/options.vue

@@ -26,7 +26,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import Repeater from './list.vue';
-import { Field, FieldMeta } from '@/types';
+import { Field, FieldMeta } from '@directus/shared/types';
 import { fieldTypes } from '@/modules/settings/routes/data-model/field-detail/components/schema.vue';
 import { DeepPartial } from '@directus/shared/types';
 

app/src/interfaces/presentation-divider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationDivider from './presentation-divider.vue';
 
 export default defineInterface({

app/src/interfaces/presentation-links/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationLinks from './presentation-links.vue';
 
 export default defineInterface({

app/src/interfaces/presentation-notice/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationNotice from './presentation-notice.vue';
 
 export default defineInterface({

app/src/interfaces/register.ts

@@ -1,7 +1,7 @@
 import { getRootPath } from '@/utils/get-root-path';
 import { App } from 'vue';
 import { getInterfaces } from './index';
-import { InterfaceConfig } from './types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 const { interfacesRaw } = getInterfaces();
 
@@ -26,7 +26,7 @@ export async function registerInterfaces(app: App): Promise<void> {
 	interfacesRaw.value.forEach((inter: InterfaceConfig) => {
 		app.component('interface-' + inter.id, inter.component);
 
-		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false) {
+		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false && inter.options !== null) {
 			app.component(`interface-options-${inter.id}`, inter.options);
 		}
 	});

app/src/interfaces/select-color/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceColor from './select-color.vue';
 
 export default defineInterface({

app/src/interfaces/select-dropdown-m2o/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectDropdownM2O from './select-dropdown-m2o.vue';
 import Options from './options.vue';
 

app/src/interfaces/select-dropdown-m2o/options.vue

@@ -12,7 +12,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 
 export default defineComponent({

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectDropdown from './select-dropdown.vue';
 
 export default defineInterface({

app/src/interfaces/select-icon/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectIcon from './select-icon.vue';
 
 export default defineInterface({

app/src/interfaces/select-multiple-checkbox-tree/index.ts

@@ -1,6 +1,5 @@
-import { defineInterface } from '@/interfaces/define';
-import { Field } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
+import { defineInterface } from '@directus/shared/utils/browser';
+import { DeepPartial, Field } from '@directus/shared/types';
 import InterfaceSelectMultipleCheckboxesTree from './select-multiple-checkbox-tree.vue';
 
 const repeaterFields: DeepPartial<Field>[] = [

app/src/interfaces/select-multiple-checkbox/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectMultipleCheckboxes from './select-multiple-checkbox.vue';
 
 export default defineInterface({

app/src/interfaces/select-multiple-dropdown/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectMultipleDropdown from './select-multiple-dropdown.vue';
 
 export default defineInterface({

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

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectRadio from './select-radio.vue';
 
 export default defineInterface({

app/src/interfaces/slider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSlider from './slider.vue';
 
 export default defineInterface({

app/src/interfaces/tags/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceTags from './tags.vue';
 
 export default defineInterface({

app/src/interfaces/translations/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import TranslationsOptions from './options.vue';
 import InterfaceTranslations from './translations.vue';
 

app/src/interfaces/translations/options.vue

@@ -33,7 +33,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores/';
 

app/src/interfaces/types.ts

@@ -1,22 +0,0 @@
-import { Field, localTypes, types } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
-import { Component } from 'vue';
-
-export interface InterfaceConfig {
-	id: string;
-	name: string;
-	icon: string;
-	description?: string;
-	component: Component;
-	options: DeepPartial<Field>[] | Component;
-	types: typeof types[number][];
-	groups?: readonly typeof localTypes[number][];
-	relational?: boolean;
-	hideLabel?: boolean;
-	hideLoader?: boolean;
-	system?: boolean;
-	recommendedDisplays?: string[];
-}
-
-export type InterfaceDefineParam = InterfaceDefineParamGeneric<InterfaceConfig>;
-export type InterfaceDefineParamGeneric<T> = T | (() => T);

app/src/layouts/calendar/index.ts

@@ -1,4 +1,4 @@
-import { defineLayout } from '@/layouts/define';
+import { defineLayout } from '@directus/shared/utils/browser';
 import CalendarLayout from './calendar.vue';
 import CalendarOptions from './options.vue';
 import CalendarSidebar from './sidebar.vue';
@@ -12,8 +12,7 @@ import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import { ref, watch, toRefs, computed, Ref } from 'vue';
 import { useAppStore } from '@/stores/app';
-import { Field } from '@/types';
-import { Item, Filter } from '@directus/shared/types';
+import { Field, Item, Filter } from '@directus/shared/types';
 import useItems from '@/composables/use-items';
 import useCollection from '@/composables/use-collection';
 import { formatISO } from 'date-fns';

app/src/layouts/cards/components/header.vue

@@ -54,7 +54,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 
 export default defineComponent({