@directus/composables 11.2.3 → 11.2.5

package/dist/index.d.ts

@@ -399,6 +399,7 @@ type UsableItems = {
   items: Ref<Item[]>;
   totalPages: ComputedRef<number>;
   loading: Ref<boolean>;
+  loadingItemCount: Ref<boolean>;
   error: Ref<any>;
   changeManualSort: (data: ManualSortData) => Promise<void>;
   getItems: () => Promise<void>;
@@ -474,7 +475,7 @@ declare function isWritableProp(prop: string): prop is WritableProp;
  * const LayoutWrapper = createLayoutWrapper<MyLayoutOptions, MyLayoutQuery>(layoutConfig);
  * ```
  */
-declare function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Component;
+declare function createLayoutWrapper<Options, Query$1>(layout: LayoutConfig): Component;
 /**
  * Composable for managing layout components in Directus.
  *
@@ -516,7 +517,7 @@ declare function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Comp
  * const { layoutWrapper } = useLayout<TableOptions, TableQuery>(layoutId);
  * ```
  */
-declare function useLayout<Options = any, Query = any>(layoutId: Ref<string | null>): {
+declare function useLayout<Options = any, Query$1 = any>(layoutId: Ref<string | null>): {
   layoutWrapper: ComputedRef<Component>;
 };
 //#endregion

package/dist/index.js

@@ -1,7 +1,7 @@
 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 { nanoid } from "nanoid";
-import { isEqual, isNil, throttle } from "lodash-es";
+import { debounce, isEqual, isNil } from "lodash-es";
 import { getEndpoint, moveInArray } from "@directus/utils";
 import axios from "axios";
 
@@ -372,36 +372,30 @@ function useCollection(collectionKey) {
 		if (!collection.value) return [];
 		return fieldsStore.getFieldsForCollectionSorted(collection.value);
 	});
-	const defaults = computed(() => {
-		if (!fields.value) return {};
-		const defaults$1 = {};
-		for (const field of fields.value) if (field.schema !== null && "default_value" in field.schema) defaults$1[field.field] = field.schema.default_value;
-		return defaults$1;
-	});
-	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
+		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;
+		})
 	};
 }
 
@@ -881,6 +875,7 @@ function useItems(collection, query) {
 	});
 	const items = ref([]);
 	const loading = ref(false);
+	const loadingItemCount = ref(false);
 	const error = ref(null);
 	const itemCount = ref(null);
 	const totalCount = ref(null);
@@ -895,7 +890,9 @@ function useItems(collection, query) {
 		filter: null
 	};
 	let loadingTimeout = null;
-	const fetchItems = throttle(getItems, 500);
+	const fetchItems = debounce((shouldUpdateCount) => {
+		Promise.all([getItems(), shouldUpdateCount ? getItemCount() : Promise.resolve()]);
+	}, 350);
 	watch([
 		collection,
 		limit,
@@ -915,8 +912,7 @@ function useItems(collection, query) {
 		if (!isEqual(newFilter, oldFilter) || !isEqual(newSort, oldSort) || newLimit !== oldLimit || newSearch !== oldSearch) {
 			if (oldCollection) page.value = 1;
 		}
-		if (newCollection !== oldCollection || !isEqual(newFilter, oldFilter) || newSearch !== oldSearch) getItemCount();
-		fetchItems();
+		fetchItems(newCollection !== oldCollection || !isEqual(newFilter, oldFilter) || newSearch !== oldSearch);
 	}, {
 		deep: true,
 		immediate: true
@@ -934,6 +930,7 @@ function useItems(collection, query) {
 		items,
 		totalPages,
 		loading,
+		loadingItemCount,
 		error,
 		changeManualSort,
 		getItems,
@@ -1034,6 +1031,7 @@ function useItems(collection, query) {
 	}
 	async function getItemCount() {
 		if (!endpoint.value) return;
+		loadingItemCount.value = true;
 		try {
 			if (existingRequests.filter) existingRequests.filter.abort();
 			existingRequests.filter = new AbortController();
@@ -1051,6 +1049,8 @@ function useItems(collection, query) {
 			itemCount.value = count;
 		} catch (err) {
 			if (!axios.isCancel(err)) throw err;
+		} finally {
+			loadingItemCount.value = false;
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/composables",
-  "version": "11.2.3",
+  "version": "11.2.5",
   "description": "Shared Vue composables for Directus use",
   "homepage": "https://directus.io",
   "repository": {
@@ -22,27 +22,27 @@
     "dist"
   ],
   "dependencies": {
-    "axios": "1.11.0",
+    "axios": "1.12.2",
     "lodash-es": "4.17.21",
-    "nanoid": "5.1.5",
-    "@directus/utils": "13.0.10",
-    "@directus/constants": "13.0.3"
+    "nanoid": "5.1.6",
+    "@directus/utils": "13.0.12",
+    "@directus/constants": "14.0.0"
   },
   "devDependencies": {
     "@directus/tsconfig": "3.0.0",
     "@types/lodash-es": "4.17.12",
     "@vitest/coverage-v8": "3.2.4",
     "@vue/test-utils": "2.4.6",
-    "tsdown": "0.14.2",
-    "typescript": "5.8.3",
+    "tsdown": "0.15.11",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
-    "vue": "3.5.18",
-    "@directus/extensions": "3.0.11",
-    "@directus/sdk": "20.1.0",
-    "@directus/types": "13.2.3"
+    "vue": "3.5.22",
+    "@directus/extensions": "3.0.13",
+    "@directus/sdk": "20.1.1",
+    "@directus/types": "13.3.1"
   },
   "peerDependencies": {
-    "vue": "3.5.18"
+    "vue": "3.5.22"
   },
   "scripts": {
     "build": "tsdown src/index.ts --dts",