<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <PxMenu
            ref="menu"
            :items="[
                {
                    id: 'copy',
                    label: 'Copy',
                    icon: iconCopy,
                    iconSize: 1,
                    handler: onCopy,
                },
                {
                    id: 'paste',
                    label: 'Paste',
                    icon: iconClipboard,
                    iconSize: 1,
                    handler: onPaste,
                },
                {
                    id: 'sep1',
                    separator: true,
                },
                {
                    id: 'paste2',
                    label: 'Paste',

                    iconSize: 1,
                },
                {
                    id: 'paste3',
                    label: 'Paste',
                    icon: iconClipboard,
                    iconSize: 1.5,
                },
            ]"
        />

        <div :class="bem('target')" v-context-menu:[mydata]="'menu'" v-if="visible">
            Right Click Me!
        </div>

        <button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</button>
    </div>
</template>

<script>
import { contextMenuDirective } from '../../components/PxMenu.vue';
import PxMenu from '../../components/PxMenu.vue';

import iconCopy from '../../assets/feather/copy.svg?url';
import iconClipboard from '../../assets/feather/clipboard.svg?url';

export default {
    name: 'demo-px-menu',
    components: { PxMenu },
    directives: { contextMenu: contextMenuDirective },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return {
            visible: true,

            iconCopy,
            iconClipboard,
        };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    methods: {
        onCopy(data) {
            console.log('copy: ' + data);
        },
        onPaste(data) {
            console.log('paste: ' + data);
        },
    },
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;
.demo-px-menu {
    &__target {
        width: 300px;
        height: 300px;
        background-color: orange;
    }
}
</style>
