splitters

packages/web/src/datagrid/DataGrid.svelte

@@ -1,6 +1,28 @@
 <script lang="ts">
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
+
   export let config;
   export let gridCoreComponent;
+  export let showReferences = true;
 </script>
 
-<svelte:component this={gridCoreComponent} {...$$props} />
+<HorizontalSplitter initialValue="300px">
+  <div class="left" slot="1">
+    <WidgetColumnBar>
+      <WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'} />
+    </WidgetColumnBar>
+  </div>
+  <div slot="2">
+    <svelte:component this={gridCoreComponent} {...$$props} />
+  </div>
+</HorizontalSplitter>
+
+<style>
+  .left {
+    display: flex;
+    flex: 1;
+    background-color: var(--theme-bg-0);
+  }
+</style>

packages/web/src/elements/HorizontalSplitter.svelte

@@ -0,0 +1,59 @@
+<script context="module">
+  export function computeSplitterSize(initialValue, clientSize) {
+    if (_.isString(initialValue) && initialValue.endsWith('px')) return parseInt(initialValue.slice(0, -2));
+    if (_.isString(initialValue) && initialValue.endsWith('%'))
+      return (clientSize * parseFloat(initialValue.slice(0, -1))) / 100;
+    return clientSize / 2;
+  }
+</script>
+
+<script>
+  import _ from 'lodash';
+
+  import splitterDrag from '../utility/splitterDrag';
+
+  export let isSplitter = true;
+  export let initialValue = undefined;
+
+  let size = 0;
+  let clientWidth;
+
+  $: size = computeSplitterSize(initialValue, clientWidth);
+</script>
+
+<div class="container" bind:clientWidth>
+  <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
+    <slot name="1" />
+  </div>
+  {#if isSplitter}
+    <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
+    <div class="child2">
+      <slot name="2" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    flex: 1;
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .child1 {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .child2 {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+</style>

packages/web/src/elements/VerticalSplitter.svelte

@@ -0,0 +1,52 @@
+<script>
+  import _ from 'lodash';
+
+  import splitterDrag from '../utility/splitterDrag';
+  import { computeSplitterSize } from './HorizontalSplitter.svelte';
+
+  export let isSplitter = true;
+  export let initialValue = undefined;
+
+  let size = 0;
+  let clientHeight;
+
+  $: size = computeSplitterSize(initialValue, clientHeight);
+</script>
+
+<div class="container" bind:clientHeight>
+  <div class="child1" style={isSplitter ? `height:${size}px; min-height:${size}px; max-height:${size}px}` : `flex:1`}>
+    <slot name="1" />
+  </div>
+  {#if isSplitter}
+    <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
+    <div class="child2">
+      <slot name="2" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    flex: 1;
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    flex-direction: column;
+  }
+
+  .child1 {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .child2 {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+</style>