README

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.

Property	Type	Required
aggregateLabels	FmmMapString
anchor	HTMLElement
customWidgetIds	string[]
debounceMsec	Number
dynamicLabels	string[]
framework	FmmFramework
page	HTMLElement
panel	FmmVuePanel	✓
store	FmmVueStore
title	String	✓
usePanelDetail	Boolean
useWidthToScale	Boolean
verbosity	Number
widgetFactories	FmmWidgetFactory[]

Event	Parameter	Description
update	FmmMinimapSnapshot	Dispatched when the minimap updates itself for whatever reason.

Method
destructor
takeSnapshot

FmmVuePanel

Component to create and manage FmmPanel.

Property	Type	Required
detailParent	HTMLDivElement	✓
vertical	boolean

Method
destroyDetached

FmmVueStore

Component to create FmmStore.

Property	Type	Required
errors	FmmMapErrors
values	FmmMapValues	✓

FmmVuex

Component to create FmmStore when using Vuex.

Property	Type	Required
errors	FmmMapErrors

Usage no npm install needed!