<template>
    <div :class="classes">
        <slot></slot>
    </div>
</template>

<script>
    export default {
      name: 'Pane',
      data() {
        const classes = ['Pane', this.$parent.split, 'className'];
        return {
          classes: classes.join(' '),
          percent: 50
        }
      }
    }
</script>

<style>
    .splitter-pane.vertical.splitter-paneL{
        position: absolute;
        left: 0px;
        height: 100%;
    }
    .splitter-pane.vertical.splitter-paneR{
        position: absolute;
        right: 0px;
        height: 100%;
    }
    .splitter-pane.horizontal.splitter-paneL{
        position: absolute;
        top: 0px;
        width: 100%;
    }
    .splitter-pane.horizontal.splitter-paneR{
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
</style>