@directus/composables 11.2.17 → 11.4.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComputedRef, Ref, WritableComputedRef } from "vue";
+import { Component, ComponentPublicInstance, ComputedRef, Ref, WritableComputedRef } from "vue";
 import { AxiosInstance } from "axios";
 import { AppCollection, AppExtensionConfigs, Field, Item, LayoutConfig, Query, RefRecord } from "@directus/types";
 import { DirectusClient, RestClient } from "@directus/sdk";
@@ -763,6 +763,15 @@ declare function useSizeClass<T>(props: T & SizeProps): ComputedRef<string | nul
  */
 declare function useSync<T, K extends keyof T & string, E extends (event: `update:${K}`, ...args: any[]) => void>(props: T, key: K, emit: E): Ref<T[K]>;
 //#endregion
+//#region src/translate-shortcut.d.ts
+declare function translateShortcut(keys: string[]): string;
+//#endregion
+//#region src/use-shortcut.d.ts
+type ShortcutHandler = (event: KeyboardEvent, cancelNext: () => void) => void | any | boolean;
+declare const keyMap: Record<string, string>;
+declare const systemKeys: string[];
+declare function useShortcut(shortcuts: string | string[], handler: ShortcutHandler, reference?: Ref<HTMLElement | undefined> | Ref<ComponentPublicInstance | undefined>): void;
+//#endregion
 //#region src/use-system.d.ts
 /**
  * Vue composable that provides access to the global Directus stores through dependency injection.
@@ -1065,4 +1074,4 @@ declare function useSdk<Schema extends object = any>(): DirectusClient<Schema> &
  */
 declare function useExtensions(): RefRecord<AppExtensionConfigs>;
 //#endregion
-export { ComputedQuery, GroupableInstance, GroupableOptions, ManualSortData, OtherValue, UsableCollection, UsableCustomSelection, UsableGroupable, UsableItems, createLayoutWrapper, isWritableProp, sizeProps, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useSizeClass, useStores, useSync };
+export { ComputedQuery, GroupableInstance, GroupableOptions, ManualSortData, OtherValue, UsableCollection, UsableCustomSelection, UsableGroupable, UsableItems, createLayoutWrapper, isWritableProp, keyMap, sizeProps, systemKeys, translateShortcut, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useShortcut, useSizeClass, useStores, useSync };

package/dist/index.js

@@ -1,8 +1,9 @@
 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 { capitalize, isEmpty, isEqual, isNil, throttle } from "lodash-es";
 import { getEndpoint, moveInArray } from "@directus/utils";
+import { useMemoize } from "@vueuse/core";
 import axios from "axios";
 
 //#region src/use-system.ts
@@ -884,12 +885,24 @@ function useItems(collection, query) {
 		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 itemsAbort = null;
+	let totalCountGeneration = 0;
+	let itemCountGeneration = 0;
 	let loadingTimeout = null;
+	const fetchAggregate = useMemoize(async (url, filter$1, search$1) => {
+		const aggregate = primaryKeyField.value ? { countDistinct: primaryKeyField.value.field } : { count: "*" };
+		const response = await api.get(url, { params: {
+			aggregate,
+			...filter$1 ? { filter: filter$1 } : {},
+			...search$1 ? { search: search$1 } : {}
+		} });
+		return primaryKeyField.value ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field]) : Number(response.data.data[0].count);
+	}, { getKey(url, filter$1, search$1) {
+		const key = { url };
+		if (!isEmpty(filter$1)) key.filter = filter$1;
+		if (!isEmpty(search$1)) key.search = search$1;
+		return JSON.stringify(key);
+	} });
 	const fetchItems = throttle((shouldUpdateCount) => {
 		Promise.all([getItems(), shouldUpdateCount ? getItemCount() : Promise.resolve()]);
 	}, 500);
@@ -940,8 +953,8 @@ function useItems(collection, query) {
 	async function getItems() {
 		if (!endpoint.value) return;
 		let isCurrentRequestCanceled = false;
-		if (existingRequests.items) existingRequests.items.abort();
-		existingRequests.items = new AbortController();
+		if (itemsAbort) itemsAbort.abort();
+		itemsAbort = new AbortController();
 		error.value = null;
 		if (loadingTimeout) clearTimeout(loadingTimeout);
 		loadingTimeout = setTimeout(() => {
@@ -962,9 +975,9 @@ function useItems(collection, query) {
 					filter: unref(filter),
 					deep: unref(deep)
 				},
-				signal: existingRequests.items.signal
+				signal: itemsAbort.signal
 			})).data.data;
-			existingRequests.items = null;
+			itemsAbort = null;
 			/**
 			* @NOTE
 			*
@@ -1011,19 +1024,10 @@ function useItems(collection, query) {
 	}
 	async function getTotalCount() {
 		if (!endpoint.value) return;
+		const currentGeneration = ++totalCountGeneration;
 		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;
+			const count = await fetchAggregate(endpoint.value, filterSystem?.value, void 0);
+			if (currentGeneration !== totalCountGeneration) return;
 			totalCount.value = count;
 		} catch (err) {
 			if (!axios.isCancel(err)) throw err;
@@ -1031,26 +1035,16 @@ function useItems(collection, query) {
 	}
 	async function getItemCount() {
 		if (!endpoint.value) return;
+		const currentGeneration = ++itemCountGeneration;
 		loadingItemCount.value = true;
 		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;
+			const count = await fetchAggregate(endpoint.value, filter.value, search.value);
+			if (currentGeneration !== itemCountGeneration) return;
 			itemCount.value = count;
 		} catch (err) {
 			if (!axios.isCancel(err)) throw err;
 		} finally {
-			loadingItemCount.value = false;
+			if (currentGeneration === itemCountGeneration) loadingItemCount.value = false;
 		}
 	}
 }
@@ -1503,4 +1497,99 @@ function useSync(props, key, emit) {
 }
 
 //#endregion
-export { createLayoutWrapper, isWritableProp, sizeProps, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useSizeClass, useStores, useSync };
+//#region src/translate-shortcut.ts
+function translateShortcut(keys) {
+	if (navigator.platform.toLowerCase().startsWith("mac") || navigator.platform.startsWith("iP")) return keys.map((key) => {
+		if (key === "meta") return "⌘";
+		if (key === "option") return "⌥";
+		if (key === "shift") return "⇧";
+		if (key === "alt") return "⌥";
+		if (key === "enter") return "⏎";
+		return capitalize(key);
+	}).join("");
+	else return keys.map((key) => {
+		if (key === "meta") return "Ctrl";
+		if (key === "enter") return "↵";
+		return capitalize(key);
+	}).join("+");
+}
+
+//#endregion
+//#region src/use-shortcut.ts
+const keyMap = {
+	Control: "meta",
+	Command: "meta"
+};
+const systemKeys = [
+	"meta",
+	"shift",
+	"alt",
+	"backspace",
+	"delete",
+	"tab",
+	"capslock",
+	"enter",
+	"home",
+	"end"
+];
+const keysDown = /* @__PURE__ */ new Set([]);
+const handlers = {};
+document.body.addEventListener("keydown", (event) => {
+	if (event.repeat || !event.key) return;
+	keysDown.add(mapKeys(event));
+	callHandlers(event);
+});
+document.body.addEventListener("keyup", (event) => {
+	if (event.repeat || !event.key) return;
+	keysDown.clear();
+});
+function useShortcut(shortcuts, handler, reference = ref(document.body)) {
+	const callback = (event, cancelNext) => {
+		if (!reference.value) return;
+		const ref$1 = reference.value instanceof HTMLElement ? reference.value : reference.value.$el;
+		if (document.activeElement === ref$1 || ref$1.contains(document.activeElement) || document.activeElement === document.body) {
+			event.preventDefault();
+			return handler(event, cancelNext);
+		}
+		return false;
+	};
+	onMounted(() => {
+		[shortcuts].flat().forEach((shortcut) => {
+			if (shortcut in handlers) handlers[shortcut]?.unshift(callback);
+			else handlers[shortcut] = [callback];
+		});
+	});
+	onUnmounted(() => {
+		[shortcuts].flat().forEach((shortcut) => {
+			const shortcutHandler = handlers[shortcut];
+			if (shortcutHandler) {
+				const filteredHandlers = shortcutHandler.filter((f) => f !== callback);
+				handlers[shortcut] = filteredHandlers;
+				if (filteredHandlers.length === 0) delete handlers[shortcut];
+			}
+		});
+	});
+}
+function mapKeys(key) {
+	let keyString = key.key.match(/^[a-zA-Z0-9]*?$/g) === null ? key.code.replace(/(Key|Digit)/g, "") : key.key;
+	keyString = keyMap[keyString] ?? keyString;
+	keyString = keyString.toLowerCase();
+	return keyString;
+}
+function callHandlers(event) {
+	Object.entries(handlers).forEach(([key, value]) => {
+		const keys = key.split("+");
+		for (key of keysDown) if (keys.includes(key) === false) return;
+		for (key of keys) if (keysDown.has(key) === false) return;
+		for (let i = 0; i < value.length; i++) {
+			let cancel = false;
+			value[i]?.(event, () => {
+				cancel = true;
+			});
+			if (typeof cancel === "boolean" && cancel) break;
+		}
+	});
+}
+
+//#endregion
+export { createLayoutWrapper, isWritableProp, keyMap, sizeProps, systemKeys, translateShortcut, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useShortcut, useSizeClass, useStores, useSync };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/composables",
-  "version": "11.2.17",
+  "version": "11.4.0",
   "description": "Shared Vue composables for Directus use",
   "homepage": "https://directus.io",
   "repository": {
@@ -22,11 +22,12 @@
     "dist"
   ],
   "dependencies": {
-    "axios": "1.13.5",
-    "lodash-es": "4.17.23",
+    "@vueuse/core": "14.0.0",
+    "axios": "1.15.0",
+    "lodash-es": "4.18.1",
     "nanoid": "5.1.6",
-    "@directus/constants": "14.3.0",
-    "@directus/utils": "13.4.0"
+    "@directus/utils": "13.4.0",
+    "@directus/constants": "14.3.0"
   },
   "devDependencies": {
     "@directus/tsconfig": "4.0.0",
@@ -37,9 +38,9 @@
     "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vue": "3.5.24",
-    "@directus/sdk": "21.2.2",
-    "@directus/extensions": "3.0.23",
-    "@directus/types": "15.0.1"
+    "@directus/extensions": "3.0.24",
+    "@directus/types": "15.0.2",
+    "@directus/sdk": "21.2.2"
   },
   "peerDependencies": {
     "vue": "3.5.24"