add code, remove unused stuff

.editorconfig

@@ -0,0 +1,9 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+max_line_length = 100
+

.prettierignore

@@ -0,0 +1,2 @@
+.yarn
+.yarnrc.yml

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "jsxSingleQuote": true,
+ "bracketSameLine": false,
+ "htmlWhitespaceSensitivity": "ignore"
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Ryan Sonshine
+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
@@ -19,3 +19,4 @@ 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.json

@@ -29,9 +29,14 @@
  },
  "homepage": "https://github.com/l3d00m/vue3-enter-to-tab#readme",
  "devDependencies": {
- "@types/node": "^20.8.2",
- "ts-node": "^10.9.1",
- "typescript": "^5.2.2"
+ "@types/node": "20.8.2",
+ "prettier": "3.0.3",
+ "ts-node": "10.9.1",
+ "typescript": "5.2.2"
  },
- "packageManager": "[email protected]"
+ "packageManager": "[email protected]",
+ "dependencies": {
+ "@vueuse/core": ">9.x",
+ "vue": ">=3.3 <4"
+ }
 }

src/index.ts

@@ -1 +1,73 @@
-export const myPackage = (taco = ''): string => `${taco} from my package`;
+import { useEventListener } from '@vueuse/core'
+import { MaybeRefOrGetter, ref, toValue, nextTick } from 'vue'
+
+// source from https://github.com/ajomuch92/vue-enter-to-tab
+// it has been modified to 1. to auto click a button if the next element is a button
+// 2. to use the composable API
+// 3. to use vueuse with useEventListener for automatically removing event listeners
+
+type HTMLElementWithPrevent = HTMLElement & { preventEnterTab?: boolean }
+
+export const useEnterToTab = (
+ element: MaybeRefOrGetter<HTMLElement | null | undefined>,
+ { autoClickButton = true } = {},
+) => {
+ const isEnterToTabEnabled = ref(true)
+
+ useEventListener(element, 'keydown', async (e: KeyboardEvent) => {
+ const { ctrlKey, code, altKey, shiftKey } = e
+ const target = e.target as HTMLElementWithPrevent
+ 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: HTMLElement[] = []
+ allElementsQuery.forEach((e) => {
+ const r = e as HTMLInputElement
+ 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: boolean) => {
+ isEnterToTabEnabled.value = value
+ }
+
+ const vPreventEnterTab = {
+ beforeMount: (el: HTMLElementWithPrevent) => (el.preventEnterTab = true),
+ }
+
+ return {
+ isEnterToTabEnabled,
+ vPreventEnterTab,
+ setEnterToTabEnabled,
+ }
+}

tsconfig.json

@@ -2,11 +2,15 @@
  "compilerOptions": {
  "target": "ESNext",
  "module": "ESNext",
+ "moduleResolution": "Node",
  "declaration": true,
  "outDir": "./lib/",
  "strict": true,
  "esModuleInterop": true,
- "skipLibCheck": true
+ "skipLibCheck": true,
+ "allowSyntheticDefaultImports": true,
+ "isolatedModules": true
  },
- "include": ["src/**/*.ts"]
+ "include": ["src/**/*.ts"],
+ "exclude": ["node_modules"]
 }