fds-vue-core 7.1.9 → 7.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "7.1.9",
+  "version": "7.2.2",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -48,30 +48,31 @@
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "axios": "1.16.0",
-    "date-fns": "4.1.0",
+    "axios": "1.16.1",
+    "date-fns": "4.2.1",
     "imask": "7.6.1",
-    "tailwindcss": "4.2.4",
-    "vue-i18n": "11.3.2"
+    "libphonenumber-js": "1.12.36",
+    "tailwindcss": "4.3.0",
+    "vue-i18n": "11.4.4"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "11.0.7",
-    "@chromatic-com/storybook": "5.0.1",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-vitest": "10.2.12",
-    "@storybook/vue3": "10.2.12",
-    "@storybook/vue3-vite": "10.2.12",
-    "@tailwindcss/vite": "4.2.4",
+    "@chromatic-com/storybook": "5.2.1",
+    "@intlify/unplugin-vue-i18n": "11.2.3",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/vue3": "10.4.0",
+    "@storybook/vue3-vite": "10.4.0",
+    "@tailwindcss/vite": "4.3.0",
     "@types/node": "22.16.5",
-    "@vitejs/plugin-vue": "6.0.6",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vitest/browser": "3.2.4",
-    "fg-devkit": "1.8.4",
-    "storybook": "10.2.12",
-    "tsx": "4.21.0",
+    "fg-devkit": "1.8.5",
+    "storybook": "10.4.0",
+    "tsx": "4.22.3",
     "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-vue-devtools": "8.1.1",
+    "vite-plugin-vue-devtools": "8.1.2",
     "vitest": "3.2.4",
     "vue": "3.5.34"
   },

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useBoldQuery } from '../../composables/useBoldQuery'
-import { isPidString, useIsPid } from '../../composables/useIsPid'
+import {
+  formatPidWithDash,
+  normalizePidSearchValue,
+  PID_MASK,
+  PID_MASK_OPTIONS,
+  useIsPid,
+} from '../../composables/useIsPid'
 import FdsPagination from '../FdsPagination/FdsPagination.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
 import FdsInput from '../Form/FdsInput/FdsInput.vue'
@@ -179,7 +185,7 @@ const matchesSearchTerm = (item: Record<string, unknown>): boolean => {
 
   // When mask is active, use unmasked value (digits only) for searching
   // This ensures we can search even when user has partially typed a PID
-  const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
+  const searchValue = isPid.value ? normalizePidSearchValue(searchTerm.value) : searchTerm.value
 
   const searchLower = searchValue.toLowerCase()
   const pidRegex = /^\d{8}[a-zA-Z0-9]{4}$/
@@ -195,10 +201,13 @@ const matchesSearchTerm = (item: Record<string, unknown>): boolean => {
 
     const stringValue = String(value)
     const valueLower = stringValue.toLowerCase()
-    const unmaskedValue = stringValue.replace(/\D/g, '')
+    const unmaskedValue = isPid.value ? normalizePidSearchValue(stringValue) : stringValue.replace(/\D/g, '')
 
     // Check both masked and unmasked versions
-    return valueLower.includes(searchLower) || (unmaskedValue.length > 0 && unmaskedValue.includes(searchValue))
+    return (
+      valueLower.includes(searchLower) ||
+      (unmaskedValue.length > 0 && unmaskedValue.toLowerCase().includes(searchLower))
+    )
   })
 }
 
@@ -249,25 +258,6 @@ watch(
   { immediate: true },
 )
 
-const formatPidWithDash = (value: string): string => {
-  // Only format if it looks like a personnummer
-  if (!isPidString(value)) {
-    // If it's not a PID, remove any trailing dash that might be left
-    return value.replace(/-$/, '')
-  }
-
-  // Remove all non-digits
-  const digits = value.replace(/\D/g, '')
-
-  // Only add dash if there are digits after the first 8
-  if (digits.length > 8) {
-    return `${digits.substring(0, 8)}-${digits.substring(8)}`
-  }
-
-  // If exactly 8 digits or less, return without dash
-  return digits
-}
-
 const debounce = <T extends (...args: any[]) => void>(fn: T, delay: number) => {
   let timeout: ReturnType<typeof setTimeout>
   return (...args: Parameters<T>) => {
@@ -335,12 +325,9 @@ const { isPid } = useIsPid(searchTerm)
 const { boldQuery } = useBoldQuery(searchTerm)
 
 // Mask configuration for personnummer (yyyymmdd-nnnn)
-const pidMask = computed(() => {
-  if (isPid.value) {
-    return '00000000-0000'
-  }
-  return undefined
-})
+const pidMask = computed(() => (isPid.value ? PID_MASK : undefined))
+
+const pidMaskOptions = computed(() => (isPid.value ? PID_MASK_OPTIONS : { lazy: true }))
 
 const handleMatchingString = (item: Record<string, unknown>): string => {
   const values = searchFields.value.map((key) => String(item[key] || ''))
@@ -350,7 +337,7 @@ const handleMatchingString = (item: Record<string, unknown>): string => {
     result = values[0] || ''
   } else {
     // Format PID if second value is 12 digits
-    if (values[1]?.length === 12 && parseInt(values[1])) {
+    if (values[1] && /^\d{8}[a-zA-Z0-9]{4}$/.test(normalizePidSearchValue(values[1]))) {
       values[1] = formatPidWithDash(values[1])
     }
 
@@ -551,7 +538,7 @@ defineExpose<{
             :id="inputId"
             :clearButton="!!searchTerm"
             :mask="pidMask"
-            :maskOptions="{ lazy: true }"
+            :maskOptions="pidMaskOptions"
             v-bind="inputAriaAttrs"
             :searchIcon="!disabled && !hasInputValue"
             @input="handleInput"

package/src/components/FdsSearchSelectPro/FdsSearchSelectPro.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useBoldQuery } from '../../composables/useBoldQuery'
-import { isPidString, useIsPid } from '../../composables/useIsPid'
+import {
+  formatPidWithDash,
+  isPidString,
+  normalizePidSearchValue,
+  PID_MASK,
+  PID_MASK_OPTIONS,
+  useIsPid,
+} from '../../composables/useIsPid'
 import { useFdsI18n } from '../../plugin/useFdsI18n'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
@@ -279,25 +286,6 @@ watch(
   { immediate: true },
 )
 
-const formatPidWithDash = (value: string): string => {
-  // Only format if it looks like a personnummer
-  if (!isPidString(value)) {
-    // If it's not a PID, remove any trailing dash that might be left
-    return value.replace(/-$/, '')
-  }
-
-  // Remove all non-digits
-  const digits = value.replace(/\D/g, '')
-
-  // Only add dash if there are digits after the first 8
-  if (digits.length > 8) {
-    return `${digits.substring(0, 8)}-${digits.substring(8)}`
-  }
-
-  // If exactly 8 digits or less, return without dash
-  return digits
-}
-
 let changeTimeout: ReturnType<typeof setTimeout> | null = null
 let inputTimeout: ReturnType<typeof setTimeout> | null = null
 const isDebouncingChange = ref(false)
@@ -380,12 +368,9 @@ const handleInput = (e: Event) => {
 const { boldQuery } = useBoldQuery(searchTerm)
 
 // Mask configuration for personnummer (yyyymmdd-nnnn)
-const pidMask = computed(() => {
-  if (isPid.value) {
-    return '00000000-0000'
-  }
-  return undefined
-})
+const pidMask = computed(() => (isPid.value ? PID_MASK : undefined))
+
+const pidMaskOptions = computed(() => (isPid.value ? PID_MASK_OPTIONS : { lazy: true }))
 
 const handleMatchingString = (item: Record<string, unknown>): string => {
   if (isDividerItem(item)) {
@@ -415,7 +400,7 @@ const handleMatchingString = (item: Record<string, unknown>): string => {
     result = values[0] ?? ''
   } else {
     // Format PID if second value is 12 digits
-    if (values[1]?.length === 12 && parseInt(values[1])) {
+    if (values[1] && /^\d{8}[a-zA-Z0-9]{4}$/.test(normalizePidSearchValue(values[1]))) {
       values[1] = formatPidWithDash(values[1])
     }
 
@@ -475,8 +460,7 @@ function resolveInitialSingleSelection() {
     if (!isPidString(trimmed)) {
       return trimmed.replace(/-$/, '').toLowerCase()
     }
-    const digits = trimmed.replace(/\D/g, '')
-    return (digits.length > 8 ? `${digits.substring(0, 8)}-${digits.substring(8)}` : digits).toLowerCase()
+    return formatPidWithDash(trimmed).toLowerCase()
   }
 
   const normalizedInitialValue = normalizeForInitialMatch(props.initialValue)
@@ -853,7 +837,7 @@ defineExpose<{
             :id="inputId"
             :clearButton="!!searchTerm || hasSelection"
             :mask="pidMask"
-            :maskOptions="{ lazy: true }"
+            :maskOptions="pidMaskOptions"
             v-bind="inputAriaAttrs"
             :searchIcon="!disabled && !inputHasFocus && !hasInputValue && !hasSelection && !dropdownVisible"
             @input="handleInput"

package/src/components/FdsSearchSelectPro/useSearchSelectProItems.ts

@@ -1,4 +1,5 @@
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
+import { normalizePidSearchValue } from '../../composables/useIsPid'
 import { useFdsI18n } from '../../plugin/useFdsI18n'
 import type { FdsSearchSelectProProps } from './types'
 
@@ -261,7 +262,7 @@ export const useSearchSelectProItems = ({
     if (bypassSearchFilter.value) return true
     if (!searchTerm.value) return true
 
-    const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
+    const searchValue = isPid.value ? normalizePidSearchValue(searchTerm.value) : searchTerm.value
     const searchLower = searchValue.toLowerCase()
     const pidRegex = /^\d{8}[a-zA-Z0-9]{4}$/
     if (pidRegex.test(searchValue)) return true
@@ -272,8 +273,13 @@ export const useSearchSelectProItems = ({
 
       const stringValue = String(value)
       const valueLower = stringValue.toLowerCase()
-      const unmaskedValue = stringValue.replace(/\D/g, '')
-      return valueLower.includes(searchLower) || (unmaskedValue.length > 0 && unmaskedValue.includes(searchValue))
+      const unmaskedValue = isPid.value
+        ? normalizePidSearchValue(stringValue)
+        : stringValue.replace(/\D/g, '')
+      return (
+        valueLower.includes(searchLower) ||
+        (unmaskedValue.length > 0 && unmaskedValue.toLowerCase().includes(searchLower))
+      )
     })
   }
 
@@ -281,7 +287,7 @@ export const useSearchSelectProItems = ({
     if (bypassSearchFilter.value) return false
     if (!isDividerItem(item) || !searchTerm.value) return false
 
-    const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
+    const searchValue = isPid.value ? normalizePidSearchValue(searchTerm.value) : searchTerm.value
     const searchLower = searchValue.toLowerCase()
     const dividerSearchFields = [...searchFields.value, 'label', 'name']
 

package/src/components/FdsWizard/FdsWizard.vue

@@ -503,7 +503,7 @@ defineSlots<{
                 </span>
                 <span
                   :ref="(el) => setStepLabelRef(el, visibleIndex)"
-                  class="absolute bottom-0 text-blue-600 font-bold text-sm"
+                  class="absolute bottom-0 text-blue-600 font-bold text-sm whitespace-nowrap"
                   :class="{ invisible: !showStepLabels }"
                 >
                   {{ entry.route.meta.wizard.name }}

package/src/components/Form/FdsPhonenumber/FdsPhonenumber.stories.ts

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsPhonenumber from './FdsPhonenumber.vue'
+
+const meta: Meta<typeof FdsPhonenumber> = {
+  title: 'FDS/Form/FdsPhonenumber',
+  component: FdsPhonenumber,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    meta: { control: 'text' },
+    disabled: { control: 'boolean' },
+    optional: { control: 'boolean' },
+    valid: { control: 'select', options: [undefined, true, false, null] },
+    invalidMessage: { control: 'text' },
+    defaultCountry: { control: 'text' },
+    locale: { control: 'text' },
+    numberType: { control: 'select', options: ['mobile', 'any'] },
+  },
+  args: {
+    label: 'Telefonnummer',
+    meta: '',
+    disabled: false,
+    optional: false,
+    valid: undefined,
+    invalidMessage: 'Ange ett giltigt telefonnummer',
+    defaultCountry: 'SE',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsPhonenumber },
+    setup() {
+      const number = ref('')
+      const country = ref('SE')
+      const phoneValid = ref<boolean | null>(null)
+      const e164 = ref('')
+      return { args, number, country, phoneValid, e164 }
+    },
+    template: `
+      <div>
+        <FdsPhonenumber
+          v-bind="args"
+          v-model="number"
+          v-model:country="country"
+          @valid="phoneValid = $event"
+          @update:e164="e164 = $event"
+        />
+        <p class="mt-4 text-sm">Nummer: {{ number }}</p>
+        <p class="text-sm">Land: {{ country }}</p>
+        <p class="text-sm">valid: {{ phoneValid }}</p>
+        <p class="text-sm">E.164: {{ e164 || '—' }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const InvalidNumber: Story = {
+  args: {
+    valid: false,
+  },
+  render: (args) => ({
+    components: { FdsPhonenumber },
+    setup() {
+      const number = ref('123')
+      const country = ref('SE')
+      return { args, number, country }
+    },
+    template: `
+      <FdsPhonenumber
+        v-bind="args"
+        v-model="number"
+        v-model:country="country"
+      />
+    `,
+  }),
+}
+
+export const AllowAnyNumberType: Story = {
+  args: {
+    numberType: 'any',
+    meta: 'Mobil och fast telefon accepteras (t.ex. Stockholm 08 + 6–7 siffror)',
+  },
+  render: (args) => ({
+    components: { FdsPhonenumber },
+    setup() {
+      // Stockholm: 08 + 7 siffror
+      const number = ref('081234567')
+      const country = ref('SE')
+      const phoneValid = ref<boolean | null>(null)
+      const e164 = ref('')
+      return { args, number, country, phoneValid, e164 }
+    },
+    template: `
+      <div>
+        <FdsPhonenumber
+          v-bind="args"
+          v-model="number"
+          v-model:country="country"
+          @valid="phoneValid = $event"
+          @update:e164="e164 = $event"
+        />
+        <p class="mt-4 text-sm">valid: {{ phoneValid }}</p>
+        <p class="text-sm">E.164: {{ e164 || '—' }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const EnglishLocale: Story = {
+  args: {
+    locale: 'en',
+  },
+  render: (args) => ({
+    components: { FdsPhonenumber },
+    setup() {
+      const number = ref('')
+      const country = ref('SE')
+      return { args, number, country }
+    },
+    template: `
+      <FdsPhonenumber
+        v-bind="args"
+        v-model="number"
+        v-model:country="country"
+      />
+    `,
+  }),
+}
+
+export const ValidSwedishNumber: Story = {
+  render: (args) => ({
+    components: { FdsPhonenumber },
+    setup() {
+      const number = ref('0701234567')
+      const country = ref('SE')
+      const e164 = ref('')
+      return { args, number, country, e164 }
+    },
+    template: `
+      <div>
+        <FdsPhonenumber
+          v-bind="args"
+          v-model="number"
+          v-model:country="country"
+          @update:e164="e164 = $event"
+        />
+        <p class="mt-4 text-sm">E.164: {{ e164 }}</p>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useFdsI18n } from '../../../plugin/useFdsI18n'
+import FdsInput from '../FdsInput/FdsInput.vue'
+import { buildCountryOptions, sortCountryOptionsByName } from './countries'
+import FdsPhonenumberCountryPicker from './FdsPhonenumberCountryPicker.vue'
+import type { FdsPhonenumberEmits, FdsPhonenumberProps } from './types'
+import { getPhoneValidationState, validatePhoneNumber } from './validatePhone'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const nationalNumber = defineModel<string>({ default: '' })
+const country = defineModel<string>('country', { default: 'SE' })
+
+const props = withDefaults(defineProps<FdsPhonenumberProps>(), {
+  label: undefined,
+  meta: undefined,
+  optional: false,
+  valid: undefined,
+  invalidMessage: undefined,
+  defaultCountry: 'SE',
+  countries: undefined,
+  locale: undefined,
+  numberType: 'mobile',
+  disabled: false,
+  dataTestid: undefined,
+  selectClass: undefined,
+  inputClass: undefined,
+})
+
+const emit = defineEmits<FdsPhonenumberEmits>()
+
+const { t, locale: fdsLocale } = useFdsI18n()
+
+const resolvedLocale = computed(() => props.locale ?? fdsLocale.value)
+
+const countryItems = computed(() => {
+  const options = props.countries?.length
+    ? props.countries
+    : buildCountryOptions(resolvedLocale.value, props.defaultCountry)
+  return sortCountryOptionsByName(
+    options.map((option) => ({ ...option })),
+    resolvedLocale.value,
+    props.defaultCountry,
+  )
+})
+
+const phoneValidationOptions = computed(() => ({ numberType: props.numberType }))
+
+/** Set after the phone number field has blurred; validation does not run on input. */
+const committedValid = ref<boolean | null>(null)
+
+const displayValid = computed((): boolean | null | undefined => {
+  if (props.valid === false) return false
+  if (props.valid === true) return true
+  if (committedValid.value === false) return false
+  if (committedValid.value === true) return true
+  return props.valid
+})
+
+const showInvalidMessage = computed(
+  () => displayValid.value === false && !props.optional && props.invalidMessage && !props.disabled,
+)
+
+const noCountryResults = ref(false)
+
+function runValidation() {
+  const validationState = getPhoneValidationState(
+    nationalNumber.value ?? '',
+    country.value ?? 'SE',
+    phoneValidationOptions.value,
+  )
+  committedValid.value = validationState
+  emit('valid', validationState)
+
+  const result = validatePhoneNumber(nationalNumber.value ?? '', country.value ?? 'SE', phoneValidationOptions.value)
+  emit('update:e164', result.isValid && result.phoneNumber ? result.phoneNumber : '')
+}
+
+watch([country, () => props.numberType], () => {
+  if (committedValid.value === null) {
+    return
+  }
+  runValidation()
+})
+
+function handleBlur(ev: FocusEvent) {
+  runValidation()
+  emit('blur', ev)
+}
+
+function onNoCountryResults(value: boolean) {
+  noCountryResults.value = value
+  emit('noCountryResults', value)
+}
+</script>
+
+<template>
+  <div class="w-full mb-6">
+    <label v-if="label" class="block font-bold text-gray-900 cursor-pointer" :class="{ 'mb-0': meta, 'mb-1': !meta }">
+      {{ label }}
+    </label>
+    <div v-if="meta" class="font-thin mb-1">
+      {{ meta }}
+    </div>
+    <div class="flex flex-wrap items-start gap-x-1">
+      <FdsPhonenumberCountryPicker
+        v-model="country"
+        :items="countryItems"
+        :valid="displayValid"
+        :disabled="disabled"
+        :ariaLabel="t('FdsPhonenumber.countryCode')"
+        :data-testid="dataTestid ? `${dataTestid}-country` : undefined"
+        :class="['mb-0! shrink-0', selectClass ?? '']"
+        @no-country-results="onNoCountryResults"
+      />
+      <FdsInput
+        v-model="nationalNumber"
+        type="tel"
+        :valid="displayValid"
+        :disabled="disabled"
+        :optional="optional"
+        :ariaLabel="t('FdsPhonenumber.phoneNumber')"
+        :data-testid="dataTestid ? `${dataTestid}-number` : undefined"
+        :class="['mb-0! min-w-0 flex-1', inputClass ?? '']"
+        @blur="handleBlur"
+      />
+    </div>
+    <div v-if="noCountryResults" class="text-red-700 font-bold mt-1">
+      {{ t('FdsPhonenumber.noCountryResults') }}
+    </div>
+    <div v-if="showInvalidMessage" class="text-red-700 font-bold mt-1">
+      {{ invalidMessage }}
+    </div>
+  </div>
+</template>