fds-vue-core 8.2.3 → 8.2.4

package/package.json

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

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

@@ -61,13 +61,9 @@ const meta: Meta<typeof FdsInput> = {
       control: { type: 'text' },
       description: 'IMask pattern string (e.g., "00000000-0000" for personnummer)',
     },
-    displayChar: {
-      control: { type: 'text' },
-      description: 'Character shown for unfilled mask positions while typing (e.g. "N" for postnummer)',
-    },
     maskOptions: {
       control: { type: 'object' },
-      description: 'Additional IMask options. Overrides displayChar defaults when set.',
+      description: 'Additional IMask options (lazy defaults to true).',
     },
     maxlength: {
       control: { type: 'number' },
@@ -87,7 +83,6 @@ const meta: Meta<typeof FdsInput> = {
     required: false,
     type: 'text',
     mask: undefined,
-    displayChar: undefined,
     maskOptions: undefined,
     maxlength: undefined,
   },
@@ -320,7 +315,6 @@ export const WithMaskPostalCode: Story = {
           v-model="postalCode"
           label="Postnummer"
           mask="000 00"
-          display-char="N"
         />
         <p class="mt-4">Värde: {{ postalCode }}</p>
       </div>

package/src/components/Form/FdsInput/FdsInput.vue

@@ -27,7 +27,6 @@ const props = withDefaults(defineProps<FdsInputProps>(), {
   meta: undefined,
   clearButton: false,
   mask: undefined,
-  displayChar: undefined,
   maskOptions: undefined,
   class: undefined,
   pattern: undefined,
@@ -39,7 +38,7 @@ const props = withDefaults(defineProps<FdsInputProps>(), {
 
 const emit = defineEmits<{
   (e: 'input', ev: Event): void
-  (e: 'change', ev: Event): void
+  (e: 'autocomplete', ev: Event): void
   (e: 'clearInput'): void
   (e: 'update:value', value: string): void
   (e: 'keyup', ev: KeyboardEvent): void
@@ -143,108 +142,33 @@ const inputPaddingRight = computed(() => {
 
 const externalClass = computed(() => (props.class ?? attrs.class) as HTMLAttributes['class'] | undefined)
 
-const maskDisplayValue = ref('')
-const maskPlaceholderChar = ref('')
+const inputPaddingClasses = 'px-3 py-[calc(0.75rem-1px)]'
 
-const resolvedPlaceholderChar = computed(() => props.displayChar ?? props.maskOptions?.placeholderChar ?? null)
-
-const useMaskPlaceholderStyle = computed(() => {
-  if (!props.mask || !resolvedPlaceholderChar.value) return false
-  const lazy = props.maskOptions?.lazy ?? (props.displayChar ? false : true)
-  return !lazy
-})
-
-const maskFieldWrapperClasses = computed(() => {
-  if (!useMaskPlaceholderStyle.value) return undefined
-  return [
-    'rounded-md border border-gray-500 bg-white bg-clip-padding',
-    props.disabled && 'outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent',
-    isInvalid.value
-      ? 'outline-2 -outline-offset-2 outline-red-600'
-      : 'focus-within:outline-2 focus-within:outline-blue-500 focus-within:outline-offset-0',
-    'focus-within:border-transparent',
-  ]
-})
-
-const maskFieldPaddingClasses = 'px-3 py-[calc(0.75rem-1px)]'
-
-const maskOverlayClasses = computed(() => [
-  'pointer-events-none absolute inset-0 z-[3] flex items-center',
-  maskFieldPaddingClasses,
+const inputClasses = computed(() => [
+  'block rounded-md border border-gray-500',
+  maxlength.value ? '' : 'w-full',
+  inputPaddingClasses,
   inputPaddingRight.value,
+  'focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent',
+  showDateIcon.value &&
+    '[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none',
+  props.disabled
+    ? 'text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent'
+    : 'text-gray-900 bg-white',
+  isInvalid.value && 'outline-2 outline-red-600',
+  props.inputClass,
 ])
 
-const maskDisplayChars = computed(() => {
-  const display = maskDisplayValue.value
-  const placeholder = maskPlaceholderChar.value || resolvedPlaceholderChar.value
-  if (!display || !placeholder) return []
-  return [...display].map((char) => ({
-    char,
-    isPlaceholder: char === placeholder,
-  }))
-})
-
-function maskCharStyle(isPlaceholder: boolean): { color: string } {
-  if (isPlaceholder) {
-    return { color: props.disabled ? 'var(--color-gray-500)' : 'var(--color-gray-400)' }
-  }
-  return { color: props.disabled ? 'var(--color-gray-800)' : 'var(--color-gray-900)' }
-}
-
-const inputClasses = computed(() => {
-  const shared = [
-    'block rounded-md',
-    maxlength.value ? '' : 'w-full',
-    inputPaddingRight.value,
-    showDateIcon.value &&
-      '[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none',
-    props.inputClass,
-  ]
-
-  if (useMaskPlaceholderStyle.value) {
-    return [
-      ...shared,
-      'relative z-[2] border-0 bg-transparent shadow-none focus:outline-none',
-      maskFieldPaddingClasses,
-      'text-base leading-6 tabular-nums',
-      props.disabled ? 'cursor-not-allowed' : '',
-    ]
-  }
-
-  return [
-    ...shared,
-    'rounded-md border border-gray-500',
-    maskFieldPaddingClasses,
-    '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'
-      : 'text-gray-900 bg-white',
-    isInvalid.value && 'outline-2 outline-red-600',
-  ]
-})
-
 const inputStyle = computed(() => {
-  const size: Record<string, string> = maxlength.value
-    ? {
-        width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
-        maxWidth: '100%',
-      }
-    : {}
-
-  if (!useMaskPlaceholderStyle.value) {
-    return size
-  }
-
+  if (!maxlength.value) return undefined
   return {
-    ...size,
-    color: 'transparent',
-    WebkitTextFillColor: 'transparent',
-    caretColor: props.disabled ? '#1f2937' : '#111827',
+    width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
+    maxWidth: '100%',
   }
 })
 
 const rightIconsContainerClasses = computed(() => [
-  'absolute z-10 flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end',
+  'absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end',
   showClearButton.value ? 'right-2' : 'right-3',
 ])
 
@@ -268,7 +192,6 @@ function onClear() {
   internalValue.value = ''
   if (maskInstance) {
     maskInstance.value = ''
-    nextTick(syncMaskDisplay)
   }
   emit('clearInput')
 }
@@ -310,74 +233,28 @@ const inputRef = ref<HTMLInputElement | null>(null)
 
 let maskInstance: any = null
 
-function getMaskEmittedValue(instance: typeof maskInstance): string {
-  if (!instance) return ''
-
-  const raw = String(instance.value ?? '')
-  if (!useMaskPlaceholderStyle.value) return raw
-
-  const placeholder = instance.masked?.placeholderChar ?? resolvedPlaceholderChar.value
-  if (!placeholder) return raw
-
-  return raw.split(placeholder).join('').replace(/\s+$/, '')
-}
-
-function syncMaskDisplay() {
-  if (!inputRef.value) {
-    maskDisplayValue.value = ''
-    maskPlaceholderChar.value = ''
-    return
-  }
-
-  maskPlaceholderChar.value = maskInstance?.masked?.placeholderChar ?? resolvedPlaceholderChar.value ?? ''
-  maskDisplayValue.value = maskInstance?.displayValue ?? inputRef.value.value ?? maskInstance?.value ?? ''
-}
-
 const createMask = () => {
-  // Destroy existing mask if any
   if (maskInstance) {
     maskInstance.destroy()
     maskInstance = null
   }
 
-  // Create new mask if mask prop is provided and input exists
   if (props.mask && inputRef.value) {
-    const maskConfig = {
+    maskInstance = IMask(inputRef.value, {
       mask: props.mask,
       ...props.maskOptions,
-      ...(props.displayChar
-        ? {
-            placeholderChar: props.displayChar,
-            lazy: props.maskOptions?.lazy ?? false,
-          }
-        : {}),
-    }
-
-    maskInstance = IMask(inputRef.value, maskConfig as any)
+      lazy: props.maskOptions?.lazy ?? true,
+    } as any)
 
-    // Sync mask value with internalValue
     if (internalValue.value) {
       maskInstance.value = internalValue.value
     }
 
     maskInstance.on('accept', () => {
       if (maskInstance) {
-        internalValue.value = getMaskEmittedValue(maskInstance)
-        nextTick(syncMaskDisplay)
+        internalValue.value = maskInstance.value
       }
     })
-
-    maskInstance.on('complete', () => {
-      nextTick(syncMaskDisplay)
-    })
-
-    nextTick(() => {
-      syncMaskDisplay()
-      nextTick(syncMaskDisplay)
-    })
-  } else {
-    maskDisplayValue.value = ''
-    maskPlaceholderChar.value = ''
   }
 }
 
@@ -412,7 +289,7 @@ const ariaDescribedBy = computed(() => {
 
 // Watch for mask-related prop changes and recreate mask
 watch(
-  () => [props.mask, props.displayChar, props.maskOptions] as const,
+  () => [props.mask, props.maskOptions] as const,
   () => {
     nextTick(() => {
       createMask()
@@ -421,16 +298,25 @@ watch(
   { deep: true },
 )
 
+function shouldSyncMaskFromModel(newValue: string | undefined, currentMaskedValue: string): boolean {
+  if (newValue === undefined) {
+    return false
+  }
+  if (document.activeElement !== inputRef.value) {
+    return true
+  }
+  const newDigits = String(newValue).replace(/\D/g, '')
+  const currentDigits = String(currentMaskedValue ?? '').replace(/\D/g, '')
+  return newDigits !== currentDigits
+}
+
 // Watch for external value changes and update mask
-// Only update if the value actually changed and user is not actively editing
 watch(
   () => props.value,
   (newValue) => {
-    if (maskInstance && newValue !== undefined && newValue !== getMaskEmittedValue(maskInstance)) {
-      // Only update if input doesn't have focus (user is not editing)
-      if (document.activeElement !== inputRef.value) {
+    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+      if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
         maskInstance.value = newValue
-        nextTick(syncMaskDisplay)
       }
     }
   },
@@ -439,11 +325,9 @@ watch(
 watch(
   () => modelValue.value,
   (newValue) => {
-    if (maskInstance && newValue !== undefined && newValue !== getMaskEmittedValue(maskInstance)) {
-      // Only update if input doesn't have focus (user is not editing)
-      if (document.activeElement !== inputRef.value) {
+    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+      if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
         maskInstance.value = newValue
-        nextTick(syncMaskDisplay)
       }
     }
   },
@@ -469,7 +353,7 @@ watch(
         </FdsMeta>
       </div>
       <div :class="{ 'flex-1': props.labelLeft }">
-        <div class="relative" :class="maskFieldWrapperClasses">
+        <div class="relative">
           <input
             ref="inputRef"
             :type="inputType === 'password' ? (showPassword ? 'text' : 'password') : inputType"
@@ -489,6 +373,7 @@ watch(
             v-bind="inputBindings"
             @input="handleInputChange"
             @change="handleInputChange"
+            @autocomplete="$emit('autocomplete', $event)"
             @blur="$emit('blur', $event)"
             @keyup="
               (ev) => {
@@ -497,13 +382,6 @@ watch(
               }
             "
           />
-          <div v-if="useMaskPlaceholderStyle" :class="maskOverlayClasses" aria-hidden="true">
-            <span class="whitespace-pre text-base leading-6 tabular-nums">
-              <span v-for="(item, index) in maskDisplayChars" :key="index" :style="maskCharStyle(item.isPlaceholder)">
-                {{ item.char }}
-              </span>
-            </span>
-          </div>
           <div :class="rightIconsContainerClasses">
             <FdsButtonIcon
               v-if="showDateIcon"

package/src/components/Form/FdsInput/types.ts

@@ -9,8 +9,6 @@ export interface FdsInputProps {
   labelLeft?: boolean
   clearButton?: boolean
   mask?: string | RegExp | Array<string | RegExp>
-  /** Character shown for unfilled mask positions while typing (maps to IMask placeholderChar). */
-  displayChar?: string
   modelValue?: string
   value?: string
   type?: string

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

@@ -3,6 +3,8 @@ import { computed, ref, useAttrs, watch } from 'vue'
 import { useFdsI18n } from '../../../plugin/useFdsI18n'
 import FdsInput from '../FdsInput/FdsInput.vue'
 import { buildCountryOptions, sortCountryOptionsByName } from './countries'
+import { getPhoneMaskForCountry } from './phoneMask'
+import { normalizeNationalPhoneInput, shouldNormalizePhoneInput } from './normalizePhoneInput'
 import FdsPhonenumberCountryPicker from './FdsPhonenumberCountryPicker.vue'
 import type { FdsPhonenumberEmits, FdsPhonenumberProps } from './types'
 import { getPhoneValidationState, validatePhoneNumber } from './validatePhone'
@@ -11,7 +13,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const [nationalNumber, modelModifiers] = defineModel<string>({ default: '' })
+const [nationalNumber] = defineModel<string>({ default: '' })
 const country = defineModel<string>('country', { default: 'SE' })
 const attrs = useAttrs()
 
@@ -25,12 +27,9 @@ const props = withDefaults(defineProps<FdsPhonenumberProps>(), {
   autocomplete: 'tel',
   required: false,
   placeholder: undefined,
-  maxlength: undefined,
-  minlength: undefined,
   name: undefined,
   autofocus: false,
   readonly: false,
-  pattern: undefined,
   defaultCountry: 'SE',
   countries: undefined,
   locale: undefined,
@@ -57,12 +56,10 @@ const forwardedInputProps = computed(() => ({
   autocomplete: props.autocomplete,
   required: props.required,
   placeholder: props.placeholder,
-  maxlength: props.maxlength,
-  minlength: props.minlength,
   name: props.name,
   autofocus: props.autofocus,
   readonly: props.readonly,
-  pattern: props.pattern,
+  inputmode: 'tel',
   ...inputAttrs.value,
 }))
 
@@ -77,6 +74,12 @@ const countryItems = computed(() => {
   )
 })
 
+const phoneMask = computed(() => getPhoneMaskForCountry(country.value ?? props.defaultCountry))
+
+const phoneMaskOptions = computed(() => ({
+  prepare: (value: string) => applyPhoneNormalization(value, country.value ?? props.defaultCountry),
+}))
+
 /** Set after the phone number field has blurred; validation does not run on input. */
 const committedValid = ref<boolean | null>(null)
 
@@ -109,6 +112,20 @@ function runValidation() {
   emit('update:e164', result.isValid && result.phoneNumber ? result.phoneNumber : '')
 }
 
+function applyPhoneNormalization(value: string, countryCode = country.value ?? props.defaultCountry): string {
+  if (!shouldNormalizePhoneInput(value, countryCode)) {
+    return value
+  }
+  return normalizeNationalPhoneInput(value, countryCode)
+}
+
+watch(nationalNumber, (value) => {
+  const normalized = applyPhoneNormalization(value ?? '')
+  if (normalized !== (value ?? '')) {
+    nationalNumber.value = normalized
+  }
+})
+
 watch(country, () => {
   if (committedValid.value === null) {
     return
@@ -117,6 +134,10 @@ watch(country, () => {
 })
 
 function handleBlur(ev: FocusEvent) {
+  const normalized = applyPhoneNormalization(nationalNumber.value ?? '')
+  if (normalized !== (nationalNumber.value ?? '')) {
+    nationalNumber.value = normalized
+  }
   runValidation()
   emit('blur', ev)
 }
@@ -152,8 +173,8 @@ function onNoCountryResults(value: boolean) {
       />
       <FdsInput
         v-model="nationalNumber"
-        :modelModifiers="modelModifiers"
-        type="tel"
+        :mask="phoneMask"
+        :mask-options="phoneMaskOptions"
         :valid="displayValid"
         :disabled="disabled"
         :optional="optional"

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

@@ -0,0 +1,88 @@
+import parsePhoneNumberFromString, { getCountryCallingCode, type CountryCode } from 'libphonenumber-js/mobile/es6'
+import { getPhoneMaskForCountry } from './phoneMask'
+
+const nationalDigitsForMask = (parsed: NonNullable<ReturnType<typeof parsePhoneNumberFromString>>): string =>
+  parsed.formatNational().replace(/\D/g, '')
+
+const tryParseForCountry = (candidate: string, country: CountryCode): ReturnType<typeof parsePhoneNumberFromString> => {
+  const parsed = parsePhoneNumberFromString(candidate, country) ?? parsePhoneNumberFromString(candidate)
+  if (!parsed?.isValid() || parsed.country !== country) {
+    return undefined
+  }
+  return parsed
+}
+
+/** Whether the value likely contains a country calling code or international formatting. */
+export const shouldNormalizePhoneInput = (value: string, countryIso2: string): boolean => {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return false
+  }
+  if (trimmed.includes('+') || trimmed.startsWith('00')) {
+    return true
+  }
+
+  const digits = trimmed.replace(/\D/g, '')
+  const mask = getPhoneMaskForCountry(countryIso2)
+  if (!mask) {
+    return false
+  }
+
+  const maxDigits = (mask.match(/0/g) ?? []).length
+  if (digits.length > maxDigits) {
+    return true
+  }
+
+  try {
+    const callingCode = getCountryCallingCode(countryIso2 as CountryCode)
+    if (digits.startsWith(callingCode) && digits.length > maxDigits - 1) {
+      return true
+    }
+  } catch {
+    return false
+  }
+
+  return false
+}
+
+/**
+ * Converts international/autocomplete values to national digits for the IMask field.
+ * IMask reapplies spacing from the country mask.
+ */
+export const normalizeNationalPhoneInput = (value: string, countryIso2: string): string => {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return ''
+  }
+
+  const country = countryIso2.trim().toUpperCase() as CountryCode
+  const digits = trimmed.replace(/\D/g, '')
+
+  const candidates = new Set<string>([trimmed])
+  if (digits) {
+    candidates.add(digits)
+    candidates.add(`+${digits}`)
+  }
+
+  for (const candidate of candidates) {
+    const parsed = tryParseForCountry(candidate, country)
+    if (parsed) {
+      return nationalDigitsForMask(parsed)
+    }
+  }
+
+  try {
+    const callingCode = getCountryCallingCode(country)
+    if (digits.startsWith(callingCode) && digits.length > callingCode.length) {
+      const withoutCode = digits.slice(callingCode.length)
+      const parsed = tryParseForCountry(withoutCode, country) ?? tryParseForCountry(`0${withoutCode}`, country)
+      if (parsed) {
+        return nationalDigitsForMask(parsed)
+      }
+    }
+  } catch {
+    return trimmed
+  }
+
+  return trimmed
+}

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

@@ -0,0 +1,28 @@
+import { getExampleNumber, type CountryCode } from 'libphonenumber-js/mobile/es6'
+import examples from 'libphonenumber-js/mobile/examples'
+
+const maskCache = new Map<string, string>()
+
+/** IMask pattern with space grouping derived from libphonenumber mobile example numbers. */
+export const getPhoneMaskForCountry = (countryIso2: string): string | undefined => {
+  const country = countryIso2.trim().toUpperCase() as CountryCode
+  const cached = maskCache.get(country)
+  if (cached) {
+    return cached
+  }
+
+  const example = getExampleNumber(country, examples)
+  if (!example) {
+    return undefined
+  }
+
+  const groups = example
+    .formatNational()
+    .split(/\D+/)
+    .filter(Boolean)
+    .map((part) => part.length)
+
+  const mask = groups.map((size) => '0'.repeat(size)).join(' ')
+  maskCache.set(country, mask)
+  return mask
+}

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

@@ -7,12 +7,9 @@ type FdsPhonenumberInputPassthroughProps = Pick<
   | 'autocomplete'
   | 'required'
   | 'placeholder'
-  | 'maxlength'
-  | 'minlength'
   | 'name'
   | 'autofocus'
   | 'readonly'
-  | 'pattern'
 >
 
 export interface FdsPhonenumberProps extends FdsPhonenumberInputPassthroughProps {