Keyboard Shortcuts (#658)

* mod a on tabular

* save on item detail

* shortcut composable

* Remove test, add readme

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

package.json

@@ -23,6 +23,7 @@
     "@types/codemirror": "^0.0.95",
     "@types/debug": "^4.1.5",
     "@types/lodash": "^4.14.155",
+    "@types/mousetrap": "^1.6.3",
     "@vue/composition-api": "^0.5.0",
     "axios": "^0.19.2",
     "base-64": "^0.1.0",
@@ -35,6 +36,7 @@
     "marked": "^1.1.0",
     "micromustache": "^7.1.0",
     "mime-types": "^2.1.27",
+    "mousetrap": "^1.6.5",
     "nanoid": "^3.1.9",
     "pinia": "0.0.6",
     "portal-vue": "^2.1.7",

src/components/v-table/v-table.vue

@@ -86,6 +86,7 @@ import { sortBy, clone, forEach, pick } from 'lodash';
 import { i18n } from '@/lang/';
 import draggable from 'vuedraggable';
 import hideDragImage from '@/utils/hide-drag-image';
+import useShortcut from '@/composables/use-shortcut';
 
 const HeaderDefaults: Header = {
 	text: '',
@@ -291,6 +292,10 @@ export default defineComponent({
 			return gridTemplateColumns;
 		});
 
+		useShortcut('mod+a', () => {
+			onToggleSelectAll(!allItemsSelected.value);
+		});
+
 		return {
 			_headers,
 			_items,

src/composables/use-shortcut/index.ts

@@ -0,0 +1,4 @@
+import useShortcut from './use-shortcut';
+
+export { useShortcut };
+export default useShortcut;

src/composables/use-shortcut/readme.md

@@ -0,0 +1,28 @@
+# `useShortcut`
+
+```ts
+function useShortcut(
+	shortcut: string | string[],
+	handler: handler: (evt?: ExtendedKeyboardEvent, combo?: string) => void
+): void
+```
+
+Can be used to attach a global keyboard shortcut to a function. Removes the shortcut once the current
+component unmounts
+
+## Usage
+```js
+import { defineComponent } from '@vue/composition-api';
+import { useShortcut } from '@/composables/use-shortcut';
+
+export default defineComponent({
+	setup(props) {
+		useShortcut('mod+s', save);
+
+		function save() {
+			// ...
+		}
+	}
+});
+```
+

src/composables/use-shortcut/use-shortcut.ts

@@ -0,0 +1,27 @@
+import { onMounted, onUnmounted } from '@vue/composition-api';
+import Mousetrap from 'mousetrap';
+
+const mousetrap = new Mousetrap();
+mousetrap.stopCallback = function (e: Event, element: Element) {
+	// if the element has the class "mousetrap" then no need to stop
+	if (element.hasAttribute('data-disable-mousetrap')) {
+		return true;
+	}
+
+	return false;
+};
+
+export default function useShortcut(
+	shortcut: string | string[],
+	handler: (evt?: ExtendedKeyboardEvent, combo?: string) => void
+) {
+	onMounted(() => {
+		mousetrap.bind(shortcut, (e, combo) => {
+			e.preventDefault();
+			handler(e, combo);
+		});
+	});
+	onUnmounted(() => {
+		mousetrap.unbind(shortcut);
+	});
+}

src/modules/collections/routes/detail/detail.vue

@@ -177,6 +177,7 @@ import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import i18n from '@/lang';
 import marked from 'marked';
+import useShortcut from '@/composables/use-shortcut';
 
 type Values = {
 	[field: string]: any;
@@ -267,6 +268,9 @@ export default defineComponent({
 				: i18n.t('editing_in', { collection: collectionInfo.value?.name });
 		});
 
+		useShortcut('mod+s', saveAndStay);
+		useShortcut('mod+shift+s', saveAndAddNew);
+
 		return {
 			item,
 			loading,