├── .github └── workflows │ └── ci.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── demo ├── Basic.svelte ├── ComboKeys.svelte ├── CustomFocusKey.svelte ├── FocusKeyAction.svelte ├── FocusKeyActionUpdates.svelte ├── MultipleFocusKeys.svelte ├── SelectTextOnFocus.svelte ├── __layout.svelte ├── _app.html ├── global.d.ts └── index.svelte ├── package.json ├── src ├── FocusKey.svelte ├── focus-key.ts └── index.ts ├── svelte.config.js ├── tests ├── FocusKey.test.ts ├── focus-key.test.ts └── index.test.ts ├── tsconfig.json ├── vite.config.js └── yarn.lock /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: [master] 7 | 8 | jobs: 9 | test: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | - uses: actions/cache@v2 14 | id: yarn-cache 15 | with: 16 | path: "**/node_modules" 17 | key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} 18 | 19 | - name: Build and test the library 20 | run: | 21 | yarn 22 | yarn build 23 | yarn test 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.svelte-kit 3 | /build 4 | /package 5 | /node_modules -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.0.0](https://github.com/metonym/svelte-focus-key/releases/tag/v1.0.0) - 2023-06-24 9 | 10 | - support combination of keys (e.g., `key="Meta+k"`) 11 | - use strict equality check for element to focus 12 | 13 | ## [0.3.2](https://github.com/metonym/svelte-focus-key/releases/tag/v0.3.2) - 2022-02-11 14 | 15 | - publish the `package` folder 16 | 17 | ## [0.3.1](https://github.com/metonym/svelte-focus-key/releases/tag/v0.3.1) - 2022-02-07 18 | 19 | - `focusKey` action should reflect updated actions 20 | 21 | ## [0.3.0](https://github.com/metonym/svelte-focus-key/releases/tag/v0.3.0) - 2022-01-24 22 | 23 | - support multiple keys (`key` props accepts a `string` or `string[]`) 24 | 25 | ## [0.2.4](https://github.com/metonym/svelte-focus-key/releases/tag/v0.2.4) - 2021-12-15 26 | 27 | - set `type="module"` in package.json 28 | 29 | ## [0.2.3](https://github.com/metonym/svelte-focus-key/releases/tag/v0.2.3) - 2021-12-14 30 | 31 | - remove `exports` field 32 | 33 | ## [0.2.2](https://github.com/metonym/svelte-focus-key/releases/tag/v0.2.2) - 2021-12-14 34 | 35 | - do not use subpath exports for `exports` field 36 | 37 | ## [0.2.1](https://github.com/metonym/svelte-focus-key/releases/tag/v0.2.1) - 2021-12-14 38 | 39 | - specify `exports.import` entry in `package.json` 40 | 41 | ## [0.2.0](https://github.com/metonym/svelte-focus-key/releases/tag/v0.2.0) - 2021-11-30 42 | 43 | - add `selectText` prop to select element text when focusing 44 | 45 | ## [0.1.1](https://github.com/metonym/svelte-focus-key/releases/tag/v0.1.1) - 2021-10-31 46 | 47 | - remove `update` key from `focus-key.d.ts` 48 | 49 | ## [0.1.0](https://github.com/metonym/svelte-focus-key/releases/tag/v0.1.0) - 2021-10-10 50 | 51 | - Initial release 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present Eric Liu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-focus-key 2 | 3 | [![NPM][npm]][npm-url] 4 | 5 | > Svelte component and action to focus an element when pressing a key 6 | 7 | The primary use case is to focus a search input when pressing the forward slash key ("/"). 8 | 9 | ## Installation 10 | 11 | ```bash 12 | # Yarn 13 | yarn add -D svelte-focus-key 14 | 15 | # NPM 16 | npm i -D svelte-focus-key 17 | 18 | # pnpm 19 | pnpm i -D svelte-focus-key 20 | ``` 21 | 22 | ## Usage 23 | 24 | ### `FocusKey` component 25 | 26 | Use the [bind:this](https://svelte.dev/docs#bind_element) directive to pass the element to focus to the `FocusKey` component. 27 | 28 | 29 | 30 | ```svelte 31 | 36 | 37 | 38 | 39 | 40 | ``` 41 | 42 | 43 | 44 | ### Custom focus key 45 | 46 | The default focus key is the forward slash (`/`). Customize the key using the `key` prop. 47 | 48 | 49 | 50 | ```svelte 51 | 56 | 57 |