@nexxtmove/ui 0.1.57 → 0.1.59

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/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/TabbedContent/TabbedContent.vue

@@ -14,9 +14,19 @@ defineOptions({
 
 const props = defineProps<NexxtTabbedContent>()
 
-const selected = ref(props.tabs[0] ?? '')
+const selected = defineModel<string>({ default: '' })
 const direction = ref<'forward' | 'backward'>('forward')
 
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    if (!selected.value && newTabs?.length > 0) {
+      selected.value = newTabs[0]
+    }
+  },
+  { immediate: true },
+)
+
 watch(selected, (next, prev) => {
   direction.value = props.tabs.indexOf(next) > props.tabs.indexOf(prev) ? 'forward' : 'backward'
 })

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'