refactor: use headless ui

nuxt/components/button/ButtonIcon.vue

@@ -2,25 +2,30 @@
   <Button
     :aria-label="ariaLabel"
     class="justify-center"
-    :disabled="disabled"
+    :disabled="disabled || isLoading"
     :title="ariaLabel"
     :to="to"
     :type="type"
     @click="emit('click')"
   >
-    <slot />
+    <div class="relative">
+      <slot />
+      <LoaderIndicatorSpinner v-if="isLoading" class="absolute inset-0" />
+    </div>
   </Button>
 </template>
 
 <script setup lang="ts">
 export interface Props {
   ariaLabel: string
   disabled?: boolean
+  isLoading?: boolean
   to?: string
   type?: 'button' | 'submit' | 'reset'
 }
 withDefaults(defineProps<Props>(), {
   disabled: false,
+  isLoading: false,
   to: undefined,
   type: 'button',
 })

nuxt/components/dropdown/Dropdown.vue

@@ -0,0 +1,62 @@
+<template>
+  <Menu as="div" class="relative">
+    <template #default="{ open /*, close*/ }">
+      <MenuButton class="flex items-center justify-center">
+        <ButtonIcon :aria-label="t('globalShowMore')">
+          <IconContainer>
+            <ChevronDownIcon />
+          </IconContainer>
+        </ButtonIcon>
+      </MenuButton>
+      <TransitionRoot :show="open">
+        <!-- <TransitionChild
+          as="template"
+          enter="transition duration-100 ease-out transform"
+          enter-from="backdrop-blur-0 backdrop-brightness-100"
+          enter-to="backdrop-blur-sm backdrop-brightness-75"
+          entered="backdrop-blur-sm backdrop-brightness-75"
+          leave="transition duration-75 ease-io transform"
+          leave-from="backdrop-blur-sm backdrop-brightness-75"
+          leave-to="backdrop-blur-0 backdrop-brightness-100"
+        >
+          <div class="fixed inset-0 z-10" @click="close" />
+        </TransitionChild> -->
+        <TransitionChild
+          as="template"
+          enter="transition duration-100 ease-out transform"
+          enter-from="scale-95 opacity-0"
+          enter-to="scale-100 opacity-100"
+          leave="transition duration-75 ease-in transform"
+          leave-from="scale-100 opacity-100"
+          leave-to="scale-95 opacity-0"
+        >
+          <MenuItems
+            ref="dropdownRef"
+            class="absolute z-20 right-0 origin-top-right flex flex-col items-stretch rounded-md bg-background-bright p-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-background-darken"
+          >
+            <slot />
+          </MenuItems>
+        </TransitionChild>
+      </TransitionRoot>
+    </template>
+  </Menu>
+</template>
+
+<script setup lang="ts">
+import {
+  Menu,
+  MenuButton,
+  MenuItems,
+  TransitionRoot,
+  TransitionChild,
+} from '@headlessui/vue'
+import { ChevronDownIcon } from '@heroicons/vue/20/solid'
+
+const { t } = useI18n()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'VioDropdown',
+}
+</script>

nuxt/components/dropdown/DropdownItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <MenuItem>
+    <template #default="{ active }">
+      <div class="relative flex">
+        <Button
+          :aria-label="ariaLabel"
+          :class="[
+            'p-2 rounded w-full',
+            active ? 'bg-gray-800 text-white' : '',
+          ]"
+          :disabled.prop="isLoading"
+        >
+          {{ ariaLabel }}
+          <template #prefix>
+            <slot />
+          </template>
+        </Button>
+        <LoaderIndicatorSpinner v-if="isLoading" class="absolute inset-0" />
+      </div>
+    </template>
+  </MenuItem>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from '@headlessui/vue'
+
+export interface Props {
+  ariaLabel: string
+  isLoading?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  isLoading: false,
+})
+</script>

nuxt/components/icon/IconContainer.vue

@@ -1,16 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" :class="classes">
-    <title>{{ title }}</title>
+  <svg xmlns="http://www.w3.org/2000/svg" :class="classes" aria-hidden="true">
     <slot />
   </svg>
 </template>
 
 <script setup lang="ts">
 export interface Props {
   classes?: string
-  title: string
+  title?: string // TODO: remove if aria-hidden="true" usage is valid
 }
 withDefaults(defineProps<Props>(), {
   classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
+  title: undefined,
 })
 </script>

nuxt/components/invitation/InvitationList.vue

@@ -1,33 +1,36 @@
 <template>
   <Loader :api="api">
     <div class="flex flex-col gap-4">
-      <ScrollContainer
+      <!-- <ScrollContainer
         v-if="event && invitations.length"
         class="max-h-[70vh]"
         :has-next-page="!!api.data.allInvitations?.pageInfo.hasNextPage"
         @load-more="after = api.data.allInvitations?.pageInfo.endCursor"
+      > -->
+      <table
+        v-if="event && invitations.length"
+        class="border border-neutral-300 dark:border-neutral-600"
       >
-        <table class="border border-neutral-300 dark:border-neutral-600">
-          <thead
-            class="sticky top-0 z-10 bg-background-bright dark:bg-background-dark"
-          >
-            <tr>
-              <th scope="col">
-                {{ t('contact') }}
-              </th>
-              <th />
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-300 dark:divide-neutral-600">
-            <InvitationListItem
-              v-for="invitation in invitations"
-              :key="invitation.uuid"
-              :event="event"
-              :invitation="invitation"
-            />
-          </tbody>
-        </table>
-      </ScrollContainer>
+        <thead
+          class="sticky top-0 z-10 bg-background-bright dark:bg-background-dark"
+        >
+          <tr>
+            <th scope="col">
+              {{ t('contact') }}
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-300 dark:divide-neutral-600">
+          <InvitationListItem
+            v-for="invitation in invitations"
+            :key="invitation.uuid"
+            :event="event"
+            :invitation="invitation"
+          />
+        </tbody>
+      </table>
+      <!-- </ScrollContainer> -->
       <div v-else class="flex flex-col items-center gap-2">
         {{ t('invitationNone') }}
         <FormInputStateInfo>