fds-vue-core 8.2.4 → 8.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "8.2.4",
+  "version": "8.3.1",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -52,28 +52,29 @@
     "date-fns": "4.4.0",
     "imask": "7.6.1",
     "libphonenumber-js": "1.13.7",
-    "tailwindcss": "4.3.1"
+    "personnummer": "3.2.1",
+    "tailwindcss": "4.3.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "5.2.1",
     "@intlify/unplugin-vue-i18n": "11.2.4",
-    "@storybook/addon-a11y": "10.4.6",
-    "@storybook/addon-docs": "10.4.6",
-    "@storybook/addon-vitest": "10.4.6",
-    "@storybook/vue3": "10.4.6",
-    "@storybook/vue3-vite": "10.4.6",
-    "@tailwindcss/vite": "4.3.1",
+    "@storybook/addon-a11y": "10.5.4",
+    "@storybook/addon-docs": "10.5.4",
+    "@storybook/addon-vitest": "10.5.4",
+    "@storybook/vue3": "10.5.4",
+    "@storybook/vue3-vite": "10.5.4",
+    "@tailwindcss/vite": "4.3.3",
     "@types/node": "22.16.5",
-    "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/browser": "3.2.4",
-    "fg-devkit": "1.12.5",
-    "storybook": "10.4.6",
-    "tsx": "4.22.4",
+    "@vitejs/plugin-vue": "6.0.8",
+    "@vitest/browser": "3.2.7",
+    "fg-devkit": "1.12.7",
+    "storybook": "10.5.4",
+    "tsx": "4.23.1",
     "vite": "7.3.5",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-vue-devtools": "8.1.3",
-    "vitest": "4.1.9",
-    "vue": "3.5.38",
+    "vite-plugin-vue-devtools": "8.2.1",
+    "vitest": "4.1.10",
+    "vue": "3.5.40",
     "vue-i18n": "11.4.6"
   },
   "knip": {

package/src/components/FdsDevMode/FdsDevModeStorage.vue

@@ -477,7 +477,7 @@ const deleteCookieEntry = () => {
                 :type="action.input.type ?? 'text'"
                 :modelValue="getActionInputValue(index, action.input.defaultValue)"
                 :placeholder="action.input.placeholder"
-                @update:modelValue="setActionInputValue(index, $event)"
+                @update:modelValue="setActionInputValue(index, $event ?? '')"
               />
             </div>
           </div>

package/src/components/Form/FdsCheckbox/FdsCheckbox.vue

@@ -10,10 +10,7 @@ defineOptions({
 
 // Support v-model as boolean (single checkbox) or array (checkbox group)
 // Also support :checked prop for backward compatibility
-const modelValue = defineModel<boolean | Array<string | number | boolean | null>>({
-  default: undefined,
-  required: false,
-})
+const modelValue = defineModel<boolean | Array<string | number | boolean | null>>()
 
 const props = withDefaults(defineProps<FdsCheckboxProps>(), {
   label: undefined,
@@ -133,13 +130,13 @@ const internalChecked = computed({
           newArray.splice(index, 1)
         }
       }
-      modelValue.value = newArray
+      modelValue.value = newArray as boolean | Array<string | number | boolean | null>
       emit('update:checked', checked)
       emit('change', checked)
       emit('input', checked)
     } else {
       // Boolean mode
-      modelValue.value = checked
+      modelValue.value = checked as boolean | Array<string | number | boolean | null>
       emit('update:checked', checked)
       emit('change', checked)
       emit('input', checked)

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

@@ -14,7 +14,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const modelValue = defineModel<string>({ default: undefined, required: false })
+const modelValue = defineModel<string>({ default: '' })
 
 const props = withDefaults(defineProps<FdsInputProps>(), {
   value: undefined,
@@ -182,7 +182,7 @@ const internalValue = computed({
   get: () => (modelValue.value !== undefined ? modelValue.value : (props.value ?? '')),
   set: (newValue: string) => {
     if (modelValue.value !== undefined) {
-      modelValue.value = newValue
+      modelValue.value = newValue as string
     }
     emit('update:value', newValue)
   },
@@ -252,7 +252,7 @@ const createMask = () => {
 
     maskInstance.on('accept', () => {
       if (maskInstance) {
-        internalValue.value = maskInstance.value
+        internalValue.value = maskInstance.value as string
       }
     })
   }

package/src/components/Form/FdsRadio/FdsRadio.vue

@@ -7,7 +7,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const modelValue = defineModel<string | number | boolean | null>({ default: undefined, required: false })
+const modelValue = defineModel<string | number | boolean | null>()
 
 const props = withDefaults(defineProps<FdsRadioProps>(), {
   label: undefined,

package/src/components/Form/FdsSelect/FdsSelect.vue

@@ -9,7 +9,7 @@ defineOptions({
 })
 
 // Support both v-model (modelValue) and :value prop for backward compatibility
-const modelValue = defineModel<string>({ default: undefined, required: false })
+const modelValue = defineModel<string>()
 
 const props = withDefaults(defineProps<FdsSelectProps>(), {
   value: undefined,
@@ -88,7 +88,7 @@ const internalValue = computed({
   set: (newValue: string) => {
     // Update modelValue if it's being used
     if (modelValue.value !== undefined) {
-      modelValue.value = newValue
+      modelValue.value = newValue as string
     }
     // Always emit update:value for backward compatibility
     emit('update:value', newValue)

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsSsn from './FdsSsn.vue'
+
+const meta: Meta<typeof FdsSsn> = {
+  title: 'FDS/Form/FdsSsn',
+  component: FdsSsn,
+  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' },
+    allowCoordinationNumber: { control: 'boolean' },
+    allowInterimNumber: { control: 'boolean' },
+  },
+  args: {
+    label: 'Personnummer',
+    meta: '',
+    disabled: false,
+    optional: false,
+    valid: undefined,
+    invalidMessage: 'Ange ett giltigt personnummer',
+    allowCoordinationNumber: true,
+    allowInterimNumber: true,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsSsn },
+    setup() {
+      const ssn = ref('')
+      const ssnValid = ref<boolean | null>(null)
+      return { args, ssn, ssnValid }
+    },
+    template: `
+      <div>
+        <FdsSsn
+          v-bind="args"
+          v-model="ssn"
+          @valid="ssnValid = $event"
+        />
+        <p class="mt-4 text-sm">v-model: {{ ssn || '—' }}</p>
+        <p class="text-sm">valid: {{ ssnValid }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const InvalidValue: Story = {
+  args: {
+    valid: false,
+  },
+  render: (args) => ({
+    components: { FdsSsn },
+    setup() {
+      const ssn = ref('198501011234')
+      return { args, ssn }
+    },
+    template: `
+      <FdsSsn v-bind="args" v-model="ssn" />
+    `,
+  }),
+}
+
+export const ValidPersonnummer: Story = {
+  render: (args) => ({
+    components: { FdsSsn },
+    setup() {
+      const ssn = ref('198507099805')
+      return { args, ssn }
+    },
+    template: `
+      <FdsSsn v-bind="args" v-model="ssn" />
+    `,
+  }),
+}
+
+export const CoordinationNumber: Story = {
+  args: {
+    allowCoordinationNumber: true,
+  },
+  render: (args) => ({
+    components: { FdsSsn },
+    setup() {
+      const ssn = ref('198506698805')
+      const ssnValid = ref<boolean | null>(null)
+      return { args, ssn, ssnValid }
+    },
+    template: `
+      <div>
+        <FdsSsn
+          v-bind="args"
+          v-model="ssn"
+          @valid="ssnValid = $event"
+        />
+        <p class="mt-4 text-sm">valid: {{ ssnValid }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const InterimNumber: Story = {
+  args: {
+    allowInterimNumber: true,
+  },
+  render: (args) => ({
+    components: { FdsSsn },
+    setup() {
+      const ssn = ref('19850709T125')
+      const ssnValid = ref<boolean | null>(null)
+      return { args, ssn, ssnValid }
+    },
+    template: `
+      <div>
+        <FdsSsn
+          v-bind="args"
+          v-model="ssn"
+          @valid="ssnValid = $event"
+        />
+        <p class="mt-4 text-sm">valid: {{ ssnValid }}</p>
+      </div>
+    `,
+  }),
+}

package/src/components/Form/FdsSsn/FdsSsn.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import { useFdsI18n } from '../../../plugin/useFdsI18n'
+import FdsInput from '../FdsInput/FdsInput.vue'
+import { getSsnMask, getSsnMaskOptions } from './ssnMask'
+import type { FdsSsnEmits, FdsSsnProps } from './types'
+import { getSsnValidationState, stripSsnSeparators, type SsnValidationOptions } from '../../../helpers/validateSsn'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const modelValue = defineModel<string>({ default: '' })
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<FdsSsnProps>(), {
+  label: undefined,
+  meta: undefined,
+  optional: false,
+  valid: undefined,
+  invalidMessage: undefined,
+  id: undefined,
+  autocomplete: 'off',
+  required: false,
+  placeholder: undefined,
+  name: undefined,
+  autofocus: false,
+  readonly: false,
+  allowCoordinationNumber: true,
+  allowInterimNumber: true,
+  disabled: false,
+  dataTestid: undefined,
+  inputClass: undefined,
+})
+
+const emit = defineEmits<FdsSsnEmits>()
+
+const { t } = useFdsI18n()
+
+const inputAttrs = computed(() => {
+  const { class: _class, style, ...rest } = attrs
+  return {
+    ...rest,
+    ...(style == null ? {} : { style: style as string | Record<string, unknown> }),
+  }
+})
+
+const forwardedInputProps = computed(() => ({
+  id: props.id,
+  autocomplete: props.autocomplete,
+  required: props.required,
+  placeholder: props.placeholder,
+  name: props.name,
+  autofocus: props.autofocus,
+  readonly: props.readonly,
+  inputmode: props.allowInterimNumber ? 'text' : 'numeric',
+  ...inputAttrs.value,
+}))
+
+const validationOptions = computed(
+  (): SsnValidationOptions => ({
+    allowCoordinationNumber: props.allowCoordinationNumber,
+    allowInterimNumber: props.allowInterimNumber,
+  }),
+)
+
+const ssnMask = computed(() => getSsnMask(props.allowInterimNumber))
+const ssnMaskOptions = computed(() => getSsnMaskOptions(props.allowInterimNumber))
+
+/** Set after blur; validation does not run on input. */
+const committedValid = ref<boolean | null>(null)
+
+const resolvedLabel = computed(() => (props.label === undefined ? t('FdsSsn.label') : props.label))
+
+const resolvedInvalidMessage = computed(() =>
+  props.invalidMessage === undefined ? t('FdsSsn.invalidSsn') : props.invalidMessage,
+)
+
+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
+})
+
+function normalizeValue() {
+  const normalized = stripSsnSeparators(modelValue.value ?? '')
+  if (normalized !== (modelValue.value ?? '')) {
+    modelValue.value = normalized
+  }
+}
+
+function runValidation() {
+  const validationState = getSsnValidationState(modelValue.value ?? '', validationOptions.value)
+  committedValid.value = validationState
+  emit('valid', validationState)
+}
+
+watch([() => props.allowCoordinationNumber, () => props.allowInterimNumber], () => {
+  if (committedValid.value === null) {
+    return
+  }
+  runValidation()
+})
+
+function handleBlur(ev: FocusEvent) {
+  normalizeValue()
+  runValidation()
+  emit('blur', ev)
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <FdsInput
+      v-model="modelValue"
+      :mask="ssnMask"
+      :mask-options="ssnMaskOptions"
+      :label="resolvedLabel"
+      :meta="meta"
+      :valid="displayValid"
+      :disabled="disabled"
+      :optional="optional"
+      :invalid-message="resolvedInvalidMessage"
+      :ariaLabel="resolvedLabel"
+      :data-testid="dataTestid"
+      :class="inputClass"
+      v-bind="forwardedInputProps"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/src/components/Form/FdsSsn/ssnMask.ts

@@ -0,0 +1,20 @@
+/** IMask pattern for ÅÅÅÅMMDDKKKK (12 digits, no separator). */
+export const SSN_MASK = '000000000000'
+
+/** Alphanumeric mask when interim numbers (letters in num part) are allowed. */
+export const SSN_INTERIM_MASK = 'XXXXXXXXXXXX'
+
+export const SSN_INTERIM_MASK_OPTIONS = {
+  lazy: true,
+  definitions: {
+    X: /[0-9A-Za-z]/,
+  },
+} as const
+
+export function getSsnMask(allowInterimNumber: boolean): string {
+  return allowInterimNumber ? SSN_INTERIM_MASK : SSN_MASK
+}
+
+export function getSsnMaskOptions(allowInterimNumber: boolean) {
+  return allowInterimNumber ? SSN_INTERIM_MASK_OPTIONS : { lazy: true }
+}

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

@@ -0,0 +1,36 @@
+import type { FdsInputProps } from '../FdsInput/types'
+
+type FdsSsnInputPassthroughProps = Pick<
+  FdsInputProps,
+  | 'id'
+  | 'autocomplete'
+  | 'required'
+  | 'placeholder'
+  | 'name'
+  | 'autofocus'
+  | 'readonly'
+  | 'inputClass'
+>
+
+export interface FdsSsnProps extends FdsSsnInputPassthroughProps {
+  label?: string
+  meta?: string
+  optional?: boolean
+  valid?: boolean | null
+  invalidMessage?: string
+  /** Personnummer as shown in the input (12 characters, no separator). */
+  modelValue?: string
+  allowCoordinationNumber?: boolean
+  allowInterimNumber?: boolean
+  disabled?: boolean
+  dataTestid?: string
+  onValid?: ((value: boolean | null) => void) | Array<(value: boolean | null) => void>
+  onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>
+  'onUpdate:modelValue'?: ((value: string) => void) | Array<(value: string) => void>
+}
+
+export interface FdsSsnEmits {
+  'update:modelValue': [value: string]
+  valid: [value: boolean | null]
+  blur: [ev: FocusEvent]
+}

package/src/components/Form/FdsTextarea/FdsTextarea.vue

@@ -12,7 +12,7 @@ defineOptions({
 })
 
 // Support both v-model (modelValue) and :value prop for backward compatibility
-const modelValue = defineModel<string>({ default: undefined, required: false })
+const modelValue = defineModel<string>()
 
 const props = withDefaults(defineProps<FdsTextareaProps>(), {
   value: undefined,
@@ -67,7 +67,7 @@ const internalValue = computed({
   get: () => (modelValue.value !== undefined ? modelValue.value : (props.value ?? '')),
   set: (newValue: string) => {
     if (modelValue.value !== undefined) {
-      modelValue.value = newValue
+      modelValue.value = newValue as string
     }
     emit('update:value', newValue)
   },

package/src/helpers/validateSsn.ts

@@ -0,0 +1,63 @@
+import Personnummer from 'personnummer'
+import { normalizePidSearchValue } from '../composables/useIsPid'
+
+export interface SsnValidationOptions {
+  allowCoordinationNumber?: boolean
+  allowInterimNumber?: boolean
+}
+
+export interface SsnValidationResult {
+  isValid: boolean
+  /** Normalized value without separators; `null` when empty or invalid. */
+  digits: string | null
+}
+
+const INVALID_RESULT: SsnValidationResult = {
+  isValid: false,
+  digits: null,
+}
+
+const DEFAULT_SSN_VALIDATION_OPTIONS = {
+  allowCoordinationNumber: true,
+  allowInterimNumber: true,
+} as const
+
+function resolveSsnValidationOptions(options?: SsnValidationOptions) {
+  return {
+    ...DEFAULT_SSN_VALIDATION_OPTIONS,
+    ...options,
+  }
+}
+
+/** Strip separators; keeps alphanumeric characters for interim numbers. */
+export function stripSsnSeparators(value: string): string {
+  return normalizePidSearchValue(value)
+}
+
+/** Validate a Swedish personal identity number. */
+export function validateSsnNumber(value: string, options?: SsnValidationOptions): SsnValidationResult {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return INVALID_RESULT
+  }
+
+  const resolvedOptions = resolveSsnValidationOptions(options)
+  const isValid = Personnummer.valid(trimmed, resolvedOptions)
+
+  return {
+    isValid,
+    digits: isValid ? stripSsnSeparators(trimmed) : null,
+  }
+}
+
+export function validateSsn(value: string, options?: SsnValidationOptions): boolean {
+  return validateSsnNumber(value, options).isValid
+}
+
+/** `null` when empty, otherwise whether the value is a valid personnummer. */
+export function getSsnValidationState(value: string, options?: SsnValidationOptions): boolean | null {
+  if (!value.trim()) {
+    return null
+  }
+  return validateSsn(value, options)
+}

package/src/index.ts

@@ -31,6 +31,7 @@ import FdsWizard from './components/FdsWizard/FdsWizard.vue'
 import FdsCheckbox from './components/Form/FdsCheckbox/FdsCheckbox.vue'
 import FdsInput from './components/Form/FdsInput/FdsInput.vue'
 import FdsPhonenumber from './components/Form/FdsPhonenumber/FdsPhonenumber.vue'
+import FdsSsn from './components/Form/FdsSsn/FdsSsn.vue'
 import FdsRadio from './components/Form/FdsRadio/FdsRadio.vue'
 import FdsSelect from './components/Form/FdsSelect/FdsSelect.vue'
 import FdsTextarea from './components/Form/FdsTextarea/FdsTextarea.vue'
@@ -113,6 +114,7 @@ export {
   FdsModal,
   FdsPagination,
   FdsPhonenumber,
+  FdsSsn,
   FdsPopover,
   FdsRadio,
   FdsSearchSelect,
@@ -196,6 +198,7 @@ const FdsVueCorePlugin: Plugin = {
     app.component('FdsCheckbox', FdsCheckbox)
     app.component('FdsTextarea', FdsTextarea)
     app.component('FdsPhonenumber', FdsPhonenumber)
+    app.component('FdsSsn', FdsSsn)
     app.component('FdsSelect', FdsSelect)
     app.component('FdsTable', FdsTable)
     app.component('FdsTableHead', FdsTableHead)
@@ -283,6 +286,19 @@ export {
 
 export type { FdsPhonenumberEmits, FdsPhonenumberProps } from './components/Form/FdsPhonenumber/types'
 
+export {
+  getSsnValidationState,
+  stripSsnSeparators,
+  validateSsn,
+  validateSsnNumber,
+  type SsnValidationOptions,
+  type SsnValidationResult,
+} from './helpers/validateSsn'
+
+export { getSsnMask, getSsnMaskOptions, SSN_INTERIM_MASK, SSN_MASK } from './components/Form/FdsSsn/ssnMask'
+
+export type { FdsSsnEmits, FdsSsnProps } from './components/Form/FdsSsn/types'
+
 // Table component types
 export type { FdsTableProps } from './components/Table/FdsTable/types'
 

package/src/lang/en.json

@@ -50,6 +50,8 @@
   "FdsPhonenumber.invalidPhone": "Enter a valid phone number",
   "FdsPhonenumber.noCountryResults": "No country matches your search",
   "FdsPhonenumber.phoneNumber": "Phone number",
+  "FdsSsn.invalidSsn": "Enter a valid personal identity number",
+  "FdsSsn.label": "Personal identity number",
   "FdsSearchSelectPro.loadingMore": "Loading more...",
   "FdsSearchSelectPro.showMore": "Show more",
   "FdsSearchSelectPro.unspecified": "Unspecified",

package/src/lang/sv.json

@@ -50,6 +50,8 @@
   "FdsPhonenumber.invalidPhone": "Ange ett giltigt telefonnummer",
   "FdsPhonenumber.noCountryResults": "Inget land matchar sökningen",
   "FdsPhonenumber.phoneNumber": "Telefonnummer",
+  "FdsSsn.invalidSsn": "Ange ett giltigt personnummer",
+  "FdsSsn.label": "Personnummer",
   "FdsSearchSelectPro.loadingMore": "Hämtar fler...",
   "FdsSearchSelectPro.showMore": "Visa fler",
   "FdsSearchSelectPro.unspecified": "Ospecificerat",