Removes hotkeyjs in favor of vueuse (#1883)

assets/components/FuzzySearchModal.vue

@@ -37,7 +37,7 @@ import fuzzysort from "fuzzysort";
 import { type Container } from "@/types/Container";
 
 const { maxResults = 20 } = defineProps<{
-  maxResults: number;
+  maxResults?: number;
 }>();
 
 const emit = defineEmits(["close"]);

assets/components/LogViewer/LogActionsToolbar.vue

@@ -43,7 +43,6 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { type Container } from "@/types/Container";
-import hotkeys from "hotkeys-js";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;
@@ -52,15 +51,7 @@ const { onClearClicked = (e: Event) => {} } = defineProps<{
   onClearClicked: (e: Event) => void;
 }>();
 
-const onHotkey = (event: Event) => {
-  onClearClicked(event);
-  event.preventDefault();
-};
-
 const container = inject("container") as ComputedRef<Container>;
-
-onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
-onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
 </script>
 
 <style lang="scss" scoped>

assets/components/Search.vue

@@ -22,26 +22,24 @@
 </template>
 
 <script lang="ts" setup>
-import hotkeys from "hotkeys-js";
-
+const { Meta_F, Ctrl_F, esc } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "f" && e.type === "keydown") e.preventDefault();
+  },
+});
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
-onMounted(() => {
-  hotkeys("command+f, ctrl+f", (event, handler) => {
+whenever(
+  () => Meta_F.value || Ctrl_F.value,
+  () => {
     showSearch.value = true;
     nextTick(() => input.value?.focus() || input.value?.select());
-    event.preventDefault();
-  });
-  hotkeys("esc", () => resetSearch());
-});
-
-onUnmounted(() => {
-  searchFilter.value = "";
-  showSearch.value = false;
-  hotkeys.unbind("command+f, ctrl+f");
-  hotkeys.unbind("esc");
-});
+  }
+);
+whenever(esc, () => resetSearch());
+onUnmounted(() => resetSearch());
 </script>
 
 <style lang="scss" scoped>

assets/layouts/default.vue

@@ -44,24 +44,19 @@
 <script lang="ts" setup>
 import { Splitpanes, Pane } from "splitpanes";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
-import hotkeys from "hotkeys-js";
-
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 
 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
-
+const { Meta_K, Ctrl_K } = useMagicKeys();
 const containerStore = useContainerStore();
-
 const { activeContainers, visibleContainers } = storeToRefs(containerStore);
 
-onMounted(() => {
-  hotkeys("command+k, ctrl+k", (event, handler) => {
-    event.preventDefault();
-    showFuzzySearch();
-  });
-});
+whenever(
+  () => Meta_K.value || Ctrl_K.value,
+  () => showFuzzySearch()
+);
 
 watchEffect(() => {
   setTitle(`${visibleContainers.value.length} containers`);

package.json

@@ -38,7 +38,6 @@
     "bulma": "^0.9.4",
     "date-fns": "^2.29.3",
     "fuzzysort": "^2.0.1",
-    "hotkeys-js": "^3.10.0",
     "lodash.debounce": "^4.0.8",
     "pinia": "^2.0.22",
     "sass": "^1.54.9",

pnpm-lock.yaml

@@ -24,7 +24,6 @@ specifiers:
   date-fns: ^2.29.3
   eventsourcemock: ^2.0.0
   fuzzysort: ^2.0.1
-  hotkeys-js: ^3.10.0
   husky: ^8.0.1
   jest-serializer-vue: ^2.0.2
   jsdom: ^20.0.0
@@ -68,7 +67,6 @@ dependencies:
   bulma: 0.9.4
   date-fns: 2.29.3
   fuzzysort: 2.0.1
-  hotkeys-js: 3.10.0
   lodash.debounce: 4.0.8
   pinia: 2.0.22_arz4dztosvwy2ghjrlh2wdhejm
   sass: 1.54.9
@@ -2353,10 +2351,6 @@ packages:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
 
-  /hotkeys-js/3.10.0:
-    resolution: {integrity: sha512-20xeVdOqcgTkMox0+BqFwADZP7+5dy/9CFPpAinSMh2d0s3b0Hs2V2D+lMh4Hphkf7VE9pwnOl58eP1te+REcg==}
-    dev: false
-
   /html-encoding-sniffer/3.0.0:
     resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
     engines: {node: '>=12'}