k5kit

Utilities for TypeScript and Svelte

Virtual grid

High-performance virtual grid. Renders rows as HTML elements directly for better scroll performance instead of relying on a JS framework (which means custom markup needs to be created with JS).

Virtual grid + KSelection usage example

Features:

• Renders rows as HTML elements directly instead of using a JS framework (for better scroll performance)
• Rows can be dynamically loaded
• Columns can have fixed and percentage widths

KSelection

Row-based selection manager, with both a JS and Svelte implementation..

Virtual grid + KSelection usage example

Features:

• Multi-selection
• Full OS-like mouse and keyboard support. Shift selection (with proper anchoring), Cmd/Ctrl selection, arrow keys, Alt/Option+ArrowKeys, Cmd/Ctrl+A, Esc to deselect, etc.
• Stays intact when rows are added or removed
• Easy to integrate with the virtual grid

Auto snapshot

Automatically snapshot Svelte form values for input, textarea and select elements.

The name attribute is used as the key. If you need to use a different key than the name attribute, you can alternatively specify it with the data-snapsho attribute.

Usage:

<script>
	import { auto_snapshot } from 'k5kit'
	const snapshotter = auto_snapshot()
	export const snapshot = snapshotter
</script>
<div use:snapshotter.container>
	<input type="text" name="first_name" />
</div>

Shortcut checking

import { check_shortcut, check_modifiers } from 'k5kit'
check_shortcut(e, 'A') // 'A' with no modifiers pressed
check_shortcut(e, 'A', 'shift', 'alt', 'cmdOrCtrl')
check_modifiers(e) // Check that no modifiers are pressed (useful for mouse events)
check_modifiers(e, 'shift', 'alt', 'cmdOrCtrl')