Move useLayout composable to shared and expose it through extensions-sdk (#10850)

* Move useLayout composable to shared

* Expose useLayout through extensions-sdk

app/src/modules/activity/routes/collection.vue

@@ -64,7 +64,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref } from 'vue';
 import ActivityNavigation from '../components/navigation.vue';
 import usePreset from '@/composables/use-preset';
-import { useLayout } from '@/composables/use-layout';
+import { useLayout } from '@directus/shared/composables';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import { Filter } from '@directus/shared/types';

app/src/modules/content/routes/collection.vue

@@ -271,8 +271,7 @@ import { defineComponent, computed, ref, watch, toRefs } from 'vue';
 import ContentNavigation from '../components/navigation.vue';
 import api from '@/api';
 import ContentNotFound from './not-found.vue';
-import { useCollection } from '@directus/shared/composables';
-import { useLayout } from '@/composables/use-layout';
+import { useCollection, useLayout } from '@directus/shared/composables';
 import usePreset from '@/composables/use-preset';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import ArchiveSidebarDetail from '@/views/private/components/archive-sidebar-detail';

app/src/modules/files/routes/collection.vue

@@ -198,7 +198,7 @@ import { useNotificationsStore, useUserStore, usePermissionsStore } from '@/stor
 import { subDays } from 'date-fns';
 import useFolders, { Folder } from '@/composables/use-folders';
 import useEventListener from '@/composables/use-event-listener';
-import { useLayout } from '@/composables/use-layout';
+import { useLayout } from '@directus/shared/composables';
 import uploadFiles from '@/utils/upload-files';
 import { unexpectedError } from '@/utils/unexpected-error';
 import DrawerBatch from '@/views/private/components/drawer-batch';

app/src/modules/settings/routes/presets/item.vue

@@ -143,7 +143,7 @@ import { useCollectionsStore, usePresetsStore } from '@/stores';
 import { getLayouts } from '@/layouts';
 import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { useLayout } from '@/composables/use-layout';
+import { useLayout } from '@directus/shared/composables';
 import useShortcut from '@/composables/use-shortcut';
 import unsavedChanges from '@/composables/unsaved-changes';
 import { isEqual } from 'lodash';

app/src/modules/settings/routes/webhooks/collection.vue

@@ -104,7 +104,7 @@ import { defineComponent, computed, ref } from 'vue';
 import SettingsNavigation from '../../components/navigation.vue';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import { usePreset } from '@/composables/use-preset';
-import { useLayout } from '@/composables/use-layout';
+import { useLayout } from '@directus/shared/composables';
 import api from '@/api';
 import SearchInput from '@/views/private/components/search-input';
 

app/src/modules/users/routes/collection.vue

@@ -171,7 +171,7 @@ import SearchInput from '@/views/private/components/search-input';
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
 import { useUserStore, usePermissionsStore } from '@/stores';
 import useNavigation from '../composables/use-navigation';
-import { useLayout } from '@/composables/use-layout';
+import { useLayout } from '@directus/shared/composables';
 import DrawerBatch from '@/views/private/components/drawer-batch';
 import { Role } from '@directus/shared/types';
 import { mergeFilters } from '@directus/shared/utils';

app/src/views/private/components/drawer-collection/drawer-collection.vue

@@ -50,8 +50,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed, toRefs, watch } from 'vue';
 import { Filter } from '@directus/shared/types';
 import usePreset from '@/composables/use-preset';
-import { useCollection } from '@directus/shared/composables';
-import { useLayout } from '@/composables/use-layout';
+import { useCollection, useLayout } from '@directus/shared/composables';
 import SearchInput from '@/views/private/components/search-input';
 
 export default defineComponent({

packages/extensions-sdk/src/index.ts

@@ -16,5 +16,6 @@ export {
 	useSync,
 	useCollection,
 	useItems,
+	useLayout,
 	useFilterFields,
 } from '@directus/shared/composables';

packages/shared/src/composables/index.ts

@@ -1,5 +1,6 @@
 export * from './use-collection';
 export * from './use-filter-fields';
 export * from './use-items';
+export * from './use-layout';
 export * from './use-sync';
 export * from './use-system';

packages/shared/src/composables/use-layout.ts

@@ -1,6 +1,6 @@
-import { getLayouts } from '@/layouts';
 import { computed, reactive, toRefs, defineComponent, Ref, PropType, Component, ComputedRef } from 'vue';
-import { Filter, Item, LayoutConfig, ShowSelect } from '@directus/shared/types';
+import { Filter, LayoutConfig, ShowSelect } from '../types';
+import { useExtensions } from './use-system';
 
 const NAME_SUFFIX = 'wrapper';
 const WRITABLE_PROPS = ['selection', 'layoutOptions', 'layoutQuery'] as const;
@@ -20,7 +20,7 @@ function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Component {
 				required: true,
 			},
 			selection: {
-				type: Array as PropType<Item[]>,
+				type: Array as PropType<(number | string)[]>,
 				default: () => [],
 			},
 			layoutOptions: {
@@ -93,7 +93,7 @@ function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Component {
 export function useLayout<Options = any, Query = any>(
 	layoutId: Ref<string | null>
 ): { layoutWrapper: ComputedRef<Component> } {
-	const { layouts } = getLayouts();
+	const { layouts } = useExtensions();
 
 	const layoutWrappers = computed(() => layouts.value.map((layout) => createLayoutWrapper<Options, Query>(layout)));