@nexxtmove/ui 0.1.69 → 0.1.71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,7 +24,6 @@
     "@number-flow/vue": "^0.5.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "flag-icons": "^7.5.0",
     "reka-ui": "^2.9.6"
   },
   "peerDependencies": {
@@ -32,6 +31,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "flag-icons": "^7.5.0",
     "@awesome.me/kit-37b149f3ef": "^1.0.8",
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.4.4",

package/src/components/CountrySelect/CountrySelect.vue

@@ -1,3 +1,22 @@
+<script lang="ts">
+import flagIconsCss from 'flag-icons/css/flag-icons.min.css?inline'
+
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style')
+  style.textContent = flagIconsCss
+  document.head.appendChild(style)
+}
+
+export interface NexxtCountrySelectProps {
+  placeholder?: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+  pinnedCountries?: string[]
+}
+</script>
+
 <script lang="ts" setup>
 import { ref, computed, nextTick } from 'vue'
 import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
@@ -10,15 +29,6 @@ defineOptions({ name: 'NexxtCountrySelect' })
 const generateId = () => 'country-select-' + Math.random().toString(36).slice(2, 10)
 const selectId = generateId()
 
-interface NexxtCountrySelectProps {
-  placeholder?: string
-  label?: string
-  error?: boolean
-  errorMessage?: string
-  required?: boolean
-  pinnedCountries?: string[]
-}
-
 const props = withDefaults(defineProps<NexxtCountrySelectProps>(), {
   placeholder: 'Selecteer een land...',
   pinnedCountries: () => [],
@@ -154,7 +164,3 @@ const onOpen = async () => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import 'flag-icons/css/flag-icons.min.css';
-</style>

package/src/components/FloatingPanel/FloatingPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useFloating, autoUpdate, flip, shift, offset, size } from '@floating-ui/vue'
 import type { Placement } from '@floating-ui/vue'
 
@@ -25,6 +25,9 @@ const emit = defineEmits<{
 const isOpen = ref(false)
 // Keeps the positioning container alive while the leave transition plays.
 const isLeaving = ref(false)
+// Tracks whether floating-ui has computed the position *for the current open cycle*.
+// Reset on every open() so the Transition always sees false→true and plays the enter animation.
+const isReady = ref(false)
 const triggerRef = ref<HTMLElement | null>(null)
 const floatingRef = ref<HTMLElement | null>(null)
 
@@ -58,9 +61,16 @@ const {
   transform: false,
 })
 
-const open = () => {
+const open = async () => {
+  isReady.value = false
   isOpen.value = true
   emit('open')
+  // Wait for Vue to render the v-if with isReady=false before setting it true.
+  // This guarantees the Transition always sees false→true and plays the enter animation,
+  // even when isPositioned is already true from a previous open cycle.
+  await nextTick()
+  if (isPositioned.value) isReady.value = true
+  // If not yet positioned, the watcher below will set isReady once it resolves.
 }
 
 const close = () => {
@@ -120,6 +130,10 @@ const transitionClasses = computed(() => {
   }
 })
 
+watch(isPositioned, (val) => {
+  if (val && isOpen.value) isReady.value = true
+})
+
 defineExpose({ isOpen, open, close, toggle, triggerRef, floatingRef })
 
 onMounted(() => {
@@ -152,7 +166,7 @@ onUnmounted(() => {
       originates from the trigger — never from the page origin.
     -->
     <Transition v-bind="transitionClasses" @after-leave="isLeaving = false">
-      <div v-if="isOpen && isPositioned">
+      <div v-if="isOpen && isReady">
         <slot name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
       </div>
     </Transition>