From abd15239522c1d9d6f9284ba9abe862c5ea2b7f0 Mon Sep 17 00:00:00 2001
From: John Campion Jr <john@brightshore.com>
Date: Tue, 3 Oct 2023 13:21:55 -0400
Subject: [PATCH] feat: use Floating UI for dropdown (#94)

* feat: add floating UI to dropdowns

Allows for positioning elements wherever you want

* feat: added floating-ui to buttondropdown

* feat(BaseDropdown): add floating-ui placement property, deprecate orientation

---------

Co-authored-by: Sacha STAFYNIAK <sacha@digisquad.io>
---
 components/base/BaseDropdown.vue     | 150 ++++++----
 components/form/BaseAutocomplete.vue | 361 +++++++++++++-----------
 components/form/BaseListbox.vue      | 399 ++++++++++++++-------------
 package.json                         |   1 +
 pnpm-lock.yaml                       | 101 ++++---
 5 files changed, 568 insertions(+), 444 deletions(-)

diff --git a/components/base/BaseDropdown.vue b/components/base/BaseDropdown.vue
index 92a70eaa..132ce056 100644
--- a/components/base/BaseDropdown.vue
+++ b/components/base/BaseDropdown.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
+import { Float } from '@headlessui-float/vue'
 
 const props = withDefaults(
   defineProps<{
@@ -44,9 +45,28 @@ const props = withDefaults(
 
     /**
      * The orientation of the dropdown.
+     *
+     * @deprecated use placement instead
      */
     orientation?: 'start' | 'end'
 
+    /**
+     * The placement of the dropdown via floating-ui.
+     */
+    placement?:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+
     /**
      * The size of the dropdown.
      */
@@ -67,21 +87,19 @@ const props = withDefaults(
     buttonColor: 'default',
     shape: undefined,
     orientation: 'start',
+    placement: undefined,
     size: 'md',
     color: 'white',
     label: '',
     headerLabel: undefined,
   },
 )
+
 const appConfig = useAppConfig()
 const shape = computed(
   () => props.shape ?? appConfig.nui.defaultShapes?.dropdown,
 )
 
-const orientationStyle = {
-  start: 'nui-dropdown-start',
-  end: 'nui-dropdown-end',
-}
 const sizeStyle = {
   md: 'nui-menu-md',
   lg: 'nui-menu-lg',
@@ -105,71 +123,86 @@ const colorStyle = {
   danger: 'nui-menu-danger',
   none: '',
 }
+
+/**
+ * fallback placement with old orientation value
+ * @todo remove this on next major version
+ */
+const placementValue = computed(() => {
+  if (props.placement) {
+    return props.placement
+  }
+
+  return props.orientation === 'end' ? 'bottom-end' : 'bottom-start'
+})
 </script>
 
 <template>
-  <div class="nui-dropdown" :class="[orientationStyle[props.orientation]]">
+  <div class="nui-dropdown">
     <Menu
       v-slot="{ open, close }: { open: boolean; close: () => void }"
       as="div"
       class="nui-menu"
     >
-      <MenuButton as="template">
-        <slot name="button" v-bind="{ open, close }">
-          <BaseButton
-            v-if="props.flavor === 'button'"
-            :color="props.buttonColor"
-            :shape="shape"
-            class="!pe-3 !ps-4"
-          >
-            <slot name="label" v-bind="{ open, close }">
-              <span>{{ props.label }}</span>
-            </slot>
-            <Icon
-              name="lucide:chevron-down"
-              class="nui-chevron"
-              :class="open && 'rotate-180'"
-            />
-          </BaseButton>
-          <button
-            v-else-if="props.flavor === 'context'"
-            type="button"
-            class="nui-context-button"
-          >
-            <span class="nui-context-button-inner">
-              <Icon
-                name="lucide:more-horizontal"
-                class="nui-context-icon"
-                :class="open && 'rotate-90'"
-              />
-            </span>
-          </button>
-          <button
-            v-else-if="props.flavor === 'text'"
-            type="button"
-            class="nui-text-button"
-          >
-            <slot name="label" v-bind="{ open, close }">
-              <span class="nui-text-button-inner">{{ props.label }}</span>
-            </slot>
-
-            <Icon
-              name="lucide:chevron-down"
-              class="nui-chevron"
-              :class="open && 'rotate-180'"
-            />
-          </button>
-        </slot>
-      </MenuButton>
-
-      <Transition
+      <Float
         enter-active-class="transition duration-100 ease-out"
         enter-from-class="transform scale-95 opacity-0"
         enter-to-class="transform scale-100 opacity-100"
         leave-active-class="transition duration-75 ease-in"
         leave-from-class="transform scale-100 opacity-100"
         leave-to-class="transform scale-95 opacity-0"
+        flip
+        :offset="props.flavor === 'context' ? 6 : 4"
+        :placement="placementValue"
       >
+        <MenuButton as="template">
+          <slot name="button" v-bind="{ open, close }">
+            <BaseButton
+              v-if="props.flavor === 'button'"
+              :color="props.buttonColor"
+              :shape="shape"
+              class="!pe-3 !ps-4"
+            >
+              <slot name="label" v-bind="{ open, close }">
+                <span>{{ props.label }}</span>
+              </slot>
+              <Icon
+                name="lucide:chevron-down"
+                class="nui-chevron"
+                :class="open && 'rotate-180'"
+              />
+            </BaseButton>
+            <button
+              v-else-if="props.flavor === 'context'"
+              type="button"
+              class="nui-context-button"
+            >
+              <span class="nui-context-button-inner">
+                <Icon
+                  name="lucide:more-horizontal"
+                  class="nui-context-icon"
+                  :class="open && 'rotate-90'"
+                />
+              </span>
+            </button>
+            <button
+              v-else-if="props.flavor === 'text'"
+              type="button"
+              class="nui-text-button"
+            >
+              <slot name="label" v-bind="{ open, close }">
+                <span class="nui-text-button-inner">{{ props.label }}</span>
+              </slot>
+
+              <Icon
+                name="lucide:chevron-down"
+                class="nui-chevron"
+                :class="open && 'rotate-180'"
+              />
+            </button>
+          </slot>
+        </MenuButton>
+
         <MenuItems
           class="nui-dropdown-menu"
           :class="[
@@ -189,7 +222,14 @@ const colorStyle = {
             <slot v-bind="{ open, close }"></slot>
           </div>
         </MenuItems>
-      </Transition>
+      </Float>
     </Menu>
   </div>
 </template>
+
+<style scoped>
+.nui-dropdown .nui-dropdown-menu {
+  position: unset;
+  margin-top: unset;
+}
+</style>
diff --git a/components/form/BaseAutocomplete.vue b/components/form/BaseAutocomplete.vue
index 8bb605b5..16c800bc 100644
--- a/components/form/BaseAutocomplete.vue
+++ b/components/form/BaseAutocomplete.vue
@@ -6,8 +6,8 @@ import {
   ComboboxLabel,
   ComboboxOption,
   ComboboxOptions,
-  TransitionRoot,
 } from '@headlessui/vue'
+import { Float, FloatReference, FloatContent } from '@headlessui-float/vue'
 
 const props = withDefaults(
   defineProps<{
@@ -295,7 +295,7 @@ watch(debounced, async (value) => {
 })
 
 function clear() {
-  value.value = props.clearValue
+  value.value = props.clearValue ?? []
 }
 
 const iconResolved = computed(() => {
@@ -359,192 +359,217 @@ function removeItem(item: any) {
     ]"
     as="div"
   >
-    <ComboboxLabel
-      v-if="
-        ('label' in $slots && !labelFloat) || (props.label && !props.labelFloat)
-      "
-      class="nui-autocomplete-label"
-      :class="classes?.label"
+    <Float
+      composable
+      leave="transition ease-in duration-100"
+      leave-from="opacity-100"
+      leave-to="opacity-0"
+      @hide="query = ''"
+      :flip="!props.multiple"
+      :offset="5"
     >
-      <slot name="label" v-bind="{ query, filteredItems, pending, items }">
-        {{ label }}
-      </slot>
-    </ComboboxLabel>
-
-    <div v-if="props.multiple" class="nui-autocomplete-multiple">
-      <ul
-        v-if="Array.isArray(value) && value.length > 0"
-        class="nui-autocomplete-multiple-list"
-      >
-        <li v-for="item in value" :key="String(item)">
-          <div class="nui-autocomplete-multiple-list-item">
-            {{ props.displayValue(item) }}
-            <button type="button" @click="removeItem(item)">
-              <Icon
-                :name="chipClearIcon"
-                class="nui-autocomplete-multiple-list-item-icon"
-              />
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-
-    <div class="nui-autocomplete-outer">
-      <ComboboxInput
-        class="nui-autocomplete-input"
-        :class="classes?.input"
-        :display-value="
-          props.multiple ? undefined : (props.displayValue as any)
-        "
-        :placeholder="props.placeholder"
-        :disabled="props.disabled"
-        @change="query = $event.target.value"
-      />
       <ComboboxLabel
         v-if="
-          ('label' in $slots && props.labelFloat) ||
-          (props.label && props.labelFloat)
+          ('label' in $slots && !labelFloat) ||
+          (props.label && !props.labelFloat)
         "
-        class="nui-label-float"
-        :class="props.classes?.label"
+        class="nui-autocomplete-label"
+        :class="classes?.label"
       >
         <slot name="label" v-bind="{ query, filteredItems, pending, items }">
-          {{ props.label }}
+          {{ label }}
         </slot>
       </ComboboxLabel>
-      <div v-if="iconResolved" class="nui-autocomplete-icon">
-        <Icon :name="iconResolved" class="nui-autocomplete-icon-inner" />
-      </div>
-      <button
-        v-if="props.clearable && value"
-        type="button"
-        class="nui-autocomplete-clear"
-        :class="[props.classes?.icon, props.dropdown && 'me-6']"
-        @click="clear"
-      >
-        <Icon :name="props.clearIcon" class="nui-autocomplete-clear-inner" />
-      </button>
-      <ComboboxButton
-        v-if="props.dropdown"
-        v-slot="{ open }: { open: boolean }"
-        class="nui-autocomplete-clear"
-      >
-        <Icon
-          :name="props.dropdownIcon"
-          class="nui-autocomplete-clear-inner transition-transform duration-300"
-          :class="[props.classes?.icon, open && 'rotate-180']"
-        />
-      </ComboboxButton>
-
-      <div v-if="props.loading" class="nui-autocomplete-placeload">
-        <BasePlaceload class="nui-placeload" :class="props.icon && 'ms-6'" />
-      </div>
-    </div>
 
-    <span
-      v-if="props.error && typeof props.error === 'string'"
-      class="nui-autocomplete-error-text"
-    >
-      {{ props.error }}
-    </span>
-
-    <TransitionRoot
-      leave="transition ease-in duration-100"
-      leave-from="opacity-100"
-      leave-to="opacity-0"
-      @after-leave="query = ''"
-    >
-      <ComboboxOptions as="div" class="nui-autocomplete-results">
-        <!-- Placeholder -->
-        <div
-          v-if="filteredItems.length === 0 && pending"
-          class="nui-autocomplete-results-placeholder"
+      <div v-if="props.multiple" class="nui-autocomplete-multiple">
+        <ul
+          v-if="Array.isArray(value) && value.length > 0"
+          class="nui-autocomplete-multiple-list"
         >
-          <slot
-            name="pending"
-            v-bind="{ query, filteredItems, pending, items }"
-          >
-            <span class="nui-autocomplete-results-placeholder-text">
-              {{ props.i18n.pending }}
-            </span>
-          </slot>
-        </div>
-        <div
-          v-else-if="filteredItems.length === 0"
-          class="nui-autocomplete-results-placeholder"
-        >
-          <slot name="empty" v-bind="{ query, filteredItems, pending, items }">
-            <span class="nui-autocomplete-results-placeholder-text">
-              {{ props.i18n.empty }}
-            </span>
-          </slot>
-        </div>
-        <template v-else>
-          <div
-            v-if="'start-item' in $slots"
-            class="nui-autocomplete-results-header"
+          <li v-for="item in value" :key="String(item)">
+            <div class="nui-autocomplete-multiple-list-item">
+              {{ props.displayValue(item) }}
+              <button type="button" @click="removeItem(item)">
+                <Icon
+                  :name="chipClearIcon"
+                  class="nui-autocomplete-multiple-list-item-icon"
+                />
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <FloatReference>
+        <div class="nui-autocomplete-outer">
+          <ComboboxInput
+            class="nui-autocomplete-input"
+            :class="classes?.input"
+            :display-value="
+              props.multiple ? undefined : (props.displayValue as any)
+            "
+            :placeholder="props.placeholder"
+            :disabled="props.disabled"
+            @change="query = $event.target.value"
+          />
+          <ComboboxLabel
+            v-if="
+              ('label' in $slots && props.labelFloat) ||
+              (props.label && props.labelFloat)
+            "
+            class="nui-label-float"
+            :class="props.classes?.label"
           >
             <slot
-              name="start-item"
-              v-bind="{
-                query,
-                filteredItems,
-                pending,
-                items,
-              }"
-            ></slot>
+              name="label"
+              v-bind="{ query, filteredItems, pending, items }"
+            >
+              {{ props.label }}
+            </slot>
+          </ComboboxLabel>
+          <div v-if="iconResolved" class="nui-autocomplete-icon">
+            <Icon :name="iconResolved" class="nui-autocomplete-icon-inner" />
           </div>
-          <ComboboxOption
-            v-for="item in filteredItems"
-            v-slot="{ active, selected }"
-            :key="String(item)"
-            class="nui-autocomplete-results-item"
-            as="div"
-            :value="item"
+          <button
+            v-if="props.clearable && value"
+            type="button"
+            class="nui-autocomplete-clear"
+            :class="[props.classes?.icon, props.dropdown && 'me-6']"
+            @click="clear"
+          >
+            <Icon
+              :name="props.clearIcon"
+              class="nui-autocomplete-clear-inner"
+            />
+          </button>
+          <ComboboxButton
+            v-if="props.dropdown"
+            v-slot="{ open }: { open: boolean }"
+            class="nui-autocomplete-clear"
+          >
+            <Icon
+              :name="props.dropdownIcon"
+              class="nui-autocomplete-clear-inner transition-transform duration-300"
+              :class="[props.classes?.icon, open && 'rotate-180']"
+            />
+          </ComboboxButton>
+
+          <div v-if="props.loading" class="nui-autocomplete-placeload">
+            <BasePlaceload
+              class="nui-placeload"
+              :class="props.icon && 'ms-6'"
+            />
+          </div>
+        </div>
+      </FloatReference>
+
+      <span
+        v-if="props.error && typeof props.error === 'string'"
+        class="nui-autocomplete-error-text"
+      >
+        {{ props.error }}
+      </span>
+      <FloatContent class="w-full">
+        <ComboboxOptions as="div" class="nui-autocomplete-results">
+          <!-- Placeholder -->
+          <div
+            v-if="filteredItems.length === 0 && pending"
+            class="nui-autocomplete-results-placeholder"
           >
             <slot
-              name="item"
-              v-bind="{
-                query,
-                filteredItems,
-                pending,
-                items,
-                item,
-                active,
-                selected,
-              }"
+              name="pending"
+              v-bind="{ query, filteredItems, pending, items }"
             >
-              <BaseAutocompleteItem
-                :shape="shape"
-                :value="
-                  isAutocompleteItem(item)
-                    ? item
-                    : {
-                        name: props.displayValue(item),
-                      }
-                "
-                :active="active"
-                :selected="selected"
-              />
+              <span class="nui-autocomplete-results-placeholder-text">
+                {{ props.i18n.pending }}
+              </span>
             </slot>
-          </ComboboxOption>
+          </div>
           <div
-            v-if="'end-item' in $slots"
-            class="nui-autocomplete-results-footer"
+            v-else-if="filteredItems.length === 0"
+            class="nui-autocomplete-results-placeholder"
           >
             <slot
-              name="end-item"
-              v-bind="{
-                query,
-                filteredItems,
-                pending,
-                items,
-              }"
-            ></slot>
+              name="empty"
+              v-bind="{ query, filteredItems, pending, items }"
+            >
+              <span class="nui-autocomplete-results-placeholder-text">
+                {{ props.i18n.empty }}
+              </span>
+            </slot>
           </div>
-        </template>
-      </ComboboxOptions>
-    </TransitionRoot>
+          <template v-else>
+            <div
+              v-if="'start-item' in $slots"
+              class="nui-autocomplete-results-header"
+            >
+              <slot
+                name="start-item"
+                v-bind="{
+                  query,
+                  filteredItems,
+                  pending,
+                  items,
+                }"
+              ></slot>
+            </div>
+            <ComboboxOption
+              v-for="item in filteredItems"
+              v-slot="{ active, selected }"
+              :key="String(item)"
+              class="nui-autocomplete-results-item"
+              as="div"
+              :value="item"
+            >
+              <slot
+                name="item"
+                v-bind="{
+                  query,
+                  filteredItems,
+                  pending,
+                  items,
+                  item,
+                  active,
+                  selected,
+                }"
+              >
+                <BaseAutocompleteItem
+                  :shape="shape"
+                  :value="
+                    isAutocompleteItem(item)
+                      ? item
+                      : {
+                          name: props.displayValue(item),
+                        }
+                  "
+                  :active="active"
+                  :selected="selected"
+                />
+              </slot>
+            </ComboboxOption>
+            <div
+              v-if="'end-item' in $slots"
+              class="nui-autocomplete-results-footer"
+            >
+              <slot
+                name="end-item"
+                v-bind="{
+                  query,
+                  filteredItems,
+                  pending,
+                  items,
+                }"
+              ></slot>
+            </div>
+          </template>
+        </ComboboxOptions>
+      </FloatContent>
+    </Float>
   </Combobox>
 </template>
+
+<style scoped>
+.nui-autocomplete .nui-autocomplete-results {
+  position: unset;
+  margin-top: unset;
+}
+</style>
diff --git a/components/form/BaseListbox.vue b/components/form/BaseListbox.vue
index 67b9ce01..72ea7a3a 100644
--- a/components/form/BaseListbox.vue
+++ b/components/form/BaseListbox.vue
@@ -7,6 +7,8 @@ import {
   ListboxOptions,
 } from '@headlessui/vue'
 
+import { Float, FloatReference, FloatContent } from '@headlessui-float/vue'
+
 const props = withDefaults(
   defineProps<{
     /**
@@ -224,212 +226,235 @@ const value = computed(() => {
       :multiple="props.multiple"
       :disabled="props.disabled"
     >
-      <ListboxLabel
-        v-if="
-          ('label' in $slots && !props.labelFloat) ||
-          (props.label && !props.labelFloat)
-        "
-        class="nui-listbox-label"
+      <Float
+        composable
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+        flip
+        :offset="5"
       >
-        <slot name="label">{{ props.label }}</slot>
-      </ListboxLabel>
-
-      <div class="nui-listbox-outer">
-        <ListboxButton :disabled="props.disabled" class="nui-listbox-button">
-          <slot name="listbox-button" :value="value" :open="open">
-            <div class="nui-listbox-button-inner">
-              <BaseIconBox
-                v-if="props.icon"
-                size="xs"
-                shape="rounded"
-                class="nui-icon-box"
-              >
-                <Icon :name="props.icon" class="nui-icon-box-inner" />
-              </BaseIconBox>
-
-              <template v-if="Array.isArray(value)">
-                <div
-                  v-if="value.length === 0 && placeholder"
-                  class="nui-listbox-placeholder"
-                  :class="props.loading && 'text-transparent select-none'"
-                >
-                  {{ placeholder }}
-                </div>
-                <div
-                  class="block truncate text-left"
-                  :class="[
-                    props.loading && 'select-none text-transparent',
-                    value.length === 0 && 'text-muted-300 dark:text-muted-500',
-                  ]"
-                >
-                  {{
-                    typeof props.multipleLabel === 'function'
-                      ? props.multipleLabel(value, props.properties.label)
-                      : props.multipleLabel
-                  }}
-                </div>
-              </template>
-
-              <template v-else-if="value">
-                <BaseAvatar
-                  v-if="props.properties.media && value[props.properties.media]"
-                  :src="value[props.properties.media]"
-                  size="xs"
-                  class="-ms-2 me-2"
-                />
-                <BaseIconBox
-                  v-else-if="
-                    props.properties.icon && value[props.properties.icon]
-                  "
-                  size="xs"
-                  shape="rounded"
-                  class="-ms-2 me-2"
-                >
-                  <Icon :name="value[props.properties.icon]" class="h-4 w-4" />
-                </BaseIconBox>
-                <div
-                  class="truncate text-left"
-                  :class="props.loading && 'text-transparent select-none'"
-                >
-                  {{
-                    props.properties.label
-                      ? value[props.properties.label]
-                      : props.properties.value
-                      ? value[props.properties.value]
-                      : value
-                  }}
-                </div>
-              </template>
-
-              <template v-else>
-                <div
-                  class="nui-listbox-placeholder"
-                  :class="props.loading && 'text-transparent select-none'"
-                >
-                  {{ placeholder }}
-                </div>
-              </template>
-
-              <span class="nui-listbox-chevron">
-                <Icon
-                  name="lucide:chevron-down"
-                  class="nui-listbox-chevron-inner"
-                  :class="[open && 'rotate-180']"
-                />
-              </span>
-
-              <div v-if="props.loading" class="nui-listbox-placeload">
-                <BasePlaceload class="nui-placeload" />
-              </div>
-            </div>
-          </slot>
-        </ListboxButton>
-
-        <Transition
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
+        <ListboxLabel
+          v-if="
+            ('label' in $slots && !props.labelFloat) ||
+            (props.label && !props.labelFloat)
+          "
+          class="nui-listbox-label"
         >
-          <ListboxOptions class="nui-listbox-options">
-            <ListboxOption
-              v-for="item in props.items"
-              v-slot="{ active, selected }"
-              :key="
-                props.properties.value ? item[props.properties.value] : item
-              "
-              :value="
-                props.modelModifiers.prop && props.properties.value
-                  ? item[props.properties.value]
-                  : item
-              "
-              as="template"
+          <slot name="label">{{ props.label }}</slot>
+        </ListboxLabel>
+
+        <div class="nui-listbox-outer">
+          <FloatReference>
+            <ListboxButton
+              :disabled="props.disabled"
+              class="nui-listbox-button"
             >
-              <li
-                class="nui-listbox-option group/nui-listbox-option"
-                :class="[active && 'nui-active']"
-              >
-                <slot
-                  name="listbox-item"
-                  :item="item"
-                  :open="open"
-                  :active="active"
-                  :selected="selected"
-                >
-                  <BaseAvatar
-                    v-if="
-                      props.properties.media && item[props.properties.media]
-                    "
-                    :src="item[props.properties.media]"
-                    size="xs"
-                  />
+              <slot name="listbox-button" :value="value" :open="open">
+                <div class="nui-listbox-button-inner">
                   <BaseIconBox
-                    v-else-if="
-                      props.properties.icon && item[props.properties.icon]
-                    "
-                    size="sm"
+                    v-if="props.icon"
+                    size="xs"
                     shape="rounded"
+                    class="nui-icon-box"
                   >
-                    <Icon
-                      :name="item[props.properties.icon]"
-                      class="text-muted-400 group-hover/nui-listbox-option:text-primary-500 h-5 w-5 transition-colors duration-200"
-                    />
+                    <Icon :name="props.icon" class="nui-icon-box-inner" />
                   </BaseIconBox>
 
-                  <div class="nui-listbox-option-inner">
-                    <BaseHeading
-                      as="h4"
-                      :weight="selected ? 'semibold' : 'normal'"
-                      size="sm"
-                      class="nui-listbox-heading"
+                  <template v-if="Array.isArray(value)">
+                    <div
+                      v-if="value.length === 0 && placeholder"
+                      class="nui-listbox-placeholder"
+                      :class="props.loading && 'text-transparent select-none'"
+                    >
+                      {{ placeholder }}
+                    </div>
+                    <div
+                      class="block truncate text-left"
+                      :class="[
+                        props.loading && 'select-none text-transparent',
+                        value.length === 0 &&
+                          'text-muted-300 dark:text-muted-500',
+                      ]"
                     >
                       {{
-                        props.properties.label
-                          ? item[props.properties.label]
-                          : props.properties.value
-                          ? item[props.properties.value]
-                          : item
+                        typeof props.multipleLabel === 'function'
+                          ? props.multipleLabel(value, props.properties.label)
+                          : props.multipleLabel
                       }}
-                    </BaseHeading>
-                    <BaseText
+                    </div>
+                  </template>
+
+                  <template v-else-if="value">
+                    <BaseAvatar
                       v-if="
-                        props.properties.sublabel &&
-                        item[props.properties.sublabel]
+                        props.properties.media && value[props.properties.media]
+                      "
+                      :src="value[props.properties.media]"
+                      size="xs"
+                      class="-ms-2 me-2"
+                    />
+                    <BaseIconBox
+                      v-else-if="
+                        props.properties.icon && value[props.properties.icon]
                       "
                       size="xs"
-                      class="nui-listbox-text"
+                      shape="rounded"
+                      class="-ms-2 me-2"
                     >
-                      {{ item[props.properties.sublabel] }}
-                    </BaseText>
-                  </div>
-                  <span v-if="selected" class="nui-listbox-selected-icon">
+                      <Icon
+                        :name="value[props.properties.icon]"
+                        class="h-4 w-4"
+                      />
+                    </BaseIconBox>
+                    <div
+                      class="truncate text-left"
+                      :class="props.loading && 'text-transparent select-none'"
+                    >
+                      {{
+                        props.properties.label
+                          ? value[props.properties.label]
+                          : props.properties.value
+                          ? value[props.properties.value]
+                          : value
+                      }}
+                    </div>
+                  </template>
+
+                  <template v-else>
+                    <div
+                      class="nui-listbox-placeholder"
+                      :class="props.loading && 'text-transparent select-none'"
+                    >
+                      {{ placeholder }}
+                    </div>
+                  </template>
+
+                  <span class="nui-listbox-chevron">
                     <Icon
-                      :name="selectedIcon"
-                      class="nui-listbobx-selected-icon-inner"
+                      name="lucide:chevron-down"
+                      class="nui-listbox-chevron-inner"
+                      :class="[open && 'rotate-180']"
                     />
                   </span>
-                </slot>
-              </li>
-            </ListboxOption>
-          </ListboxOptions>
-        </Transition>
-
-        <ListboxLabel
-          v-if="
-            ('label' in $slots && props.labelFloat) ||
-            (props.label && props.labelFloat)
-          "
-          class="nui-label-float"
-        >
-          <slot name="label">{{ props.label }}</slot>
-        </ListboxLabel>
 
-        <span
-          v-if="props.error && typeof props.error === 'string'"
-          class="text-danger-600 mt-1 block font-sans text-[0.65rem] font-medium leading-none"
-        >
-          {{ props.error }}
-        </span>
-      </div>
+                  <div v-if="props.loading" class="nui-listbox-placeload">
+                    <BasePlaceload class="nui-placeload" />
+                  </div>
+                </div>
+              </slot>
+            </ListboxButton>
+          </FloatReference>
+
+          <FloatContent class="w-full">
+            <ListboxOptions class="nui-listbox-options">
+              <ListboxOption
+                v-for="item in props.items"
+                v-slot="{ active, selected }"
+                :key="
+                  props.properties.value ? item[props.properties.value] : item
+                "
+                :value="
+                  props.modelModifiers.prop && props.properties.value
+                    ? item[props.properties.value]
+                    : item
+                "
+                as="template"
+              >
+                <li
+                  class="nui-listbox-option group/nui-listbox-option"
+                  :class="[active && 'nui-active']"
+                >
+                  <slot
+                    name="listbox-item"
+                    :item="item"
+                    :open="open"
+                    :active="active"
+                    :selected="selected"
+                  >
+                    <BaseAvatar
+                      v-if="
+                        props.properties.media && item[props.properties.media]
+                      "
+                      :src="item[props.properties.media]"
+                      size="xs"
+                    />
+                    <BaseIconBox
+                      v-else-if="
+                        props.properties.icon && item[props.properties.icon]
+                      "
+                      size="sm"
+                      shape="rounded"
+                    >
+                      <Icon
+                        :name="item[props.properties.icon]"
+                        class="text-muted-400 group-hover/nui-listbox-option:text-primary-500 h-5 w-5 transition-colors duration-200"
+                      />
+                    </BaseIconBox>
+
+                    <div class="nui-listbox-option-inner">
+                      <BaseHeading
+                        as="h4"
+                        :weight="selected ? 'semibold' : 'normal'"
+                        size="sm"
+                        class="nui-listbox-heading"
+                      >
+                        {{
+                          props.properties.label
+                            ? item[props.properties.label]
+                            : props.properties.value
+                            ? item[props.properties.value]
+                            : item
+                        }}
+                      </BaseHeading>
+                      <BaseText
+                        v-if="
+                          props.properties.sublabel &&
+                          item[props.properties.sublabel]
+                        "
+                        size="xs"
+                        class="nui-listbox-text"
+                      >
+                        {{ item[props.properties.sublabel] }}
+                      </BaseText>
+                    </div>
+                    <span v-if="selected" class="nui-listbox-selected-icon">
+                      <Icon
+                        :name="selectedIcon"
+                        class="nui-listbobx-selected-icon-inner"
+                      />
+                    </span>
+                  </slot>
+                </li>
+              </ListboxOption>
+            </ListboxOptions>
+          </FloatContent>
+
+          <ListboxLabel
+            v-if="
+              ('label' in $slots && props.labelFloat) ||
+              (props.label && props.labelFloat)
+            "
+            class="nui-label-float"
+          >
+            <slot name="label">{{ props.label }}</slot>
+          </ListboxLabel>
+
+          <span
+            v-if="props.error && typeof props.error === 'string'"
+            class="text-danger-600 mt-1 block font-sans text-[0.65rem] font-medium leading-none"
+          >
+            {{ props.error }}
+          </span>
+        </div>
+      </Float>
     </Listbox>
   </div>
 </template>
+
+<style scoped>
+.nui-listbox .nui-listbox-options {
+  position: unset;
+  margin-top: unset;
+}
+</style>
diff --git a/package.json b/package.json
index a78f8199..dc7abf9e 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
+    "@headlessui-float/vue": "^0.11.4",
     "@iconify/vue": "^4.1.1",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a109bce..f512418a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@headlessui-float/vue':
+    specifier: ^0.11.4
+    version: 0.11.4
   '@headlessui/vue':
     specifier: ^1.7.16
     version: 1.7.16
@@ -466,7 +469,7 @@ packages:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
+      ts-node: 10.9.1(@types/node@18.15.11)(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - '@swc/core'
@@ -965,6 +968,53 @@ packages:
     resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  /@floating-ui/core@1.5.0:
+    resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
+    dependencies:
+      '@floating-ui/utils': 0.1.4
+    dev: false
+
+  /@floating-ui/dom@1.5.3:
+    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+    dependencies:
+      '@floating-ui/core': 1.5.0
+      '@floating-ui/utils': 0.1.4
+    dev: false
+
+  /@floating-ui/utils@0.1.4:
+    resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
+    dev: false
+
+  /@floating-ui/vue@0.2.1:
+    resolution: {integrity: sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@floating-ui/dom': 1.5.3
+      vue-demi: 0.13.11
+    dev: false
+
+  /@headlessui-float/vue@0.11.4:
+    resolution: {integrity: sha512-hNGQTT3trknSB78ZI3usvnJACLyEUmacvk5Q8JQizJ8k+8GYLvhKklGIhJVO1E3litEzW6yyjPgfg6aEJ+1p6g==}
+    peerDependencies:
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      '@floating-ui/core': 1.5.0
+      '@floating-ui/dom': 1.5.3
+      '@floating-ui/vue': 0.2.1
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /@headlessui/vue@1.7.16:
     resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
     engines: {node: '>=10'}
@@ -3085,7 +3135,7 @@ packages:
     dependencies:
       '@types/node': 20.4.7
       cosmiconfig: 8.3.5(typescript@5.2.2)
-      ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
+      ts-node: 10.9.1(@types/node@18.15.11)(typescript@5.2.2)
       typescript: 5.2.2
     dev: true
 
@@ -7958,38 +8008,6 @@ packages:
       typescript: 5.2.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: false
-
-  /ts-node@10.9.1(@types/node@20.4.7)(typescript@5.2.2):
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.4.7
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.2.2
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
 
   /tsconfig-paths@3.14.2:
     resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
@@ -8496,6 +8514,21 @@ packages:
     dependencies:
       ufo: 1.3.0
 
+  /vue-demi@0.13.11:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dev: false
+
   /vue-demi@0.14.6:
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}