<!-- 折叠分割面板 -->
<template>
  <div class="w-full h-full">
    <SplitterGroup :direction="layout" class="splitter-group">
      <slot></slot>
    </SplitterGroup collapsible>
  </div>
</template>

<script setup lang="ts">
import { provide } from 'vue'
import { SplitterGroup } from 'reka-ui'

const props = withDefaults(
  defineProps<{
    layout?: 'vertical' | 'horizontal'
    value?: string[]
  }>(),
  {
    layout: 'vertical'
  }
)

const emit = defineEmits<{
  (e: 'update:value', value: string[]): void
}>()

provide('direction', props.layout)

</script>

<style lang="less" scoped>
::v-deep(.splitter-group) {
  .splitter-handle:last-child {
    display: none;
  }
}
</style>
