@nexxtmove/ui 0.1.58 → 0.1.60

package/dist/nuxt.js

@@ -1,8 +1,8 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", r = "components/Avatar/Avatar.vue", i = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", P = "components/DropdownButton/DropdownButton.vue", S = "components/Header/Header.vue", h = "components/Icon/Icon.vue", k = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", g = "components/PresenceIndicator/PresenceIndicator.vue", M = "components/ProgressBar/ProgressBar.vue", B = "components/PropertyCard/PropertyCard.vue", D = "components/PropertyListing/PropertyListing.vue", A = "components/Skeleton/Skeleton.vue", H = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", w = "components/SocialIcons/SocialIcons.vue", E = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", F = "components/SocialMediaTemplate/SocialMediaTemplate.vue", J = "components/SocialMediaType/SocialMediaType.vue", L = "components/Source/Source.vue", j = "components/StepperHeader/StepperHeader.vue", $ = "components/TabbedContent/TabbedContent.vue", K = "components/Table/Table.vue", O = "components/Tabs/Tabs.vue", U = "components/TimelineEvent/TimelineEvent.vue", _ = "components/TimelinePhaseblock/TimelinePhaseblock.vue", q = "components/Tooltip/Tooltip.vue", z = {
+const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", r = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", P = "components/DoughnutChart/DoughnutChart.vue", T = "components/DropdownButton/DropdownButton.vue", S = "components/FloatingPanel/FloatingPanel.vue", h = "components/Header/Header.vue", k = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", B = "components/ProgressBar/ProgressBar.vue", D = "components/PropertyCard/PropertyCard.vue", A = "components/PropertyListing/PropertyListing.vue", F = "components/Skeleton/Skeleton.vue", H = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", w = "components/SocialIcons/SocialIcons.vue", E = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", J = "components/SocialMediaTemplate/SocialMediaTemplate.vue", L = "components/SocialMediaType/SocialMediaType.vue", j = "components/Source/Source.vue", $ = "components/StepperHeader/StepperHeader.vue", K = "components/TabbedContent/TabbedContent.vue", O = "components/Table/Table.vue", U = "components/Tabs/Tabs.vue", _ = "components/TimelineEvent/TimelineEvent.vue", q = "components/TimelinePhaseblock/TimelinePhaseblock.vue", z = "components/Tooltip/Tooltip.vue", G = {
   NexxtAnimatedNumber: x,
-  NexxtAvatar: r,
-  NexxtButton: i,
+  NexxtAvatar: i,
+  NexxtButton: r,
   NexxtCalendar: m,
   NexxtCard: u,
   NexxtCheckbox: p,
@@ -12,33 +12,34 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", r = "components/Avatar
   NexxtContactInfoCard: C,
   NexxtCustomerJourneyTile: N,
   NexxtDatePicker: b,
-  NexxtDoughnutChart: T,
-  NexxtDropdownButton: P,
-  NexxtHeader: S,
-  NexxtIcon: h,
-  NexxtInfoBlock: k,
-  NexxtInputField: I,
-  NexxtModal: f,
+  NexxtDoughnutChart: P,
+  NexxtDropdownButton: T,
+  NexxtFloatingPanel: S,
+  NexxtHeader: h,
+  NexxtIcon: k,
+  NexxtInfoBlock: I,
+  NexxtInputField: f,
+  NexxtModal: g,
   NexxtPagination: y,
-  NexxtPresenceIndicator: g,
-  NexxtProgressBar: M,
-  NexxtPropertyCard: B,
-  NexxtPropertyListing: D,
-  NexxtSkeleton: A,
+  NexxtPresenceIndicator: M,
+  NexxtProgressBar: B,
+  NexxtPropertyCard: D,
+  NexxtPropertyListing: A,
+  NexxtSkeleton: F,
   NexxtSkeletonPropertyCard: H,
   NexxtSocialIcons: w,
   NexxtSocialMediaCustomTemplate: E,
-  NexxtSocialMediaTemplate: F,
-  NexxtSocialMediaType: J,
-  NexxtSource: L,
-  NexxtStepperHeader: j,
-  NexxtTabbedContent: $,
-  NexxtTable: K,
-  NexxtTabs: O,
-  NexxtTimelineEvent: U,
-  NexxtTimelinePhaseblock: _,
-  NexxtTooltip: q
-}, Q = c({
+  NexxtSocialMediaTemplate: J,
+  NexxtSocialMediaType: L,
+  NexxtSource: j,
+  NexxtStepperHeader: $,
+  NexxtTabbedContent: K,
+  NexxtTable: O,
+  NexxtTabs: U,
+  NexxtTimelineEvent: _,
+  NexxtTimelinePhaseblock: q,
+  NexxtTooltip: z
+}, R = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -50,7 +51,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", r = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(z))
+    for (const [t, n] of Object.entries(G))
       s({
         name: t,
         export: "default",
@@ -69,5 +70,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", r = "components/Avatar
   }
 });
 export {
-  Q as default
+  R as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,6 +20,7 @@
     "tailwind"
   ],
   "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
     "@number-flow/vue": "^0.5.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",

package/src/components/Combobox/Combobox.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick } from 'vue'
+import type { Placement } from '@floating-ui/vue'
 import NexxtButton from '../Button/Button.vue'
 import NexxtIcon from '../Icon/Icon.vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 import ComboboxPanel from '../ComboboxPanel/ComboboxPanel.vue'
 import type { ComboboxOptions } from '../ComboboxPanel/combobox-types'
 
@@ -23,78 +25,36 @@ const {
 
 const selected = defineModel<(string | number)[]>({ default: [] })
 
-const isOpen = ref(false)
 const panelRef = ref<InstanceType<typeof ComboboxPanel> | null>(null)
-const wrapperRef = ref<HTMLElement | null>(null)
 
-watch(isOpen, async (open) => {
-  if (open) {
-    await nextTick()
-    panelRef.value?.focus()
-  }
-})
+const floatingPlacement = computed(
+  (): Placement => (placement === 'right' ? 'bottom-end' : 'bottom-start'),
+)
 
-const handleClickOutside = (event: MouseEvent) => {
-  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
+const onPanelOpen = async () => {
+  await nextTick()
+  panelRef.value?.focus()
 }
-
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
-
-const transitionClasses = computed(() => {
-  const origin = placement === 'right' ? 'origin-top-right' : 'origin-top-left'
-  return {
-    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
-    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
-    enterFromClass: 'opacity-0 scale-95 -translate-y-3',
-    leaveToClass: 'opacity-0 scale-95 -translate-y-3',
-    enterToClass: 'opacity-100 scale-100 translate-y-0',
-    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
-  }
-})
 </script>
 
 <template>
-  <div ref="wrapperRef" class="relative">
-    <NexxtButton
-      :variant
-      :icon
-      :aria-expanded="isOpen"
-      aria-haspopup="listbox"
-      @click="isOpen = !isOpen"
-    >
-      <span class="flex gap-2"><slot>Combobox</slot><NexxtIcon name="chevron-down" /></span>
-    </NexxtButton>
-    <Transition v-bind="transitionClasses">
-      <div
-        v-if="isOpen"
-        class="absolute top-full z-10 mt-2.5"
-        :class="placement === 'right' ? 'right-0' : 'left-0'"
-      >
-        <ComboboxPanel
-          ref="panelRef"
-          v-model="selected"
-          :options="props.options"
-          :allow-new="props.allowNew"
-          :icon
-          :placeholder
-          :floating="false"
-        />
-      </div>
-    </Transition>
-  </div>
+  <NexxtFloatingPanel :placement="floatingPlacement" @open="onPanelOpen">
+    <template #trigger="{ isOpen, toggle }">
+      <NexxtButton :variant :icon :aria-expanded="isOpen" aria-haspopup="listbox" @click="toggle">
+        <span class="flex gap-2"><slot>Combobox</slot><NexxtIcon name="chevron-down" /></span>
+      </NexxtButton>
+    </template>
+
+    <template #content>
+      <ComboboxPanel
+        ref="panelRef"
+        v-model="selected"
+        :options="props.options"
+        :allow-new="props.allowNew"
+        :icon
+        :placeholder
+        :floating="false"
+      />
+    </template>
+  </NexxtFloatingPanel>
 </template>

package/src/components/DatePicker/DatePicker.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, nextTick } from 'vue'
+import type { Placement } from '@floating-ui/vue'
 import NexxtButton from '../Button/Button.vue'
 import NexxtCalendar from '../Calendar/Calendar.vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 import type { NexxtCalendarProps } from '../Calendar/calendar.types'
 
 export type CalendarAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
@@ -36,110 +38,65 @@ const calendarProps = computed((): NexxtCalendarProps => {
 
 // ── State ─────────────────────────────────────────────────────────────────────
 
-const isOpen = ref(false)
-const wrapperRef = ref<HTMLElement | null>(null)
-const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<InstanceType<typeof NexxtFloatingPanel> | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
 
-// ── Watchers ──────────────────────────────────────────────────────────────────
-
-watch(isOpen, async (val) => {
-  if (!val) {
-    await nextTick()
-    const focusable = triggerRef.value?.querySelector<HTMLElement>(
-      'button, input, [tabindex]:not([tabindex="-1"])',
-    )
-    focusable?.focus()
-  } else {
-    await nextTick()
-    popoverRef.value?.focus()
-  }
-})
+// ── Anchor → Floating UI placement ───────────────────────────────────────────
+
+const anchorToPlacement: Record<CalendarAnchor, Placement> = {
+  'bottom-right': 'bottom-end',
+  'bottom-left': 'bottom-start',
+  'top-right': 'top-end',
+  'top-left': 'top-start',
+}
+
+const floatingPlacement = computed(() => anchorToPlacement[props.anchor])
 
 // ── Handlers ──────────────────────────────────────────────────────────────────
 
 const handleSelect = () => {
-  if (props.autoClose) {
-    isOpen.value = false
-  }
+  if (props.autoClose) panelRef.value?.close()
 }
 
-const handleKeydown = (event: KeyboardEvent) => {
-  if (!isOpen.value) return
-  if (event.key === 'Escape') {
-    isOpen.value = false
-  }
+const onPanelOpen = async () => {
+  await nextTick()
+  popoverRef.value?.focus()
 }
 
-const handleClickOutside = (event: MouseEvent) => {
-  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
+const onPanelClose = async () => {
+  await nextTick()
+  const focusable = panelRef.value?.triggerRef?.querySelector<HTMLElement>(
+    'button, input, [tabindex]:not([tabindex="-1"])',
+  )
+  focusable?.focus()
 }
-
-onMounted(() => document.addEventListener('mousedown', handleClickOutside))
-onUnmounted(() => document.removeEventListener('mousedown', handleClickOutside))
-
-// ── Popover placement ─────────────────────────────────────────────────────────
-
-const popoverClasses = computed(() => {
-  const map: Record<CalendarAnchor, string> = {
-    'bottom-right': 'top-full right-0 mt-2 origin-top-right',
-    'bottom-left': 'top-full left-0 mt-2 origin-top-left',
-    'top-right': 'bottom-full right-0 mb-2 origin-bottom-right',
-    'top-left': 'bottom-full left-0 mb-2 origin-bottom-left',
-  }
-  return map[props.anchor]
-})
-
-const transitionClasses = computed(() => {
-  const isBottom = props.anchor.startsWith('bottom')
-
-  const origins: Record<CalendarAnchor, string> = {
-    'bottom-left': 'origin-top-left',
-    'bottom-right': 'origin-top-right',
-    'top-left': 'origin-bottom-left',
-    'top-right': 'origin-bottom-right',
-  }
-
-  const translateClass = isBottom ? '-translate-y-3' : 'translate-y-3'
-
-  return {
-    enterActiveClass: `transition-all duration-200 ease-out ${origins[props.anchor]}`,
-    leaveActiveClass: `transition-all duration-150 ease-in ${origins[props.anchor]}`,
-    enterFromClass: `opacity-0 scale-95 ${translateClass}`,
-    leaveToClass: `opacity-0 scale-95 ${translateClass}`,
-    enterToClass: 'opacity-100 scale-100 translate-y-0',
-    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
-  }
-})
 </script>
 
 <template>
-  <div ref="wrapperRef" class="relative inline-block" @keydown="handleKeydown">
-    <span ref="triggerRef">
-      <slot name="trigger" :is-open="isOpen" :toggle="() => (isOpen = !isOpen)">
+  <NexxtFloatingPanel
+    ref="panelRef"
+    :placement="floatingPlacement"
+    @open="onPanelOpen"
+    @close="onPanelClose"
+  >
+    <template #trigger="{ isOpen, toggle }">
+      <slot name="trigger" :is-open="isOpen" :toggle="toggle">
         <NexxtButton
           icon="calendar"
           variant="secondary"
           :aria-expanded="isOpen"
           aria-haspopup="grid"
-          @click="isOpen = !isOpen"
+          @click="toggle"
         >
           {{ props.placeholder }}
         </NexxtButton>
       </slot>
-    </span>
-
-    <Transition v-bind="transitionClasses">
-      <div
-        v-if="isOpen"
-        ref="popoverRef"
-        tabindex="-1"
-        :class="['absolute z-50 outline-none', popoverClasses]"
-      >
+    </template>
+
+    <template #content>
+      <div ref="popoverRef" tabindex="-1" class="outline-none">
         <NexxtCalendar v-model="model" v-bind="calendarProps" @select="handleSelect" />
       </div>
-    </Transition>
-  </div>
+    </template>
+  </NexxtFloatingPanel>
 </template>

package/src/components/DropdownButton/DropdownButton.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, computed } from 'vue'
+import type { Placement } from '@floating-ui/vue'
 import NexxtIcon from '../Icon/Icon.vue'
 import NexxtCheckbox from '../Checkbox/Checkbox.vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 
 interface NexxtDropdownButton {
   label: string
@@ -44,8 +46,12 @@ const emit = defineEmits<{
   checkboxChange: [label: string, checked: boolean]
 }>()
 
-const isOpen = ref(false)
-const wrapperRef = ref<HTMLElement | null>(null)
+const panelRef = ref<InstanceType<typeof NexxtFloatingPanel> | null>(null)
+
+const floatingPlacement = computed(
+  (): Placement => (placement === 'right' ? 'bottom-end' : 'bottom-start'),
+)
+
 const flatItems = computed<NexxtDropdownButton[]>(() =>
   options.length > 0 && 'items' in options[0]
     ? (options as NexxtDropdownButtonGroup[]).flatMap((g) => g.items)
@@ -75,35 +81,17 @@ const handleAction = (action: string | (() => void)) => {
   }
 }
 
-const toggleDropdown = () => {
-  isOpen.value = !isOpen.value
-}
-
 const handleOptionClick = (option: NexxtDropdownButton) => {
   if (option.checkbox) {
     const newValue = !checkedItems.value[option.label]
     toggledItems.value[option.label] = newValue
     emit('checkboxChange', option.label, newValue)
   } else {
-    isOpen.value = false
+    panelRef.value?.close()
   }
   handleAction(option.action)
 }
 
-const handleClickOutside = (event: MouseEvent) => {
-  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
-})
-
 const isGrouped = (
   opts: NexxtDropdownButton[] | NexxtDropdownButtonGroup[],
 ): opts is NexxtDropdownButtonGroup[] => opts.length > 0 && 'items' in opts[0]
@@ -136,66 +124,49 @@ const buttonClasses = computed(() => {
 
   return ''
 })
-
-const transitionClasses = computed(() => {
-  const origin = placement === 'right' ? 'origin-top-right' : 'origin-top-left'
-
-  return {
-    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
-    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
-    enterFromClass: 'opacity-0 scale-95 -translate-y-3',
-    leaveToClass: 'opacity-0 scale-95 -translate-y-3',
-    enterToClass: 'opacity-100 scale-100 translate-y-0',
-    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
-  }
-})
 </script>
 
 <template>
-  <div
-    ref="wrapperRef"
-    class="relative inline-flex flex-col"
-    :class="placement === 'right' ? 'items-end' : 'items-start'"
-  >
-    <div class="inline-flex items-center overflow-hidden rounded-lg" :class="componentClasses">
-      <template v-if="!iconOnly">
+  <NexxtFloatingPanel ref="panelRef" :placement="floatingPlacement">
+    <template #trigger="{ isOpen, toggle }">
+      <div class="inline-flex items-center overflow-hidden rounded-lg" :class="componentClasses">
+        <template v-if="!iconOnly">
+          <button
+            class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
+            :class="buttonClasses"
+            @click="action && handleAction(action)"
+          >
+            <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
+            {{ label }}
+          </button>
+          <span
+            class="h-7 w-px rounded-sm"
+            :class="variant === 'primary' ? 'bg-white' : 'bg-gray-200'"
+            aria-hidden="true"
+          ></span>
+        </template>
         <button
-          class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
-          :class="buttonClasses"
-          @click="action && handleAction(action)"
+          class="w-10 shrink-0 cursor-pointer transition-colors duration-200"
+          :class="[buttonClasses, iconOnly ? 'p-2' : 'px-2 py-2']"
+          aria-haspopup="menu"
+          :aria-expanded="isOpen"
+          :aria-label="`Open ${label} menu`"
+          @click="toggle"
         >
-          <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
-          {{ label }}
+          <NexxtIcon
+            :name="triggerIcon"
+            class="transition-transform duration-200"
+            :class="{ 'rotate-180': isOpen && triggerIcon === 'chevron-down' }"
+            aria-hidden="true"
+          />
         </button>
-        <span
-          class="h-7 w-px rounded-sm"
-          :class="variant === 'primary' ? 'bg-white' : 'bg-gray-200'"
-          aria-hidden="true"
-        ></span>
-      </template>
-      <button
-        class="w-10 shrink-0 cursor-pointer transition-colors duration-200"
-        :class="[buttonClasses, iconOnly ? 'p-2' : 'px-2 py-2']"
-        @click="iconOnly ? toggleDropdown() : toggleDropdown()"
-        aria-haspopup="menu"
-        :aria-expanded="isOpen"
-        :aria-label="`Open ${label} menu`"
-      >
-        <NexxtIcon
-          :name="triggerIcon"
-          class="transition-transform duration-200"
-          :class="{ 'rotate-180': isOpen && triggerIcon === 'chevron-down' }"
-          aria-hidden="true"
-        />
-      </button>
-    </div>
-
-    <Transition v-bind="transitionClasses">
+      </div>
+    </template>
+
+    <template #content>
       <div
-        v-if="isOpen"
         role="menu"
-        class="absolute top-full z-10 mt-2.5 min-w-full rounded-lg border border-gray-200 bg-white whitespace-nowrap"
-        :class="placement === 'right' ? 'right-0' : 'left-0'"
+        class="min-w-full rounded-lg border border-gray-200 bg-white whitespace-nowrap"
       >
         <template v-for="(group, groupIndex) in groupedOptions" :key="group.title || groupIndex">
           <div
@@ -225,6 +196,6 @@ const transitionClasses = computed(() => {
           </button>
         </template>
       </div>
-    </Transition>
-  </div>
+    </template>
+  </NexxtFloatingPanel>
 </template>