@fmmp/vue v1.0.1

Form Minimap Vue

Vue components for Form Minimap. Please consult that documentation for further information on the concepts mentioned below.

Getting Started

Installation

npm install --save @fmmp/vue

Adding Form Minimap

Before

<script>
    export default {
        name: 'App'
    }
</script>

<template>
    <div id="app">
        <form>
            <input id="Input1"/><br/>
            <input id="Input2"/><br/>
            <input id="Input3"/><br/>
            <input id="Input4"/>
        </form>
    </div>
</template>

After

<script>
    import { FmmVueMinimap, FmmVuePanel } from '@fmmp/vue'
    export default {
        name: 'App',
        components: {
            FmmVueMinimap,
            FmmVuePanel
        },
        data: () => ({
            refPanel: undefined
        }),
        mounted() {
            this.refPanel = this.$refs.panel;
        }
    }
</script>

<style>
    .fmm-frame { height: 50px; }
    .fmm-panel { height: 0; }
</style>

<template>
    <div id="app">
        <div ref='anchor' style='width:20px; height:20px; margin-left:200px'></div>
        <FmmVuePanel ref='panel'/>
        <form>
            <FmmVueMinimap v-if='refPanel' :anchor='this.$refs.anchor' :panel='refPanel' title='Title'/>
            <input id="Input1"/><br/>
            <input id="Input2"/><br/>
            <input id="Input3"/><br/>
            <input id="Input4"/>
        </form>
    </div>
</template>

API

FmmVueMinimap

Component to create and manage FmmMinimap. The minimap is detached when this component is destroyed.

| Method | --- | destructor | takeSnapshot

FmmVuePanel

Component to create and manage FmmPanel.

| Method | --- | destroyDetached

FmmVueStore

Component to create FmmStore.

FmmVuex

Component to create FmmStore when using Vuex.