@directus/composables 9.25.0 → 9.25.2

package/dist/index.d.ts

@@ -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.d.ts

@@ -0,0 +1,13 @@
+import type { AppCollection, Field } from '@directus/types';
+import { ComputedRef, Ref } from 'vue';
+export type UsableCollection = {
+    info: ComputedRef<AppCollection | null>;
+    fields: ComputedRef<Field[]>;
+    defaults: ComputedRef<Record<string, any>>;
+    primaryKeyField: ComputedRef<Field | null>;
+    userCreatedField: ComputedRef<Field | null>;
+    sortField: ComputedRef<string | null>;
+    isSingleton: ComputedRef<boolean>;
+    accountabilityScope: ComputedRef<'all' | 'activity' | null>;
+};
+export declare function useCollection(collectionKey: string | Ref<string | null>): UsableCollection;

package/dist/use-custom-selection.d.ts

@@ -0,0 +1,17 @@
+import { ComputedRef, Ref } from 'vue';
+export type UsableCustomSelection = {
+    otherValue: Ref<string | null>;
+    usesOtherValue: ComputedRef<boolean>;
+};
+export declare function useCustomSelection(currentValue: Ref<string>, items: Ref<any[]>, emit: (event: string | null) => void): UsableCustomSelection;
+type OtherValue = {
+    key: string;
+    value: string;
+};
+type UsableCustomSelectionMultiple = {
+    otherValues: Ref<OtherValue[]>;
+    addOtherValue: (value?: string) => void;
+    setOtherValue: (key: string, newValue: string | null) => void;
+};
+export declare function useCustomSelectionMultiple(currentValues: Ref<string[]>, items: Ref<any[]>, emit: (event: string[] | null) => void): UsableCustomSelectionMultiple;
+export {};

package/dist/use-element-size.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+declare global {
+    interface Window {
+        ResizeObserver: any;
+    }
+}
+export declare function useElementSize<T extends Element>(target: T | Ref<T> | Ref<undefined>): {
+    width: Ref<number>;
+    height: Ref<number>;
+};

package/dist/use-filter-fields.d.ts

@@ -0,0 +1,5 @@
+import type { Field } from '@directus/types';
+import { Ref, ComputedRef } from 'vue';
+export declare function useFilterFields<T extends string>(fields: Ref<Field[]>, filters: Record<T, (field: Field) => boolean>): {
+    fieldGroups: ComputedRef<Record<Extract<T, string>, Field[]>>;
+};

package/dist/use-groupable.d.ts

@@ -0,0 +1,45 @@
+import { Ref } from 'vue';
+export type GroupableInstance = {
+    active: Ref<boolean>;
+    value: string | number | undefined;
+};
+/**
+ * Used to make child item part of the group context. Needs to be used in a component that is a child
+ * of a component that has the `useGroupableParent` composition enabled
+ */
+export type GroupableOptions = {
+    value?: string | number;
+    group?: string;
+    active?: Ref<boolean>;
+    watch?: boolean;
+};
+export type UsableGroupable = {
+    active: Ref<boolean>;
+    toggle: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export declare function useGroupable(options?: GroupableOptions): UsableGroupable;
+type GroupableParentState = {
+    selection?: Ref<(string | number)[] | undefined> | Ref<readonly (string | number)[] | undefined>;
+    onSelectionChange?: (newSelectionValues: readonly (string | number)[]) => void;
+    onToggle?: (item: GroupableInstance) => void;
+};
+type GroupableParentOptions = {
+    mandatory?: Ref<boolean>;
+    max?: Ref<number>;
+    multiple?: Ref<boolean>;
+};
+type UsableGroupableParent = {
+    items: Ref<GroupableInstance[]>;
+    selection: Ref<readonly (string | number)[]>;
+    internalSelection: Ref<(string | number)[]>;
+    getValueForItem: (item: GroupableInstance) => string | number;
+    updateChildren: () => void;
+};
+/**
+ * Used to make a component a group parent component. Provides the registration / toggle functions
+ * to its group children
+ */
+export declare function useGroupableParent(state?: GroupableParentState, options?: GroupableParentOptions, group?: string): UsableGroupableParent;
+export {};

package/dist/use-items.d.ts

@@ -0,0 +1,28 @@
+import type { Item, Query } from '@directus/types';
+import { ComputedRef, Ref, WritableComputedRef } from 'vue';
+export type ManualSortData = {
+    item: string | number;
+    to: string | number;
+};
+export type UsableItems = {
+    itemCount: Ref<number | null>;
+    totalCount: Ref<number | null>;
+    items: Ref<Item[]>;
+    totalPages: ComputedRef<number>;
+    loading: Ref<boolean>;
+    error: Ref<any>;
+    changeManualSort: (data: ManualSortData) => Promise<void>;
+    getItems: () => Promise<void>;
+    getTotalCount: () => Promise<void>;
+    getItemCount: () => Promise<void>;
+};
+export type ComputedQuery = {
+    fields: Ref<Query['fields']> | ComputedRef<Query['fields']> | WritableComputedRef<Query['fields']>;
+    alias?: Ref<Query['alias']> | ComputedRef<Query['alias']> | WritableComputedRef<Query['alias']>;
+    limit: Ref<Query['limit']> | ComputedRef<Query['limit']> | WritableComputedRef<Query['limit']>;
+    sort: Ref<Query['sort']> | ComputedRef<Query['sort']> | WritableComputedRef<Query['sort']>;
+    search: Ref<Query['search']> | ComputedRef<Query['search']> | WritableComputedRef<Query['search']>;
+    filter: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
+    page: Ref<Query['page']> | WritableComputedRef<Query['page']>;
+};
+export declare function useItems(collection: Ref<string | null>, query: ComputedQuery): UsableItems;

package/dist/use-layout.d.ts

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

package/dist/use-size-class.d.ts

@@ -0,0 +1,27 @@
+import { 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-sync.d.ts

@@ -0,0 +1,2 @@
+import { 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-system.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/composables",
-  "version": "9.25.0",
+  "version": "9.25.2",
   "type": "module",
   "description": "Shared Vue composables for Directus use",
   "repository": {
@@ -18,7 +18,7 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "!**/*.d.ts?(.map)"
+    "!**/*.test.{js,d.ts}"
   ],
   "publishConfig": {
     "access": "public"
@@ -31,14 +31,14 @@
     "axios": "1.3.4",
     "typescript": "4.9.5",
     "vitest": "0.29.3",
-    "@directus/types": "9.25.0"
+    "@directus/types": "9.25.2"
   },
   "dependencies": {
     "lodash-es": "4.17.21",
     "nanoid": "4.0.2",
     "vue": "3.2.47",
-    "@directus/constants": "9.25.0",
-    "@directus/utils": "9.25.0"
+    "@directus/constants": "9.25.2",
+    "@directus/utils": "9.25.2"
   },
   "scripts": {
     "build": "tsc --build",

package/dist/use-items.test.js

@@ -1,175 +0,0 @@
-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 }]);
-});