nuxt-overlay-slot

Overlay 元件 slot 與寬度規約

#body slot（MUST）

Nuxt UI v3 的 USlideover / UModal / UDrawer default slot 語意是 trigger（開啟 overlay 的按鈕），#body slot 才有內建 overflow-y-auto。

body 內容放 default slot → 超出 viewport 高度時無法捲動。

<!-- ✅ 正確：controlled mode，body 在 #body slot -->
<USlideover :open="open" title="校正資料" @update:open="emit('update:open', $event)">
  <template #body>
    <div class="space-y-4">...</div>
  </template>
  <template #footer>
    <div class="flex justify-end gap-3">...</div>
  </template>
</USlideover>

NEVER 把 body 內容放 default slot（即非 <template #body> / <template #content> 包裹的直接子元素）。

標題走 props，不進 body（MUST）

每一個用 #body 的 UModal / USlideover / UDrawer，標題與副標 MUST 由 title / description prop（或 #title / #description slot）承載——不是只有新寫的那個，既有檔案改到時一併補。

close prop 預設 true，header 的 v-if 條件含 props.close，所以 header 一定會渲染；而 title/description 的 wrapper 只認 props.title / props.description。兩者皆缺時的實際結果：

• header 塌成一條只有 X 的空白帶，且 theme header 帶 min-h-(--ui-header-height)，空的也佔固定高度
• theme content 帶 divide-y，那條空白帶下方還會畫出分隔線 → 看起來像巢狀 card
• <DialogTitle /> 渲染為空 → dialog 沒有 accessible name

<!-- ✅ 正確 -->
<UModal :title="editing ? '編輯假別' : '新增假別'" :description="editing ? '修改假別設定' : '建立新的請假類型'">
  <template #body>
    <UForm class="flex flex-col gap-4" :schema="schema" :state="state">…</UForm>
  </template>
</UModal>

<!-- ❌ 空 header + 標題錯位 + 無 accessible name -->
<UModal>
  <template #body>
    <UForm class="flex flex-col gap-4 p-6" :schema="schema" :state="state">
      <div class="flex flex-col gap-1">
        <h3 class="text-base font-semibold">新增假別</h3>
        <p class="text-sm text-muted">建立新的請假類型</p>
      </div>
      …

body wrapper 元件（AppFormLayout 這類自帶 title prop 的）同受此約束：title 給外層 overlay，不給 body 內的 wrapper，否則同樣是空 header + 標題掉進 body。