<script setup>
import { useLocalStorage } from "@vueuse/core";
import { Pane, Splitpanes } from "splitpanes";
import { computed, ref } from "vue";
import "splitpanes/dist/splitpanes.css";
const props = defineProps({
  storageKey: { type: String, required: false },
  stateKey: { type: String, required: false, default: "nuxt-devtools-panels-state" },
  leftSize: { type: Number, required: false },
  minSize: { type: Number, required: false },
  horizontal: { type: Boolean, required: false }
});
const state = useLocalStorage(props.stateKey, {}, { listenToStorageChanges: false });
const DEFAULT = 30;
const key = props.storageKey;
const size = key ? computed({
  get: () => state.value[key] || props.leftSize || DEFAULT,
  set: (v) => {
    state.value[key] = v;
  }
}) : ref(props.leftSize || DEFAULT);
</script>

<template>
  <Splitpanes :horizontal="horizontal" h-full of-hidden @resize="size = $event[0].size">
    <Pane h-full class="of-auto!" :size="size" :min-size="$slots.right ? minSize || 10 : 100">
      <slot name="left" />
    </Pane>
    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
      <slot name="right" />
    </Pane>
  </Splitpanes>
</template>

<style>
.splitpanes__splitter{position:relative}.splitpanes__splitter:before{content:"";left:0;position:absolute;top:0;transition:.2s ease;transition:opacity .4s;z-index:1}.splitpanes__splitter:hover:before{background:#8881;opacity:1}.splitpanes--vertical>.splitpanes__splitter{min-width:0!important;width:0!important;--at-apply:border-r border-base}.splitpanes--horizontal>.splitpanes__splitter{height:0!important;min-height:0!important;--at-apply:border-t border-base}.splitpanes--vertical>.splitpanes__splitter:before{height:100%;left:-5px;right:-4px}.splitpanes--horizontal>.splitpanes__splitter:before{bottom:-4px;top:-5px;width:100%}
</style>
