diff --git a/.changeset/wicked-cars-compare.md b/.changeset/wicked-cars-compare.md new file mode 100644 index 0000000..3526d13 --- /dev/null +++ b/.changeset/wicked-cars-compare.md @@ -0,0 +1,5 @@ +--- +'cmdk-sv': patch +--- + +feat: expose state slot prop for Command.Root diff --git a/README.md b/README.md index 12ce97c..25d0d39 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,15 @@ You can make the arrow keys wrap around the list (when you reach the end, it goe ``` +This component also exposes two additional slot props for `state` (the current reactive value of the command state) and `stateStore` (the underlying writable state store). These can be used to implement more advanced use cases, such as debouncing the search updates with the `stateStore.updateState` method: + +```svelte + + {@const handleUpdateState = debounce(stateStore.updateState, 200)} + + +``` + ### Dialog `[cmdk-dialog]` `[cmdk-overlay]` Props are forwarded to [Command](#command-cmdk-root). Composes Bits UI's Dialog component. The overlay is always rendered. See the [Bits Documentation](https://bits-ui.com/docs/) for more information. Can be controlled by binding to the `open` prop. diff --git a/src/lib/cmdk/components/Command.svelte b/src/lib/cmdk/components/Command.svelte index a650367..2a2eaf4 100644 --- a/src/lib/cmdk/components/Command.svelte +++ b/src/lib/cmdk/components/Command.svelte @@ -83,16 +83,23 @@ action: rootAction, attrs: rootAttrs }; + + $: slotProps = { + root, + label: { attrs: labelAttrs }, + stateStore, + state: $stateStore + }; {#if asChild} - + {:else}
- +
{/if}