From 7bdb923691bbda4b163b7507ced11ee831565812 Mon Sep 17 00:00:00 2001
From: Everton <Evertonwingert@outlook.com>
Date: Tue, 28 Nov 2023 21:44:28 -0300
Subject: [PATCH 1/4] feat(Table): expand row

---
 .../examples/TableExampleExpandable.vue       | 47 ++++++++++++
 docs/content/4.data/1.table.md                | 14 ++++
 src/runtime/components/data/Table.vue         | 71 +++++++++++++++----
 3 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 docs/components/content/examples/TableExampleExpandable.vue

diff --git a/docs/components/content/examples/TableExampleExpandable.vue b/docs/components/content/examples/TableExampleExpandable.vue
new file mode 100644
index 0000000000..52337e4697
--- /dev/null
+++ b/docs/components/content/examples/TableExampleExpandable.vue
@@ -0,0 +1,47 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable :rows="people">
+    <template #expand="{ row }">
+      <Placeholder class="h-36" />
+    </template>
+  </UTable>
+</template>
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index f210f4baec..c5a36ea4a1 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -244,6 +244,20 @@ componentProps:
 ---
 ::
 
+### Expandable
+
+You can use the `expand` slot to display extra information about a row. You will have access to the `row` property in the slot scope.
+
+::component-example{class="grid"}
+---
+padding: false
+component: 'table-example-expandable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+
 ### Loading
 
 Use the `loading` prop to display a loading state.
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index be65e7df9a..fb5b324891 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -7,6 +7,10 @@
             <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
           </th>
 
+          <th v-if="$slots.expand" scope="col" :class="ui.tr.base">
+            <span class="sr-only">Expand</span>
+          </th>
+
           <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
@@ -49,17 +53,48 @@
         </tr>
 
         <template v-else>
-          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
-            <td v-if="modelValue" :class="ui.checkbox.padding">
-              <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
-            </td>
-
-            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">
-              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
-                {{ getRowData(row, column.key) }}
-              </slot>
-            </td>
-          </tr>
+          <template v-for="(row, index) in rows" :key="index">
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+              <td v-if="modelValue" :class="ui.checkbox.padding">
+                <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
+              </td>
+
+              <td
+                v-if="$slots.expand"
+                :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
+              >
+                <UButton
+                  color="white"
+                  variant="link"
+                  :padded="false"
+                  @click="toggleOpened(index)"
+                >
+                  <UIcon
+                    name="i-heroicons-chevron-down"
+                    aria-hidden="true"
+                    :class="{
+                      'rotate-180': openedRows.includes(index),
+                    }"
+                  />
+                </UButton>
+              </td>
+
+              <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">
+                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+                  {{ getRowData(row, column.key) }}
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="openedRows.includes(index)">
+              <td colspan="100%">
+                <slot
+                  name="expand"
+                  :row="row" 
+                  :index="index"
+                />
+              </td>
+            </tr>
+          </template>
         </template>
       </tbody>
     </table>
@@ -160,6 +195,8 @@ export default defineComponent({
 
     const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
+    const openedRows = ref([])
+
     const defaultSort = { column: sort.value.column, direction: null }
 
     const rows = computed(() => {
@@ -271,6 +308,14 @@ export default defineComponent({
       return get(row, rowKey, defaultValue)
     }
 
+    function toggleOpened (index: number) {
+      if (openedRows.value.includes(index)) {
+        openedRows.value = openedRows.value.filter((i) => i !== index)
+      } else {
+        openedRows.value.push(index)
+      }
+    }
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -287,11 +332,13 @@ export default defineComponent({
       emptyState,
       // eslint-disable-next-line vue/no-dupe-keys
       loadingState,
+      openedRows,
       isSelected,
       onSort,
       onSelect,
       onChange,
-      getRowData
+      getRowData,
+      toggleOpened
     }
   }
 })

From 6eb0003715a34e8eac4ab2d5049471676fee069c Mon Sep 17 00:00:00 2001
From: Everton <Evertonwingert@outlook.com>
Date: Tue, 28 Nov 2023 22:29:41 -0300
Subject: [PATCH 2/4] refactor: update toggle button

---
 src/runtime/components/data/Table.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index fb5b324891..19dd5c6788 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -64,19 +64,13 @@
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
               >
                 <UButton
-                  color="white"
-                  variant="link"
+                  color="gray"
+                  variant="ghost"
                   :padded="false"
+                  size="2xs"
+                  :icon="openedRows.includes(index) ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
                   @click="toggleOpened(index)"
-                >
-                  <UIcon
-                    name="i-heroicons-chevron-down"
-                    aria-hidden="true"
-                    :class="{
-                      'rotate-180': openedRows.includes(index),
-                    }"
-                  />
-                </UButton>
+                />
               </td>
 
               <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">

From d977a97427bfb4a2ffc8839ddfa58481fc713eed Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 23 Jul 2024 15:16:41 +0200
Subject: [PATCH 3/4] up

---
 docs/content/2.components/table.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index ea1a598e28..80d33946a5 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -314,7 +314,6 @@ componentProps:
 ---
 ::
 
-
 ### Loading
 
 Use the `loading` prop to indicate that data is currently loading with an indeterminate [Progress](/components/progress#indeterminate) bar.

From 8c118a0e800b93ff67a4cedd25832b036513c0aa Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 23 Jul 2024 15:34:49 +0200
Subject: [PATCH 4/4] up

---
 .../content/examples/TableExampleExpandable.vue       |  4 +++-
 docs/content/2.components/table.md                    |  2 +-
 src/runtime/components/data/Table.vue                 | 11 ++++++-----
 src/runtime/ui.config/data/table.ts                   | 10 ++++++++++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/components/content/examples/TableExampleExpandable.vue b/docs/components/content/examples/TableExampleExpandable.vue
index 52337e4697..90f1adf239 100644
--- a/docs/components/content/examples/TableExampleExpandable.vue
+++ b/docs/components/content/examples/TableExampleExpandable.vue
@@ -41,7 +41,9 @@ const people = [{
 <template>
   <UTable :rows="people">
     <template #expand="{ row }">
-      <Placeholder class="h-36" />
+      <div class="p-4">
+        <pre>{{ row }}</pre>
+      </div>
     </template>
   </UTable>
 </template>
diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index 80d33946a5..fa9776d98e 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -301,7 +301,7 @@ componentProps:
 ---
 ::
 
-### Expandable
+### Expandable :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
 
 You can use the `expand` slot to display extra information about a row. You will have access to the `row` property in the slot scope.
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 4aaf7e9aee..6be9c4a7ab 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -81,11 +81,8 @@
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
               >
                 <UButton
-                  color="gray"
-                  variant="ghost"
-                  :padded="false"
-                  size="2xs"
-                  :icon="openedRows.includes(index) ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
+                  v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
+                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
                   @click="toggleOpened(index)"
                 />
               </td>
@@ -203,6 +200,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.sortDescIcon
     },
+    expandButton: {
+      type: Object as PropType<Button>,
+      default: () => config.default.expandButton as Button
+    },
     loading: {
       type: Boolean,
       default: false
diff --git a/src/runtime/ui.config/data/table.ts b/src/runtime/ui.config/data/table.ts
index 87f989da55..1e971f6801 100644
--- a/src/runtime/ui.config/data/table.ts
+++ b/src/runtime/ui.config/data/table.ts
@@ -37,6 +37,9 @@ export default {
     label: 'text-sm text-center text-gray-900 dark:text-white',
     icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
   },
+  expand: {
+    icon: 'transform transition-transform duration-200'
+  },
   progress: {
     wrapper: 'absolute inset-x-0 -bottom-[0.5px] p-0'
   },
@@ -51,6 +54,13 @@ export default {
       variant: 'ghost' as const,
       class: '-m-1.5'
     },
+    expandButton: {
+      icon: 'i-heroicons-chevron-down',
+      color: 'gray' as const,
+      variant: 'ghost' as const,
+      size: 'xs' as const,
+      class: '-my-1.5 align-middle'
+    },
     checkbox: {
       color: 'primary' as const
     },