Overview
The ⌘K-sv cmdk package versionA is a port of cmdk to Svelte. It is a command menu Svelte component that can also be used as an accessible combobox. The component automatically filters and sorts rendered items. It provides various features and customization options for styling and functionality.
Features
- Command [cmdk-root]: Renders the command menu inline or in a dialog. It can be controlled by binding to the value prop. Custom filter functions can be provided for ranking items. Filtering and sorting can be disabled entirely. Arrow keys can wrap around the list.
- Dialog [cmdk-dialog] [cmdk-overlay]: Composes Bits UI's Dialog component. The overlay is always rendered. Props are forwarded to the Command component. The dialog can be controlled by binding to the open prop. Portalling can be enabled to specify a specific HTML element for the Dialog to portal into.
- Input [cmdk-input]: Forwards all props to the underlying input element. Can be controlled as a normal input by binding to its value prop.
- List [cmdk-list]: Contains items and groups. Height animation can be achieved using the --cmdk-list-height CSS variable. Item scrolling into view can be enhanced near the edges of the viewport using scroll-padding.
- Item [cmdk-item] [data-disabled?] [data-selected?]: Becomes active on pointer enter. Unique values should be provided for each item, which will be automatically inferred from the .textContent if not provided. The alwaysRender prop can be used to force rendering of an item regardless of filtering.
- Group [cmdk-group] [hidden?]: Groups items together and can be given a heading. Groups will not be removed from the DOM, but the hidden attribute can be applied to hide them from view. The alwaysRender prop can be used to force a group to always be visible.
- Separator [cmdk-separator]: Visible when the search query is empty or alwaysRender is true, and hidden otherwise.
- Empty [cmdk-empty]: Automatically renders when there are no results for the search query.
- Loading [cmdk-loading]: Renders a loading indicator while loading asynchronous items.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Prism JS
PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.