Split panel component

[m0ksem]

Live examples:

• https://sfc.vuejs.org/
• https://antoniandre.github.io/splitpanes/
• https://www.primefaces.org/primevue/splitter
• https://quasar.dev/vue-components/splitter#basic
• http://iview.talkingdata.com/#/components/split-en

References:

• https://split.js.org/ (easy to implement vue wrapper with this library)
• https://github.com/antoniandre/splitpanes/tree/master/src/components/splitpanes

Splitter tag variants:

• va-split,
• va-splitter,
• va-split-panes,
• va-split-panels.

Splitter props:

• resizable: boolean - may be disabled instead. Prohibits splitter panes size change.
• direction: 'horizontal' | 'vertical' - may be isHorizontal boolean instead.
• gutterSize: number - in px. Width/height of the element, that triggers resizing.
• limits: [number, number] - in px, default min/max size value for all panes. Max value ignored, if max width/height of the all panes < splitter width/height.
• paneSize: number - default width/height of each pane in percents (100 / panes amount).
• maximizeWithDblClick: boolean - maximize next pane width via gutter double click.
• leftPaneMaximization: boolean - flag to maximize previous pane width/height instead of next.

Splitter emits:

• update:modelValue: number[] - payload contains all panes width in px.

Splitter slots

• before (left, start).
• after (right, end).
• gutter (to overwrite VaDivider as a default).

Usage example:

<va-splitter direction="horizontal">
   <template #before="{ size }">
      Left
   </template>
   <template #after="{ size }">
      Right
   </template>
</va-split-panel>

[m0ksem]

Can be part of #1430

[asvae]

https://quasar.dev/vue-components/splitter#introduction

[xx13]

added to my to-do list ✅

[aluarius]

Closed via #2068