fds-vue-core 8.2.2 → 8.2.3

package/package.json

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

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

@@ -61,9 +61,13 @@ 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 options for IMask (e.g., { lazy: true, placeholderChar: "" })',
+      description: 'Additional IMask options. Overrides displayChar defaults when set.',
     },
     maxlength: {
       control: { type: 'number' },
@@ -83,6 +87,7 @@ const meta: Meta<typeof FdsInput> = {
     required: false,
     type: 'text',
     mask: undefined,
+    displayChar: undefined,
     maskOptions: undefined,
     maxlength: undefined,
   },
@@ -302,6 +307,27 @@ 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"
+          display-char="N"
+        />
+        <p class="mt-4">Värde: {{ postalCode }}</p>
+      </div>
+    `,
+  }),
+}
+
 export const AllStates: Story = {
   render: () => ({
     components: { FdsInput },

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

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<FdsInputProps>(), {
   meta: undefined,
   clearButton: false,
   mask: undefined,
+  displayChar: undefined,
   maskOptions: undefined,
   class: undefined,
   pattern: undefined,
@@ -49,8 +50,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,35 +143,116 @@ const inputPaddingRight = computed(() => {
 
 const externalClass = computed(() => (props.class ?? attrs.class) as HTMLAttributes['class'] | undefined)
 
-const inputClasses = computed(() => [
-  'block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]',
-  maxlength.value ? '' : 'w-full',
+const maskDisplayValue = ref('')
+const maskPlaceholderChar = ref('')
+
+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,
   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',
-  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(() => {
-  if (maxlength.value) {
-    return {
-      width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
-      maxWidth: '100%',
-    }
+  const size: Record<string, string> = maxlength.value
+    ? {
+        width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
+        maxWidth: '100%',
+      }
+    : {}
+
+  if (!useMaskPlaceholderStyle.value) {
+    return size
+  }
+
+  return {
+    ...size,
+    color: 'transparent',
+    WebkitTextFillColor: 'transparent',
+    caretColor: props.disabled ? '#1f2937' : '#111827',
   }
-  return {}
 })
 
 const rightIconsContainerClasses = computed(() => [
-  'absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end',
+  'absolute z-10 flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end',
   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 +266,10 @@ const internalValue = computed({
 
 function onClear() {
   internalValue.value = ''
+  if (maskInstance) {
+    maskInstance.value = ''
+    nextTick(syncMaskDisplay)
+  }
   emit('clearInput')
 }
 
@@ -220,6 +310,29 @@ 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) {
@@ -232,6 +345,12 @@ const createMask = () => {
     const maskConfig = {
       mask: props.mask,
       ...props.maskOptions,
+      ...(props.displayChar
+        ? {
+            placeholderChar: props.displayChar,
+            lazy: props.maskOptions?.lazy ?? false,
+          }
+        : {}),
     }
 
     maskInstance = IMask(inputRef.value, maskConfig as any)
@@ -241,12 +360,24 @@ const createMask = () => {
       maskInstance.value = internalValue.value
     }
 
-    // Update internalValue when mask value changes
     maskInstance.on('accept', () => {
       if (maskInstance) {
-        internalValue.value = maskInstance.value
+        internalValue.value = getMaskEmittedValue(maskInstance)
+        nextTick(syncMaskDisplay)
       }
     })
+
+    maskInstance.on('complete', () => {
+      nextTick(syncMaskDisplay)
+    })
+
+    nextTick(() => {
+      syncMaskDisplay()
+      nextTick(syncMaskDisplay)
+    })
+  } else {
+    maskDisplayValue.value = ''
+    maskPlaceholderChar.value = ''
   }
 }
 
@@ -279,14 +410,15 @@ 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.displayChar, props.maskOptions] as const,
   () => {
     nextTick(() => {
       createMask()
     })
   },
+  { deep: true },
 )
 
 // Watch for external value changes and update mask
@@ -294,10 +426,11 @@ watch(
 watch(
   () => props.value,
   (newValue) => {
-    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+    if (maskInstance && newValue !== undefined && newValue !== getMaskEmittedValue(maskInstance)) {
       // Only update if input doesn't have focus (user is not editing)
       if (document.activeElement !== inputRef.value) {
         maskInstance.value = newValue
+        nextTick(syncMaskDisplay)
       }
     }
   },
@@ -306,10 +439,11 @@ watch(
 watch(
   () => modelValue.value,
   (newValue) => {
-    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+    if (maskInstance && newValue !== undefined && newValue !== getMaskEmittedValue(maskInstance)) {
       // Only update if input doesn't have focus (user is not editing)
       if (document.activeElement !== inputRef.value) {
         maskInstance.value = newValue
+        nextTick(syncMaskDisplay)
       }
     }
   },
@@ -335,12 +469,11 @@ watch(
         </FdsMeta>
       </div>
       <div :class="{ 'flex-1': props.labelLeft }">
-        <div class="relative">
+        <div class="relative" :class="maskFieldWrapperClasses">
           <input
             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,7 +486,7 @@ watch(
             :placeholder="props.placeholder"
             :pattern="props.pattern"
             :searchIcon="props.searchIcon"
-            v-bind="inputAttrs"
+            v-bind="inputBindings"
             @input="handleInputChange"
             @change="handleInputChange"
             @blur="$emit('blur', $event)"
@@ -364,6 +497,13 @@ 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,6 +9,8 @@ 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

@@ -139,7 +139,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"

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"
     >