vue3-enter-to-tab 0.0.1 → 3.0.0

package/README.md

@@ -1,34 +1,131 @@
-# vue3-enter-to-tab
+# `vue3-enter-to-tab` composable
 
 [![npm package][npm-img]][npm-url]
-[![Build Status][build-img]][build-url]
+[![Release](https://github.com/l3d00m/vue3-enter-to-tab/actions/workflows/release.yml/badge.svg)](https://github.com/l3d00m/vue3-enter-to-tab/actions/workflows/release.yml)
+[![ci](https://github.com/l3d00m/vue3-enter-to-tab/actions/workflows/ci.yml/badge.svg)](https://github.com/l3d00m/vue3-enter-to-tab/actions/workflows/ci.yml)
 
-TODO description
+A Vue 3 composable to convert enter key to tab key. Especially useful when inputting forms using a numpad.
 
-## Credits
-
-https://github.com/ajomuch92/vue-enter-to-tab
+This is a fork of [ajomuch92/vue-enter-to-tab](https://github.com/ajomuch92/vue-enter-to-tab) and has been converted from a Mixin to a Vue3 composable. It also features new options.
 
 ## Install
 
-NPM:
+Requires Vue >=3.3 and Node >=18.
 
 ```bash
+# npm
 npm i --save vue3-enter-to-tab
+# yarn
 yarn add vue3-enter-to-tab
 ```
 
 ## Usage
 
-```ts
+### Minimal example with composition API
+
+```vue
+<template>
+  <div ref="form"></div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useEnterToTab } from 'vue3-enter-to-tab'
+
+// Get ref to the parent element
+const form = ref<HTMLElement | null>(null)
+
+useEnterToTab(form)
+</script>
+```
+
+### Full example
+
+See documentation below.
+
+```vue
+<template>
+  <div ref="form">
+    <input />
+    <input v-prevent-enter-tab />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEnterToTab } from 'vue3-enter-to-tab'
+import { ref } from 'vue'
+
+const form = ref<HTMLElement | null>(null)
+const { vPreventEnterTab, isEnterToTabEnabled } = useEnterToTab(form, {
+  autoClickButton: false,
+  initialState: false,
+})
+// Read and change the status using that ref
+isEnterToTabEnabled.value = true
+</script>
+```
+
+### Minimal example with options API
+
+The code has not been tested yet and it is recommended to use the composition API instead.
+
+```vue
+<template>
+  <div ref="form"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
 import { useEnterToTab } from 'vue3-enter-to-tab'
 
-myPackage('hello')
-//=> 'hello from my package'
+export default defineComponent({
+  setup() {
+    useEnterToTab(this.$refs.form)
+  },
+})
+</script>
+```
+
+## API: `useEnterToTab(element, options?)`
+
+### Input `element`
+
+Type: `HTMLElement | null`
+
+The parent element. This is where the event listener will be attached.
+
+Enter key will be converted for all children input of this element, except for those with the `v-prevent-enter-tab` directive and not including `<textarea>`.
+
+### Input `options`
+
+```ts
+interface UseEnterToTabOptions {
+  autoClickButton?: boolean
+  initialState?: boolean
+}
 ```
 
-**Note**: This directive doesn't work on textarea elements.
+#### autoClickButton
+
+If the next element is a button, it will be clicked. Activating this has the advantage that it's not necessary to press enter twice to click a button (often to submit the form).
+
+Disable this if you don't want to click buttons automatically and instead just focus them like other inputs.
+
+Default: `true`
+
+#### initialState
+
+Initial state of the function.
+
+Default: `true`
+
+### Output `vPreventEnterTab`
+
+Directive to use in those inputs you want to avoid use enter as tab. Inputs with this directive will act as normal when pressing enter.
 
-Any contribution is welcome. Visit my web page [here](https://www.ajomuch92.site/#/).
+### Output `isEnterToTabEnabled`
 
+Ref to read and change the status of the function.
 
+[npm-img]: https://img.shields.io/npm/v/vue3-enter-to-tab
+[npm-url]: https://www.npmjs.com/package/vue3-enter-to-tab

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,7 +1,8 @@
 import { useEventListener } from '@vueuse/core';
 import { ref, toValue, nextTick } from 'vue';
-export const useEnterToTab = (element, { autoClickButton = true } = {}) => {
-    const isEnterToTabEnabled = ref(true);
+export function useEnterToTab(element, options = {}) {
+    const { autoClickButton = true, initialState = true } = options;
+    const isEnterToTabEnabled = ref(initialState);
     useEventListener(element, 'keydown', async (e) => {
         const { ctrlKey, code, altKey, shiftKey } = e;
         const target = e.target;
@@ -39,15 +40,11 @@ export const useEnterToTab = (element, { autoClickButton = true } = {}) => {
             }
         }
     });
-    const setEnterToTabEnabled = (value) => {
-        isEnterToTabEnabled.value = value;
-    };
     const vPreventEnterTab = {
         beforeMount: (el) => (el.preventEnterTab = true),
     };
     return {
         isEnterToTabEnabled,
         vPreventEnterTab,
-        setEnterToTabEnabled,
     };
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-enter-to-tab",
-  "version": "0.0.1",
+  "version": "3.0.0",
   "description": "",
   "main": "./lib/index.js",
   "files": [
@@ -8,7 +8,8 @@
   ],
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "release": "semantic-release"
   },
   "repository": {
     "type": "git",
@@ -21,7 +22,7 @@
     "url": "https://github.com/l3d00m"
   },
   "engines": {
-    "node": ">=16.0"
+    "node": ">=18.0"
   },
   "keywords": [],
   "bugs": {
@@ -29,12 +30,16 @@
   },
   "homepage": "https://github.com/l3d00m/vue3-enter-to-tab#readme",
   "devDependencies": {
-    "@types/node": "20.8.2",
-    "prettier": "3.0.3",
+    "@semantic-release/commit-analyzer": "11.1.0",
+    "@semantic-release/release-notes-generator": "12.1.0",
+    "@types/node": "20.9.0",
+    "conventional-changelog-conventionalcommits": "^7.0.2",
+    "prettier": "3.1.0",
+    "semantic-release": "^22.0.7",
     "ts-node": "10.9.1",
     "typescript": "5.2.2"
   },
-  "packageManager": "yarn@3.6.4",
+  "packageManager": "yarn@4.0.1",
   "dependencies": {
     "@vueuse/core": ">9.x",
     "vue": ">=3.3 <4"