vue3-enter-to-tab 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Aarón J. Montes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,34 @@
+# vue3-enter-to-tab
+
+[![npm package][npm-img]][npm-url]
+[![Build Status][build-img]][build-url]
+
+TODO description
+
+## Credits
+
+https://github.com/ajomuch92/vue-enter-to-tab
+
+## Install
+
+NPM:
+
+```bash
+npm i --save vue3-enter-to-tab
+yarn add vue3-enter-to-tab
+```
+
+## Usage
+
+```ts
+import { useEnterToTab } from 'vue3-enter-to-tab'
+
+myPackage('hello')
+//=> 'hello from my package'
+```
+
+**Note**: This directive doesn't work on textarea elements.
+
+Any contribution is welcome. Visit my web page [here](https://www.ajomuch92.site/#/).
+
+

package/lib/index.d.ts

@@ -0,0 +1,14 @@
+import { MaybeRefOrGetter } from 'vue';
+type HTMLElementWithPrevent = HTMLElement & {
+    preventEnterTab?: boolean;
+};
+export declare const useEnterToTab: (element: MaybeRefOrGetter<HTMLElement | null | undefined>, { autoClickButton }?: {
+    autoClickButton?: boolean | undefined;
+}) => {
+    isEnterToTabEnabled: import("vue").Ref<boolean>;
+    vPreventEnterTab: {
+        beforeMount: (el: HTMLElementWithPrevent) => boolean;
+    };
+    setEnterToTabEnabled: (value: boolean) => void;
+};
+export {};

package/lib/index.js

@@ -0,0 +1,53 @@
+import { useEventListener } from '@vueuse/core';
+import { ref, toValue, nextTick } from 'vue';
+export const useEnterToTab = (element, { autoClickButton = true } = {}) => {
+    const isEnterToTabEnabled = ref(true);
+    useEventListener(element, 'keydown', async (e) => {
+        const { ctrlKey, code, altKey, shiftKey } = e;
+        const target = e.target;
+        if ((code === 'Enter' || code === 'NumpadEnter') &&
+            !ctrlKey &&
+            !altKey &&
+            !shiftKey &&
+            target &&
+            target.tagName.toLowerCase() !== 'textarea' &&
+            isEnterToTabEnabled &&
+            !target.preventEnterTab) {
+            e.preventDefault();
+            const elementValue = toValue(element);
+            if (elementValue === null || elementValue === undefined) {
+                console.warn('cant convert enter to tab, element is null');
+                return;
+            }
+            const allElementsQuery = elementValue.querySelectorAll('input, button, a, textarea, select, audio, video, [contenteditable]');
+            const allElements = [];
+            allElementsQuery.forEach((e) => {
+                const r = e;
+                if (!r.disabled && !r.hidden && r.offsetParent && !r.readOnly && r.tabIndex >= 0) {
+                    allElements.push(r);
+                }
+            });
+            const currentIndex = [...allElements].indexOf(target);
+            const targetIndex = (currentIndex + 1) % allElements.length;
+            const nextElement = allElements[targetIndex];
+            nextElement.focus();
+            // if the next element is a button, click on it instead of just focusing. otherwise user has to double enter for a button to activate
+            if (autoClickButton && nextElement.tagName.toLowerCase() === 'button') {
+                // wait so that any changes from unfocusing of old element are considered
+                await nextTick();
+                nextElement.click();
+            }
+        }
+    });
+    const setEnterToTabEnabled = (value) => {
+        isEnterToTabEnabled.value = value;
+    };
+    const vPreventEnterTab = {
+        beforeMount: (el) => (el.preventEnterTab = true),
+    };
+    return {
+        isEnterToTabEnabled,
+        vPreventEnterTab,
+        setEnterToTabEnabled,
+    };
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "vue3-enter-to-tab",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./lib/index.js",
+  "files": [
+    "lib/**/*"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/l3d00m/vue3-enter-to-tab.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "l3d00m",
+    "email": "l3d00m@users.noreply.github.com",
+    "url": "https://github.com/l3d00m"
+  },
+  "engines": {
+    "node": ">=16.0"
+  },
+  "keywords": [],
+  "bugs": {
+    "url": "https://github.com/l3d00m/vue3-enter-to-tab/issues"
+  },
+  "homepage": "https://github.com/l3d00m/vue3-enter-to-tab#readme",
+  "devDependencies": {
+    "@types/node": "20.8.2",
+    "prettier": "3.0.3",
+    "ts-node": "10.9.1",
+    "typescript": "5.2.2"
+  },
+  "packageManager": "yarn@3.6.4",
+  "dependencies": {
+    "@vueuse/core": ">9.x",
+    "vue": ">=3.3 <4"
+  }
+}