From dd28d9fbf31f6808f4f20300e7f413a7d53d1a33 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Fri, 17 Nov 2023 08:56:45 +0100 Subject: [PATCH] refactor: remove keyCode dependency Removes the keyCode dependency because the lib seems to be unmaintained and we need to patch it for that reason. Also, the `keyCode` property in the js event API is deprecated. We only need it for the `vue-select` component (hopefully this will change soon). --- package.json | 4 +--- packages/design-system/src/directives/OcTooltip.ts | 2 +- .../src/components/SideBar/Details/TagsSelect.vue | 14 ++++++++++---- .../SideBar/Shares/Collaborators/RoleDropdown.vue | 6 +++--- patches/keycode@2.2.1.patch | 14 -------------- pnpm-lock.yaml | 11 ----------- 6 files changed, 15 insertions(+), 36 deletions(-) delete mode 100644 patches/keycode@2.2.1.patch diff --git a/package.json b/package.json index 6164360dd3f..d77fedd2f95 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@vue/compiler-dom": "3.3.4", "@vue/compiler-sfc": "3.3.4", "@vue/runtime-dom": "3.3.4", - "keycode": "^2.2.1", "rollup-plugin-gzip": "^3.1.0", "vite-plugin-static-copy": "^0.16.0", "vite-plugin-treat-umd-as-commonjs": "0.1.3", @@ -160,8 +159,7 @@ }, "patchedDependencies": { "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch", - "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch", - "keycode@2.2.1": "patches/keycode@2.2.1.patch" + "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch" } }, "jestSerializer": { diff --git a/packages/design-system/src/directives/OcTooltip.ts b/packages/design-system/src/directives/OcTooltip.ts index affe7394e1b..afe79c7066b 100644 --- a/packages/design-system/src/directives/OcTooltip.ts +++ b/packages/design-system/src/directives/OcTooltip.ts @@ -7,7 +7,7 @@ export const hideOnEsc = { defaultValue: true, fn({ hide }) { const onKeyDown = (e) => { - if (e.keyCode === 27) { + if (e.code === 'Escape') { hide() } } diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue index e88633ec9f4..d28c31687e6 100644 --- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue +++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue @@ -6,7 +6,7 @@ :disabled="readonly" :options="availableTags" taggable - :select-on-key-codes="[keycode('enter'), keycode(',')]" + :select-on-key-codes="selectOnKeyCodes" :create-option="createOption" :selectable="isOptionSelectable" :map-keydown="keydownMethods" @@ -79,7 +79,6 @@ import { import { useGettext } from 'vue3-gettext' import { useTask } from 'vue-concurrency' import diff from 'lodash-es/difference' -import keycode from 'keycode' import { Resource } from '@ownclouders/web-client' type TagOption = { @@ -90,6 +89,13 @@ type TagOption = { const tagsMaxCount = 100 +// the keycode property is deprecated in the JS event API, vue-select still works with it though +enum KeyCode { + Backspace = 8, + Enter = 13, + ',' = 188 +} + export default defineComponent({ name: 'TagsSelect', props: { @@ -232,7 +238,7 @@ export default defineComponent({ const objectMapping = { ...map } - objectMapping[keycode('backspace')] = async (e) => { + objectMapping[KeyCode.Backspace] = async (e) => { if (e.target.value || selectedTags.value.length === 0) { return } @@ -275,7 +281,7 @@ export default defineComponent({ isOptionSelectable, showSelectNewLabel, save, - keycode, + selectOnKeyCodes: [KeyCode.Enter, KeyCode[',']], keydownMethods, readonly, getAdditionalAttributes, diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue index 2e6bae8a174..b1d681b8812 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue @@ -322,9 +322,9 @@ export default defineComponent({ return } - const { keyCode } = event - const isArrowUp = keyCode === 38 - const isArrowDown = keyCode === 40 + const { code } = event + const isArrowUp = code === 'ArrowUp' + const isArrowDown = code === 'ArrowDown' // to cycle through the list of roles only up and down keyboard events are allowed // if this is not the case we can return early and stop the script execution from here diff --git a/patches/keycode@2.2.1.patch b/patches/keycode@2.2.1.patch deleted file mode 100644 index 4232dea3000..00000000000 --- a/patches/keycode@2.2.1.patch +++ /dev/null @@ -1,14 +0,0 @@ -diff --git a/index.js b/index.js -index 9dc7ce1ac6741c740d2a713e7219cd6387fcaa5a..f8b5e6965d4310f5d7d191b421677b12d90408d8 100644 ---- a/index.js -+++ b/index.js -@@ -63,7 +63,8 @@ keyCode.isEventKey = function isEventKey(event, nameOrCode) { - } - } - --exports = module.exports = keyCode; -+Object.defineProperty(exports, "__esModule", { value: true }); -+exports.default = keyCode - - /** - * Get by name \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b562f148fd5..50fb13e8a9d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,9 +30,6 @@ patchedDependencies: jest-serializer-vue-tjw@3.19.0: hash: n3ezndisi6xx2kbxcsk5pv4dxy path: patches/jest-serializer-vue-tjw@3.19.0.patch - keycode@2.2.1: - hash: nmisee7m676ph5sqah5fka5ueu - path: patches/keycode@2.2.1.patch importers: @@ -53,9 +50,6 @@ importers: caf: specifier: 15.0.1 version: 15.0.1 - keycode: - specifier: ^2.2.1 - version: 2.2.1(patch_hash=nmisee7m676ph5sqah5fka5ueu) portal-vue: specifier: 3.0.0 version: 3.0.0(vue@3.3.4) @@ -14943,11 +14937,6 @@ packages: resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==} dev: false - /keycode@2.2.1(patch_hash=nmisee7m676ph5sqah5fka5ueu): - resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==} - dev: false - patched: true - /killable@1.0.1: resolution: {integrity: sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==} dev: true