npm

@noction/hippie-nav
TypeScript icon, indicating that this package has built-in type declarations

0.7.7 • Public • Published

hippie-nav

NPM version NPM downloads codecov

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

Package Sidebar

Install

npm i @noction/hippie-nav

Weekly Downloads

14

Version

0.7.7

License

MIT

Unpacked Size

176 kB

Total Files

49

Last publish

Collaborators

  • terrarium789
  • melrose1
  • lwvemike
  • 50rayn