Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bytebase/vue-kbar
Extensible command+k interface for Vue 3 applications. Inspired by timc1/kbar.
https://github.com/bytebase/vue-kbar
command-palette commandbar javascript kbar shortcuts typescript vue
Last synced: 10 days ago
JSON representation
Extensible command+k interface for Vue 3 applications. Inspired by timc1/kbar.
- Host: GitHub
- URL: https://github.com/bytebase/vue-kbar
- Owner: bytebase
- License: mit
- Created: 2021-12-02T07:35:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T06:14:30.000Z (about 1 year ago)
- Last Synced: 2024-11-02T05:48:28.958Z (15 days ago)
- Topics: command-palette, commandbar, javascript, kbar, shortcuts, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 501 KB
- Stars: 65
- Watchers: 6
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# vue-kbar
Extensible command+k interface for Vue 3 applications. Inspired by [timc1/kbar](https://github.com/timc1/kbar).
> Caution! This is still WIP.
## Screenshots
> TBD
## How to use
### 1. Install dependency
```bash
# npm install --save @bytebase/vue-kbar
```
or if you are using yarn
```bash
# yarn add @bytebase/vue-kbar
```
### 2. Import core components
```typescript
// App.vue
import {
KBarProvider,
KBarPortal,
KBarPositioner,
KBarAnimator,
KBarSearch,
createAction,
} from "@bytebase/vue-kbar";
```
### 3. Define global actions
```typescript
// App.vue
// use `createAction` as a type definition helper
const globalActions = [
createAction({
id: "home",
name: "Home",
shortcut: ["g", "h"],
section: "Navigation",
subtitle: "Go back to home",
perform: () => router.push("/"),
}),
createAction({
id: "docs",
name: "Docs",
shortcut: ["g", "d"],
section: "Navigation",
perform: () => router.push("/docs"),
}),
];
```
### 4. Use core components
You need to wrap your Vue app entrance by vue-kbar core components.
vue-kbar comes with no out-of-the-box styles. You may specify styles according to your application's UI design. Here is an example of using tailwindcss.
```html
```
### 5. Implement a results renderer
vue-kbar doesn't render results it self. You may render results with your components and styles.
Here is a simple example of how to implement `` above.
```html
// MyResultsRenderer.vue
{{ item }}
{{ item.name }}
{{ item.subtitle }}
```
```typescript
// MyResultsRenderer.vue
import { useKBarMatches, KBarResults } from "@bytebase/vue-kbar";
export default {
name: "MyResultsRenderer",
components: { KBarResults },
setup() {
// Visit the latest matches
const matches = useKBarMatches();
// Tell KBarResults the height of each item will be rendered
const itemHeight = (params: { item: any; index: number }) => {
if (typeof params.item === "string") return 32;
return 64;
};
return { matches, itemHeight };
},
};
```
### 6. Register actions dynamically
You may register actions dynamically by calling `useRegisterActions` in any descendant component of ``. This hook method is reactive and bound to the component's life cycle, so you don't need to refresh or unregister manually. Here is an example.
```typescript
// SomeComponent.vue
import { useRegisterActions, createAction } from "@bytebase/vue-kbar";
export default {
name: "SomeComponent",
setup() {
// Maybe you've already used some auto-fetch stuff to
// update the `posts` automatically
const posts = useFetch("/your-api", [deps]);
// Mapping posts to actions as a computed
const actions = computed(() =>
posts.map((post) =>
createAction({
id: `to-detail-${post.id}`,
name: post.title,
subtitle: post.abstract,
section: "Posts",
perform: () => router.push(`/post/${post.id}`),
})
)
);
// Dynamically register actions
// pass `prepend: true` to make them listed before global actions
// When `actions` changed, they will be automatically re-registered
useRegisterActions(actions, true);
},
};
```