JSPM – vue-custom-context-menu@2.0.0-pre.0

Package Exports

vue-custom-context-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-custom-context-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

[BETA] A Vue.js plugin that allows you to build 🖱 Context Menus for your app fast 🚀 and simple 🧩. Supports 🗂 nested Context Menus! Allows for full 🛠 customisation!

[ Note that the Vue Custom Context Menu is in BETA till v2 which means that the public API is unstable and may change at any time without any warnings! The release of v2 is expected no later than 01/01/2019 ]

Installation

Install the NPM package

$ npm install vue-custom-context-menu --save

Import it in your app's main file the preferred way

to import as an ES6 module
```
import VCCM from "vue-custom-context-menu"
```
to import as a CommonJS module
```
const VCCM = require("vue-custom-context-menu")
```
Make Vue use the plugin
```
Vue.use(VCCM)
```

Or you can also include it on the page as a separate <script>

<script src="https://unpkg.com/vue-custom-context-menu"></script>

Refer here for more details on installation

Usage

Bind Context Menus to elements and components using the v-context-menu directive

<custom-header v-context-menu="'#cm-for-custom-header'"></custom-header>

<main>
    <ol>
        <file-item is="li"
            v-for="file in files"
            :key="file.id"
            :links="{plain: file.links.plain, zipped: file.links.zipped}"

            v-context-menu="'[data-cm-for-files]'"

        >{{ file.name }}</file-item>
    </ol>
</main>

Define the Context Menus inside the <vccm-overlay> component on the app instance's level

<div id="app">
    <!-- ... -->

    <vccm-overlay
        transition="fade"
        :penetrable="true">

        <context-menu
            id="#cm-for-custom-header"
            transition="fade"
            shift="both">

            <cm-item :action="addButtonToHeader">Add fast-access button</cm-item>

            <div class=".cm-separator"></div>

            <cm-item :action="closeHeader">
                <div>Close</div>
                <div class="hint">You can reopen it at any time by pressing [Ctrl]+[H]</div>
            </cm-item>
        </context-menu>

        <context-menu
            data-cm-for-files
            :delay="500"
            @closed="(target) => target.tempHighlight()">

            <cm-item :action="openFile">Open</cm-item>
            <cm-item v-context-menu="'#cm-for-download-options'">Download</cm-item>

            <div class=".cm-separator"></div>

            <cm-item :action="cutFile">Cut</cm-item>
            <cm-item :action="copyFile">Copy</cm-item>
            <cm-item :action="renameFile">Rename</cm-item>
            <cm-item :action="deleteFile">Delete</cm-item>
        </context-menu>

        <context-menu
            id="#cm-for-download-options"
            @opened="checkServersLoad">

            <cm-item :action="(target) => download(target.links.plain)">As it is</cm-item>
            <cm-item :action="(target) => download(target.links.zipped)">Zip-compressed</cm-item>
        </context-menu>
    </vccm-overlay>
</div>

Or use a separate component with ref="vccm-context-menus" to keep your app instance nice and clean

<!-- App.vue -->

<div id="app">
    <arbitrary-named-component-for-context-menus ref="vccm-context-menus"></arbitrary-named-component-for-context-menus>
</div>

<!-- ArbitraryNamedComponentForContextMenus.vue -->

<template>
    <vccm-overlay>
        <!-- ... -->
    </vccm-overlay>
</template>

Refer here for more details on usage

Contribution

Fork the repo
Run npm i
Make changes under npm run watch:esm or npm run watch:umd
Build dist-files using npm run build
Create a pull request

Refer here for more details on contribution