Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/james2doyle/vue-omnibar
Create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features
https://github.com/james2doyle/vue-omnibar
component omnibar vue
Last synced: 3 days ago
JSON representation
Create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features
- Host: GitHub
- URL: https://github.com/james2doyle/vue-omnibar
- Owner: james2doyle
- License: mit
- Created: 2020-11-06T18:27:59.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-30T22:16:46.000Z (almost 3 years ago)
- Last Synced: 2024-04-25T08:01:12.108Z (5 months ago)
- Topics: component, omnibar, vue
- Language: Vue
- Homepage: https://james2doyle.github.io/vue-omnibar/
- Size: 882 KB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue Omnibar
============
> Create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features
## Demo
## Features
- [x] built-in filtering using [Fuse.js](https://fusejs.io/)
- [x] custom key combo support
- [x] listens for `esc` key
- [x] bring your own styling (basic styles included)
- [x] arrow key support
- [x] uses slots for best flexibility
- [x] "off-click" closes the modal
## Installation
```bash
npm install vue-omnibar
```
### Global Usage
```js
import Vue from 'vue';
import Omnibar from 'vue-omnibar';
Vue.component('omnibar', Omnibar);
```
### In Single File Components
```js
import Omnibar from 'vue-omnibar';
export default {
// ...
components: {
Omnibar,
},
// ...
};
```
## Usage
```vue
Command Palette
import Vue from 'vue';
import Omnibar from '@/omnibar.vue';
export default Vue.extend({
name: 'OmnibarExample',
components: {
Omnibar
},
data() {
return {
data: [
'1️⃣ --- one',
'2️⃣ --- two',
'3️⃣ --- three',
'4️⃣ --- four',
'5️⃣ --- five',
'6️⃣ --- six',
]
};
},
methods: {
handleClick(item: any) {
window.alert(item);
}
},
});
.omnibar-search-list a {
display: inline-block;
width: 100%;
}
```
## Opening Programmatically
```vue
Show Omnibar
Show "myName" modal
Close "myName" modal
```
## Available Props
- *name*: `string | boolean | null` - namespace the modal and the open event (default: `''`)
- *data*: `Array>` - the data to filter when typing (`required`)
- *initial*: `Array>` - the data to show when the field is empty (default: `[]`)
- *keybinding*: `Array | null` - combination of keys that need to be pressed (default: `['shift', 'p']`)
- *shadow*: `boolean` - add a shadow to the view box (default: `true`)
- *overlay*: `boolean` - show an overlay under the view box (default: `true`)
- *options*: `Fuse.IFuseOptions` - options to pass to Fuse.js ([see options page](https://fusejs.io/api/options.html)) (default: `{}`)
## Development
- `npm run serve`: run a development server with a the `serve.vue` page
- `npm run build`: generate the build output