Skip to content

Commit 5c184e0

Browse files
pdanpdanpdanpdan
committed
chore: add some docs; cleanups
1 parent 7c6d514 commit 5c184e0

13 files changed

+258
-24
lines changed

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎.sasslintrc

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"rules": {
3+
"extends-before-mixins": 2,
4+
"extends-before-declarations": 2,
5+
"placeholder-in-extend": 2,
6+
"mixins-before-declarations": [
7+
2,
8+
{
9+
"exclude": [
10+
"breakpoint",
11+
"mq"
12+
]
13+
}
14+
],
15+
"no-warn": 1,
16+
"no-debug": 1,
17+
"no-ids": 0,
18+
"no-important": 0,
19+
"hex-notation": 0,
20+
"indentation": [
21+
2,
22+
{
23+
"size": 2
24+
}
25+
],
26+
"class-name-format": 0,
27+
"no-color-literals": 0,
28+
"empty-line-between-blocks": 0,
29+
"single-line-per-selector": 1,
30+
"force-element-nesting": 0,
31+
"property-sort-order": 0,
32+
"variable-for-property": 0,
33+
"leading-zero": 0
34+
}
35+
}

‎CHANGELOG.md

Whitespace-only changes.

‎README.md

+133-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,133 @@
1-
# VueKeyboardTrap
2-
Vue directive for keyboard navigation - roving movement and trapping inside container
1+
# VueKeyboardTrap (vue-keyboard-trap) <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
2+
3+
## Project description
4+
5+
Vue directive for keyboard navigation - roving movement and trapping inside container.
6+
7+
Works both for Vue3 and Vue2.
8+
9+
[Docs and examples](https://pdanpdan.github.io/vue-keyboard-trap/)
10+
11+
## Install
12+
13+
```bash
14+
yarn add https://github.com/pdanpdan/vue-keyboard-trap
15+
```
16+
or
17+
```bash
18+
npm install https://github.com/pdanpdan/vue-keyboard-trap
19+
```
20+
21+
## Usage
22+
23+
Can be globally registered on the App (plugin mode)
24+
```javascript
25+
import { createApp } from 'vue';
26+
import { VueKeyboardTrapDirectivePlugin } from 'vue-keyboard-trap';
27+
import App from './App.vue';
28+
29+
const app = createApp(App);
30+
31+
app.use(VueKeyboardTrapDirectivePlugin, {
32+
// ...options if required
33+
});
34+
35+
app.mount('#app');
36+
```
37+
38+
or included in specific components
39+
```javascript
40+
import { defineComponent } from 'vue';
41+
import { VueKeyboardTrapDirectiveFactory } from 'vue-keyboard-trap';
42+
43+
const KbdTrap = VueKeyboardTrapDirectiveFactory({
44+
// ...options if required
45+
}).directive;
46+
47+
export default defineComponent({
48+
directives: {
49+
KbdTrap,
50+
},
51+
});
52+
```
53+
54+
## CSS Styles
55+
56+
The directive does not require any CSS styles to work, but for cosmetic purposes some example styles are provided in `dist/styles/VueKeyboardTrapDirective.sass`.
57+
58+
```javascript
59+
import 'vue-keyboard-trap/dist/styles/VueKeyboardTrapDirective.sass';
60+
```
61+
62+
## Directive configuration options
63+
64+
- name: snake-case name of the directive (without `v-` prefix) - default `kbd-trap`
65+
- ctxName: key used to store context on element - default `__v${ PascalCase from name }`
66+
- datasetName: camelCase name of the `data-attribute` to be set on element when trap is enabled - default `v${ PascalCase from name}`
67+
- focusableSelector: CSS selector for focusable elements
68+
- rovingSkipSelector: CSS selector for elements that should not respond to roving key navigation (input, textarea, ...)
69+
- gridSkipSelector: CSS selector that will be applied in .roving.grid mode to exclude elements - must be a series of `:not()` selectors
70+
- autofocusSelector: CSS selector for the elements that should be autofocused
71+
- trapTabIndex: tabIndex value to be used when trap element has a tabIndex of -1 (default -9999)
72+
73+
## Dynamic enable/disable
74+
75+
Use the value of the directive (boolean) to enable/disable it.
76+
77+
```html
78+
<div v-kbd-trap="directiveEnabled">
79+
```
80+
81+
## Directive modifiers
82+
83+
- `.autofocus` - autofocuses the element with `[autofocus]` or `[data-autofocus]` attribute when the directive is mounted or enabled
84+
- `.roving` (or `.roving.vertical.horizontal`) - allow roving navigation (Home, End, ArrowKeys)
85+
- `.roving.vertical` - allow roving navigation (Home, End, ArrowUp, ArrowDown)
86+
- `.roving.horizontal` - allow roving navigation (Home, End, ArrowLeft, ArrowRight)
87+
- `.roving.grid` - allow roving navigation (Home, End, ArrowKeys) using dataset attrs on elements `[data-${ camelCase from datasetName }-(row|col)]`; `[data-${ camelCase from datasetName }-(row|col)~="*"]` is a catchall
88+
- `.roving.tabinside` - Tab key navigates to next/prev element inside trap (by default Tab key navigates to next/prev element outside trap in roving mode)
89+
- `.escrefocus` - refocus element that was in focus before activating the trap on Esc
90+
- `.escexits` - refocus a parent trap on Esc (has priority over `.escrefocus`)
91+
92+
## Author
93+
94+
* Name: Dan Popescu (PDan)
95+
* Email: <[email protected]>
96+
* Website: https://github.com/pdanpdan/
97+
* Github: [@pdanpdan](https://github.com/pdanpdan)
98+
99+
## License
100+
101+
Copyright © 2021 [Dan Popescu](https://github.com/pdanpdan).
102+
103+
This application is distributed under the [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT), see LICENSE for more information.
104+
105+
## Develpment
106+
107+
### Install the dependencies
108+
109+
```bash
110+
yarn
111+
```
112+
113+
### Start development mode (hot-code reloading, error reporting, etc.)
114+
115+
```bash
116+
yarn dev
117+
```
118+
119+
### Lint the files
120+
121+
```bash
122+
yarn lint
123+
```
124+
125+
### Build for production
126+
127+
```bash
128+
yarn build
129+
```
130+
131+
## Source code, issues, bug reports, feature requests
132+
133+
[Vue Keyboard Trap (vue-keyboard-trap)](https://github.com/pdanpdan/vue-keyboard-trap)

‎gitpkg.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = () => ({
2+
getTagName: (pkg) => pkg.version,
3+
});

‎package.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-keyboard-trap",
3-
"version": "0.0.1",
4-
"description": "Vue2 and Vue3 directive for keyboard navigation - roving movement and trapping inside container",
3+
"version": "1.0.0",
4+
"description": "Vue3 and Vue2 directive for keyboard navigation - roving movement and trapping inside container",
55
"productName": "Vue Keyboard Trap",
66
"author": {
77
"name": "Dan Popescu",
@@ -33,23 +33,23 @@
3333
"url": "https://github.com/pdanpdan/vue-keyboard-trap/issues"
3434
},
3535
"homepage": "https://pdanpdan.github.io/vue-keyboard-trap",
36-
"main": "./dist/src/index.umd.js",
37-
"module": "./dist/src/index.es.js",
36+
"main": "./dist/index.umd.js",
37+
"module": "./dist/index.es.js",
3838
"exports": {
3939
".": {
40-
"require": "./dist/src/index.umd.js",
41-
"import": "./dist/src/index.es.js"
40+
"require": "./dist/index.umd.js",
41+
"import": "./dist/index.es.js"
4242
}
4343
},
44-
"typings": "./dist/src/index.d.ts",
45-
"types": "./dist/src/index.d.ts",
44+
"typings": "./dist/types/index.d.ts",
45+
"types": "./dist/types/index.d.ts",
46+
"web-types": "dist/web-types/web-types.json",
4647
"files": [
47-
"dist"
48+
"dist",
49+
"src"
4850
],
4951
"scripts": {
5052
"dev": "vite --config ./vite.dev.config.js",
51-
"dev:build": "vite build --config ./vite.dev.config.js",
52-
"dev:serve": "vite preview",
5353

5454
"docs:dev": "vitepress dev docs",
5555
"docs:build": "vitepress build docs",
@@ -58,7 +58,7 @@
5858

5959
"lint": "eslint --ext .js,.vue ./",
6060
"build": "vite build --config ./vite.src.config.js",
61-
"prepublishOnly": "yarn lint && yarn dev:build && yarn build && ./deploy.docs.sh"
61+
"prepublishOnly": "yarn lint && yarn build"
6262
},
6363
"peerDependencies": {
6464
"vue": "^3.0.0 || ^2.0.0"

‎src/directives/keyboard-trap/directive.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ import { extractNumber, focus } from './helpers';
1919
//
2020
//
2121
// modifiers:
22-
// .autofocus - autofocuses the element with [autofocus] or [data-autofocus] when the directive is mounted of enabled
22+
// .autofocus - autofocuses the element with [autofocus] or [data-autofocus] attribute when the directive is mounted or enabled
2323
// .roving, .roving.vertical.horizontal - allow roving navigation (Home, End, ArrowKeys)
2424
// .roving.vertical - allow roving navigation (Home, End, ArrowUp, ArrowDown)
2525
// .roving.horizontal - allow roving navigation (Home, End, ArrowLeft, ArrowRight)
26-
// .roving.grid - allow roving navigation (Home, End, ArrowLeft, ArrowRight) using dataset attrs on elements [data-${ camelCase from datasetName }-(row|col)]
26+
// .roving.grid - allow roving navigation (Home, End, ArrowKeys) using dataset attrs on elements [data-${ camelCase from datasetName }-(row|col)]
2727
// [data-${ camelCase from datasetName }-(row|col)~="*"] is a catchall
2828
// .roving.tabinside - Tab key navigates to next/prev element inside trap (by default Tab key navigates to next/prev element outside trap in roving mode)
2929
// .escrefocus - refocus element that was in focus before activating the trap on Esc

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
} from './directives.js';
66
import App from './App.vue';
77

8-
import './public/VueKeyboardTrapDirective.sass';
8+
import './public/styles/VueKeyboardTrapDirective.sass';
99

1010
const app = createApp(App);
1111

‎src/public/VueKeyboardTrapDirective.sass renamed to ‎src/public/styles/VueKeyboardTrapDirective.sass

File renamed without changes.

‎src/public/index.d.ts renamed to ‎src/public/types/index.d.ts

File renamed without changes.

‎src/public/web-types/web-types.json

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{
2+
"$schema": "http://json.schemastore.org/web-types",
3+
"framework": "vue",
4+
"name": "vue-pdan",
5+
"version": "1.0.0",
6+
"js-types-syntax": "typescript",
7+
"contributions": {
8+
"html": {
9+
"vue-directives": [
10+
{
11+
"name": "v-kbd-trap",
12+
"source": {
13+
"module": "vue-pdan",
14+
"symbol": "KbdTrap"
15+
},
16+
"required": false,
17+
"description": "VueKeyboardTrap - directive for keyboard navigation - roving movement and trapping inside container",
18+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/",
19+
"vue-modifiers": [
20+
{
21+
"name": "autofocus",
22+
"description": "Autofocuses the element with [autofocus] or [data-autofocus] attribute when the directive is mounted or enabled",
23+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
24+
},
25+
{
26+
"name": "roving",
27+
"description": "Allow roving navigation (Home, End, ArrowKeys) - it's the same as using .roving.vertical.horizontal",
28+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
29+
},
30+
{
31+
"name": "vertical",
32+
"description": "Used with .roving - allow roving navigation (Home, End, ArrowUp, ArrowDown)",
33+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
34+
},
35+
{
36+
"name": "horizontal",
37+
"description": "Used with .roving - allow roving navigation (Home, End, ArrowLeft, ArrowRight)",
38+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
39+
},
40+
{
41+
"name": "grid",
42+
"description": "Used with .roving - allow roving navigation (Home, End, ArrowKeys) using dataset attrs on elements [data-${ camelCase from datasetName }-(row|col)]; [data-${ camelCase from datasetName }-(row|col)~=\"*\"] is a catchall",
43+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
44+
},
45+
{
46+
"name": "tabinside",
47+
"description": "Used with .roving - Tab key navigates to next/prev element inside trap (by default Tab key navigates to next/prev element outside trap in roving mode)",
48+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
49+
},
50+
{
51+
"name": "escrefocus",
52+
"description": "Refocus element that was in focus before activating the trap on Esc",
53+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
54+
},
55+
{
56+
"name": "escexits",
57+
"description": "Refocus a parent trap on Esc (has priority over .escrefocus)",
58+
"doc-url": "https://pdanpdan.github.io/vue-keyboard-trap/"
59+
}
60+
],
61+
"value": {
62+
"kind": "expression",
63+
"type": "boolean",
64+
"description": "Disable directive if false"
65+
}
66+
}
67+
]
68+
}
69+
}
70+
}

‎vite.dev.config.js

-6
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,4 @@ import vue from '@vitejs/plugin-vue';
33

44
export default defineConfig({
55
plugins: [vue()],
6-
7-
build: {
8-
target: 'esnext',
9-
emptyOutDir: true,
10-
outDir: './dist/dev',
11-
},
126
});

‎vite.src.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default defineConfig({
1010
target: 'esnext',
1111
sourcemap: true,
1212
emptyOutDir: true,
13-
outDir: './dist/src',
13+
outDir: './dist',
1414
lib: {
1515
entry: './src/directives.js',
1616
name: 'VueKeyboardTrap',

0 commit comments

Comments
 (0)