From 74b0a8e162137690ac1f4f7928febbd6bcc564aa Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 29 Apr 2024 17:26:58 +0200
Subject: [PATCH 1/4] fix: make NeTable responsive and accessible

---
 src/components/NeTable.vue         | 16 +++++++++-
 src/components/NeTableBody.vue     |  6 +++-
 src/components/NeTableCell.vue     | 18 +++++++++++-
 src/components/NeTableHead.vue     |  8 ++++-
 src/components/NeTableHeadCell.vue |  6 +++-
 src/components/NeTableRow.vue      |  6 +++-
 stories/NeTable.stories.ts         | 47 ++++++++++++++++--------------
 7 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index 0417027..acb1b84 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -1,7 +1,21 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script lang="ts" setup>
+defineProps({
+  ariaLabel: {
+    type: String,
+    required: true
+  }
+})
+</script>
 <template>
   <div class="overflow-x-auto rounded-lg border border-gray-300 shadow-sm dark:border-gray-600">
     <table
-      class="w-full table-auto divide-y divide-gray-300 bg-white text-left text-sm font-normal text-gray-700 dark:divide-gray-600 dark:bg-gray-950 dark:text-gray-200"
+      role="grid"
+      :aria-label="ariaLabel"
+      class="grid w-full table-auto bg-white text-left text-sm font-normal text-gray-700 dark:bg-gray-950 dark:text-gray-200 md:table md:divide-y md:divide-gray-300 md:dark:divide-gray-600"
     >
       <slot />
     </table>
diff --git a/src/components/NeTableBody.vue b/src/components/NeTableBody.vue
index 3907ef6..fc20628 100644
--- a/src/components/NeTableBody.vue
+++ b/src/components/NeTableBody.vue
@@ -1,5 +1,9 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
-  <tbody class="divide-y divide-gray-300 dark:divide-gray-600">
+  <tbody class="block md:table-row-group divide-y divide-gray-300 dark:divide-gray-600">
     <slot />
   </tbody>
 </template>
diff --git a/src/components/NeTableCell.vue b/src/components/NeTableCell.vue
index 815b245..eb01e8e 100644
--- a/src/components/NeTableCell.vue
+++ b/src/components/NeTableCell.vue
@@ -1,5 +1,21 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script lang="ts" setup>
+defineProps({
+  dataLabel: {
+    // This attribute replaces table header in mobile viewport
+    type: String,
+    required: true
+  }
+})
+</script>
 <template>
-  <td class="px-6 py-4">
+  <td :data-label="dataLabel" class="grid grid-cols-2 px-6 py-4 md:table-cell">
+    <span class="font-medium text-gray-900 dark:text-gray-50 md:hidden">
+      {{ dataLabel }}
+    </span>
     <slot />
   </td>
 </template>
diff --git a/src/components/NeTableHead.vue b/src/components/NeTableHead.vue
index 660adb3..b3cdce8 100644
--- a/src/components/NeTableHead.vue
+++ b/src/components/NeTableHead.vue
@@ -1,5 +1,11 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
-  <thead class="bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50">
+  <thead
+    class="hidden bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50 md:table-header-group"
+  >
     <tr>
       <slot></slot>
     </tr>
diff --git a/src/components/NeTableHeadCell.vue b/src/components/NeTableHeadCell.vue
index b8615e6..04cb561 100644
--- a/src/components/NeTableHeadCell.vue
+++ b/src/components/NeTableHeadCell.vue
@@ -1,5 +1,9 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
-  <th class="px-6 py-3">
+  <th scope="col" class="px-6 py-3">
     <slot></slot>
   </th>
 </template>
diff --git a/src/components/NeTableRow.vue b/src/components/NeTableRow.vue
index 926f7c1..5faef38 100644
--- a/src/components/NeTableRow.vue
+++ b/src/components/NeTableRow.vue
@@ -1,5 +1,9 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
-  <tr>
+  <tr class="grid md:table-row">
     <slot />
   </tr>
 </template>
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index 6849f29..b1fd38f 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -25,7 +25,10 @@ const meta: Meta<typeof NeTable> = {
       return { args }
     },
     template: `
-      <NeTable>
+      <div class="mb-6 text-gray-700 dark:text-gray-300">
+        NeTable is responsive: it automatically changes its layout on smaller screens
+      </div>
+      <NeTable ariaLabel="Aria label for the table">
         <NeTableHead>
           <NeTableHeadCell>Game</NeTableHeadCell>
           <NeTableHeadCell>Platform</NeTableHeadCell>
@@ -33,39 +36,39 @@ const meta: Meta<typeof NeTable> = {
         </NeTableHead>
         <NeTableBody>
           <NeTableRow>
-            <NeTableCell>The Legend of Zelda: Breath of the Wild</NeTableCell>
-            <NeTableCell>Nintendo Switch</NeTableCell>
-            <NeTableCell>2017</NeTableCell>
+            <NeTableCell data-label="Game">The Legend of Zelda: Breath of the Wild</NeTableCell>
+            <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
+            <NeTableCell data-label="Year">2017</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>Super Mario Odyssey</NeTableCell>
-            <NeTableCell>Nintendo Switch</NeTableCell>
-            <NeTableCell>2017</NeTableCell>
+            <NeTableCell data-label="Game">Super Mario Odyssey</NeTableCell>
+            <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
+            <NeTableCell data-label="Year">2017</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>The Legend of Zelda: Ocarina of Time</NeTableCell>
-            <NeTableCell>Nintendo 64</NeTableCell>
-            <NeTableCell>1998</NeTableCell>
+            <NeTableCell data-label="Game">The Legend of Zelda: Ocarina of Time</NeTableCell>
+            <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
+            <NeTableCell data-label="Year">1998</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>Super Mario 64</NeTableCell>
-            <NeTableCell>Nintendo 64</NeTableCell>
-            <NeTableCell>1996</NeTableCell>
+            <NeTableCell data-label="Game">Super Mario 64</NeTableCell>
+            <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
+            <NeTableCell data-label="Year">1996</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>The Legend of Zelda: A Link to the Past</NeTableCell>
-            <NeTableCell>Super Nintendo</NeTableCell>
-            <NeTableCell>1991</NeTableCell>
+            <NeTableCell data-label="Game">The Legend of Zelda: A Link to the Past</NeTableCell>
+            <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
+            <NeTableCell data-label="Year">1991</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>Super Mario World</NeTableCell>
-            <NeTableCell>Super Nintendo</NeTableCell>
-            <NeTableCell>1990</NeTableCell>
+            <NeTableCell data-label="Game">Super Mario World</NeTableCell>
+            <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
+            <NeTableCell data-label="Year">1990</NeTableCell>
           </NeTableRow>
           <NeTableRow>
-            <NeTableCell>The Legend of Zelda</NeTableCell>
-            <NeTableCell>Nintendo Entertainment System</NeTableCell>
-            <NeTableCell>1986</NeTableCell>
+            <NeTableCell data-label="Game">The Legend of Zelda</NeTableCell>
+            <NeTableCell data-label="Platform">Nintendo Entertainment System</NeTableCell>
+            <NeTableCell data-label="Year">1986</NeTableCell>
           </NeTableRow>
         </NeTableBody>
       </NeTable>

From df295994071c6f50874acb36224108dfa452e362 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 2 May 2024 16:23:51 +0200
Subject: [PATCH 2/4] fix: make NeTable responsiveness configurable

---
 src/components/NeTable.vue     |  21 ++++++-
 src/components/NeTableBody.vue |  23 +++++++-
 src/components/NeTableCell.vue |  29 +++++++++-
 src/components/NeTableHead.vue |  24 +++++++-
 src/components/NeTableRow.vue  |  21 ++++++-
 stories/NeTable.stories.ts     | 102 +++++++++++++++++----------------
 6 files changed, 166 insertions(+), 54 deletions(-)

diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index acb1b84..dc745e4 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -3,19 +3,38 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
+import { type PropType } from 'vue'
+
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
 defineProps({
   ariaLabel: {
     type: String,
     required: true
+  },
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
   }
 })
+
+const tableCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:table sm:divide-y sm:divide-gray-300 sm:dark:divide-gray-600',
+  md: 'md:table md:divide-y md:divide-gray-300 md:dark:divide-gray-600',
+  lg: 'lg:table lg:divide-y lg:divide-gray-300 lg:dark:divide-gray-600',
+  xl: 'xl:table xl:divide-y xl:divide-gray-300 xl:dark:divide-gray-600',
+  '2xl': '2xl:table 2xl:divide-y 2xl:divide-gray-300 2xl:dark:divide-gray-600'
+}
 </script>
 <template>
   <div class="overflow-x-auto rounded-lg border border-gray-300 shadow-sm dark:border-gray-600">
     <table
       role="grid"
       :aria-label="ariaLabel"
-      class="grid w-full table-auto bg-white text-left text-sm font-normal text-gray-700 dark:bg-gray-950 dark:text-gray-200 md:table md:divide-y md:divide-gray-300 md:dark:divide-gray-600"
+      :class="[
+        `grid w-full table-auto bg-white text-left text-sm font-normal text-gray-700 dark:bg-gray-950 dark:text-gray-200`,
+        tableCardStyle[cardBreakpoint]
+      ]"
     >
       <slot />
     </table>
diff --git a/src/components/NeTableBody.vue b/src/components/NeTableBody.vue
index fc20628..ff79399 100644
--- a/src/components/NeTableBody.vue
+++ b/src/components/NeTableBody.vue
@@ -2,8 +2,29 @@
   Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import type { Breakpoint } from './NeTable.vue'
+
+defineProps({
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
+  }
+})
+
+const tbodyCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:table-row-group',
+  md: 'md:table-row-group',
+  lg: 'lg:table-row-group',
+  xl: 'xl:table-row-group',
+  '2xl': '2xl:table-row-group'
+}
+</script>
 <template>
-  <tbody class="block md:table-row-group divide-y divide-gray-300 dark:divide-gray-600">
+  <tbody
+    :class="[`block divide-y divide-gray-300 dark:divide-gray-600`, tbodyCardStyle[cardBreakpoint]]"
+  >
     <slot />
   </tbody>
 </template>
diff --git a/src/components/NeTableCell.vue b/src/components/NeTableCell.vue
index eb01e8e..b71ed70 100644
--- a/src/components/NeTableCell.vue
+++ b/src/components/NeTableCell.vue
@@ -3,17 +3,42 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Breakpoint } from './NeTable.vue'
+
 defineProps({
   dataLabel: {
     // This attribute replaces table header in mobile viewport
     type: String,
     required: true
+  },
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
   }
 })
+
+const tdCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:table-cell',
+  md: 'md:table-cell',
+  lg: 'lg:table-cell',
+  xl: 'xl:table-cell',
+  '2xl': '2xl:table-cell'
+}
+
+const dataLabelCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:hidden',
+  md: 'md:hidden',
+  lg: 'lg:hidden',
+  xl: 'xl:hidden',
+  '2xl': '2xl:hidden'
+}
 </script>
 <template>
-  <td :data-label="dataLabel" class="grid grid-cols-2 px-6 py-4 md:table-cell">
-    <span class="font-medium text-gray-900 dark:text-gray-50 md:hidden">
+  <td :data-label="dataLabel" :class="[`grid grid-cols-2 px-6 py-4`, tdCardStyle[cardBreakpoint]]">
+    <span
+      :class="[`font-medium text-gray-900 dark:text-gray-50`, dataLabelCardStyle[cardBreakpoint]]"
+    >
       {{ dataLabel }}
     </span>
     <slot />
diff --git a/src/components/NeTableHead.vue b/src/components/NeTableHead.vue
index b3cdce8..cad86d2 100644
--- a/src/components/NeTableHead.vue
+++ b/src/components/NeTableHead.vue
@@ -2,9 +2,31 @@
   Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import type { Breakpoint } from './NeTable.vue'
+
+defineProps({
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
+  }
+})
+
+const tbodyCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:table-header-group',
+  md: 'md:table-header-group',
+  lg: 'lg:table-header-group',
+  xl: 'xl:table-header-group',
+  '2xl': '2xl:table-header-group'
+}
+</script>
 <template>
   <thead
-    class="hidden bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50 md:table-header-group"
+    :class="[
+      `hidden bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50`,
+      tbodyCardStyle[cardBreakpoint]
+    ]"
   >
     <tr>
       <slot></slot>
diff --git a/src/components/NeTableRow.vue b/src/components/NeTableRow.vue
index 5faef38..9c6ea50 100644
--- a/src/components/NeTableRow.vue
+++ b/src/components/NeTableRow.vue
@@ -2,8 +2,27 @@
   Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import type { Breakpoint } from './NeTable.vue'
+
+defineProps({
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
+  }
+})
+
+const trCardStyle: Record<Breakpoint, string> = {
+  sm: 'sm:table-row',
+  md: 'md:table-row',
+  lg: 'lg:table-row',
+  xl: 'xl:table-row',
+  '2xl': '2xl:table-row'
+}
+</script>
 <template>
-  <tr class="grid md:table-row">
+  <tr :class="[`grid`, trCardStyle[cardBreakpoint]]">
     <slot />
   </tr>
 </template>
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index b1fd38f..cd3ea22 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -12,6 +12,13 @@ const meta: Meta<typeof NeTable> = {
   title: 'Visual/NeTable',
   component: NeTable,
   tags: ['autodocs'],
+  argTypes: {
+    cardBreakpoint: { control: 'inline-radio', options: ['sm', 'md', 'lg', 'xl', '2xl'] }
+  },
+  args: {
+    ariaLabel: 'Aria label for the table',
+    cardBreakpoint: 'md'
+  },
   render: (args) => ({
     components: {
       NeTable,
@@ -25,54 +32,53 @@ const meta: Meta<typeof NeTable> = {
       return { args }
     },
     template: `
-      <div class="mb-6 text-gray-700 dark:text-gray-300">
-        NeTable is responsive: it automatically changes its layout on smaller screens
-      </div>
-      <NeTable ariaLabel="Aria label for the table">
-        <NeTableHead>
-          <NeTableHeadCell>Game</NeTableHeadCell>
-          <NeTableHeadCell>Platform</NeTableHeadCell>
-          <NeTableHeadCell>Year</NeTableHeadCell>
-        </NeTableHead>
-        <NeTableBody>
-          <NeTableRow>
-            <NeTableCell data-label="Game">The Legend of Zelda: Breath of the Wild</NeTableCell>
-            <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
-            <NeTableCell data-label="Year">2017</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">Super Mario Odyssey</NeTableCell>
-            <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
-            <NeTableCell data-label="Year">2017</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">The Legend of Zelda: Ocarina of Time</NeTableCell>
-            <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
-            <NeTableCell data-label="Year">1998</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">Super Mario 64</NeTableCell>
-            <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
-            <NeTableCell data-label="Year">1996</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">The Legend of Zelda: A Link to the Past</NeTableCell>
-            <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
-            <NeTableCell data-label="Year">1991</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">Super Mario World</NeTableCell>
-            <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
-            <NeTableCell data-label="Year">1990</NeTableCell>
-          </NeTableRow>
-          <NeTableRow>
-            <NeTableCell data-label="Game">The Legend of Zelda</NeTableCell>
-            <NeTableCell data-label="Platform">Nintendo Entertainment System</NeTableCell>
-            <NeTableCell data-label="Year">1986</NeTableCell>
-          </NeTableRow>
-        </NeTableBody>
-      </NeTable>
-    `
+  <div class="mb-6 text-gray-700 dark:text-gray-300">
+    NeTable is responsive: it automatically changes its layout on smaller screens
+  </div>
+  <NeTable v-bind="args">
+    <NeTableHead :cardBreakpoint="args.cardBreakpoint">
+      <NeTableHeadCell>Game</NeTableHeadCell>
+      <NeTableHeadCell>Platform</NeTableHeadCell>
+      <NeTableHeadCell>Year</NeTableHeadCell>
+    </NeTableHead>
+    <NeTableBody :cardBreakpoint="args.cardBreakpoint">
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: Breath of the Wild</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Switch</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">2017</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario Odyssey</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Switch</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">2017</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: Ocarina of Time</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo 64</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1998</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario 64</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo 64</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1996</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: A Link to the Past</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Super Nintendo</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1991</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario World</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Super Nintendo</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1990</NeTableCell>
+      </NeTableRow>
+      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Entertainment System</NeTableCell>
+        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1986</NeTableCell>
+      </NeTableRow>
+    </NeTableBody>
+  </NeTable>`
   })
 }
 

From ab3a4af178ccccf350117882be245125359aea20 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 6 May 2024 16:20:58 +0200
Subject: [PATCH 3/4] fix: add skeleton and pagination to NeTable

---
 src/components/NeTable.vue         | 27 +++++++++++++++++-
 src/components/NeTableSkeleton.vue | 44 ++++++++++++++++++++++++++++++
 stories/NeTable.stories.ts         | 15 ++++++++--
 3 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/components/NeTableSkeleton.vue

diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index dc745e4..bf33256 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -4,6 +4,7 @@
 -->
 <script lang="ts" setup>
 import { type PropType } from 'vue'
+import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
@@ -15,6 +16,18 @@ defineProps({
   cardBreakpoint: {
     type: String as PropType<Breakpoint>,
     default: 'md'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  skeletonRows: {
+    type: Number,
+    default: 8
+  },
+  skeletonColumns: {
+    type: Number,
+    default: 4
   }
 })
 
@@ -36,7 +49,19 @@ const tableCardStyle: Record<Breakpoint, string> = {
         tableCardStyle[cardBreakpoint]
       ]"
     >
-      <slot />
+      <template v-if="loading">
+        <NeTableSkeleton
+          :rows="skeletonRows"
+          :columns="skeletonColumns"
+          :card-breakpoint="cardBreakpoint"
+        />
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </table>
   </div>
+  <div v-if="$slots.paginator" class="mt-6 flex flex-row justify-end">
+    <slot name="paginator" />
+  </div>
 </template>
diff --git a/src/components/NeTableSkeleton.vue b/src/components/NeTableSkeleton.vue
new file mode 100644
index 0000000..e9b4de4
--- /dev/null
+++ b/src/components/NeTableSkeleton.vue
@@ -0,0 +1,44 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import NeTableHead from './NeTableHead.vue'
+import NeTableHeadCell from './NeTableHeadCell.vue'
+import NeSkeleton from './NeSkeleton.vue'
+import NeTableBody from './NeTableBody.vue'
+import NeTableRow from './NeTableRow.vue'
+import NeTableCell from './NeTableCell.vue'
+
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+defineProps({
+  rows: {
+    type: Number,
+    required: true
+  },
+  columns: {
+    type: Number,
+    required: true
+  },
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
+  }
+})
+</script>
+<template>
+  <NeTableHead :card-breakpoint="cardBreakpoint">
+    <NeTableHeadCell v-for="i in columns" :key="i">
+      <NeSkeleton size="lg" />
+    </NeTableHeadCell>
+  </NeTableHead>
+  <NeTableBody :card-breakpoint="cardBreakpoint">
+    <NeTableRow v-for="i in rows" :key="i" :card-breakpoint="cardBreakpoint">
+      <NeTableCell v-for="j in columns" :key="j" :card-breakpoint="cardBreakpoint" data-label="">
+        <NeSkeleton size="lg" />
+      </NeTableCell>
+    </NeTableRow>
+  </NeTableBody>
+</template>
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index cd3ea22..428bf6f 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -17,7 +17,10 @@ const meta: Meta<typeof NeTable> = {
   },
   args: {
     ariaLabel: 'Aria label for the table',
-    cardBreakpoint: 'md'
+    cardBreakpoint: 'md',
+    loading: false,
+    skeletonRows: 8,
+    skeletonColumns: 4
   },
   render: (args) => ({
     components: {
@@ -84,4 +87,12 @@ const meta: Meta<typeof NeTable> = {
 
 export default meta
 
-export const Default: StoryObj<typeof NeTable> = {}
+export const Default: StoryObj<typeof NeTable> = {
+  args: {}
+}
+
+export const Loading: StoryObj<typeof NeTable> = {
+  args: {
+    loading: true
+  }
+}

From 2dcd749d455e84b4d0fc608fbf94bc731d34b963 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 8 May 2024 11:02:43 +0200
Subject: [PATCH 4/4] fix: provide/inject NeTable cardBreakpoint

---
 src/components/NeTable.vue     |  7 +++-
 src/components/NeTableBody.vue | 10 ++---
 src/components/NeTableCell.vue | 11 +++---
 src/components/NeTableHead.vue | 10 ++---
 src/components/NeTableRow.vue  | 10 ++---
 stories/NeTable.stories.ts     | 69 ++++++++++++++++++----------------
 6 files changed, 55 insertions(+), 62 deletions(-)

diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index bf33256..2dc1e0c 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -3,12 +3,12 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { type PropType } from 'vue'
+import { provide, ref, type PropType } from 'vue'
 import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
-defineProps({
+const props = defineProps({
   ariaLabel: {
     type: String,
     required: true
@@ -31,6 +31,9 @@ defineProps({
   }
 })
 
+// provide cardBreakpoint prop to children components
+provide('cardBreakpoint', ref(props.cardBreakpoint))
+
 const tableCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table sm:divide-y sm:divide-gray-300 sm:dark:divide-gray-600',
   md: 'md:table md:divide-y md:divide-gray-300 md:dark:divide-gray-600',
diff --git a/src/components/NeTableBody.vue b/src/components/NeTableBody.vue
index ff79399..846b0c4 100644
--- a/src/components/NeTableBody.vue
+++ b/src/components/NeTableBody.vue
@@ -3,15 +3,11 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { type PropType } from 'vue'
+import { inject } from 'vue'
 import type { Breakpoint } from './NeTable.vue'
 
-defineProps({
-  cardBreakpoint: {
-    type: String as PropType<Breakpoint>,
-    default: 'md'
-  }
-})
+// inject cardBreakpoint from NeTable.vue
+const cardBreakpoint = inject('cardBreakpoint', 'md')
 
 const tbodyCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table-row-group',
diff --git a/src/components/NeTableCell.vue b/src/components/NeTableCell.vue
index b71ed70..7f17d21 100644
--- a/src/components/NeTableCell.vue
+++ b/src/components/NeTableCell.vue
@@ -3,21 +3,20 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import type { PropType } from 'vue'
+import { inject } from 'vue'
 import type { Breakpoint } from './NeTable.vue'
 
 defineProps({
   dataLabel: {
-    // This attribute replaces table header in mobile viewport
+    // this attribute replaces table header in mobile viewport
     type: String,
     required: true
-  },
-  cardBreakpoint: {
-    type: String as PropType<Breakpoint>,
-    default: 'md'
   }
 })
 
+// inject cardBreakpoint from NeTable.vue
+const cardBreakpoint = inject('cardBreakpoint', 'md')
+
 const tdCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table-cell',
   md: 'md:table-cell',
diff --git a/src/components/NeTableHead.vue b/src/components/NeTableHead.vue
index cad86d2..5601520 100644
--- a/src/components/NeTableHead.vue
+++ b/src/components/NeTableHead.vue
@@ -3,15 +3,11 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { type PropType } from 'vue'
+import { inject } from 'vue'
 import type { Breakpoint } from './NeTable.vue'
 
-defineProps({
-  cardBreakpoint: {
-    type: String as PropType<Breakpoint>,
-    default: 'md'
-  }
-})
+// inject cardBreakpoint from NeTable.vue
+const cardBreakpoint = inject('cardBreakpoint', 'md')
 
 const tbodyCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table-header-group',
diff --git a/src/components/NeTableRow.vue b/src/components/NeTableRow.vue
index 9c6ea50..3c0f94c 100644
--- a/src/components/NeTableRow.vue
+++ b/src/components/NeTableRow.vue
@@ -3,15 +3,11 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { type PropType } from 'vue'
+import { inject } from 'vue'
 import type { Breakpoint } from './NeTable.vue'
 
-defineProps({
-  cardBreakpoint: {
-    type: String as PropType<Breakpoint>,
-    default: 'md'
-  }
-})
+// inject cardBreakpoint from NeTable.vue
+const cardBreakpoint = inject('cardBreakpoint', 'md')
 
 const trCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table-row',
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index 428bf6f..dd517e2 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -35,50 +35,47 @@ const meta: Meta<typeof NeTable> = {
       return { args }
     },
     template: `
-  <div class="mb-6 text-gray-700 dark:text-gray-300">
-    NeTable is responsive: it automatically changes its layout on smaller screens
-  </div>
   <NeTable v-bind="args">
-    <NeTableHead :cardBreakpoint="args.cardBreakpoint">
+    <NeTableHead>
       <NeTableHeadCell>Game</NeTableHeadCell>
       <NeTableHeadCell>Platform</NeTableHeadCell>
       <NeTableHeadCell>Year</NeTableHeadCell>
     </NeTableHead>
-    <NeTableBody :cardBreakpoint="args.cardBreakpoint">
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: Breath of the Wild</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Switch</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">2017</NeTableCell>
+    <NeTableBody>
+      <NeTableRow>
+        <NeTableCell data-label="Game">The Legend of Zelda: Breath of the Wild</NeTableCell>
+        <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
+        <NeTableCell data-label="Year">2017</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario Odyssey</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Switch</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">2017</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">Super Mario Odyssey</NeTableCell>
+        <NeTableCell data-label="Platform">Nintendo Switch</NeTableCell>
+        <NeTableCell data-label="Year">2017</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: Ocarina of Time</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo 64</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1998</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">The Legend of Zelda: Ocarina of Time</NeTableCell>
+        <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
+        <NeTableCell data-label="Year">1998</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario 64</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo 64</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1996</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">Super Mario 64</NeTableCell>
+        <NeTableCell data-label="Platform">Nintendo 64</NeTableCell>
+        <NeTableCell data-label="Year">1996</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda: A Link to the Past</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Super Nintendo</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1991</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">The Legend of Zelda: A Link to the Past</NeTableCell>
+        <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
+        <NeTableCell data-label="Year">1991</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">Super Mario World</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Super Nintendo</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1990</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">Super Mario World</NeTableCell>
+        <NeTableCell data-label="Platform">Super Nintendo</NeTableCell>
+        <NeTableCell data-label="Year">1990</NeTableCell>
       </NeTableRow>
-      <NeTableRow :cardBreakpoint="args.cardBreakpoint">
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Game">The Legend of Zelda</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Platform">Nintendo Entertainment System</NeTableCell>
-        <NeTableCell :cardBreakpoint="args.cardBreakpoint" data-label="Year">1986</NeTableCell>
+      <NeTableRow>
+        <NeTableCell data-label="Game">The Legend of Zelda</NeTableCell>
+        <NeTableCell data-label="Platform">Nintendo Entertainment System</NeTableCell>
+        <NeTableCell data-label="Year">1986</NeTableCell>
       </NeTableRow>
     </NeTableBody>
   </NeTable>`
@@ -96,3 +93,9 @@ export const Loading: StoryObj<typeof NeTable> = {
     loading: true
   }
 }
+
+export const CardBreakpointXL: StoryObj<typeof NeTable> = {
+  args: {
+    cardBreakpoint: 'xl'
+  }
+}