b19da950a6
Use tailwind v4 @theme block so we can use bg-layer-0 instead of bg-[--layer-0] for theme colors.
78 lines
1.5 KiB
Svelte
78 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { getContext, type Snippet } from 'svelte';
|
|
|
|
let index = $state(-1);
|
|
let wrapper: HTMLDivElement;
|
|
|
|
const { children } = $props<{ children?: Snippet }>();
|
|
|
|
$effect(() => {
|
|
if (index === -1) {
|
|
index = getContext<() => number>('registerCell')();
|
|
}
|
|
});
|
|
|
|
const sizes = getContext<{ value: string[] }>('sizes');
|
|
|
|
let downWidth = 0;
|
|
let mouseDown = false;
|
|
let startX = 0;
|
|
|
|
function handleMouseDown(event: MouseEvent) {
|
|
mouseDown = true;
|
|
startX = event.clientX;
|
|
downWidth = wrapper.getBoundingClientRect().width;
|
|
}
|
|
|
|
function handleMouseMove(event: MouseEvent) {
|
|
if (mouseDown) {
|
|
const width = downWidth + startX - event.clientX;
|
|
sizes.value[index] = `${width}px`;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window
|
|
onmouseup={() => (mouseDown = false)}
|
|
onmousemove={handleMouseMove}
|
|
/>
|
|
|
|
{#if index > 0}
|
|
<div
|
|
class="seperator"
|
|
role="button"
|
|
tabindex="0"
|
|
onmousedown={handleMouseDown}
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="cell" bind:this={wrapper}>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style>
|
|
.cell {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.seperator {
|
|
position: relative;
|
|
cursor: ew-resize;
|
|
height: 100%;
|
|
width: 1px;
|
|
background: var(--color-outline);
|
|
}
|
|
.seperator::before {
|
|
content: "";
|
|
cursor: ew-resize;
|
|
position: absolute;
|
|
pointer-events: all;
|
|
height: 100%;
|
|
width: 14px;
|
|
z-index: 2;
|
|
left: -7px;
|
|
}
|
|
</style>
|