From 9ee6e97cd993337a5a6a96fd34653cdf6d38ea86 Mon Sep 17 00:00:00 2001 From: Nicola Krumschmidt Date: Wed, 5 Jan 2022 21:38:48 +0100 Subject: [PATCH] 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 | 2 +- app/src/modules/content/routes/collection.vue | 3 +-- app/src/modules/files/routes/collection.vue | 2 +- app/src/modules/settings/routes/presets/item.vue | 2 +- app/src/modules/settings/routes/webhooks/collection.vue | 2 +- app/src/modules/users/routes/collection.vue | 2 +- .../components/drawer-collection/drawer-collection.vue | 3 +-- packages/extensions-sdk/src/index.ts | 1 + packages/shared/src/composables/index.ts | 1 + {app => packages/shared}/src/composables/use-layout.ts | 8 ++++---- 10 files changed, 13 insertions(+), 13 deletions(-) rename {app => packages/shared}/src/composables/use-layout.ts (93%) diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue index 8e2f2e1285..01380c3db1 100644 --- a/app/src/modules/activity/routes/collection.vue +++ b/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'; diff --git a/app/src/modules/content/routes/collection.vue b/app/src/modules/content/routes/collection.vue index ecb9ff8b98..29885e0b00 100644 --- a/app/src/modules/content/routes/collection.vue +++ b/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'; diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue index 2365202d15..996cb32c0e 100644 --- a/app/src/modules/files/routes/collection.vue +++ b/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'; diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue index 8488708c10..45ac1f2228 100644 --- a/app/src/modules/settings/routes/presets/item.vue +++ b/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'; diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue index 30edf8a000..dc4f4980ea 100644 --- a/app/src/modules/settings/routes/webhooks/collection.vue +++ b/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'; diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue index 435d86572e..9402e49908 100644 --- a/app/src/modules/users/routes/collection.vue +++ b/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'; diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue index 3becce91cd..8d82edcee3 100644 --- a/app/src/views/private/components/drawer-collection/drawer-collection.vue +++ b/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({ diff --git a/packages/extensions-sdk/src/index.ts b/packages/extensions-sdk/src/index.ts index eabb385020..088b1e82d3 100644 --- a/packages/extensions-sdk/src/index.ts +++ b/packages/extensions-sdk/src/index.ts @@ -16,5 +16,6 @@ export { useSync, useCollection, useItems, + useLayout, useFilterFields, } from '@directus/shared/composables'; diff --git a/packages/shared/src/composables/index.ts b/packages/shared/src/composables/index.ts index 74bcd98c0b..ace6516581 100644 --- a/packages/shared/src/composables/index.ts +++ b/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'; diff --git a/app/src/composables/use-layout.ts b/packages/shared/src/composables/use-layout.ts similarity index 93% rename from app/src/composables/use-layout.ts rename to packages/shared/src/composables/use-layout.ts index 0d14fb0313..6a9f29d588 100644 --- a/app/src/composables/use-layout.ts +++ b/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(layout: LayoutConfig): Component { required: true, }, selection: { - type: Array as PropType, + type: Array as PropType<(number | string)[]>, default: () => [], }, layoutOptions: { @@ -93,7 +93,7 @@ function createLayoutWrapper(layout: LayoutConfig): Component { export function useLayout( layoutId: Ref ): { layoutWrapper: ComputedRef } { - const { layouts } = getLayouts(); + const { layouts } = useExtensions(); const layoutWrappers = computed(() => layouts.value.map((layout) => createLayoutWrapper(layout)));