fds-vue-core 7.2.2 → 7.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "7.2.2",
+  "version": "7.2.3",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",

package/src/components/Form/FdsPhonenumber/FdsPhonenumberCountryPicker.vue

@@ -80,10 +80,6 @@ const showActiveDialPreview = computed(
   () => !showHoverDialPreview.value && !!activeCountry.value && dropdownOpen.value && !isSearching.value,
 )
 
-const showDialPreviewPadding = computed(
-  () => showSelectedDialPreview.value || showHoverDialPreview.value || showActiveDialPreview.value,
-)
-
 const dialPreviewCountry = computed(() => {
   if (showHoverDialPreview.value && hoveredCountry.value) {
     return hoveredCountry.value
@@ -111,13 +107,13 @@ const dialPreviewClasses = computed(() => [
 ])
 
 const inputClasses = computed(() => [
-  'block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums',
-  showDialPreviewPadding.value ? 'pl-10 pr-10' : 'px-3 pr-10',
+  'block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums px-3 pr-10',
   'focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent',
   props.disabled
     ? 'text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50'
     : 'cursor-text bg-white text-gray-900',
   isInvalid.value && 'outline-2 -outline-offset-2 outline-red-600',
+  hasNoCountryResults.value && 'outline-red-600!',
 ])
 
 const arrowButtonClasses = computed(() => [
@@ -341,11 +337,11 @@ onBeforeUnmount(() => {
 <template>
   <div ref="rootRef" class="relative w-32" :class="props.class">
     <div class="relative w-full">
-      <div v-if="dialPreviewCountry" :class="dialPreviewClasses" aria-hidden="true">
+      <div v-if="!dropdownOpen" :class="dialPreviewClasses" aria-hidden="true">
         <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none">
-          {{ countryCodeToFlag(dialPreviewCountry.value) }}
+          {{ countryCodeToFlag(dialPreviewCountry?.value ?? '') }}
         </span>
-        {{ t('common.plus') }}{{ dialPreviewCountry.countryCode }}
+        {{ t('common.plus') }}{{ dialPreviewCountry?.countryCode ?? '' }}
       </div>
       <input
         ref="inputRef"