Cmdk Sv

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.

Installation

To install the ⌘K-sv cmdk package versionA, you can follow these steps:

1. Add the package to your project dependencies using a package manager.
2. Import the necessary components from the package into your Svelte code.
3. Use the imported components in your project, following the provided documentation for each component’s props and usage.

Summary

The ⌘K-sv cmdk package versionA is a Svelte UI component library that provides a command menu and combobox functionality. It offers features such as filtering, sorting, custom styling, and various component options for rendering and controlling the command menu. The library also includes components for dialogs, inputs, lists, groups, separators, empty results, and loading indicators. With its range of features and customization options, the ⌘K-sv cmdk package versionA can enhance the user experience of Svelte web applications.