<script setup lang="ts">
import KsSplitter from '../components/KsSplitter.vue'
withDefaults(defineProps<{ asideWidth?: string; dense?: boolean; storageKey?: string; initialRatio?: number }>(), {
  asideWidth: '28rem',
  dense: false,
  storageKey: 'ks_crud_splitter_ratio',
  initialRatio: 50,
})


</script>

<template>
  <section class="ks-crud-workspace" :class="{ dense }">
    <header v-if="$slots.toolbar"><slot name="toolbar" /></header>
    <div v-if="$slots.aside" class="ks-crud-workspace__body has-aside">
      <KsSplitter :storage-key="storageKey" :initial-ratio="initialRatio">
        <template #left>
          <main class="ks-crud-main"><slot /></main>
        </template>
        <template #right>
          <aside class="ks-crud-aside"><slot name="aside" /></aside>
        </template>
      </KsSplitter>
    </div>
    <div v-else class="ks-crud-workspace__body single">
      <main class="ks-crud-main"><slot /></main>
    </div>
    <footer v-if="$slots.actions"><slot name="actions" /></footer>
  </section>
</template>

<style scoped>
.ks-crud-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
  flex: 1;
  min-height: 0;
  height: 100%;
}

.ks-crud-workspace__body {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
}

.ks-crud-main,
.ks-crud-aside {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  box-sizing: border-box;
}

.dense {
  gap: var(--ks-space-2);
}
</style>

