@directus/composables 9.25.0

package/dist/index.js

@@ -0,0 +1,10 @@
+export * from './use-collection.js';
+export * from './use-custom-selection.js';
+export * from './use-element-size.js';
+export * from './use-filter-fields.js';
+export * from './use-groupable.js';
+export * from './use-items.js';
+export * from './use-layout.js';
+export * from './use-size-class.js';
+export * from './use-sync.js';
+export * from './use-system.js';

package/dist/use-collection.js

@@ -0,0 +1,48 @@
+import { computed, ref } from 'vue';
+import { useStores } from './use-system.js';
+export function useCollection(collectionKey) {
+    const { useCollectionsStore, useFieldsStore } = useStores();
+    const collectionsStore = useCollectionsStore();
+    const fieldsStore = useFieldsStore();
+    const collection = typeof collectionKey === 'string' ? ref(collectionKey) : collectionKey;
+    const info = computed(() => {
+        return (collectionsStore.collections.find(({ collection: key }) => key === collection.value) || null);
+    });
+    const fields = computed(() => {
+        if (!collection.value)
+            return [];
+        return fieldsStore.getFieldsForCollectionSorted(collection.value);
+    });
+    const defaults = computed(() => {
+        if (!fields.value)
+            return {};
+        const defaults = {};
+        for (const field of fields.value) {
+            if (field.schema !== null && 'default_value' in field.schema) {
+                defaults[field.field] = field.schema.default_value;
+            }
+        }
+        return defaults;
+    });
+    const primaryKeyField = computed(() => {
+        return (fields.value.find((field) => field.collection === collection.value && field.schema?.is_primary_key === true) ||
+            null);
+    });
+    const userCreatedField = computed(() => {
+        return fields.value?.find((field) => (field.meta?.special || []).includes('user_created')) || null;
+    });
+    const sortField = computed(() => {
+        return info.value?.meta?.sort_field || null;
+    });
+    const isSingleton = computed(() => {
+        return info.value?.meta?.singleton === true;
+    });
+    const accountabilityScope = computed(() => {
+        if (!info.value)
+            return null;
+        if (!info.value.meta)
+            return null;
+        return info.value.meta.accountability;
+    });
+    return { info, fields, defaults, primaryKeyField, userCreatedField, sortField, isSingleton, accountabilityScope };
+}

package/dist/use-custom-selection.js

@@ -0,0 +1,84 @@
+import { nanoid } from 'nanoid';
+import { computed, ref, watch } from 'vue';
+export function useCustomSelection(currentValue, items, emit) {
+    const localOtherValue = ref('');
+    const otherValue = computed({
+        get() {
+            return localOtherValue.value || (usesOtherValue.value ? currentValue.value : '');
+        },
+        set(newValue) {
+            if (newValue === null) {
+                localOtherValue.value = '';
+                emit(null);
+            }
+            else {
+                localOtherValue.value = newValue;
+                emit(newValue);
+            }
+        },
+    });
+    const usesOtherValue = computed(() => {
+        if (items.value === null)
+            return false;
+        // Check if set value is one of the existing keys
+        const values = items.value.map((item) => item.value);
+        return (currentValue.value !== null && currentValue.value.length > 0 && values.includes(currentValue.value) === false);
+    });
+    return { otherValue, usesOtherValue };
+}
+export function useCustomSelectionMultiple(currentValues, items, emit) {
+    const otherValues = ref([]);
+    watch(currentValues, (newValue) => {
+        if (newValue === null)
+            return;
+        if (Array.isArray(newValue) === false)
+            return;
+        if (items.value === null)
+            return;
+        newValue.forEach((value) => {
+            if (items.value === null)
+                return;
+            const values = items.value.map((item) => item.value);
+            const existsInValues = values.includes(value) === true;
+            if (existsInValues === false) {
+                const other = otherValues.value.map((o) => o.value);
+                const existsInOtherValues = other.includes(value) === true;
+                if (existsInOtherValues === false) {
+                    addOtherValue(value);
+                }
+            }
+        });
+    }, { immediate: true });
+    return { otherValues, addOtherValue, setOtherValue };
+    function addOtherValue(value = '') {
+        otherValues.value = [
+            ...otherValues.value,
+            {
+                key: nanoid(),
+                value: value,
+            },
+        ];
+    }
+    function setOtherValue(key, newValue) {
+        const previousValue = otherValues.value.find((o) => o.key === key);
+        const valueWithoutPrevious = (currentValues.value || []).filter((val) => val !== previousValue?.value);
+        if (newValue === null) {
+            otherValues.value = otherValues.value.filter((o) => o.key !== key);
+            if (valueWithoutPrevious.length === 0) {
+                emit(null);
+            }
+            else {
+                emit(valueWithoutPrevious);
+            }
+        }
+        else {
+            otherValues.value = otherValues.value.map((otherValue) => {
+                if (otherValue.key === key)
+                    otherValue.value = newValue;
+                return otherValue;
+            });
+            const newEmitValue = [...valueWithoutPrevious, newValue];
+            emit(newEmitValue);
+        }
+    }
+}

package/dist/use-element-size.js

@@ -0,0 +1,22 @@
+import { isNil } from 'lodash-es';
+import { isRef, onMounted, onUnmounted, ref } from 'vue';
+export function useElementSize(target) {
+    const width = ref(0);
+    const height = ref(0);
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        if (entry === undefined)
+            return;
+        width.value = entry.contentRect.width;
+        height.value = entry.contentRect.height;
+    });
+    onMounted(() => {
+        const t = isRef(target) ? target.value : target;
+        if (!isNil(t)) {
+            resizeObserver.observe(t);
+        }
+    });
+    onUnmounted(() => {
+        resizeObserver.disconnect();
+    });
+    return { width, height };
+}

package/dist/use-filter-fields.js

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+export function useFilterFields(fields, filters) {
+    const fieldGroups = computed(() => {
+        const acc = {};
+        for (const name in filters) {
+            acc[name] = [];
+        }
+        return fields.value.reduce((acc, field) => {
+            for (const name in filters) {
+                if (filters[name](field) === false)
+                    continue;
+                acc[name].push(field);
+            }
+            return acc;
+        }, acc);
+    });
+    return { fieldGroups };
+}

package/dist/use-groupable.js

@@ -0,0 +1,183 @@
+import { isEqual, isNil } from 'lodash-es';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
+export function useGroupable(options) {
+    // Injects the registration / toggle functions from the parent scope
+    const parentFunctions = inject(options?.group || 'item-group', null);
+    if (isNil(parentFunctions)) {
+        return {
+            active: ref(false),
+            toggle: () => {
+                // Do nothing
+            },
+            activate: () => {
+                // Do nothing
+            },
+            deactivate: () => {
+                // Do nothing
+            },
+        };
+    }
+    const { register, unregister, toggle, selection, } = parentFunctions;
+    let startActive = false;
+    if (options?.active?.value === true)
+        startActive = true;
+    if (options?.value && selection.value.includes(options.value))
+        startActive = true;
+    const active = ref(startActive);
+    const item = { active, value: options?.value };
+    register(item);
+    if (options?.active !== undefined && options.watch === true) {
+        watch(options.active, () => {
+            if (options.active === undefined)
+                return;
+            if (options.active.value === true) {
+                if (active.value === false)
+                    toggle(item);
+                active.value = true;
+            }
+            if (options.active.value === false) {
+                if (active.value === true)
+                    toggle(item);
+                active.value = false;
+            }
+        });
+    }
+    onBeforeUnmount(() => unregister(item));
+    return {
+        active,
+        toggle: () => {
+            toggle(item);
+        },
+        activate: () => {
+            if (active.value === false)
+                toggle(item);
+        },
+        deactivate: () => {
+            if (active.value === true)
+                toggle(item);
+        },
+    };
+}
+/**
+ * Used to make a component a group parent component. Provides the registration / toggle functions
+ * to its group children
+ */
+export function useGroupableParent(state = {}, options = {}, group = 'item-group') {
+    // References to the active state and value of the individual child items
+    const items = shallowRef([]);
+    // Internal copy of the selection. This allows the composition to work without the state option
+    // being passed
+    const internalSelection = ref([]);
+    // Uses either the internal state, or the passed in state. Will call the onSelectionChange
+    // handler if it's passed
+    const selection = computed({
+        get() {
+            if (!isNil(state.selection) && !isNil(state.selection.value)) {
+                return state.selection.value;
+            }
+            return internalSelection.value;
+        },
+        set(newSelection) {
+            if (!isNil(state.onSelectionChange)) {
+                state.onSelectionChange(newSelection);
+            }
+            internalSelection.value = [...newSelection];
+        },
+    });
+    // Provide the needed functions to all children groupable components. Note: nested item groups
+    // will override the item-group namespace, making nested item groups possible.
+    provide(group, { register, unregister, toggle, selection });
+    // Whenever the value of the selection changes, we have to update all the children's internal
+    // states. If not, you can have an activated item that's not actually active.
+    watch(selection, updateChildren, { immediate: true });
+    // It takes a tick before all children are rendered, this will make sure the start state of the
+    // children matches the start selection
+    nextTick().then(updateChildren);
+    watch(() => options?.mandatory?.value, (newValue, oldValue) => {
+        if (isEqual(newValue, oldValue))
+            return;
+        // If you're required to select a value, make sure a value is selected on first render
+        if (!selection.value || (selection.value.length === 0 && options?.mandatory?.value === true)) {
+            if (items.value[0])
+                selection.value = [getValueForItem(items.value[0])];
+        }
+    });
+    // These aren't exported with any particular use in mind. It's mostly for testing purposes.
+    // Treat them as readonly.
+    return { items, selection, internalSelection, getValueForItem, updateChildren };
+    // Register a child within the context of this group
+    function register(item) {
+        items.value = [...items.value, item];
+        const value = getValueForItem(item);
+        // If you're required to select a value, make sure a value is selected on first render
+        if (selection.value.length === 0 && options?.mandatory?.value === true && items.value.length === 1) {
+            selection.value = [value];
+        }
+        if (item.active.value && selection.value.includes(value) === false) {
+            toggle(item);
+        }
+    }
+    // Remove a child within the context of this group. Needed to avoid memory leaks.
+    function unregister(item) {
+        items.value = items.value.filter((existingItem) => {
+            return existingItem !== item;
+        });
+    }
+    // Toggle the active state for the given item
+    function toggle(item) {
+        if (options?.multiple?.value === true) {
+            toggleMultiple(item);
+        }
+        else {
+            toggleSingle(item);
+        }
+        if (!isNil(state.onToggle)) {
+            state.onToggle(item);
+        }
+    }
+    function toggleSingle(item) {
+        const itemValue = getValueForItem(item);
+        if (selection.value[0] === itemValue && options?.mandatory?.value !== true) {
+            selection.value = [];
+            return;
+        }
+        if (selection.value[0] !== itemValue) {
+            selection.value = [itemValue];
+        }
+    }
+    function toggleMultiple(item) {
+        const itemValue = getValueForItem(item);
+        // Remove the item if it is already selected. Don't remove it if it's the last item and
+        // the mandatory option is set
+        if (selection.value.includes(itemValue)) {
+            if (options?.mandatory?.value === true && selection.value.length === 1) {
+                updateChildren();
+                return;
+            }
+            selection.value = selection.value.filter((value) => value !== itemValue);
+            return;
+        }
+        // Don't add it if when we're already at the maximum number of selections
+        if (options?.max?.value && options.max.value !== -1 && selection.value.length >= options.max.value) {
+            // Even though we don't alter selection, we should flush the internal active state of
+            // the children to make sure we don't have any invalid internal active states
+            updateChildren();
+            return;
+        }
+        // Add the selected item to the selection
+        selection.value = [...selection.value, itemValue];
+    }
+    // Converts the item reference into the value that's used in the selection. This value is either
+    // the index of the item in the items array (by default), or the custom value that's passed in
+    // the groupable composition
+    function getValueForItem(item) {
+        return item.value || items.value.findIndex((child) => item === child);
+    }
+    // Loop over all children and make sure their internal active state matches the selection array
+    // of the parent
+    function updateChildren() {
+        items.value.forEach((item) => {
+            item.active.value = selection.value.includes(getValueForItem(item));
+        });
+    }
+}

package/dist/use-items.js

@@ -0,0 +1,231 @@
+import { getEndpoint, moveInArray } from '@directus/utils';
+import axios from 'axios';
+import { isEqual, throttle } from 'lodash-es';
+import { computed, ref, unref, watch } from 'vue';
+import { useCollection } from './use-collection.js';
+import { useApi } from './use-system.js';
+export function useItems(collection, query) {
+    const api = useApi();
+    const { primaryKeyField } = useCollection(collection);
+    const { fields, alias, limit, sort, search, filter, page } = query;
+    const endpoint = computed(() => {
+        if (!collection.value)
+            return null;
+        return getEndpoint(collection.value);
+    });
+    const items = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+    const itemCount = ref(null);
+    const totalCount = ref(null);
+    const totalPages = computed(() => {
+        if (itemCount.value === null)
+            return 1;
+        if (itemCount.value < (unref(limit) ?? 100))
+            return 1;
+        return Math.ceil(itemCount.value / (unref(limit) ?? 100));
+    });
+    const existingRequests = {
+        items: null,
+        total: null,
+        filter: null,
+    };
+    let loadingTimeout = null;
+    const fetchItems = throttle(getItems, 500);
+    watch([collection, limit, sort, search, filter, fields, page], async (after, before) => {
+        if (isEqual(after, before))
+            return;
+        const [newCollection, newLimit, newSort, newSearch, newFilter, _newFields, _newPage] = after;
+        const [oldCollection, oldLimit, oldSort, oldSearch, oldFilter, _oldFields, _oldPage] = before;
+        if (!newCollection || !query)
+            return;
+        if (newCollection !== oldCollection) {
+            reset();
+        }
+        if (!isEqual(newFilter, oldFilter) ||
+            !isEqual(newSort, oldSort) ||
+            newLimit !== oldLimit ||
+            newSearch !== oldSearch) {
+            if (oldCollection) {
+                page.value = 1;
+            }
+        }
+        if (newCollection !== oldCollection || !isEqual(newFilter, oldFilter) || newSearch !== oldSearch) {
+            getItemCount();
+        }
+        fetchItems();
+    }, { deep: true, immediate: true });
+    return {
+        itemCount,
+        totalCount,
+        items,
+        totalPages,
+        loading,
+        error,
+        changeManualSort,
+        getItems,
+        getItemCount,
+        getTotalCount,
+    };
+    async function getItems() {
+        if (!endpoint.value)
+            return;
+        let isCurrentRequestCanceled = false;
+        if (existingRequests.items)
+            existingRequests.items.abort();
+        existingRequests.items = new AbortController();
+        error.value = null;
+        if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+        }
+        loadingTimeout = setTimeout(() => {
+            loading.value = true;
+        }, 150);
+        if (unref(totalCount) === null) {
+            getTotalCount();
+        }
+        let fieldsToFetch = [...(unref(fields) ?? [])];
+        // Make sure the primary key is always fetched
+        if (!unref(fields)?.includes('*') &&
+            primaryKeyField.value &&
+            fieldsToFetch.includes(primaryKeyField.value.field) === false) {
+            fieldsToFetch.push(primaryKeyField.value.field);
+        }
+        // Filter out fake internal columns. This is (among other things) for a fake $thumbnail m2o field
+        // on directus_files
+        fieldsToFetch = fieldsToFetch.filter((field) => field.startsWith('$') === false);
+        try {
+            const response = await api.get(endpoint.value, {
+                params: {
+                    limit: unref(limit),
+                    fields: fieldsToFetch,
+                    ...(alias ? { alias: unref(alias) } : {}),
+                    sort: unref(sort),
+                    page: unref(page),
+                    search: unref(search),
+                    filter: unref(filter),
+                },
+                signal: existingRequests.items.signal,
+            });
+            let fetchedItems = response.data.data;
+            existingRequests.items = null;
+            /**
+             * @NOTE
+             *
+             * This is used in conjunction with the fake field in /src/stores/fields/fields.ts to be
+             * able to render out the directus_files collection (file library) using regular layouts
+             *
+             * Layouts expect the file to be a m2o of a `file` type, however, directus_files is the
+             * only collection that doesn't have this (obviously). This fake $thumbnail field is used to
+             * pretend there is a file m2o, so we can use the regular layout logic for files as well
+             */
+            if (collection.value === 'directus_files') {
+                fetchedItems = fetchedItems.map((file) => ({
+                    ...file,
+                    $thumbnail: file,
+                }));
+            }
+            items.value = fetchedItems;
+            if (page && fetchedItems.length === 0 && page?.value !== 1) {
+                page.value = 1;
+            }
+        }
+        catch (err) {
+            if (axios.isCancel(err)) {
+                isCurrentRequestCanceled = true;
+            }
+            else {
+                error.value = err;
+            }
+        }
+        finally {
+            if (loadingTimeout && !isCurrentRequestCanceled) {
+                clearTimeout(loadingTimeout);
+                loadingTimeout = null;
+            }
+            if (!loadingTimeout)
+                loading.value = false;
+        }
+    }
+    function reset() {
+        items.value = [];
+        totalCount.value = null;
+        itemCount.value = null;
+    }
+    async function changeManualSort({ item, to }) {
+        const pk = primaryKeyField.value?.field;
+        if (!pk)
+            return;
+        const fromIndex = items.value.findIndex((existing) => existing[pk] === item);
+        const toIndex = items.value.findIndex((existing) => existing[pk] === to);
+        items.value = moveInArray(items.value, fromIndex, toIndex);
+        const endpoint = computed(() => `/utils/sort/${collection.value}`);
+        await api.post(endpoint.value, { item, to });
+    }
+    async function getTotalCount() {
+        if (!endpoint.value)
+            return;
+        try {
+            if (existingRequests.total)
+                existingRequests.total.abort();
+            existingRequests.total = new AbortController();
+            const aggregate = primaryKeyField.value
+                ? {
+                    countDistinct: primaryKeyField.value.field,
+                }
+                : {
+                    count: '*',
+                };
+            const response = await api.get(endpoint.value, {
+                params: {
+                    aggregate,
+                },
+                signal: existingRequests.total.signal,
+            });
+            const count = primaryKeyField.value
+                ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field])
+                : Number(response.data.data[0].count);
+            existingRequests.total = null;
+            totalCount.value = count;
+        }
+        catch (err) {
+            if (!axios.isCancel(err)) {
+                throw err;
+            }
+        }
+    }
+    async function getItemCount() {
+        if (!endpoint.value)
+            return;
+        try {
+            if (existingRequests.filter)
+                existingRequests.filter.abort();
+            existingRequests.filter = new AbortController();
+            const aggregate = primaryKeyField.value
+                ? {
+                    countDistinct: primaryKeyField.value.field,
+                }
+                : {
+                    count: '*',
+                };
+            const response = await api.get(endpoint.value, {
+                params: {
+                    filter: unref(filter),
+                    search: unref(search),
+                    aggregate,
+                },
+                signal: existingRequests.filter.signal,
+            });
+            const count = primaryKeyField.value
+                ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field])
+                : Number(response.data.data[0].count);
+            existingRequests.filter = null;
+            itemCount.value = count;
+        }
+        catch (err) {
+            if (!axios.isCancel(err)) {
+                throw err;
+            }
+        }
+    }
+}

package/dist/use-items.test.js

@@ -0,0 +1,175 @@
+import { flushPromises } from '@vue/test-utils';
+import { isEqual } from 'lodash-es';
+import { afterEach, expect, test, vi } from 'vitest';
+import { computed, ref, unref } from 'vue';
+import { useItems } from './use-items.js';
+import { useCollection } from './use-collection.js';
+const mockData = { id: 1 };
+const mockCountData = { count: 2 };
+const mockCountDistinctData = { countDistinct: { id: 3 } };
+const mockPrimaryKeyField = {
+    collection: 'test_collection',
+    field: 'id',
+    name: 'id',
+    type: 'integer',
+    schema: null,
+    meta: null,
+};
+const mockApiGet = vi.fn();
+const mockApiPost = vi.fn();
+function isGetItemsRequest(config) {
+    if (!config.params)
+        return false;
+    return Object.keys(config.params).includes('fields');
+}
+function isTotalCountRequest(config) {
+    if (!config.params)
+        return false;
+    return isEqual(Object.keys(config.params), ['aggregate']);
+}
+function isFilterCountRequest(config) {
+    if (!config.params)
+        return false;
+    return isEqual(Object.keys(config.params), ['filter', 'search', 'aggregate']);
+}
+vi.mock('./use-system.js', () => ({
+    useApi: vi.fn().mockImplementation(() => ({
+        get: mockApiGet.mockImplementation((_path, config) => {
+            if (isTotalCountRequest(config) || isFilterCountRequest(config)) {
+                if (config.params.aggregate?.countDistinct)
+                    return Promise.resolve({ data: { data: [mockCountDistinctData] } });
+                return Promise.resolve({ data: { data: [mockCountData] } });
+            }
+            return Promise.resolve({ data: { data: [mockData] } });
+        }),
+        post: mockApiPost,
+    })),
+}));
+vi.mock('./use-collection.js');
+afterEach(() => {
+    vi.clearAllMocks();
+});
+test('should fetch filter count and total count only once', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const { totalCount, itemCount } = useItems(ref('test_collection'), {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter: ref(null),
+        page: ref(1),
+    });
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(unref(totalCount)).toBe(mockCountData.count);
+    expect(unref(itemCount)).toBe(mockCountData.count);
+    expect(mockApiGet.mock.calls.filter((call) => isGetItemsRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isTotalCountRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isFilterCountRequest(call[1])).length).toBe(1);
+});
+test('should fetch distinct filter count and total count only once', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => mockPrimaryKeyField) });
+    const { totalCount, itemCount } = useItems(ref('test_collection'), {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter: ref(null),
+        page: ref(1),
+    });
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(unref(totalCount)).toBe(mockCountDistinctData.countDistinct.id);
+    expect(unref(itemCount)).toBe(mockCountDistinctData.countDistinct.id);
+    expect(mockApiGet.mock.calls.filter((call) => isGetItemsRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isTotalCountRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isFilterCountRequest(call[1])).length).toBe(1);
+});
+test('should not re-fetch filter count when changing fields query', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const fields = ref(['*']);
+    useItems(ref('test_collection'), {
+        fields,
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter: ref(null),
+        page: ref(1),
+    });
+    // update fields query
+    fields.value = ['id'];
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(mockApiGet.mock.calls.filter((call) => isFilterCountRequest(call[1])).length).toBe(1);
+});
+test('should re-fetch filter count when changing filters query', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const filter = ref(null);
+    useItems(ref('test_collection'), {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter,
+        page: ref(1),
+    });
+    // update filter query
+    filter.value = { id: { _eq: 1 } };
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(mockApiGet.mock.calls.filter((call) => isTotalCountRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isFilterCountRequest(call[1])).length).toBe(2);
+});
+test('should re-fetch filter count when changing search query', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const search = ref(null);
+    useItems(ref('test_collection'), {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search,
+        filter: ref(null),
+        page: ref(1),
+    });
+    // update search query
+    search.value = 'test';
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(mockApiGet.mock.calls.filter((call) => isTotalCountRequest(call[1])).length).toBe(1);
+    expect(mockApiGet.mock.calls.filter((call) => isFilterCountRequest(call[1])).length).toBe(2);
+});
+test('should reset when collection changes', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const collection = ref('old_collection');
+    const { items } = useItems(collection, {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter: ref(null),
+        page: ref(1),
+    });
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(unref(items)).toEqual([mockData]);
+    // update collection ref
+    collection.value = 'new_collection';
+    // Wait until computed values are updated again
+    await flushPromises();
+    expect(unref(items)).toEqual([]);
+});
+test('should append $thumbnail to fetched items when collection is directus_files', async () => {
+    vi.mocked(useCollection).mockReturnValueOnce({ primaryKeyField: computed(() => null) });
+    const collection = ref('directus_files');
+    const { items } = useItems(collection, {
+        fields: ref(['*']),
+        limit: ref(1),
+        sort: ref(null),
+        search: ref(null),
+        filter: ref(null),
+        page: ref(1),
+    });
+    // Wait until computed values are updated
+    await flushPromises();
+    expect(unref(items)).toEqual([{ id: mockData.id, $thumbnail: mockData }]);
+});

package/dist/use-layout.js

@@ -0,0 +1,96 @@
+import { computed, defineComponent, reactive, toRefs } from 'vue';
+import { useExtensions } from './use-system.js';
+const NAME_SUFFIX = 'wrapper';
+const WRITABLE_PROPS = ['selection', 'layoutOptions', 'layoutQuery'];
+function isWritableProp(prop) {
+    return WRITABLE_PROPS.includes(prop);
+}
+function createLayoutWrapper(layout) {
+    return defineComponent({
+        name: `${layout.id}-${NAME_SUFFIX}`,
+        props: {
+            collection: {
+                type: String,
+                required: true,
+            },
+            selection: {
+                type: Array,
+                default: () => [],
+            },
+            layoutOptions: {
+                type: Object,
+                default: () => ({}),
+            },
+            layoutQuery: {
+                type: Object,
+                default: () => ({}),
+            },
+            filter: {
+                type: Object,
+                default: null,
+            },
+            filterUser: {
+                type: Object,
+                default: null,
+            },
+            filterSystem: {
+                type: Object,
+                default: null,
+            },
+            search: {
+                type: String,
+                default: null,
+            },
+            showSelect: {
+                type: String,
+                default: 'multiple',
+            },
+            selectMode: {
+                type: Boolean,
+                default: false,
+            },
+            readonly: {
+                type: Boolean,
+                default: false,
+            },
+            resetPreset: {
+                type: Function,
+                default: null,
+            },
+            clearFilters: {
+                type: Function,
+                default: null,
+            },
+        },
+        emits: WRITABLE_PROPS.map((prop) => `update:${prop}`),
+        setup(props, { emit }) {
+            const state = reactive({ ...layout.setup(props, { emit }), ...toRefs(props) });
+            for (const key in state) {
+                state[`onUpdate:${key}`] = (value) => {
+                    if (isWritableProp(key)) {
+                        emit(`update:${key}`, value);
+                    }
+                    else if (!Object.keys(props).includes(key)) {
+                        state[key] = value;
+                    }
+                };
+            }
+            return { state };
+        },
+        render(ctx) {
+            return ctx.$slots.default !== undefined ? ctx.$slots.default({ layoutState: ctx.state }) : null;
+        },
+    });
+}
+export function useLayout(layoutId) {
+    const { layouts } = useExtensions();
+    const layoutWrappers = computed(() => layouts.value.map((layout) => createLayoutWrapper(layout)));
+    const layoutWrapper = computed(() => {
+        const layout = layoutWrappers.value.find((layout) => layout.name === `${layoutId.value}-${NAME_SUFFIX}`);
+        if (layout === undefined) {
+            return layoutWrappers.value.find((layout) => layout.name === `tabular-${NAME_SUFFIX}`);
+        }
+        return layout;
+    });
+    return { layoutWrapper };
+}

package/dist/use-size-class.js

@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+export const sizeProps = {
+    xSmall: {
+        type: Boolean,
+        default: false,
+    },
+    small: {
+        type: Boolean,
+        default: false,
+    },
+    large: {
+        type: Boolean,
+        default: false,
+    },
+    xLarge: {
+        type: Boolean,
+        default: false,
+    },
+};
+export function useSizeClass(props) {
+    const sizeClass = computed(() => {
+        if (props.xSmall)
+            return 'x-small';
+        if (props.small)
+            return 'small';
+        if (props.large)
+            return 'large';
+        if (props.xLarge)
+            return 'x-large';
+        return null;
+    });
+    return sizeClass;
+}

package/dist/use-sync.js

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+export function useSync(props, key, emit) {
+    return computed({
+        get() {
+            return props[key];
+        },
+        set(newVal) {
+            emit(`update:${key}`, newVal);
+        },
+    });
+}

package/dist/use-system.js

@@ -0,0 +1,20 @@
+import { inject } from 'vue';
+import { API_INJECT, EXTENSIONS_INJECT, STORES_INJECT } from '@directus/constants';
+export function useStores() {
+    const stores = inject(STORES_INJECT);
+    if (!stores)
+        throw new Error('[useStores]: The stores could not be found.');
+    return stores;
+}
+export function useApi() {
+    const api = inject(API_INJECT);
+    if (!api)
+        throw new Error('[useApi]: The api could not be found.');
+    return api;
+}
+export function useExtensions() {
+    const extensions = inject(EXTENSIONS_INJECT);
+    if (!extensions)
+        throw new Error('[useExtensions]: The extensions could not be found.');
+    return extensions;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@directus/composables",
+  "version": "9.25.0",
+  "type": "module",
+  "description": "Shared Vue composables for Directus use",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/directus/directus.git",
+    "directory": "packages/composables"
+  },
+  "funding": "https://github.com/directus/directus?sponsor=1",
+  "license": "GPL-3.0",
+  "author": "Rijk van Zanten <rijkvanzanten@me.com>",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "!**/*.d.ts?(.map)"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@directus/tsconfig": "0.0.6",
+    "@types/lodash-es": "4.17.7",
+    "@vitest/coverage-c8": "0.29.3",
+    "@vue/test-utils": "2.3.1",
+    "axios": "1.3.4",
+    "typescript": "4.9.5",
+    "vitest": "0.29.3",
+    "@directus/types": "9.25.0"
+  },
+  "dependencies": {
+    "lodash-es": "4.17.21",
+    "nanoid": "4.0.2",
+    "vue": "3.2.47",
+    "@directus/constants": "9.25.0",
+    "@directus/utils": "9.25.0"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "dev": "tsc --watch",
+    "test": "vitest --watch=false"
+  }
+}