https://github.com/johnhwhite/ng-keyboard-sort

https://github.com/johnhwhite/ng-keyboard-sort

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/johnhwhite/ng-keyboard-sort
• Owner: johnhwhite
• License: mit
• Created: 2023-01-20T02:46:32.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-21T05:54:04.000Z (21 days ago)
• Last Synced: 2024-12-21T06:27:41.605Z (21 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ng-keyboard-sort
• Size: 6.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng-keyboard-sort - Library to add keyboard commands for elements that also use CDK drag and drop sorting. (Table of contents / Third Party Components)
• trackawesomelist - ng-keyboard-sort (⭐2) - Library to add keyboard commands for elements that also use CDK drag and drop sorting. (Recently Updated / [Dec 25, 2024](/content/2024/12/25/README.md))

README

        
# ng-keyboard-sort

[![CI](https://github.com/johnhwhite/ng-keyboard-sort/actions/workflows/ci.yml/badge.svg)](https://github.com/johnhwhite/ng-keyboard-sort/actions/workflows/ci.yml)

[![npm](https://img.shields.io/npm/v/ng-keyboard-sort/latest?label=ng-keyboard-sort)](https://www.npmjs.com/package/ng-keyboard-sort)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/johnhwhite/ng-keyboard-sort?file=apps%2Fe2e%2Fsrc%2Fapp%2Fexample%2Fexample.component.html)

Library to add keyboard commands for elements that also use CDK drag and drop sorting. This library intends to provide parity for picking up an element with the keyboard, moving it up and down the list, and dropping it in place.

## Directives

### kbdSortList

#### Model: kbdSortListData

The array of items to sort, updated as items are moved.

#### Input: kbdSortListOrientation

Either `horizontal` or `vertical`.

#### Input: kbdSortListDisabled

Whether the list is disabled.

### kbdSortItem

### kbdSortHandle

Focusable element that is used to grab the item.

## Commands

This directive will listen for the following keyboard commands:

### Space / Enter

Select the item to begin moving it, or if already selected, move it to the new position.

### Escape

Deselect the item.

### Arrow Keys

Move the selected item up or down (vertical) or left or right (horizontal).