@directus/composables 11.2.2 → 11.2.4

package/dist/index.js

@@ -1,703 +1,1500 @@
-// src/use-collection.ts
-import { computed, ref } from "vue";
-
-// src/use-system.ts
+import { computed, defineComponent, inject, isRef, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, shallowRef, toRef, toRefs, unref, watch } from "vue";
 import { API_INJECT, EXTENSIONS_INJECT, SDK_INJECT, STORES_INJECT } from "@directus/constants";
-import { inject } from "vue";
+import { nanoid } from "nanoid";
+import { debounce, isEqual, isNil } from "lodash-es";
+import { getEndpoint, moveInArray } from "@directus/utils";
+import axios from "axios";
+
+//#region src/use-system.ts
+/**
+* Vue composable that provides access to the global Directus stores through dependency injection.
+*
+* This composable injects the stores object that contains all the Pinia stores used throughout
+* the Directus application, including user store, permissions store, collections store, etc.
+*
+* @returns The injected stores object containing all application stores
+* @throws Error if the stores could not be found in the injection context
+*
+* @example
+* ```typescript
+* import { useStores } from '@directus/composables';
+*
+* export default defineComponent({
+*   setup() {
+*     const stores = useStores();
+*
+*     // Access specific stores
+*     const userStore = stores.useUserStore();
+*     const collectionsStore = stores.useCollectionsStore();
+*     const permissionsStore = stores.usePermissionsStore();
+*
+*     return {
+*       userInfo: userStore.currentUser,
+*       collections: collectionsStore.collections,
+*       permissions: permissionsStore.permissions
+*     };
+*   }
+* });
+* ```
+*
+* @example
+* ```typescript
+* // Using in a component with reactive store data
+* import { useStores } from '@directus/composables';
+* import { computed } from 'vue';
+*
+* export default defineComponent({
+*   setup() {
+*     const stores = useStores();
+*     const userStore = stores.useUserStore();
+*
+*     const isAdmin = computed(() => {
+*       return userStore.currentUser?.role?.admin_access === true;
+*     });
+*
+*     const hasCreatePermission = computed(() => {
+*       const permissionsStore = stores.usePermissionsStore();
+*       return permissionsStore.hasPermission('directus_files', 'create');
+*     });
+*
+*     return { isAdmin, hasCreatePermission };
+*   }
+* });
+* ```
+*/
 function useStores() {
-  const stores = inject(STORES_INJECT);
-  if (!stores) throw new Error("[useStores]: The stores could not be found.");
-  return stores;
+	const stores = inject(STORES_INJECT);
+	if (!stores) throw new Error("[useStores]: The stores could not be found.");
+	return stores;
 }
+/**
+* Vue composable that provides access to the Axios HTTP client instance through dependency injection.
+*
+* This composable injects the configured Axios instance that is set up with the proper base URL,
+* authentication headers, interceptors, and other configuration needed to communicate with the
+* Directus API. It provides a convenient way to make HTTP requests from components and composables.
+*
+* @returns The injected Axios instance configured for Directus API communication
+* @throws Error if the API instance could not be found in the injection context
+*
+* @example
+* ```typescript
+* import { useApi } from '@directus/composables';
+*
+* export default defineComponent({
+*   setup() {
+*     const api = useApi();
+*
+*     const fetchUserData = async (userId: string) => {
+*       try {
+*         const response = await api.get(`/users/${userId}`);
+*         return response.data;
+*       } catch (error) {
+*         console.error('Failed to fetch user data:', error);
+*         throw error;
+*       }
+*     };
+*
+*     return { fetchUserData };
+*   }
+* });
+* ```
+*
+* @example
+* ```typescript
+* // Using with reactive data and error handling
+* import { useApi } from '@directus/composables';
+* import { ref, onMounted } from 'vue';
+*
+* export default defineComponent({
+*   setup() {
+*     const api = useApi();
+*     const collections = ref([]);
+*     const loading = ref(false);
+*     const error = ref(null);
+*
+*     const loadCollections = async () => {
+*       loading.value = true;
+*       error.value = null;
+*
+*       try {
+*         const response = await api.get('/collections');
+*         collections.value = response.data.data;
+*       } catch (err) {
+*         error.value = err.response?.data?.errors?.[0]?.message || 'Failed to load collections';
+*       } finally {
+*         loading.value = false;
+*       }
+*     };
+*
+*     onMounted(loadCollections);
+*
+*     return { collections, loading, error, loadCollections };
+*   }
+* });
+* ```
+*/
 function useApi() {
-  const api = inject(API_INJECT);
-  if (!api) throw new Error("[useApi]: The api could not be found.");
-  return api;
+	const api = inject(API_INJECT);
+	if (!api) throw new Error("[useApi]: The api could not be found.");
+	return api;
 }
+/**
+* Vue composable that provides access to the Directus SDK client instance through dependency injection.
+*
+* This composable injects the configured Directus SDK client that provides a type-safe, modern API
+* for interacting with Directus. The SDK offers methods for CRUD operations, authentication, file
+* management, and more, with full TypeScript support and automatic type inference based on your schema.
+*
+* @template Schema - The TypeScript schema type for your Directus instance, defaults to `any`
+* @returns The injected Directus SDK client with REST client capabilities
+* @throws Error if the SDK instance could not be found in the injection context
+*
+* @example
+* ```typescript
+* import { useSdk } from '@directus/composables';
+*
+* // Using with default schema
+* export default defineComponent({
+*   setup() {
+*     const sdk = useSdk();
+*
+*     const fetchArticles = async () => {
+*       try {
+*         const articles = await sdk.items('articles').readByQuery({
+*           filter: { status: { _eq: 'published' } },
+*           sort: ['-date_created'],
+*           limit: 10
+*         });
+*         return articles;
+*       } catch (error) {
+*         console.error('Failed to fetch articles:', error);
+*         throw error;
+*       }
+*     };
+*
+*     return { fetchArticles };
+*   }
+* });
+* ```
+*
+* @example
+* ```typescript
+* // Using with typed schema for better type safety
+* import { useSdk } from '@directus/composables';
+*
+* interface MySchema {
+*   articles: {
+*     id: string;
+*     title: string;
+*     content: string;
+*     status: 'draft' | 'published';
+*     author: string;
+*     date_created: string;
+*   };
+*   authors: {
+*     id: string;
+*     name: string;
+*     email: string;
+*   };
+* }
+*
+* export default defineComponent({
+*   setup() {
+*     const sdk = useSdk<MySchema>();
+*
+*     const createArticle = async (articleData: Partial<MySchema['articles']>) => {
+*       try {
+*         const newArticle = await sdk.items('articles').createOne(articleData);
+*         return newArticle; // Fully typed return value
+*       } catch (error) {
+*         console.error('Failed to create article:', error);
+*         throw error;
+*       }
+*     };
+*
+*     const updateArticle = async (id: string, updates: Partial<MySchema['articles']>) => {
+*       try {
+*         const updatedArticle = await sdk.items('articles').updateOne(id, updates);
+*         return updatedArticle; // Type-safe updates
+*       } catch (error) {
+*         console.error('Failed to update article:', error);
+*         throw error;
+*       }
+*     };
+*
+*     return { createArticle, updateArticle };
+*   }
+* });
+* ```
+*/
 function useSdk() {
-  const sdk = inject(SDK_INJECT);
-  if (!sdk) throw new Error("[useSdk]: The sdk could not be found.");
-  return sdk;
+	const sdk = inject(SDK_INJECT);
+	if (!sdk) throw new Error("[useSdk]: The sdk could not be found.");
+	return sdk;
 }
+/**
+* Vue composable that provides access to the registered Directus extensions through dependency injection.
+*
+* This composable injects the extensions configuration object that contains all registered app
+* extensions including interfaces, displays, layouts, modules, panels, operations, and more.
+* The extensions are provided as reactive references and can be used to dynamically access
+* and utilize custom functionality within the Directus application.
+*
+* @returns A reactive record of extension configurations organized by extension type
+* @throws Error if the extensions could not be found in the injection context
+*
+* @example
+* ```typescript
+* import { useExtensions } from '@directus/composables';
+*
+* export default defineComponent({
+*   setup() {
+*     const extensions = useExtensions();
+*
+*     const getAvailableInterfaces = () => {
+*       return Object.values(extensions.interfaces || {});
+*     };
+*
+*     const getAvailableDisplays = () => {
+*       return Object.values(extensions.displays || {});
+*     };
+*
+*     const findInterfaceByName = (name: string) => {
+*       return extensions.interfaces?.[name] || null;
+*     };
+*
+*     return {
+*       getAvailableInterfaces,
+*       getAvailableDisplays,
+*       findInterfaceByName
+*     };
+*   }
+* });
+* ```
+*
+* @example
+* ```typescript
+* // Using with computed properties for reactive extension lists
+* import { useExtensions } from '@directus/composables';
+* import { computed } from 'vue';
+*
+* export default defineComponent({
+*   setup() {
+*     const extensions = useExtensions();
+*
+*     const availableLayouts = computed(() => {
+*       return Object.entries(extensions.layouts || {}).map(([key, config]) => ({
+*         id: key,
+*         name: config.name,
+*         icon: config.icon,
+*         component: config.component
+*       }));
+*     });
+*
+*     const customModules = computed(() => {
+*       return Object.values(extensions.modules || {}).filter(module =>
+*         !module.preRegisterCheck || module.preRegisterCheck()
+*       );
+*     });
+*
+*     const operationsByGroup = computed(() => {
+*       const operations = Object.values(extensions.operations || {});
+*       return operations.reduce((groups, operation) => {
+*         const group = operation.overview?.group || 'other';
+*         if (!groups[group]) groups[group] = [];
+*         groups[group].push(operation);
+*         return groups;
+*       }, {} as Record<string, any[]>);
+*     });
+*
+*     return {
+*       availableLayouts,
+*       customModules,
+*       operationsByGroup
+*     };
+*   }
+* });
+* ```
+*/
 function useExtensions() {
-  const extensions = inject(EXTENSIONS_INJECT);
-  if (!extensions) throw new Error("[useExtensions]: The extensions could not be found.");
-  return extensions;
+	const extensions = inject(EXTENSIONS_INJECT);
+	if (!extensions) throw new Error("[useExtensions]: The extensions could not be found.");
+	return extensions;
 }
 
-// src/use-collection.ts
+//#endregion
+//#region src/use-collection.ts
+/**
+* A Vue composable that provides reactive access to collection metadata, fields, and computed properties.
+*
+* This composable serves as a centralized way to access and work with Directus collections,
+* providing reactive computed properties for collection information, field definitions,
+* default values, and various collection-specific metadata.
+*
+* @param collectionKey - The collection identifier. Can be a string or a reactive reference to a string.
+*                        If null, most computed properties will return empty/null values.
+*
+* @returns An object containing reactive computed properties for the collection:
+* - `info` - The complete collection configuration object or null if not found
+* - `fields` - Array of sorted field definitions for the collection
+* - `defaults` - Object mapping field names to their default values from schema
+* - `primaryKeyField` - The field marked as primary key, or null if none exists
+* - `userCreatedField` - The field with 'user_created' special type, or null if none exists
+* - `sortField` - The field name used for sorting, from collection meta, or null
+* - `isSingleton` - Boolean indicating if the collection is configured as a singleton
+* - `accountabilityScope` - The accountability scope setting ('all', 'activity', or null)
+*
+* @example
+* ```typescript
+* // Using with a static collection name
+* const { info, fields, primaryKeyField } = useCollection('users');
+*
+* // Using with a reactive collection name
+* const collectionName = ref('articles');
+* const { fields, defaults, isSingleton } = useCollection(collectionName);
+*
+* // Accessing properties
+* console.log(info.value?.name); // Collection display name
+* console.log(fields.value.length); // Number of fields
+* console.log(primaryKeyField.value?.field); // Primary key field name
+* ```
+*/
 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 defaults2 = {};
-    for (const field of fields.value) {
-      if (field.schema !== null && "default_value" in field.schema) {
-        defaults2[field.field] = field.schema.default_value;
-      }
-    }
-    return defaults2;
-  });
-  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(() => {
-    return info.value?.meta?.accountability || null;
-  });
-  return { info, fields, defaults, primaryKeyField, userCreatedField, sortField, isSingleton, accountabilityScope };
+	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);
+	});
+	return {
+		info,
+		fields,
+		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;
+		}),
+		primaryKeyField: computed(() => {
+			return fields.value.find((field) => field.collection === collection.value && field.schema?.is_primary_key === true) || null;
+		}),
+		userCreatedField: computed(() => {
+			return fields.value?.find((field) => (field.meta?.special || []).includes("user_created")) || null;
+		}),
+		sortField: computed(() => {
+			return info.value?.meta?.sort_field || null;
+		}),
+		isSingleton: computed(() => {
+			return info.value?.meta?.singleton === true;
+		}),
+		accountabilityScope: computed(() => {
+			return info.value?.meta?.accountability || null;
+		})
+	};
 }
 
-// src/use-custom-selection.ts
-import { nanoid } from "nanoid";
-import { computed as computed2, ref as ref2, watch } from "vue";
+//#endregion
+//#region src/use-custom-selection.ts
+/**
+* A Vue composable for managing custom selection values that aren't present in a predefined list of items.
+*
+* This composable is typically used in form components where users can select from a predefined list
+* of options, but also have the ability to enter custom values that aren't in the list. It manages
+* the state and logic for detecting when a custom value is being used and provides a reactive
+* interface for getting and setting custom values.
+*
+* @param currentValue - A reactive reference to the currently selected value. Can be null if no value is selected.
+* @param items - A reactive reference to the array of available predefined items. Each item should have a 'value' property.
+* @param emit - A callback function to emit value changes to the parent component.
+*
+* @returns An object containing:
+* - `otherValue` - A computed ref for getting/setting custom values. Returns current value when using custom,
+*   empty string otherwise. Setting triggers the emit callback.
+* - `usesOtherValue` - A computed boolean indicating whether the current value is a custom value
+*   (not found in the predefined items list).
+*
+* @example
+* ```typescript
+* const currentValue = ref('custom-option');
+* const items = ref([
+*   { value: 'option1', label: 'Option 1' },
+*   { value: 'option2', label: 'Option 2' }
+* ]);
+* const emit = (value: string | null) => console.log('Value changed:', value);
+*
+* const { otherValue, usesOtherValue } = useCustomSelection(currentValue, items, emit);
+*
+* console.log(usesOtherValue.value); // true (custom-option not in items)
+* console.log(otherValue.value); // 'custom-option'
+*
+* otherValue.value = 'new-custom-value'; // Triggers emit with 'new-custom-value'
+* ```
+*/
 function useCustomSelection(currentValue, items, emit) {
-  const localOtherValue = ref2("");
-  const otherValue = computed2({
-    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 = computed2(() => {
-    if (items.value === null) return false;
-    const values = items.value.map((item) => item.value);
-    return currentValue.value !== null && currentValue.value.length > 0 && values.includes(currentValue.value) === false;
-  });
-  return { otherValue, usesOtherValue };
+	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;
+		const values = items.value.map((item) => item.value);
+		return currentValue.value !== null && currentValue.value.length > 0 && values.includes(currentValue.value) === false;
+	});
+	return {
+		otherValue,
+		usesOtherValue
+	};
 }
+/**
+* A Vue composable for managing multiple custom selection values that aren't present in a predefined list of items.
+*
+* This composable extends the single custom selection pattern to support multiple values. It's typically used
+* in multi-select form components where users can select multiple predefined options and also add custom
+* values that aren't in the predefined list. It automatically detects custom values in the current selection,
+* manages their state, and provides functions for adding and updating custom values.
+*
+* @param currentValues - A reactive reference to the currently selected values array. Can be null if no values are selected.
+* @param items - A reactive reference to the array of available predefined items. Each item should have a 'value' property.
+* @param emit - A callback function to emit value changes to the parent component.
+*
+* @returns An object containing:
+* - `otherValues` - A reactive array of custom value objects, each with a unique key, value, and optional focus state.
+* - `addOtherValue` - A function to add a new custom value with optional value and focus parameters.
+* - `setOtherValue` - A function to update or remove a custom value by its key, automatically syncing with currentValues.
+*
+* @example
+* ```typescript
+* const currentValues = ref(['option1', 'custom-value1', 'custom-value2']);
+* const items = ref([
+*   { value: 'option1', label: 'Option 1' },
+*   { value: 'option2', label: 'Option 2' }
+* ]);
+* const emit = (values: string[] | null) => console.log('Values changed:', values);
+*
+* const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(currentValues, items, emit);
+*
+* console.log(otherValues.value); // [{ key: 'abc123', value: 'custom-value1' }, { key: 'def456', value: 'custom-value2' }]
+*
+* // Add a new custom value
+* addOtherValue('new-custom-value', true);
+*
+* // Update an existing custom value
+* setOtherValue('abc123', 'updated-custom-value');
+*
+* // Remove a custom value
+* setOtherValue('def456', null);
+* ```
+*/
 function useCustomSelectionMultiple(currentValues, items, emit) {
-  const otherValues = ref2([]);
-  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 = "", focus = false) {
-    otherValues.value = [
-      ...otherValues.value,
-      {
-        key: nanoid(),
-        value,
-        focus
-      }
-    ];
-  }
-  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]);
-      }
-    }
-  }
+	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;
+			if (!items.value.map((item) => item.value).includes(value)) {
+				if (!otherValues.value.map((o) => o.value).includes(value)) addOtherValue(value);
+			}
+		});
+	}, { immediate: true });
+	return {
+		otherValues,
+		addOtherValue,
+		setOtherValue
+	};
+	function addOtherValue(value = "", focus = false) {
+		otherValues.value = [...otherValues.value, {
+			key: nanoid(),
+			value,
+			focus
+		}];
+	}
+	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]);
+		}
+	}
 }
 
-// src/use-element-size.ts
-import { isNil } from "lodash-es";
-import { isRef, onMounted, onUnmounted, ref as ref3 } from "vue";
+//#endregion
+//#region src/use-element-size.ts
+/**
+* A Vue composable that reactively tracks the size of a DOM element using ResizeObserver.
+*
+* @template T - The type of the element being observed, must extend Element
+* @param target - The element to observe. Can be:
+*   - A direct element reference
+*   - A Vue ref containing an element
+*   - A Vue ref that might be undefined
+*
+* @returns An object containing reactive width and height values:
+*   - width: Ref<number> - The current width of the element in pixels
+*   - height: Ref<number> - The current height of the element in pixels
+*
+* @example
+* ```typescript
+* // With a template ref
+* const elementRef = ref<HTMLDivElement>();
+* const { width, height } = useElementSize(elementRef);
+*
+* // With a direct element
+* const element = document.getElementById('my-element');
+* const { width, height } = useElementSize(element);
+* ```
+*
+* @remarks
+* - The composable automatically sets up a ResizeObserver when the component mounts
+* - The observer is automatically disconnected when the component unmounts
+* - Initial values are 0 until the first resize event
+* - Handles cases where the target element might be undefined
+*/
 function useElementSize(target) {
-  const width = ref3(0);
-  const height = ref3(0);
-  const resizeObserver = new ResizeObserver(([entry]) => {
-    if (entry === void 0) 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 };
+	const width = ref(0);
+	const height = ref(0);
+	const resizeObserver = new ResizeObserver(([entry]) => {
+		if (entry === void 0) 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
+	};
 }
 
-// src/use-filter-fields.ts
-import { computed as computed3 } from "vue";
+//#endregion
+//#region src/use-filter-fields.ts
+/**
+* A Vue composable that filters and groups fields based on multiple filter criteria.
+*
+* @template T - The type of filter names as string literals
+* @param fields - A Vue ref containing an array of Field objects to be filtered
+* @param filters - An object where keys are filter names and values are predicate functions
+*                  that return true if a field should be included in that group
+*
+* @returns An object containing:
+*   - fieldGroups: ComputedRef<Record<Extract<T, string>, Field[]>> - A reactive object
+*     where each key corresponds to a filter name and the value is an array of fields
+*     that pass that filter
+*
+* @example
+* ```typescript
+* // Define filter criteria
+* const fieldFilters = {
+*   required: (field: Field) => field.required === true,
+*   optional: (field: Field) => field.required !== true,
+*   text: (field: Field) => field.type === 'string',
+*   numeric: (field: Field) => ['integer', 'float', 'decimal'].includes(field.type)
+* };
+*
+* const fieldsRef = ref<Field[]>([
+*   { name: 'id', type: 'integer', required: true },
+*   { name: 'title', type: 'string', required: true },
+*   { name: 'description', type: 'text', required: false },
+*   { name: 'price', type: 'decimal', required: false }
+* ]);
+*
+* const { fieldGroups } = useFilterFields(fieldsRef, fieldFilters);
+*
+* // Access filtered groups
+* console.log(fieldGroups.value.required); // [id, title]
+* console.log(fieldGroups.value.text); // [title]
+* console.log(fieldGroups.value.numeric); // [id, price]
+* ```
+*
+* @remarks
+* - Fields can appear in multiple groups if they pass multiple filters
+* - If a field doesn't pass any filter, it won't appear in any group
+* - The result is reactive and will update when the input fields change
+* - Filter functions are called for each field against each filter criterion
+* - Groups are initialized as empty arrays even if no fields match the criteria
+*/
 function useFilterFields(fields, filters) {
-  const fieldGroups = computed3(() => {
-    const acc = {};
-    for (const name in filters) {
-      acc[name] = [];
-    }
-    return fields.value.reduce((acc2, field) => {
-      for (const name in filters) {
-        if (filters[name](field) === false) continue;
-        acc2[name].push(field);
-      }
-      return acc2;
-    }, acc);
-  });
-  return { fieldGroups };
+	return { fieldGroups: computed(() => {
+		const acc = {};
+		for (const name in filters) acc[name] = [];
+		return fields.value.reduce((acc$1, field) => {
+			for (const name in filters) {
+				if (filters[name](field) === false) continue;
+				acc$1[name].push(field);
+			}
+			return acc$1;
+		}, acc);
+	}) };
 }
 
-// src/use-groupable.ts
-import { isEqual, isNil as isNil2 } from "lodash-es";
-import { computed as computed4, inject as inject2, nextTick, onBeforeUnmount, provide, ref as ref4, shallowRef, watch as watch2 } from "vue";
+//#endregion
+//#region src/use-groupable.ts
+/**
+* Vue composable for creating groupable child items that can participate in group selection.
+*
+* This composable enables a component to be part of a group context managed by a parent component
+* using `useGroupableParent`. It provides reactive active state management and selection control.
+*
+* @param options - Configuration options for the groupable item
+* @param options.value - Unique identifier for this item within the group
+* @param options.group - Name of the group to inject from (defaults to 'item-group')
+* @param options.active - External reactive reference to control the active state
+* @param options.watch - Whether to watch the external active reference for changes
+*
+* @returns Object containing active state and control methods
+*
+* @example
+* ```vue
+* <script setup>
+* import { useGroupable } from '@directus/composables';
+*
+* const props = defineProps(['value', 'active']);
+*
+* const { active, toggle, activate, deactivate } = useGroupable({
+*   value: props.value,
+*   active: toRef(props, 'active'),
+*   watch: true
+* });
+* <\/script>
+* ```
+*/
 function useGroupable(options) {
-  const parentFunctions = inject2(options?.group || "item-group", null);
-  if (isNil2(parentFunctions)) {
-    return {
-      active: ref4(false),
-      toggle: () => {
-      },
-      activate: () => {
-      },
-      deactivate: () => {
-      }
-    };
-  }
-  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 = ref4(startActive);
-  const item = { active, value: options?.value };
-  register(item);
-  if (options?.active !== void 0 && options.watch === true) {
-    watch2(options.active, () => {
-      if (options.active === void 0) 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);
-    }
-  };
+	const parentFunctions = inject(options?.group || "item-group", null);
+	if (isNil(parentFunctions)) return {
+		active: ref(false),
+		toggle: () => {},
+		activate: () => {},
+		deactivate: () => {}
+	};
+	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 !== void 0 && options.watch === true) watch(options.active, () => {
+		if (options.active === void 0) 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);
+		}
+	};
 }
+/**
+* Vue composable for creating a group parent that manages multiple groupable child items.
+*
+* This composable provides the foundation for components that need to manage a collection
+* of selectable items, such as tabs, radio groups, or multi-select lists. It handles
+* registration of child items, selection state management, and provides various selection
+* constraints (mandatory, maximum, multiple).
+*
+* @param state - External state configuration for selection management
+* @param state.selection - External selection state reference
+* @param state.onSelectionChange - Callback fired when selection changes
+* @param state.onToggle - Callback fired when an item is toggled
+* @param options - Configuration options for selection behavior
+* @param options.mandatory - Whether at least one item must always be selected
+* @param options.max - Maximum number of items that can be selected (-1 for unlimited)
+* @param options.multiple - Whether multiple items can be selected simultaneously
+* @param group - Injection key for the group (defaults to 'item-group')
+*
+* @returns Object containing items array, selection state, and utility functions
+*
+* @example
+* ```vue
+* <script setup>
+* import { useGroupableParent } from '@directus/composables';
+* import { ref } from 'vue';
+*
+* const selectedItems = ref([]);
+* const isMultiple = ref(true);
+* const isMandatory = ref(false);
+*
+* const { items, selection } = useGroupableParent(
+*   {
+*     selection: selectedItems,
+*     onSelectionChange: (values) => {
+*       console.log('Selection changed:', values);
+*     }
+*   },
+*   {
+*     multiple: isMultiple,
+*     mandatory: isMandatory,
+*     max: ref(3)
+*   }
+* );
+* <\/script>
+* ```
+*/
 function useGroupableParent(state = {}, options = {}, group = "item-group") {
-  const items = shallowRef([]);
-  const internalSelection = ref4([]);
-  const selection = computed4({
-    get() {
-      if (!isNil2(state.selection) && !isNil2(state.selection.value)) {
-        return state.selection.value;
-      }
-      return internalSelection.value;
-    },
-    set(newSelection) {
-      if (!isNil2(state.onSelectionChange)) {
-        state.onSelectionChange(newSelection);
-      }
-      internalSelection.value = [...newSelection];
-    }
-  });
-  provide(group, { register, unregister, toggle, selection });
-  watch2(selection, updateChildren, { immediate: true });
-  nextTick().then(updateChildren);
-  watch2(
-    () => options?.mandatory?.value,
-    (newValue, oldValue) => {
-      if (isEqual(newValue, oldValue)) return;
-      if (!selection.value || selection.value.length === 0 && options?.mandatory?.value === true) {
-        if (items.value[0]) selection.value = [getValueForItem(items.value[0])];
-      }
-    }
-  );
-  return { items, selection, internalSelection, getValueForItem, updateChildren };
-  function register(item) {
-    items.value = [...items.value, item];
-    const value = getValueForItem(item);
-    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);
-    }
-  }
-  function unregister(item) {
-    items.value = items.value.filter((existingItem) => {
-      return existingItem !== item;
-    });
-  }
-  function toggle(item) {
-    if (options?.multiple?.value === true) {
-      toggleMultiple(item);
-    } else {
-      toggleSingle(item);
-    }
-    if (!isNil2(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);
-    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;
-    }
-    if (options?.max?.value && options.max.value !== -1 && selection.value.length >= options.max.value) {
-      updateChildren();
-      return;
-    }
-    selection.value = [...selection.value, itemValue];
-  }
-  function getValueForItem(item) {
-    return item.value || items.value.findIndex((child) => item === child);
-  }
-  function updateChildren() {
-    items.value.forEach((item) => {
-      item.active.value = selection.value.includes(getValueForItem(item));
-    });
-  }
+	const items = shallowRef([]);
+	const internalSelection = ref([]);
+	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(group, {
+		register,
+		unregister,
+		toggle,
+		selection
+	});
+	watch(selection, updateChildren, { immediate: true });
+	nextTick().then(updateChildren);
+	watch(() => options?.mandatory?.value, (newValue, oldValue) => {
+		if (isEqual(newValue, oldValue)) return;
+		if (!selection.value || selection.value.length === 0 && options?.mandatory?.value === true) {
+			if (items.value[0]) selection.value = [getValueForItem(items.value[0])];
+		}
+	});
+	return {
+		items,
+		selection,
+		internalSelection,
+		getValueForItem,
+		updateChildren
+	};
+	function register(item) {
+		items.value = [...items.value, item];
+		const value = getValueForItem(item);
+		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);
+	}
+	function unregister(item) {
+		items.value = items.value.filter((existingItem) => {
+			return existingItem !== 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);
+		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;
+		}
+		if (options?.max?.value && options.max.value !== -1 && selection.value.length >= options.max.value) {
+			updateChildren();
+			return;
+		}
+		selection.value = [...selection.value, itemValue];
+	}
+	function getValueForItem(item) {
+		return item.value || items.value.findIndex((child) => item === child);
+	}
+	function updateChildren() {
+		items.value.forEach((item) => {
+			item.active.value = selection.value.includes(getValueForItem(item));
+		});
+	}
 }
 
-// src/use-items.ts
-import { getEndpoint, moveInArray } from "@directus/utils";
-import axios from "axios";
-import { isEqual as isEqual2, throttle } from "lodash-es";
-import { computed as computed5, ref as ref5, toRef, unref, watch as watch3 } from "vue";
+//#endregion
+//#region src/use-items.ts
 function useItems(collection, query) {
-  const api = useApi();
-  const { primaryKeyField } = useCollection(collection);
-  const { fields, limit, sort, search, filter, page, filterSystem, alias, deep } = query;
-  const endpoint = computed5(() => {
-    if (!collection.value) return null;
-    return getEndpoint(collection.value);
-  });
-  const items = ref5([]);
-  const loading = ref5(false);
-  const error = ref5(null);
-  const itemCount = ref5(null);
-  const totalCount = ref5(null);
-  const totalPages = computed5(() => {
-    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);
-  watch3(
-    [collection, limit, sort, search, filter, fields, page, toRef(alias), toRef(deep)],
-    async (after, before) => {
-      if (isEqual2(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 (!isEqual2(newFilter, oldFilter) || !isEqual2(newSort, oldSort) || newLimit !== oldLimit || newSearch !== oldSearch) {
-        if (oldCollection) {
-          page.value = 1;
-        }
-      }
-      if (newCollection !== oldCollection || !isEqual2(newFilter, oldFilter) || newSearch !== oldSearch) {
-        getItemCount();
-      }
-      fetchItems();
-    },
-    { deep: true, immediate: true }
-  );
-  watch3(
-    [collection, toRef(filterSystem)],
-    async (after, before) => {
-      if (isEqual2(after, before)) return;
-      getTotalCount();
-    },
-    { 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);
-    let fieldsToFetch = [...unref(fields) ?? []];
-    if (!unref(fields)?.includes("*") && primaryKeyField.value && fieldsToFetch.includes(primaryKeyField.value.field) === false) {
-      fieldsToFetch.push(primaryKeyField.value.field);
-    }
-    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;
-      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 endpoint2 = computed5(() => `/utils/sort/${collection.value}`);
-    await api.post(endpoint2.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,
-          filter: unref(filterSystem)
-        },
-        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;
-      }
-    }
-  }
+	const api = useApi();
+	const { primaryKeyField } = useCollection(collection);
+	const { fields, limit, sort, search, filter, page, filterSystem, alias, deep } = 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 = debounce((shouldUpdateCount) => {
+		Promise.all([getItems(), shouldUpdateCount ? getItemCount() : Promise.resolve()]);
+	}, 350);
+	watch([
+		collection,
+		limit,
+		sort,
+		search,
+		filter,
+		fields,
+		page,
+		toRef(alias),
+		toRef(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;
+		}
+		fetchItems(newCollection !== oldCollection || !isEqual(newFilter, oldFilter) || newSearch !== oldSearch);
+	}, {
+		deep: true,
+		immediate: true
+	});
+	watch([collection, toRef(filterSystem)], async (after, before) => {
+		if (isEqual(after, before)) return;
+		getTotalCount();
+	}, {
+		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);
+		let fieldsToFetch = [...unref(fields) ?? []];
+		if (!unref(fields)?.includes("*") && primaryKeyField.value && fieldsToFetch.includes(primaryKeyField.value.field) === false) fieldsToFetch.push(primaryKeyField.value.field);
+		fieldsToFetch = fieldsToFetch.filter((field) => field.startsWith("$") === false);
+		try {
+			let fetchedItems = (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
+			})).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$1 = computed(() => `/utils/sort/${collection.value}`);
+		await api.post(endpoint$1.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,
+					filter: unref(filterSystem)
+				},
+				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;
+		}
+	}
 }
 
-// src/use-layout.ts
-import { computed as computed6, defineComponent, reactive, toRefs } from "vue";
-var NAME_SUFFIX = "wrapper";
-var WRITABLE_PROPS = ["selection", "layoutOptions", "layoutQuery"];
+//#endregion
+//#region src/use-layout.ts
+const NAME_SUFFIX = "wrapper";
+const WRITABLE_PROPS = [
+	"selection",
+	"layoutOptions",
+	"layoutQuery"
+];
+/**
+* Type guard to check if a property is writable (can be updated via emit).
+*
+* This function determines whether a given property name corresponds to one of the
+* writable properties that can be updated through Vue's emit system.
+*
+* @param prop - The property name to check
+* @returns True if the property is writable, false otherwise
+*
+* @example
+* ```typescript
+* if (isWritableProp('selection')) {
+*   // Property is writable, can emit update
+*   emit('update:selection', newValue);
+* }
+* ```
+*/
 function isWritableProp(prop) {
-  return WRITABLE_PROPS.includes(prop);
+	return WRITABLE_PROPS.includes(prop);
 }
+/**
+* Creates a Vue component wrapper for a layout configuration.
+*
+* This function creates a dynamic Vue component that wraps a layout with standardized
+* props, emits, and state management. It handles reactive state updates, prop validation,
+* and provides a consistent interface for all layout components.
+*
+* @template Options - The type for layout-specific options
+* @template Query - The type for layout-specific query parameters
+* @param layout - The layout configuration object containing id and setup function
+* @returns A Vue component that can be used to render the layout
+*
+* @example
+* ```typescript
+* interface MyLayoutOptions {
+*   itemSize: number;
+*   showHeaders: boolean;
+* }
+*
+* interface MyLayoutQuery {
+*   page: number;
+*   limit: number;
+* }
+*
+* const layoutConfig: LayoutConfig = {
+*   id: 'my-layout',
+*   setup: (props, { emit }) => ({
+*     // Layout-specific setup logic
+*   })
+* };
+*
+* const LayoutWrapper = createLayoutWrapper<MyLayoutOptions, MyLayoutQuery>(layoutConfig);
+* ```
+*/
 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 !== void 0 ? ctx.$slots.default({ layoutState: ctx.state }) : null;
-    }
-  });
+	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 !== void 0 ? ctx.$slots.default({ layoutState: ctx.state }) : null;
+		}
+	});
 }
+/**
+* Composable for managing layout components in Directus.
+*
+* This composable provides access to layout components and handles the dynamic
+* selection of layout wrappers based on the provided layout ID. It automatically
+* falls back to the tabular layout if the requested layout is not found.
+*
+* @template Options - The type for layout-specific options (default: any)
+* @template Query - The type for layout-specific query parameters (default: any)
+* @param layoutId - A reactive reference to the layout ID
+* @returns An object containing the layout wrapper component
+*
+* @example
+* ```typescript
+* import { ref } from 'vue';
+* import { useLayout } from './use-layout';
+*
+* const selectedLayoutId = ref('table');
+* const { layoutWrapper } = useLayout(selectedLayoutId);
+*
+* // Use the layout wrapper in your template
+* // <component :is="layoutWrapper" :collection="'users'" />
+* ```
+*
+* @example
+* ```typescript
+* // With typed options and query
+* interface TableOptions {
+*   spacing: 'cozy' | 'comfortable' | 'compact';
+*   showHeaders: boolean;
+* }
+*
+* interface TableQuery {
+*   sort: string[];
+*   limit: number;
+* }
+*
+* const layoutId = ref<string | null>('table');
+* const { layoutWrapper } = useLayout<TableOptions, TableQuery>(layoutId);
+* ```
+*/
 function useLayout(layoutId) {
-  const { layouts } = useExtensions();
-  const layoutWrappers = computed6(() => layouts.value.map((layout) => createLayoutWrapper(layout)));
-  const layoutWrapper = computed6(() => {
-    const layout = layoutWrappers.value.find((layout2) => layout2.name === `${layoutId.value}-${NAME_SUFFIX}`);
-    if (layout === void 0) {
-      return layoutWrappers.value.find((layout2) => layout2.name === `tabular-${NAME_SUFFIX}`);
-    }
-    return layout;
-  });
-  return { layoutWrapper };
+	const { layouts } = useExtensions();
+	const layoutWrappers = computed(() => layouts.value.map((layout) => createLayoutWrapper(layout)));
+	return { layoutWrapper: computed(() => {
+		const layout = layoutWrappers.value.find((layout$1) => layout$1.name === `${layoutId.value}-${NAME_SUFFIX}`);
+		if (layout === void 0) return layoutWrappers.value.find((layout$1) => layout$1.name === `tabular-${NAME_SUFFIX}`);
+		return layout;
+	}) };
 }
 
-// src/use-size-class.ts
-import { computed as computed7 } from "vue";
-var sizeProps = {
-  xSmall: {
-    type: Boolean,
-    default: false
-  },
-  small: {
-    type: Boolean,
-    default: false
-  },
-  large: {
-    type: Boolean,
-    default: false
-  },
-  xLarge: {
-    type: Boolean,
-    default: false
-  }
+//#endregion
+//#region src/use-size-class.ts
+/**
+* Vue props definition for size-related boolean properties.
+*
+* This object defines the standard size props that can be used in Vue components
+* to control size-based styling through CSS classes.
+*
+* @example
+* ```typescript
+* // In a Vue component
+* export default defineComponent({
+*   props: {
+*     ...sizeProps,
+*     // other props
+*   },
+*   setup(props) {
+*     const sizeClass = useSizeClass(props);
+*     return { sizeClass };
+*   }
+* });
+* ```
+*/
+const sizeProps = {
+	xSmall: {
+		type: Boolean,
+		default: false
+	},
+	small: {
+		type: Boolean,
+		default: false
+	},
+	large: {
+		type: Boolean,
+		default: false
+	},
+	xLarge: {
+		type: Boolean,
+		default: false
+	}
 };
+/**
+* Composable for generating CSS size class names based on size props.
+*
+* This composable takes props containing size boolean flags and returns a computed
+* CSS class name string. It follows a priority order: xSmall > small > large > xLarge.
+* If no size props are true, it returns null.
+*
+* @template T - The type of additional props that extend SizeProps
+* @param props - The props object containing size boolean properties
+* @returns A computed ref that resolves to the appropriate CSS class name or null
+*
+* @example
+* ```typescript
+* // Basic usage in a Vue component
+* const props = { small: true, large: false };
+* const sizeClass = useSizeClass(props);
+* console.log(sizeClass.value); // 'small'
+* ```
+*
+* @example
+* ```typescript
+* // Usage with additional props
+* interface MyProps {
+*   color: string;
+*   disabled: boolean;
+* }
+*
+* const props: MyProps & SizeProps = {
+*   color: 'blue',
+*   disabled: false,
+*   xLarge: true
+* };
+*
+* const sizeClass = useSizeClass(props);
+* console.log(sizeClass.value); // 'x-large'
+* ```
+*
+* @example
+* ```typescript
+* // In a Vue component with reactive props
+* export default defineComponent({
+*   props: {
+*     ...sizeProps,
+*     label: String,
+*   },
+*   setup(props) {
+*     const sizeClass = useSizeClass(props);
+*
+*     return { sizeClass };
+*   },
+*   template: `
+*     <button :class="['btn', sizeClass]">
+*       {{ label }}
+*     </button>
+*   `
+* });
+* ```
+*/
 function useSizeClass(props) {
-  const sizeClass = computed7(() => {
-    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;
+	return 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;
+	});
 }
 
-// src/use-sync.ts
-import { computed as computed8 } from "vue";
+//#endregion
+//#region src/use-sync.ts
+/**
+* Composable for creating two-way binding between parent and child components.
+*
+* @deprecated Use Vue's native `defineModel()` instead. This composable is kept for backward compatibility.
+* Vue 3.4+ provides `defineModel()` which offers a more streamlined and performant way to create v-model bindings.
+*
+* @see {@link https://vuejs.org/api/sfc-script-setup.html#definemodel} Vue's defineModel documentation
+*
+* This composable creates a computed ref that synchronizes a prop value with
+* its parent component through Vue's v-model pattern. It provides a getter
+* that returns the current prop value and a setter that emits an update event
+* to notify the parent component of changes.
+*
+* This is particularly useful for creating custom form components that need
+* to work with v-model while maintaining proper data flow patterns.
+*
+* @template T - The type of the props object
+* @template K - The key of the prop to sync (must be a string key of T)
+* @template E - The emit function type with proper event typing
+*
+* @param props - The component props object containing the value to sync
+* @param key - The specific prop key to create a two-way binding for
+* @param emit - The Vue emit function for sending update events to parent
+*
+* @returns A computed ref that can be used with v-model pattern
+*
+* @example
+* ```typescript
+* // DEPRECATED: Old way using useSync
+* export default defineComponent({
+*   props: {
+*     modelValue: String,
+*     disabled: Boolean,
+*   },
+*   emits: ['update:modelValue'],
+*   setup(props, { emit }) {
+*     const syncedValue = useSync(props, 'modelValue', emit);
+*     return { syncedValue };
+*   }
+* });
+*
+* // RECOMMENDED: New way using defineModel (Vue 3.4+)
+* <script setup lang="ts">
+* const modelValue = defineModel<string>();
+* const disabled = defineProps<{ disabled?: boolean }>();
+* <\/script>
+*
+* <template>
+*   <input v-model="modelValue" :disabled="disabled" />
+* </template>
+* ```
+*
+* @example
+* ```typescript
+* // DEPRECATED: Custom input component with useSync
+* interface Props {
+*   value: string;
+*   placeholder?: string;
+*   type?: string;
+* }
+*
+* export default defineComponent({
+*   props: {
+*     value: { type: String, required: true },
+*     placeholder: String,
+*     type: { type: String, default: 'text' },
+*   },
+*   emits: ['update:value'],
+*   setup(props: Props, { emit }) {
+*     const syncedValue = useSync(props, 'value', emit);
+*     return { syncedValue };
+*   }
+* });
+*
+* // RECOMMENDED: Using defineModel with custom prop name
+* <script setup lang="ts">
+* const value = defineModel<string>('value', { required: true });
+* const { placeholder, type = 'text' } = defineProps<{
+*   placeholder?: string;
+*   type?: string;
+* }>();
+* <\/script>
+* ```
+*
+* @example
+* ```typescript
+* // DEPRECATED: Usage with complex objects using useSync
+* interface UserData {
+*   name: string;
+*   email: string;
+*   age: number;
+* }
+*
+* export default defineComponent({
+*   props: {
+*     userData: { type: Object as PropType<UserData>, required: true },
+*     isLoading: Boolean,
+*   },
+*   emits: ['update:userData'],
+*   setup(props, { emit }) {
+*     const syncedUserData = useSync(props, 'userData', emit);
+*
+*     const updateName = (newName: string) => {
+*       syncedUserData.value = {
+*         ...syncedUserData.value,
+*         name: newName
+*       };
+*     };
+*
+*     return { syncedUserData, updateName };
+*   }
+* });
+*
+* // RECOMMENDED: Using defineModel with complex objects
+* <script setup lang="ts">
+* interface UserData {
+*   name: string;
+*   email: string;
+*   age: number;
+* }
+*
+* const userData = defineModel<UserData>('userData', { required: true });
+* const { isLoading } = defineProps<{ isLoading?: boolean }>();
+*
+* const updateName = (newName: string) => {
+*   userData.value = {
+*     ...userData.value,
+*     name: newName
+*   };
+* };
+* <\/script>
+* ```
+*/
 function useSync(props, key, emit) {
-  return computed8({
-    get() {
-      return props[key];
-    },
-    set(newVal) {
-      emit(`update:${key}`, newVal);
-    }
-  });
+	return computed({
+		get() {
+			return props[key];
+		},
+		set(newVal) {
+			emit(`update:${key}`, newVal);
+		}
+	});
 }
-export {
-  createLayoutWrapper,
-  isWritableProp,
-  sizeProps,
-  useApi,
-  useCollection,
-  useCustomSelection,
-  useCustomSelectionMultiple,
-  useElementSize,
-  useExtensions,
-  useFilterFields,
-  useGroupable,
-  useGroupableParent,
-  useItems,
-  useLayout,
-  useSdk,
-  useSizeClass,
-  useStores,
-  useSync
-};
+
+//#endregion
+export { createLayoutWrapper, isWritableProp, sizeProps, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useSizeClass, useStores, useSync };