<template>
  <el-drawer v-bind="$attrs" :size="drawerSize" :show-close="false" append-to-body>
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
      <el-button @click="toggleDrawerSize" icon="FullScreen" link></el-button>
      <el-button @click="close" link icon="Close"></el-button>
    </template>
    <template v-for="(_value, name) in $slots" #[name]="scopeData">
      <slot :name="name" v-bind="scopeData || {}"></slot>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { useDrawerSize } from './useDrawerSize';

const props = defineProps({
  title: String,
  initialSize: {
    type: Number,
    default: 800
  }
});

const { drawerSize, toggleDrawerSize } = useDrawerSize(props.initialSize);
</script>
