fds-vue-core 8.2.3 → 8.3.0

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