From 7b101610d24855096a49f14c27b02d090c7550d5 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 22 Oct 2024 15:41:01 +0200
Subject: [PATCH 1/6] feat: add sorting support to NeTable

---
 src/components/NeDropdownFilter.vue |   2 +-
 src/components/NeTable.vue          |  25 +++++-
 src/components/NeTableHeadCell.vue  |  72 ++++++++++++++++-
 src/composables/useSort.ts          |  76 ++++++++++++++++++
 stories/NeTable.stories.ts          | 120 ++++++++++++++--------------
 tailwind.config.ts                  |   5 ++
 6 files changed, 233 insertions(+), 67 deletions(-)
 create mode 100644 src/composables/useSort.ts

diff --git a/src/components/NeDropdownFilter.vue b/src/components/NeDropdownFilter.vue
index 7051fc8..d232d06 100644
--- a/src/components/NeDropdownFilter.vue
+++ b/src/components/NeDropdownFilter.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index b78822f..401ffdf 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { provide, ref, type PropType } from 'vue'
+import { computed, provide, ref, type PropType } from 'vue'
 import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
@@ -28,11 +28,30 @@ const props = defineProps({
   skeletonColumns: {
     type: Number,
     default: 4
+  },
+  sortKey: {
+    type: String,
+    default: ''
+  },
+  sortDescending: {
+    type: Boolean,
+    default: false
   }
 })
 
-// provide cardBreakpoint prop to children components
-provide('cardBreakpoint', ref(props.cardBreakpoint))
+// provide props to children components
+provide(
+  'cardBreakpoint',
+  computed(() => props.cardBreakpoint)
+)
+provide(
+  'sortKey',
+  computed(() => props.sortKey)
+)
+provide(
+  'sortDescending',
+  computed(() => props.sortDescending)
+)
 
 const tableCardStyle: Record<Breakpoint, string> = {
   sm: 'sm:table sm:divide-y sm:divide-gray-300 sm:dark:divide-gray-600',
diff --git a/src/components/NeTableHeadCell.vue b/src/components/NeTableHeadCell.vue
index 535beee..abc9126 100644
--- a/src/components/NeTableHeadCell.vue
+++ b/src/components/NeTableHeadCell.vue
@@ -2,8 +2,76 @@
   Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts" setup>
+import { computed, inject, toValue } from 'vue'
+import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const props = defineProps({
+  columnKey: {
+    type: String,
+    default: ''
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits<{
+  sort: [{ key: string; descending: boolean }]
+}>()
+
+// inject from NeTable.vue
+const sortKey = inject('sortKey', '')
+const sortDescending = inject('sortDescending', false)
+
+library.add(faSort)
+library.add(faSortUp)
+library.add(faSortDown)
+
+const ariaSort = computed(() => {
+  const sortKeyValue = toValue(sortKey)
+  const sortDescendingValue = toValue(sortDescending)
+
+  if (props.sortable && props.columnKey === sortKeyValue) {
+    return sortDescendingValue ? 'descending' : 'ascending'
+  }
+  return 'none'
+})
+
+const sort = () => {
+  const sortKeyValue = toValue(sortKey)
+  const sortDescendingValue = toValue(sortDescending)
+
+  if (props.columnKey === sortKeyValue) {
+    emit('sort', { key: props.columnKey, descending: !sortDescendingValue })
+  } else {
+    emit('sort', { key: props.columnKey, descending: false })
+  }
+}
+</script>
 <template>
-  <th scope="col" class="px-6 py-3 font-medium">
-    <slot></slot>
+  <th scope="col" class="px-6 py-3 font-medium" :aria-sort="ariaSort">
+    <!-- sortable column header -->
+    <button v-if="sortable" class="group flex items-center gap-2" @click="sort">
+      <slot></slot>
+      <template v-if="props.columnKey === sortKey">
+        <FontAwesomeIcon
+          :icon="sortDescending ? faSortDown : faSortUp"
+          class="h-4 w-4 text-gray-600 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-gray-50"
+          aria-hidden="true"
+        />
+      </template>
+      <FontAwesomeIcon
+        v-else
+        :icon="faSort"
+        class="h-4 w-4 text-gray-600 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-gray-50"
+        aria-hidden="true"
+      />
+    </button>
+    <!-- non-sortable column header -->
+    <slot v-else></slot>
   </th>
 </template>
diff --git a/src/composables/useSort.ts b/src/composables/useSort.ts
new file mode 100644
index 0000000..dfaa0cd
--- /dev/null
+++ b/src/composables/useSort.ts
@@ -0,0 +1,76 @@
+import { ref, toValue, watchEffect, type MaybeRefOrGetter } from 'vue'
+
+export function useSort(
+  items: MaybeRefOrGetter<Record<string, any>[]>,
+  sortKey: MaybeRefOrGetter<string>,
+  descending: MaybeRefOrGetter<boolean> = false,
+  sortFunctions: Record<string, (a: any, b: any) => number> = {}
+) {
+  const sortedItems = ref<Record<string, any>[]>([])
+
+  function defaultSortFn(a: Record<string, any>, b: Record<string, any>) {
+    const sortKeyValue = toValue(sortKey)
+    const valueA = a[sortKeyValue]
+    const valueB = b[sortKeyValue]
+
+    // numbers
+
+    if (typeof valueA === 'number' && typeof valueB === 'number') {
+      return valueA - valueB
+    }
+
+    // strings
+
+    if (typeof valueA == 'string' && typeof valueB == 'string') {
+      return valueA.localeCompare(valueB)
+    }
+
+    // dates
+
+    if (valueA instanceof Date && valueB instanceof Date) {
+      return valueA.getTime() - new Date(valueB).getTime()
+    }
+
+    // booleans
+
+    if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
+      return valueA === valueB ? 0 : valueA ? 1 : -1
+    }
+
+    // arrays
+
+    if (Array.isArray(valueA) && Array.isArray(valueB)) {
+      return valueA.length - valueB.length
+    }
+
+    console.log('sort: unknown object types', typeof valueA, typeof valueB) ////
+
+    if (typeof valueA !== 'undefined' && typeof valueB === 'undefined') {
+      return -1
+    } else if (typeof valueA === 'undefined' && typeof valueB !== 'undefined') {
+      return 1
+    } else {
+      return 0
+    }
+  }
+
+  watchEffect(() => {
+    const itemsValue = toValue(items)
+    const sortKeyValue = toValue(sortKey)
+    const descendingValue = toValue(descending)
+
+    const sortFunction = sortFunctions[sortKeyValue] || defaultSortFn
+
+    // sort the items without mutating (slice) the original array
+    sortedItems.value = itemsValue
+      .slice()
+      .sort((a: Record<string, any>, b: Record<string, any>) => {
+        const result = sortFunction(a, b)
+        return descendingValue ? -result : result
+      })
+  })
+
+  return {
+    sortedItems
+  }
+}
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index 069643f..e92901b 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -12,6 +12,16 @@ import { Meta, StoryObj } from '@storybook/vue3'
 import { faTable } from '@fortawesome/free-solid-svg-icons'
 import { library } from '@fortawesome/fontawesome-svg-core'
 
+const items = [
+  { game: 'Super Mario 64', platform: 'Nintendo 64', year: 1996 },
+  { game: 'Super Mario Odyssey', platform: 'Nintendo Switch', year: 2017 },
+  { game: 'Super Mario World', platform: 'Super Nintendo', year: 1990 },
+  { game: 'The Legend of Zelda', platform: 'Nintendo Entertainment System', year: 1986 },
+  { game: 'The Legend of Zelda: A Link to the Past', platform: 'Super Nintendo', year: 1991 },
+  { game: 'The Legend of Zelda: Breath of the Wild', platform: 'Nintendo Switch', year: 2017 },
+  { game: 'The Legend of Zelda: Ocarina of Time', platform: 'Nintendo 64', year: 1998 }
+]
+
 const meta: Meta<typeof NeTable> = {
   title: 'NeTable',
   component: NeTable,
@@ -24,7 +34,9 @@ const meta: Meta<typeof NeTable> = {
     cardBreakpoint: 'md',
     loading: false,
     skeletonRows: 8,
-    skeletonColumns: 4
+    skeletonColumns: 4,
+    sortKey: 'game',
+    sortDescending: false
   },
   render: (args) => ({
     components: {
@@ -37,7 +49,7 @@ const meta: Meta<typeof NeTable> = {
       NePaginator
     },
     setup() {
-      return { args }
+      return { args, items }
     },
     template: `
   <NeTable v-bind="args">
@@ -47,40 +59,10 @@ const meta: Meta<typeof NeTable> = {
       <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 v-for="(item, index) in items" :key="index">
+        <NeTableCell data-label="Game">{{ item.game }}</NeTableCell>
+        <NeTableCell data-label="Platform">{{ item.platform }}</NeTableCell>
+        <NeTableCell data-label="Year">{{ item.year }}</NeTableCell>
       </NeTableRow>
     </NeTableBody>
   </NeTable>`
@@ -101,30 +83,10 @@ const withPaginatorTemplate = `
       <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 v-for="(item, index) in items" :key="index">
+        <NeTableCell data-label="Game">{{ item.game }}</NeTableCell>
+        <NeTableCell data-label="Platform">{{ item.platform }}</NeTableCell>
+        <NeTableCell data-label="Year">{{ item.year }}</NeTableCell>
       </NeTableRow>
     </NeTableBody>
     <template #paginator>
@@ -155,7 +117,7 @@ export const WithPaginator: StoryObj<typeof NeTable> = {
       NePaginator
     },
     setup() {
-      return { args }
+      return { args, items }
     },
     template: withPaginatorTemplate
   }),
@@ -211,3 +173,39 @@ export const CardBreakpointXL: StoryObj<typeof NeTable> = {
     cardBreakpoint: 'xl'
   }
 }
+
+const sortableTemplate = `
+<NeTable v-bind="args">
+    <NeTableHead>
+      <NeTableHeadCell sortable columnKey="game">Game</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="platform">Platform</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="year">Year</NeTableHeadCell>
+    </NeTableHead>
+    <NeTableBody>
+      <NeTableRow v-for="(item, index) in items" :key="index">
+        <NeTableCell data-label="Game">{{ item.game }}</NeTableCell>
+        <NeTableCell data-label="Platform">{{ item.platform }}</NeTableCell>
+        <NeTableCell data-label="Year">{{ item.year }}</NeTableCell>
+      </NeTableRow>
+    </NeTableBody>
+  </NeTable>`
+
+export const Sortable: StoryObj<typeof NeTable> = {
+  render: (args) => ({
+    components: {
+      NeTable,
+      NeTableHead,
+      NeTableHeadCell,
+      NeTableBody,
+      NeTableRow,
+      NeTableCell,
+      NeEmptyState,
+      NePaginator
+    },
+    setup() {
+      return { args, items }
+    },
+    template: sortableTemplate
+  }),
+  args: {}
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ae4914c..4471e8b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -31,6 +31,11 @@ export default {
       }
     }
   },
+  variants: {
+    extend: {
+      textColor: ['group-hover']
+    }
+  },
   plugins: [require('@tailwindcss/forms')],
   darkMode: 'class'
 } satisfies Config

From cbc40eb5b749df9d2965d7cbf4ec4574c5fa0302 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 23 Oct 2024 12:36:42 +0200
Subject: [PATCH 2/6] feat: add NeSortDropdown component

---
 src/components/NeSortDropdown.vue | 228 ++++++++++++++++++++++++++++++
 src/composables/useSort.ts        |   2 -
 src/main.ts                       |   2 +
 stories/NeSortDropdown.stories.ts | 162 +++++++++++++++++++++
 stories/NeTable.stories.ts        |   6 +-
 5 files changed, 396 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NeSortDropdown.vue
 create mode 100644 stories/NeSortDropdown.stories.ts

diff --git a/src/components/NeSortDropdown.vue b/src/components/NeSortDropdown.vue
new file mode 100644
index 0000000..bd87694
--- /dev/null
+++ b/src/components/NeSortDropdown.vue
@@ -0,0 +1,228 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { v4 as uuidv4 } from 'uuid'
+import type { ButtonSize } from './NeButton.vue'
+
+export type SortOption = {
+  id: string
+  label: string
+}
+
+const sizeStyle: { [index: string]: string } = {
+  xs: 'rounded px-2 py-1 text-xs',
+  sm: 'rounded px-2 py-1 text-sm',
+  md: 'rounded-md px-2.5 py-1.5 text-sm',
+  lg: 'rounded-md px-3 py-2 text-sm',
+  xl: 'rounded-md px-3.5 py-2.5 text-sm'
+}
+
+export interface Props {
+  label: string
+  options: SortOption[]
+  openMenuAriaLabel: string
+  sortByLabel: string
+  sortDirectionLabel: string
+  ascendingLabel: string
+  descendingLabel: string
+  alignToRight?: boolean
+  size?: ButtonSize
+  disabled?: boolean
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alignToRight: false,
+  size: 'md',
+  disabled: false,
+  id: ''
+})
+
+const sortKey = defineModel<string>('sortKey')
+const sortDescending = defineModel<boolean>('sortDescending')
+const internalSortKey = ref('')
+const internalDescendingValue = ref('asc')
+const top = ref(0)
+const left = ref(0)
+const right = ref(0)
+const buttonRef = ref()
+
+const componentId = computed(() => (props.id ? props.id : uuidv4()))
+
+watch(
+  () => props.alignToRight,
+  () => {
+    calculatePosition()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => sortDescending.value,
+  () => {
+    // update internal model when external model changes, converting boolean to string
+    internalDescendingValue.value = sortDescending.value ? 'desc' : 'asc'
+  },
+  { immediate: true }
+)
+
+watch(
+  () => sortKey.value,
+  () => {
+    // update internal model when external model changes
+    if (sortKey.value !== internalSortKey.value) {
+      internalSortKey.value = sortKey.value || ''
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => internalSortKey.value,
+  () => {
+    // update external model when internal model changes
+    sortKey.value = internalSortKey.value
+  },
+  { immediate: true }
+)
+
+watch(
+  () => internalDescendingValue.value,
+  () => {
+    // update external model when internal model changes, converting string to boolean
+    sortDescending.value = internalDescendingValue.value === 'desc'
+  },
+  { immediate: true }
+)
+
+function calculatePosition() {
+  top.value = buttonRef.value?.$el.getBoundingClientRect().bottom + window.scrollY
+  left.value = buttonRef.value?.$el.getBoundingClientRect().left - window.scrollX
+  right.value =
+    document.documentElement.clientWidth -
+    buttonRef.value?.$el.getBoundingClientRect().right -
+    window.scrollX
+}
+</script>
+
+<template>
+  <Menu as="div" class="relative inline-block text-left text-sm">
+    <MenuButton ref="buttonRef" @click="calculatePosition()">
+      <span class="sr-only">{{ openMenuAriaLabel }}</span>
+      <slot name="button">
+        <!-- default button -->
+        <button
+          class="font-medium text-gray-700 shadow-sm ring-1 ring-gray-300 transition-colors duration-200 hover:bg-gray-200/70 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:ring-gray-500 dark:hover:bg-gray-600/30 dark:hover:text-gray-50 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950"
+          :class="sizeStyle[props.size]"
+          :disabled="disabled"
+          type="button"
+        >
+          <span class="flex items-center justify-center">
+            <slot v-if="$slots.label" name="label"></slot>
+            <span v-else>{{ label }}</span>
+            <FontAwesomeIcon :icon="faChevronDown" class="ml-2 h-3 w-3" aria-hidden="true" />
+          </span>
+        </button>
+      </slot>
+    </MenuButton>
+    <Teleport to="body">
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          :style="[
+            { top: top + 'px' },
+            alignToRight ? { right: right + 'px' } : { left: left + 'px' }
+          ]"
+          class="absolute z-50 mt-2.5 max-h-80 min-w-[10rem] overflow-y-auto rounded-md bg-white px-4 py-2 text-sm shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-gray-950 dark:ring-gray-500/50"
+        >
+          <div class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
+            {{ sortByLabel }}
+          </div>
+          <MenuItem v-for="option in options" :key="option.id" as="div">
+            <!-- divider -->
+            <hr
+              v-if="option.id.includes('divider')"
+              class="my-1 border-gray-200 dark:border-gray-700"
+            />
+            <div class="flex items-center py-2" @click.stop>
+              <input
+                :id="`${componentId}-${option.id}`"
+                v-model="internalSortKey"
+                type="radio"
+                :name="componentId"
+                :value="option.id"
+                :aria-describedby="`${componentId}-${option.id}-description`"
+                class="peer border-gray-300 text-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-950 dark:text-primary-500 checked:dark:bg-primary-500 dark:focus:ring-primary-300 focus:dark:ring-primary-200 focus:dark:ring-offset-gray-900"
+                :disabled="disabled"
+              />
+              <label
+                :for="`${componentId}-${option.id}`"
+                class="ms-2 flex flex-col text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 dark:text-gray-50"
+              >
+                <span>{{ option.label }}</span>
+              </label>
+            </div>
+          </MenuItem>
+          <div class="mt-4 text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
+            {{ sortDirectionLabel }}
+          </div>
+          <!-- ascending -->
+          <MenuItem as="div">
+            <div class="flex items-center py-2" @click.stop>
+              <input
+                :id="`${componentId}-asc`"
+                v-model="internalDescendingValue"
+                type="radio"
+                :name="`${componentId}-sortDirection`"
+                value="asc"
+                :aria-describedby="`${componentId}-asc-description`"
+                class="peer border-gray-300 text-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-950 dark:text-primary-500 checked:dark:bg-primary-500 dark:focus:ring-primary-300 focus:dark:ring-primary-200 focus:dark:ring-offset-gray-900"
+                :disabled="disabled"
+              />
+              <label
+                :for="`${componentId}-asc`"
+                class="ms-2 flex flex-col text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 dark:text-gray-50"
+              >
+                <span>{{ ascendingLabel }}</span>
+              </label>
+            </div>
+          </MenuItem>
+          <!-- descending -->
+          <MenuItem as="div">
+            <div class="flex items-center py-2" @click.stop>
+              <input
+                :id="`${componentId}-desc`"
+                v-model="internalDescendingValue"
+                type="radio"
+                :name="`${componentId}-sortDirection`"
+                value="desc"
+                :aria-describedby="`${componentId}-desc-description`"
+                class="peer border-gray-300 text-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-950 dark:text-primary-500 checked:dark:bg-primary-500 dark:focus:ring-primary-300 focus:dark:ring-primary-200 focus:dark:ring-offset-gray-900"
+                :disabled="disabled"
+              />
+              <label
+                :for="`${componentId}-desc`"
+                class="ms-2 flex flex-col text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 dark:text-gray-50"
+              >
+                <span>{{ descendingLabel }}</span>
+              </label>
+            </div>
+          </MenuItem>
+        </MenuItems>
+      </transition>
+    </Teleport>
+  </Menu>
+</template>
diff --git a/src/composables/useSort.ts b/src/composables/useSort.ts
index dfaa0cd..c2ac678 100644
--- a/src/composables/useSort.ts
+++ b/src/composables/useSort.ts
@@ -43,8 +43,6 @@ export function useSort(
       return valueA.length - valueB.length
     }
 
-    console.log('sort: unknown object types', typeof valueA, typeof valueB) ////
-
     if (typeof valueA !== 'undefined' && typeof valueB === 'undefined') {
       return -1
     } else if (typeof valueA === 'undefined' && typeof valueB !== 'undefined') {
diff --git a/src/main.ts b/src/main.ts
index 08d7213..41b2f08 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,6 +37,7 @@ export { default as NeModal } from '@/components/NeModal.vue'
 export { default as NeHeading } from '@/components/NeHeading.vue'
 export { default as NeListbox } from '@/components/NeListbox.vue'
 export { default as NeDropdownFilter } from '@/components/NeDropdownFilter.vue'
+export { default as NeSortDropdown } from '@/components/NeSortDropdown.vue'
 
 // types export
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
@@ -73,3 +74,4 @@ export {
 
 // composables export
 export { useItemPagination } from '@/composables/useItemPagination'
+export { useSort } from '@/composables/useSort'
diff --git a/stories/NeSortDropdown.stories.ts b/stories/NeSortDropdown.stories.ts
new file mode 100644
index 0000000..846c1b0
--- /dev/null
+++ b/stories/NeSortDropdown.stories.ts
@@ -0,0 +1,162 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeSortDropdown, NeButton } from '../src/main'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const meta = {
+  title: 'NeSortDropdown',
+  component: NeSortDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }
+  },
+  args: {
+    label: 'Sort',
+    options: [
+      {
+        id: 'name',
+        label: 'Name'
+      },
+      {
+        id: 'age',
+        label: 'Age'
+      },
+      {
+        id: 'address',
+        label: 'Address'
+      },
+      {
+        id: 'jobTitle',
+        label: 'Job title'
+      }
+    ],
+    openMenuAriaLabel: 'Open menu',
+    sortByLabel: 'Sort by',
+    sortDirectionLabel: 'Sort direction',
+    ascendingLabel: 'Ascending',
+    descendingLabel: 'Descending',
+    alignToRight: false,
+    size: 'md',
+    disabled: false,
+    id: ''
+  }
+} satisfies Meta<typeof NeSortDropdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeSortDropdown v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeSortDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}
+
+const alignToRightTemplate = `<div class="flex justify-end w-72">
+  <NeSortDropdown v-bind="args" />
+</div>`
+
+export const AlignToRight: Story = {
+  render: (args) => ({
+    components: { NeSortDropdown },
+    setup() {
+      return { args }
+    },
+    template: alignToRightTemplate
+  }),
+  args: { alignToRight: true }
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { NeSortDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    disabled: true
+  }
+}
+
+const withSlotTemplate = `<NeSortDropdown v-bind="args">
+  <template #button>
+    <span class="text-gray-700 dark:text-gray-100">
+      Button slot
+    </span>
+  </template>
+</NeSortDropdown>`
+
+export const ButtonSlot: Story = {
+  render: (args) => ({
+    components: { NeSortDropdown, NeButton, FontAwesomeIcon },
+    setup() {
+      return { args }
+    },
+    template: withSlotTemplate
+  }),
+  args: {}
+}
+
+export const ManyOptions: Story = {
+  render: (args) => ({
+    components: { NeSortDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    options: [
+      {
+        id: 'name',
+        label: 'Name'
+      },
+      {
+        id: 'age',
+        label: 'Age'
+      },
+      {
+        id: 'address',
+        label: 'Address'
+      },
+      {
+        id: 'jobTitle',
+        label: 'Job title'
+      },
+      {
+        id: 'department',
+        label: 'Department'
+      },
+      {
+        id: 'hireDate',
+        label: 'Hire date'
+      },
+      {
+        id: 'salary',
+        label: 'Salary'
+      },
+      {
+        id: 'status',
+        label: 'Status'
+      },
+      {
+        id: 'manager',
+        label: 'Manager'
+      },
+      {
+        id: 'team',
+        label: 'Team'
+      }
+    ]
+  }
+}
diff --git a/stories/NeTable.stories.ts b/stories/NeTable.stories.ts
index e92901b..722b56b 100644
--- a/stories/NeTable.stories.ts
+++ b/stories/NeTable.stories.ts
@@ -35,7 +35,7 @@ const meta: Meta<typeof NeTable> = {
     loading: false,
     skeletonRows: 8,
     skeletonColumns: 4,
-    sortKey: 'game',
+    sortKey: '',
     sortDescending: false
   },
   render: (args) => ({
@@ -207,5 +207,7 @@ export const Sortable: StoryObj<typeof NeTable> = {
     },
     template: sortableTemplate
   }),
-  args: {}
+  args: {
+    sortKey: 'game'
+  }
 }

From 18acaff0640b65310423c588eb18b9d2bb60c586 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 23 Oct 2024 14:29:29 +0200
Subject: [PATCH 3/6] chore: format code

---
 src/components/NeListbox.vue   | 6 +-----
 src/components/NeModal.vue     | 6 +-----
 src/components/NePaginator.vue | 6 +-----
 src/components/NeTable.vue     | 2 +-
 4 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/NeListbox.vue b/src/components/NeListbox.vue
index d9b1fe0..0892c59 100644
--- a/src/components/NeListbox.vue
+++ b/src/components/NeListbox.vue
@@ -283,11 +283,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox())
                       'absolute inset-y-0 right-0 flex items-center pr-4 text-primary-700 dark:text-primary-500'
                     ]"
                   >
-                    <FontAwesomeIcon
-                      :icon="fasCheck"
-                      class="h-4 w-4 shrink-0"
-                      aria-hidden="true"
-                    />
+                    <FontAwesomeIcon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" />
                   </span>
                 </li>
               </ListboxOption>
diff --git a/src/components/NeModal.vue b/src/components/NeModal.vue
index 0391441..cbaecef 100644
--- a/src/components/NeModal.vue
+++ b/src/components/NeModal.vue
@@ -141,11 +141,7 @@ function onSecondaryClick() {
                     @click="onClose"
                   >
                     <span class="sr-only">{{ closeAriaLabel }}</span>
-                    <FontAwesomeIcon
-                      :icon="['fas', 'xmark']"
-                      class="h-5 w-5"
-                      aria-hidden="true"
-                    />
+                    <FontAwesomeIcon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" />
                   </button>
                 </div>
                 <div class="sm:flex sm:items-start">
diff --git a/src/components/NePaginator.vue b/src/components/NePaginator.vue
index 6a51059..931fa51 100644
--- a/src/components/NePaginator.vue
+++ b/src/components/NePaginator.vue
@@ -231,11 +231,7 @@ function navigateToPage(page: number) {
             @click="navigateToPage(currentPage + 1)"
           >
             <span class="sr-only">{{ nextLabel }}</span>
-            <FontAwesomeIcon
-              :icon="fasChevronRight"
-              class="h-3 w-3 shrink-0"
-              aria-hidden="true"
-            />
+            <FontAwesomeIcon :icon="fasChevronRight" class="h-3 w-3 shrink-0" aria-hidden="true" />
           </button>
         </li>
       </ul>
diff --git a/src/components/NeTable.vue b/src/components/NeTable.vue
index 401ffdf..e647dfc 100644
--- a/src/components/NeTable.vue
+++ b/src/components/NeTable.vue
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { computed, provide, ref, type PropType } from 'vue'
+import { computed, provide, type PropType } from 'vue'
 import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'

From fa936ea48c8b38516192d93d1a779603b14f6a65 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 28 Oct 2024 15:05:01 +0100
Subject: [PATCH 4/6] perf: removed library, importing directly icon

---
 src/components/NeTableHeadCell.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/NeTableHeadCell.vue b/src/components/NeTableHeadCell.vue
index abc9126..a8b2593 100644
--- a/src/components/NeTableHeadCell.vue
+++ b/src/components/NeTableHeadCell.vue
@@ -5,7 +5,6 @@
 <script lang="ts" setup>
 import { computed, inject, toValue } from 'vue'
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
-import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const props = defineProps({
@@ -27,10 +26,6 @@ const emit = defineEmits<{
 const sortKey = inject('sortKey', '')
 const sortDescending = inject('sortDescending', false)
 
-library.add(faSort)
-library.add(faSortUp)
-library.add(faSortDown)
-
 const ariaSort = computed(() => {
   const sortKeyValue = toValue(sortKey)
   const sortDescendingValue = toValue(sortDescending)

From 703323777c4b8db9b16d81e91f63fd6777f5c639 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 28 Oct 2024 15:05:46 +0100
Subject: [PATCH 5/6] refactor: using generics to enforce typescript checks

---
 src/composables/useSort.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/composables/useSort.ts b/src/composables/useSort.ts
index c2ac678..ebe64de 100644
--- a/src/composables/useSort.ts
+++ b/src/composables/useSort.ts
@@ -1,14 +1,16 @@
 import { ref, toValue, watchEffect, type MaybeRefOrGetter } from 'vue'
-
-export function useSort(
-  items: MaybeRefOrGetter<Record<string, any>[]>,
-  sortKey: MaybeRefOrGetter<string>,
+export function useSort<T>(
+  items: MaybeRefOrGetter<T[]>,
+  sortKey: MaybeRefOrGetter<keyof T>,
   descending: MaybeRefOrGetter<boolean> = false,
-  sortFunctions: Record<string, (a: any, b: any) => number> = {}
+  sortFunctions: Record<keyof T, (a: T, b: T) => number> = {} as Record<
+    keyof T,
+    (a: T, b: T) => number
+  >
 ) {
-  const sortedItems = ref<Record<string, any>[]>([])
+  const sortedItems = ref<T[]>([])
 
-  function defaultSortFn(a: Record<string, any>, b: Record<string, any>) {
+  function defaultSortFn(a: T, b: T) {
     const sortKeyValue = toValue(sortKey)
     const valueA = a[sortKeyValue]
     const valueB = b[sortKeyValue]
@@ -60,12 +62,10 @@ export function useSort(
     const sortFunction = sortFunctions[sortKeyValue] || defaultSortFn
 
     // sort the items without mutating (slice) the original array
-    sortedItems.value = itemsValue
-      .slice()
-      .sort((a: Record<string, any>, b: Record<string, any>) => {
-        const result = sortFunction(a, b)
-        return descendingValue ? -result : result
-      })
+    sortedItems.value = itemsValue.slice().sort((a, b) => {
+      const result = sortFunction(a, b)
+      return descendingValue ? -result : result
+    })
   })
 
   return {

From 8e4cd29b6cf38e4ede6ea4b83e55d9e28f7a8f97 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 28 Oct 2024 15:50:25 +0100
Subject: [PATCH 6/6] style: added line after imports

---
 src/composables/useSort.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/composables/useSort.ts b/src/composables/useSort.ts
index ebe64de..d174ea4 100644
--- a/src/composables/useSort.ts
+++ b/src/composables/useSort.ts
@@ -1,4 +1,5 @@
 import { ref, toValue, watchEffect, type MaybeRefOrGetter } from 'vue'
+
 export function useSort<T>(
   items: MaybeRefOrGetter<T[]>,
   sortKey: MaybeRefOrGetter<keyof T>,