Asva double panel

Double panel layout for vue.js.

The gist

Imagine modal. Then modal inside of modal. This library does the same, just with two panels. Parent on the left - child on the right. Child on the left - parent on the right. Makes no sense? Check demo.

Usage examples

• Trizeri example

Sponsors

Install

• npm: npm install -D asva-double-panel
• yarn: yarn add -D asva-double-panel

Commands

• yarn dev - run dev server (then go to /#/demo)
• yarn dist - bundle distribution package for npm
• yarn demo - bundle demo

How to use

First - create a double panel wrapper component.

In example ListPanelExample and CloudPanelExample are root panels (displayed by default).

<template>
    <DoublePanel :left="leftPanel" :right="rightPanel"/>
</template>

<script>
  import { DoublePanel } from 'asva-double-panel'

  import PanelComponent from './PanelComponent.vue'

  export default {
    components: {
      DoublePanel,
      ListPanelExample,
      CloudPanelExample,
    },
    computed: {
      leftPanel: () => PanelComponent,
      rightPanel: () => PanelComponent,
    },
  }
</script>

Let's dive into panel component structure. 2 things to notice here:

• Register panelMixin in your component to make it a panel component.
• Add value prop to receive payload (toss data from one panel to another).

<template>
    <div class="panel-component-example">
        <p>
            Test value from prop: {{ value.test }}
        </p>
        <p>
            <button @click="$panel.close()">Close</button>
            <button @click="$panel.closeChild()">Close child</button>
        </p>
        <p>
            <button @click="$panel.create()">Create</button>
        </p>
        <p>
            <button @click="$panel.switchPosition()">Switch position</button>
            Position: {{$panel.position}}
        </p>
        <p>
            <button @click="$panel.toggleFullWidth()">Toggle full-width</button>
            Full width: {{$panel.isFullWidth}}
        </p>
    </div>
</template>

<script>
  import { panelMixin } from 'asva-double-panel'

  export default {
    name: 'panel-component',
    mixins: [panelMixin],
    props: ['value'],
  }
</script>

Styles

You have to import styles for double panel to function properly.

• css - ~asva-double-panel/dist/css/main.css

Api

• $panel.close() - close current panel and its descendants.
• $panel.closeChild() - close only panel descendants.
• $panel.switchPosition() - move panel from left to right and vice-versa.
• $panel.toggleFullWidth() - widen the panel to occupy full space (useful for prints and tables).

Create new panel

this.$panel.create(component, [payload, [options]]), where

• component - component object (the thing you get via import Component from 'Component.vue'). If you want to create same component recursively - use this.constructor.
• payload - any data you want to provide into newly created component.
• options - additional options, if you don't provide any - defaults will be used.

Options:

• replaceSelf - Don't create new panel on top, instead replace current one.
• fullWidth [Boolean, default: false] - Create panel in fullWidth mode.
• reuse [Boolean, default: false] - If true, and panel with current component already exists on top of current one - we'll just refresh payload (useful for iframe reuse).
• position ['same' | 'opposite', default 'opposite'] - Defines whether new panel should be created directly on top of current one in opposite side.

Features

• Two panel layout.
• Nested panels.
• Internal panel component.

Feedback

If you feel something is not right - please leave feedback. I might even tweak library a bit for you needs if you case is common. : 3

Licence

MIT