From 9b1aacb1dacfec003b473490fcb47327bef242dd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 1 Jun 2023 11:39:07 +0200
Subject: [PATCH] docs: move slots sections as h2

---
 docs/content/3.forms/4.select-menu.md | 110 +++++++++++++-------------
 docs/content/4.data/1.table.md        |  76 +++++++++---------
 2 files changed, 94 insertions(+), 92 deletions(-)

diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 2775c9ff..e21b8693 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -54,59 +54,6 @@ const selected = ref([])
 ```
 ::
 
-### Slots
-
-You can override the `#label` slot and handle the display yourself.
-
-::component-example
-#default
-:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" multiple>
-    <template #label>
-      <span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
-      <span v-else>Select people</span>
-    </template>
-  </USelectMenu>
-</template>
-```
-::
-
-You can also override the `#default` slot entirely.
-
-::component-example
-#default
-:select-menu-example-button{class="max-w-[12rem] w-full"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
-    <UButton color="gray">
-      {{ selected }}
-
-      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
-    </UButton>
-  </USelectMenu>
-</template>
-```
-::
-
 ### Objects
 
 You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
@@ -201,6 +148,63 @@ props:
 ---
 ::
 
+## Slots
+
+### `#label`
+
+You can override the `#label` slot and handle the display yourself.
+
+::component-example
+#default
+:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" multiple>
+    <template #label>
+      <span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
+      <span v-else>Select people</span>
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+### `#default`
+
+You can also override the `#default` slot entirely.
+
+::component-example
+#default
+:select-menu-example-button{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
+    <UButton color="gray">
+      {{ selected }}
+
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+    </UButton>
+  </USelectMenu>
+</template>
+```
+::
+
 ## Props
 
 :component-props
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index ac4e32e2..d4ebbcca 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -365,11 +365,45 @@ const filteredRows = computed(() => {
 ```
 ::
 
-### Slots
+### Empty
+
+Use the `empty-state` prop to display a message when there are no results.
+
+You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  emptyState:
+    icon: 'i-heroicons-circle-stack-20-solid'
+    label: "No items."
+excludedProps:
+  - emptyState
+---
+::
+
+## Slots
 
 You can use slots to customize the header and data cells of the table.
 
-#### Header
+### `#<column>-header`
 
 Use the `#<column>-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope.
 
@@ -384,12 +418,10 @@ The `on-sort` property is a function that you can call to sort the table and acc
 Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
 ::
 
-#### Data
+### `#<column>-data`
 
 Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
 
-#### Example
-
 You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
 
 ::component-example{class="grid"}
@@ -449,40 +481,6 @@ const selected = ref([people[1]])
 ```
 ::
 
-### Empty
-
-Use the `empty-state` prop to display a message when there are no results.
-
-You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
-
-You can also set it to `null` to hide the empty state.
-
-::component-card
----
-padding: false
-overflowClass: 'overflow-x-auto'
-baseProps:
-  class: 'w-full'
-  columns:
-    - key: 'id'
-      label: 'ID'
-    - key: 'name'
-      label: 'Name'
-    - key: 'title'
-      label: 'Title'
-    - key: 'email'
-      label: 'Email'
-    - key: 'role'
-      label: 'Role'
-props:
-  emptyState:
-    icon: 'i-heroicons-circle-stack-20-solid'
-    label: "No items."
-excludedProps:
-  - emptyState
----
-::
-
 ## Props
 
 :component-props