hippie-nav

This modern searchbar offers an intuitive and efficient way for users to explore your application by vue routes and your defined actions, .

Install

npm

npm i @noction/hippie-nav

yarn

yarn add @noction/hippie-nav

pnpm

pnpm add @noction/hippie-nav

Options object structure

The plugin supports the following configuration options:

| Option | Description | Type | |-----------------|-------------------------------------------------------------------------|-------------------------| | excludedPaths | An array of paths to be excluded from processing. | Array<string | RegExp> | | indexFields | An object specifying index fields for different entities. | object | | | - routes: An array of fields to be indexed for the 'routes' entity. | Array | | | - actions: An array of fields to be indexed for the 'actions' entity. | Array | | displayField | An object specifying the display field for the 'route' entity . | object | | | - route: The string field from meta is used for display name. | string | | resultsLimit | A number indicating the maximum number of results to be returned. | number |

Action object structure

| Property | Description | Type | |---------------|----------------------------------------------------------------------------------------------|-----------------| | name | The name of the action. | string | | action | The function that will be executed when the action is triggered. | function | | aliases | (Optional) An array of alternative names or aliases for the action. | Array<string> | | description | (Optional) An array of strings providing additional description or details about the action. | Array<string> |

Usage as component

<template>
  <hippie-nav :options="options" :actions="actions"/>
</template>

<script setup lang="ts">
import { HippieNav } from 'hippie-nav'

const options = {
  excludedPaths: ['/login', '/register', /^\/admin$/],
  indexFields: {
    routes: ['name', 'path'],
    actions: ['name'],
  },
  displayField: {
    route: 'hippieNavMeta.title'
  },
  resultsLimit: 5
}

const actions = [
  {
    name: 'Show graph',
    action: () => {
      //handler
    },
  },
  {
    name: 'Log out',
    action: () => {
      //handler
    }
  }
]


</script>

Props

| Name | Type | Description | Required |
|---------|--------|---------------------------------------------------|----------| | options | Object | The hippie-nav options structure | false | | actions | Array | The hippie-nav actions of action object structure | false |

Usage as plugin

const app = createApp(App)

app.use(router)
app.use(HippieNav, {
  displayField: {
    route: 'hippieNavMeta.title'
  },
  excludedPaths: ['/login', '/register', /^\/admin$/],
  indexFields: {
    actions: ['name'],
    routes: ['name', 'path']
  },
  resultsLimit: 5
})
app.component('HippieBtnCollapse', HippieBtnCollapse)
app.mount('#app')

<template>
  <hippie-nav :actions="actions"/>
</template>

<script setup lang="ts">
import { HippieNav } from 'hippie-nav'

const actions = [
  {
    name: 'Show graph',
    action: () => {
      //handler
    },
  },
  {
    name: 'Log out',
    action: () => {
      //handler
    }
  }
]


</script>

Props

| Name | Type | Description | Required |
|-----------------|-------|---------------------------------------------------|------------| | actions | Array | The hippie-nav actions of action object structure | false |