@directus/composables 10.1.2 → 10.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/composables",
-  "version": "10.1.2",
+  "version": "10.1.4",
   "description": "Shared Vue composables for Directus use",
   "homepage": "https://directus.io",
   "repository": {
@@ -26,21 +26,23 @@
     "lodash-es": "4.17.21",
     "nanoid": "4.0.2",
     "vue": "3.3.4",
-    "@directus/constants": "10.2.3",
-    "@directus/utils": "10.0.10"
+    "@directus/constants": "11.0.0",
+    "@directus/utils": "11.0.0"
   },
   "devDependencies": {
     "@types/lodash-es": "4.17.7",
     "@vitest/coverage-c8": "0.31.1",
     "@vue/test-utils": "2.3.2",
-    "typescript": "5.0.4",
+    "tsup": "7.2.0",
+    "typescript": "5.2.2",
     "vitest": "0.31.1",
-    "@directus/tsconfig": "1.0.0",
-    "@directus/types": "10.1.6"
+    "@directus/extensions": "0.0.1",
+    "@directus/tsconfig": "1.0.1",
+    "@directus/types": "11.0.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.prod.json",
-    "dev": "tsc --watch",
+    "build": "tsup src/index.ts --format=esm --dts",
+    "dev": "tsup src/index.ts --format=esm --dts --watch",
     "test": "vitest --watch=false"
   }
 }

package/dist/use-collection.d.ts

@@ -1,13 +0,0 @@
-import type { AppCollection, Field } from '@directus/types';
-import type { 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-collection.js

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

@@ -1,17 +0,0 @@
-import type { ComputedRef, Ref } from 'vue';
-export type UsableCustomSelection = {
-    otherValue: Ref<string | null>;
-    usesOtherValue: ComputedRef<boolean>;
-};
-export declare function useCustomSelection(currentValue: Ref<string | null>, 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[] | null>, items: Ref<any[]>, emit: (event: string[] | null) => void): UsableCustomSelectionMultiple;
-export {};

package/dist/use-custom-selection.js

@@ -1,88 +0,0 @@
-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))
-            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);
-            if (!existsInValues) {
-                const other = otherValues.value.map((o) => o.value);
-                const existsInOtherValues = other.includes(value);
-                if (!existsInOtherValues) {
-                    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;
-            });
-            if (valueWithoutPrevious.length === currentValues.value?.length) {
-                emit(valueWithoutPrevious);
-            }
-            else {
-                emit([...valueWithoutPrevious, newValue]);
-            }
-        }
-    }
-}

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

@@ -1,10 +0,0 @@
-import type { 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-element-size.js

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

@@ -1,5 +0,0 @@
-import type { Field } from '@directus/types';
-import type { ComputedRef, Ref } 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-filter-fields.js

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

@@ -1,45 +0,0 @@
-import type { 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-groupable.js

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

@@ -1,29 +0,0 @@
-import type { Item, Query } from '@directus/types';
-import type { 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']>;
-    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']>;
-    alias?: Ref<Query['alias']> | ComputedRef<Query['alias']> | WritableComputedRef<Query['alias']>;
-    deep?: Ref<Query['deep']> | ComputedRef<Query['deep']> | WritableComputedRef<Query['deep']>;
-};
-export declare function useItems(collection: Ref<string | null>, query: ComputedQuery): UsableItems;