@nexxtmove/ui 0.1.58 → 0.1.60

package/src/components/FloatingPanel/FloatingPanel.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useFloating, autoUpdate, flip, shift, offset } from '@floating-ui/vue'
+import type { Placement } from '@floating-ui/vue'
+
+export interface NexxtFloatingPanelProps {
+  placement?: Placement
+  offsetDistance?: number
+}
+
+defineOptions({ name: 'NexxtFloatingPanel' })
+
+const props = withDefaults(defineProps<NexxtFloatingPanelProps>(), {
+  placement: 'bottom-start',
+  offsetDistance: 8,
+})
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(false)
+// Keeps the positioning container alive while the leave transition plays.
+const isLeaving = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const floatingRef = ref<HTMLElement | null>(null)
+
+const {
+  floatingStyles,
+  placement: computedPlacement,
+  isPositioned,
+} = useFloating(triggerRef, floatingRef, {
+  placement: computed(() => props.placement),
+  whileElementsMounted: autoUpdate,
+  middleware: [offset(props.offsetDistance), flip(), shift({ padding: 8 })],
+  // fixed strategy escapes overflow clipping (e.g. inside a Modal) without
+  // needing a body teleport that Reka UI's dialog would block with pointer-events:none.
+  strategy: 'fixed',
+  // Use top/left positioning so `transform` is free for Tailwind transition classes.
+  transform: false,
+})
+
+const open = () => {
+  isOpen.value = true
+  emit('open')
+}
+
+const close = () => {
+  if (!isOpen.value) return
+  // Only keep the container alive if content was actually shown (isPositioned),
+  // otherwise there is no leave transition to wait for.
+  if (isPositioned.value) isLeaving.value = true
+  isOpen.value = false
+  emit('close')
+}
+
+const toggle = () => (isOpen.value ? close() : open())
+
+const handleMousedown = (event: MouseEvent) => {
+  const target = event.target as Node
+  if (triggerRef.value?.contains(target) || floatingRef.value?.contains(target)) return
+  close()
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) close()
+}
+
+const transitionClasses = computed(() => {
+  const placement = computedPlacement.value
+  const [side, align] = placement.split('-') as [string, string | undefined]
+
+  const originMap: Record<string, string> = {
+    'bottom-start': 'origin-top-left',
+    'bottom-end': 'origin-top-right',
+    bottom: 'origin-top',
+    'top-start': 'origin-bottom-left',
+    'top-end': 'origin-bottom-right',
+    top: 'origin-bottom',
+    'left-start': 'origin-top-right',
+    'left-end': 'origin-bottom-right',
+    left: 'origin-right',
+    'right-start': 'origin-top-left',
+    'right-end': 'origin-bottom-left',
+    right: 'origin-left',
+  }
+  const translates: Record<string, string> = {
+    bottom: '-translate-y-2',
+    top: 'translate-y-2',
+    left: 'translate-x-2',
+    right: '-translate-x-2',
+  }
+  const origin = originMap[align ? `${side}-${align}` : side] ?? 'origin-top'
+  const translate = translates[side] ?? '-translate-y-2'
+  return {
+    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
+    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
+    enterFromClass: `opacity-0 scale-95 ${translate}`,
+    leaveToClass: `opacity-0 scale-95 ${translate}`,
+    enterToClass: 'opacity-100 scale-100 translate-x-0 translate-y-0',
+    leaveFromClass: 'opacity-100 scale-100 translate-x-0 translate-y-0',
+  }
+})
+
+defineExpose({ isOpen, open, close, toggle, triggerRef, floatingRef })
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleMousedown)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleMousedown)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <span ref="triggerRef" v-bind="$attrs" class="inline-flex">
+    <slot name="trigger" :is-open="isOpen" :toggle="toggle" :open="open" :close="close" />
+  </span>
+  <!--
+    floatingRef is the pure positioning container. It mounts immediately when
+    open so useFloating can compute the correct top/left before anything is visible.
+    isLeaving keeps it alive while the leave transition plays so the position
+    stays anchored to the trigger during the outgoing animation.
+    strategy:'fixed' means position:fixed is used, so this escapes any overflow
+    clipping without needing a body teleport.
+  -->
+  <div v-if="isOpen || isLeaving" ref="floatingRef" class="z-50" :style="floatingStyles">
+    <!--
+      Content only renders once isPositioned is true, meaning floatingRef is
+      already at the correct position. The enter transition therefore always
+      originates from the trigger — never from the page origin.
+    -->
+    <Transition v-bind="transitionClasses" @after-leave="isLeaving = false">
+      <div v-if="isOpen && isPositioned">
+        <slot name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/InputField/InputField.vue

@@ -36,7 +36,7 @@ const modelValue = defineModel<string>()
 
     <div
       class="flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-      :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'px-3': leftIcon }]"
+      :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': rightIcon }]"
     >
       <span v-if="leftIcon" class="flex items-center">
         <Icon :name="leftIcon" />

package/src/components/Modal/Modal.vue

@@ -55,7 +55,7 @@ const sizeClass = {
 <template>
   <DialogRoot :open="open" @update:open="handleOpenChange">
     <DialogPortal>
-      <div class="pointer-events-none fixed inset-0 z-50 grid place-items-center px-8">
+      <div class="pointer-events-none fixed inset-0 z-40 grid place-items-center px-8">
         <Transition
           enter-active-class="transition-opacity duration-200 ease-out"
           enter-from-class="opacity-0"

package/src/components.json

@@ -13,6 +13,7 @@
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
+  "NexxtFloatingPanel": "components/FloatingPanel/FloatingPanel.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",

package/src/index.ts

@@ -13,6 +13,7 @@ export { default as NexxtCustomerJourneyTile } from './components/CustomerJourne
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
+export { default as NexxtFloatingPanel } from './components/FloatingPanel/FloatingPanel.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'