@directus/composables 11.2.17 → 11.3.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,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 { capitalize, isEqual, isNil, throttle } from "lodash-es";
 import { getEndpoint, moveInArray } from "@directus/utils";
 import axios from "axios";
 
@@ -1503,4 +1503,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.3.0",
   "description": "Shared Vue composables for Directus use",
   "homepage": "https://directus.io",
   "repository": {
@@ -23,10 +23,10 @@
   ],
   "dependencies": {
     "axios": "1.13.5",
-    "lodash-es": "4.17.23",
+    "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 +37,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/types": "15.0.1",
+    "@directus/sdk": "21.2.2"
   },
   "peerDependencies": {
     "vue": "3.5.24"