# @kiyoaki_w/vue-context

> A customizable context menu component built for Vue2, supporting fontawesome icons, auto right/bottom boundary detection.

Latest version **1.0.3** (published 2019-07-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install @kiyoaki_w/vue-context
pnpm add @kiyoaki_w/vue-context
yarn add @kiyoaki_w/vue-context
bun add @kiyoaki_w/vue-context
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-07-17 |
| First published | 2019-07-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | wyp |
| Maintainers | kiyoaki_w |
| Keywords | vue, context, menu, icon, customize |

## Links

- npm: https://www.npmjs.com/package/@kiyoaki_w/vue-context
- Repository: https://github.com/Kiyoaki-w/Ki-vue-context
- Homepage: https://github.com/Kiyoaki-w/Ki-vue-context#readme
- Issues: https://github.com/Kiyoaki-w/Ki-vue-context/issues
- npm.io page: https://npm.io/package/@kiyoaki_w/vue-context

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [@fortawesome/vue-fontawesome](https://npm.io/package/@fortawesome/vue-fontawesome.md) ^0.1.6
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.19
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.9.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-07-17
- 1.0.2 — 2019-07-16
- 1.0.0 — 2019-07-16

## README

# Ki-vue-context
A customizable context menu component built for Vue2, supporting fontawesome icons, auto right/bottom boundary detection.

## Demo
![demo.gif](https://github.com/Kiyoaki-w/Ki-vue-context/blob/master/demo.gif)
[demo on github](https://github.com/Kiyoaki-w/Ki-vue-context/)

A built demo is provided in the directory `/demo`. Use any static website server to check it.

```bash
$ cd ./demo
# live-server for an example
$ live-server
```

## Install
```bash
$ npm i @kiyoaki_w/vue-context
```

## Usage Example

### Global Registration
```javascript
// main.js
import Vue from 'vue'
import kiContext from '@kiyoaki_w/vue-context'
Vue.use(kiContext)
```

### Import fontawesome icons
Import fontawesome and all the icons you need in `main.js`.
```javascript
// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowRight, faArrowLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowRight, faArrowLeft, faArrowUp, faArrowDown)
Vue.component('font-awesome-icon', FontAwesomeIcon)
```

### Use it in your Vue project
```html
<template>
  <div id="app" @click="hideContextMenu()" @contextmenu.prevent="showContextMenu($event)">
    ...
    <ki-context 
      ref="kiContext"
      minWidth='1em'
      maxWidth='15em'
      backgroundColor='#fbfbfb'
      fontSize='15px'
      textColor='#35495e'
      iconColor='#41b883'
      borderRadius='0.1'
    />
    ...
  </div>
</template>

<script>
export default {
  methods: {
    showContextMenu (event){
      let items = [
        {
          icon: "arrow-up",
          text: 'Default',
          click: () => {
            alert('Option0!')
          }
        },
        {
          icon: 'arrow-right',
          text: 'With divider',
          divider: true,
          click: () => {
            alert('Option2!')
          }
        },
        {
          icon: 'arrow-down',
          text: 'Disabled',
          disabled: true,
          click: () => {
            alert('Option3!')
          }
        },
      ];
      this.$refs.kiContext.show(event, items);
    },
    hideContextMenu (){
      this.$refs.kiContext.hide();
    }
  }
}
</script>
```

## Props
| prop    | type  | required | default | example from demo |
|---------|-------|----------|---------|-------------------|
| minWidth | String | No | 10em | 10em |
| maxWidth | String | No | 18em | 15em |
| backgroundColor | String | No | #ffffff | #fbfbfb |
| fontSize | String | No | inherit | 15px |
| textColor | String | No | inherit | #35495e |
| iconColor | String | No | inherit | #41b883 |
| borderRadius | String | No | null | 0.1em |

## Items
The array `items` defining the context menu consists of several `item`. The properties of `item` are listed here.

| prop    | type  | required |
|---------|-------|----------|
| text | String | Yes |
| icon | String | No |
| click | function | No |
| divider | boolean | No |
| disabled | boolean | No |

---
_Source: https://npm.io/package/@kiyoaki_w/vue-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._