@directus/composables 10.1.2 → 10.1.4

package/dist/use-items.js

@@ -1,234 +0,0 @@
-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, limit, sort, search, filter, page, alias: queryAlias, deep: queryDeep } = query;
-    const alias = queryAlias ?? ref();
-    const deep = queryDeep ?? ref();
-    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, alias, deep], async (after, before) => {
-        if (isEqual(after, before))
-            return;
-        const [newCollection, newLimit, newSort, newSearch, newFilter] = after;
-        const [oldCollection, oldLimit, oldSort, oldSearch, oldFilter] = 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),
-                    deep: unref(deep),
-                },
-                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-layout.d.ts

@@ -1,4 +0,0 @@
-import type { Component, ComputedRef, Ref } from 'vue';
-export declare function useLayout<Options = any, Query = any>(layoutId: Ref<string | null>): {
-    layoutWrapper: ComputedRef<Component>;
-};

package/dist/use-layout.js

@@ -1,100 +0,0 @@
-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: () => ({}),
-            },
-            layoutProps: {
-                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.d.ts

@@ -1,27 +0,0 @@
-import type { ComputedRef } from 'vue';
-export declare const sizeProps: {
-    xSmall: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    small: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    large: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    xLarge: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-};
-interface SizeProps {
-    xSmall?: boolean;
-    small?: boolean;
-    large?: boolean;
-    xLarge?: boolean;
-}
-export declare function useSizeClass<T>(props: T & SizeProps): ComputedRef<string | null>;
-export {};

package/dist/use-size-class.js

@@ -1,33 +0,0 @@
-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.d.ts

@@ -1,2 +0,0 @@
-import type { Ref } from 'vue';
-export declare function useSync<T, K extends keyof T & string, E extends (event: `update:${K}`, ...args: any[]) => void>(props: T, key: K, emit: E): Ref<T[K]>;

package/dist/use-sync.js

@@ -1,11 +0,0 @@
-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.d.ts

@@ -1,5 +0,0 @@
-import type { AppExtensionConfigs, RefRecord } from '@directus/types';
-import type { AxiosInstance } from 'axios';
-export declare function useStores(): Record<string, any>;
-export declare function useApi(): AxiosInstance;
-export declare function useExtensions(): RefRecord<AppExtensionConfigs>;

package/dist/use-system.js

@@ -1,20 +0,0 @@
-import { API_INJECT, EXTENSIONS_INJECT, STORES_INJECT } from '@directus/constants';
-import { inject } from 'vue';
-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;
-}