|
|
|
@ -5,10 +5,14 @@
|
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
|
|
|
|
|
export let type;
|
|
|
|
|
export let min = 50;
|
|
|
|
|
export let min1 = min;
|
|
|
|
|
export let min2 = min;
|
|
|
|
|
export let pos = 50;
|
|
|
|
|
export let fixed = false;
|
|
|
|
|
export let fixed_pos = pos;
|
|
|
|
|
export let min = 50;
|
|
|
|
|
// export let min1 = min;
|
|
|
|
|
// export let min2 = min;
|
|
|
|
|
|
|
|
|
|
console.log({ fixed, pos, fixed_pos });
|
|
|
|
|
|
|
|
|
|
const refs = {};
|
|
|
|
|
const side = type === 'horizontal' ? 'left' : 'top';
|
|
|
|
@ -124,15 +128,15 @@
|
|
|
|
|
height: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
/* @media (max-width: 767px) {
|
|
|
|
|
.pane {
|
|
|
|
|
/* override divider-set dimensions */
|
|
|
|
|
override divider-set dimensions
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
/* @media (min-width: 768px) { */
|
|
|
|
|
.left, .right, .divider {
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
|
@ -150,19 +154,21 @@
|
|
|
|
|
|
|
|
|
|
.top { top: 0; }
|
|
|
|
|
.bottom { bottom: 0; }
|
|
|
|
|
}
|
|
|
|
|
/* } */
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div class="container" bind:this={refs.container}>
|
|
|
|
|
<div class="pane" style="{dimension}: {pos}%;">
|
|
|
|
|
<div class="pane" style="{dimension}: {fixed ? fixed_pos : pos}%;">
|
|
|
|
|
<slot name="a"></slot>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pane" style="{dimension}: {100 - pos}%;">
|
|
|
|
|
<div class="pane" style="{dimension}: {100 - (fixed ? fixed_pos : pos)}%;">
|
|
|
|
|
<slot name="b"></slot>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="{type} divider" style="{side}: calc({pos}% - 8px)" use:drag={setPos}></div>
|
|
|
|
|
{#if !fixed}
|
|
|
|
|
<div class="{type} divider" style="{side}: calc({pos}% - 8px)" use:drag={setPos}></div>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{#if dragging}
|
|
|
|
|