vue-vscodesplit

Description

vue-vscodesplit is a Vue Wrapper reconstruction baseed on Vue Split Grid, there three main components <SplitGrid>, <SplitGridArea>, <SplitGridGutter>, same as Vue Split Grid, the difference is that <SplitGridGutter> will be created automatically in <SplitGrid> in this library, so users only need to use <SplitGrid>, <SplitGridArea> when using vue-vscodesplit. and vue-vscodesplit implements split function similar to VsCode editor, include support for viewarea expandsion, spliter highlight when hovered and window resize.

Installation

npm install --save vue-vscodesplit

Usage

ES6 modules, import components manually.

<template>
  <div id="app">
    <SplitGrid  v-bind="splitGridOptions.rootGridOptions">
      <SplitGrid v-bind="splitGridOptions.leftGridOptions.rootGridOptions" >
        <SplitGridArea 
         v-bind="splitGridOptions.leftGridOptions.splitAreaOptions[0]">
           <template v-slot:content>
               <!-- <content> -->
           </template>
        </SplitGridArea>
        <SplitGridArea 
         v-bind="splitGridOptions.leftGridOptions.splitAreaOptions[1]">
            <template v-slot:content>
               <!-- <content> -->
           </template>
        </SplitGridArea>
        <SplitGridArea 
         v-bind="splitGridOptions.leftGridOptions.splitAreaOptions[2]">
            <template v-slot:content>
               <!-- <content> -->
           </template>
        </SplitGridArea>
      </SplitGrid>
      <SplitGridArea 
        v-bind="splitGridOptions.rightGridOptions.rootGridOptions">
      </SplitGridArea>
    </SplitGrid>
  </div>
</template>
<script>
import { SplitGrid, SplitGridArea} from 'vue-vscodesplit';

export default {
  name: 'App',
  components: {
    SplitGrid,
    SplitGridArea
  },
  data:()=>({
      splitGridOptions:{
          rootGridOptions:{
                gutterSize:5,
                proportionalLayout:false
          },
          leftGridOptions:{
                splitAreaOptions:[
                    {'isExpand':false,'initSizeValue':100,'initMinSize':100,'initMaxSize':Number.POSITIVE_INFINITY},
                    {'isExpand':false,'initSizeValue':100,'initMinSize':100,'initMaxSize':Number.POSITIVE_INFINITY},
                    {'isExpand':false,'initSizeValue':100,'initMinSize':100,'initMaxSize':Number.POSITIVE_INFINITY}
                ],
                rootGridOptions:{
                    initSizeValue:250,
                    initMinSize:100,
                    initMaxSize:500,
                    gutterSize:5,
                    direction:'row'
                }
            },
            rightGridOptions:{
                initMinSize:400,
                initMaxSize:Number.POSITIVE_INFINITY,
                gutterSize:5,
                direction:'row'
            }
      }
  })
};
</script>
<style>
body {
  margin: 0;
}
</style>

• Pay attention to the option of last child element in a <SplitGrid>,since vue-vscodesplit is based on CSS grid, the last child element we fill with the remaining size by default('1fr'),so it doesnt need to indicate the 'initSizeValue',and also , you had better to indicate the 'maxSize' to be 'Number.POSITIVE_INFINITY' of last child element.
• props about sizevalue(initMaxSize,initMinSize,initSizeValue,etc) only support 'px' for now

Components

* SplitGrid

The <SplitGrid> component is the main component for creating Split Grids. <SplitGrid> components may be nested.

Props

| name | type | default| description| |:----: |:----:| :----: | :----: | | direction |String|"cloumn"|"cloumn" or "row",direction of splitgrid | |gutterSize|Number|5|define default size of <SplitGridGutter> when <SplitGridGutter> is hovered or dragged by mouse, unit 'px'| |gutterCellSize|Number|1|define default size of <SplitGridGutter> in this split grid when <SplitGridGutter> is deactive, unit 'px' | |sizeUnit|String|'px'|only support 'px' for now| |initSizeValue|Number| |inital size(px) of splitgrid,only used when splitgrid is nested| |initMinSize|Number||minSize(px) of splitgrid,only used when splitgrid is nested| |initMaxSize|Number||maxSize(px) of splitgrid,only used when splitgrid is nested| |cursor|String| |define cursor when mouse on <SplitGridGutter>, default value:'row-resize' for direction of 'row','col-resize' for direction of 'cloumn | |proportionalLayout|Boolean|true|Determines whether the view resize is based on the percentage occupied by each subviewArea| |priority|Number||0:lowPriority 1:highPriority, Determines this <SplitGrid> go to resize first or last when window resize event happened| |resizeable|Boolean|true|indicate the viewarea can be resized by dragging <SplitGridGutter>|

events

• dragStart

  //param
  event:{
      direction// grid direction,
      uuid://uuid of component,
      puuid://uuid of parent component, 
      start//start position of mouse when drag the <SplitGridGutter>
      }

• drag

  //param
  {
      direction// grid direction,
      uuid://uuid of component,
      puuid://uuid of parent component, 
      current//current position of mouse when drag the <SplitGridGutter>
      }

• dragEnd

  //param
  {
      direction// grid direction,
      uuid://uuid of component,
      puuid://uuid of parent component, 
      }

Slots

• default

  //desc: slots for <SplitGrid> <SplitGridArea>

* SplitGridArea

• The <SplitGridArea> component should be used inside <SplitGrid> components, these are your columns or rows, depending on the direction you specified on the <SplitGrid>
• <SplitGridArea> performance depend on props and slots user uesd.it perfom like a expandPanel when title props is used or one of the follow slots slot<expand-icon>``slot<title>``slot<header-append>``slot<content> are used, otherwise it perform like a common container
• <SplitGridArea> components shouldn't be used on their own.

Props

| name | type | default| description| |:----: |:----:| :----: | :----: | |title|String||title of header,only used when <SplitGridArea> perform as expandPanel| |expandAreaHeadHeight|Number|32|indicate header height when <SplitGridArea> perform as expandPanel| |minExpandBodyHeight|Number|100|minimum height of body when <SplitGridArea> is expand as a expandPanel| |isExpand |Boolean|false|Indicates whether the <SplitGridArea> is expanded. Only used when the <SplitGridArea> perform as expandPanel,similar to what the explorer panel implements in VsCode | |sizeUnit|String|'px'|only support 'px' for now| |initSizeValue|Number| |inital size(px) of splitgrid,only meaningful when <SplitGridArea> perform as common container| |initMinSize|Number||init minSize(px) of <SplitGridArea>| |initMaxSize|Number||init maxSize(px) of <SplitGridArea>| |priority|Number||0:lowPriority 1:highPriority, Determines this <SplitGridArea> go to resize first or last when window resize event happened|

slots

<SplitGridArea> perform as common container

• default

  //desc:when default slot is used, `<SplitGridArea>` perform as common container

<SplitGridArea> perform as expandPanel

• title

  //desc: header title

• header-append

  //desc: slot for apeend icons for header

• expand-icon

  //desc:slot for expansion icon for header

• content

  //desc: slot for expand body content

events

• OnExpandChange

  //desc: expand change event
  //props:
  {
      expand:boolean
  }