fds-vue-core 8.2.2 → 8.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "8.2.2",
+  "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

@@ -63,7 +63,7 @@ const meta: Meta<typeof FdsInput> = {
     },
     maskOptions: {
       control: { type: 'object' },
-      description: 'Additional options for IMask (e.g., { lazy: true, placeholderChar: "" })',
+      description: 'Additional IMask options (lazy defaults to true).',
     },
     maxlength: {
       control: { type: 'number' },
@@ -302,6 +302,26 @@ export const WithMaskPhone: Story = {
   }),
 }
 
+export const WithMaskPostalCode: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const postalCode = ref('')
+      return { postalCode }
+    },
+    template: `
+      <div>
+        <FdsInput
+          v-model="postalCode"
+          label="Postnummer"
+          mask="000 00"
+        />
+        <p class="mt-4">Värde: {{ postalCode }}</p>
+      </div>
+    `,
+  }),
+}
+
 export const AllStates: Story = {
   render: () => ({
     components: { FdsInput },

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

@@ -38,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
@@ -49,8 +49,12 @@ const emit = defineEmits<{
 const { id, type, maxlength, attrs } = useAttrsWithDefaults(props)
 const { t } = useFdsI18n()
 
-// Get type from attrs first (user-provided), then props, with 'text' as fallback
-const inputType = computed(() => type.value ?? props.type ?? 'text')
+// Get type from attrs first (user-provided), then props, with 'text' as fallback.
+// IMask only supports type="text".
+const inputType = computed(() => {
+  if (props.mask) return 'text'
+  return type.value ?? props.type ?? 'text'
+})
 
 const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`
 const inputId = computed(() => id.value ?? autoId)
@@ -138,28 +142,29 @@ const inputPaddingRight = computed(() => {
 
 const externalClass = computed(() => (props.class ?? attrs.class) as HTMLAttributes['class'] | undefined)
 
+const inputPaddingClasses = 'px-3 py-[calc(0.75rem-1px)]'
+
 const inputClasses = computed(() => [
-  'block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]',
+  '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'
-    : 'bg-white',
+    : 'text-gray-900 bg-white',
   isInvalid.value && 'outline-2 outline-red-600',
   props.inputClass,
 ])
 
 const inputStyle = computed(() => {
-  if (maxlength.value) {
-    return {
-      width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
-      maxWidth: '100%',
-    }
+  if (!maxlength.value) return undefined
+  return {
+    width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
+    maxWidth: '100%',
   }
-  return {}
 })
 
 const rightIconsContainerClasses = computed(() => [
@@ -167,6 +172,11 @@ const rightIconsContainerClasses = computed(() => [
   showClearButton.value ? 'right-2' : 'right-3',
 ])
 
+const inputBindings = computed(() => ({
+  ...inputAttrs.value,
+  ...(props.mask ? {} : { value: internalValue.value }),
+}))
+
 // Use modelValue if bound via v-model, otherwise use value prop
 const internalValue = computed({
   get: () => (modelValue.value !== undefined ? modelValue.value : (props.value ?? '')),
@@ -180,6 +190,9 @@ const internalValue = computed({
 
 function onClear() {
   internalValue.value = ''
+  if (maskInstance) {
+    maskInstance.value = ''
+  }
   emit('clearInput')
 }
 
@@ -221,27 +234,22 @@ const inputRef = ref<HTMLInputElement | null>(null)
 let maskInstance: any = null
 
 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,
-    }
+      lazy: props.maskOptions?.lazy ?? true,
+    } as any)
 
-    maskInstance = IMask(inputRef.value, maskConfig as any)
-
-    // Sync mask value with internalValue
     if (internalValue.value) {
       maskInstance.value = internalValue.value
     }
 
-    // Update internalValue when mask value changes
     maskInstance.on('accept', () => {
       if (maskInstance) {
         internalValue.value = maskInstance.value
@@ -279,24 +287,35 @@ const ariaDescribedBy = computed(() => {
   return props.meta ? metaId.value : undefined
 })
 
-// Watch for mask prop changes and recreate mask
+// Watch for mask-related prop changes and recreate mask
 watch(
-  () => props.mask,
+  () => [props.mask, props.maskOptions] as const,
   () => {
     nextTick(() => {
       createMask()
     })
   },
+  { 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 !== maskInstance.value) {
-      // Only update if input doesn't have focus (user is not editing)
-      if (document.activeElement !== inputRef.value) {
+      if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
         maskInstance.value = newValue
       }
     }
@@ -307,8 +326,7 @@ watch(
   () => modelValue.value,
   (newValue) => {
     if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
-      // Only update if input doesn't have focus (user is not editing)
-      if (document.activeElement !== inputRef.value) {
+      if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
         maskInstance.value = newValue
       }
     }
@@ -340,7 +358,6 @@ watch(
             ref="inputRef"
             :type="inputType === 'password' ? (showPassword ? 'text' : 'password') : inputType"
             :required="props.required"
-            :value="internalValue"
             :disabled="props.disabled"
             :tabindex="props.disabled ? -1 : undefined"
             :aria-invalid="props.valid === false ? 'true' : undefined"
@@ -353,9 +370,10 @@ watch(
             :placeholder="props.placeholder"
             :pattern="props.pattern"
             :searchIcon="props.searchIcon"
-            v-bind="inputAttrs"
+            v-bind="inputBindings"
             @input="handleInputChange"
             @change="handleInputChange"
+            @autocomplete="$emit('autocomplete', $event)"
             @blur="$emit('blur', $event)"
             @keyup="
               (ev) => {

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)
 }
@@ -139,7 +160,7 @@ function onNoCountryResults(value: boolean) {
     <div v-if="meta" class="font-thin mb-1">
       {{ meta }}
     </div>
-    <div class="flex flex-wrap items-start gap-x-1">
+    <div class="flex flex-wrap items-start gap-x-2">
       <FdsPhonenumberCountryPicker
         v-model="country"
         :items="countryItems"
@@ -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/FdsPhonenumberCountryPicker.vue

@@ -377,7 +377,7 @@ onBeforeUnmount(() => {
       v-if="dropdownOpen && !disabled && filteredCountries.length > 0"
       role="listbox"
       :id="listboxId"
-      class="absolute left-0 z-20 mt-1 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
+      class="absolute left-0 z-20 mt-2 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
       v-bind="listDataAttrs"
       @mouseleave="clearHoverPreview"
     >

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 {