fds-vue-core 7.2.3 → 7.2.5

package/package.json

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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useAttrs, watch } from 'vue'
 import { useFdsI18n } from '../../../plugin/useFdsI18n'
 import FdsInput from '../FdsInput/FdsInput.vue'
 import { buildCountryOptions, sortCountryOptionsByName } from './countries'
@@ -11,8 +11,9 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const nationalNumber = defineModel<string>({ default: '' })
+const [nationalNumber, modelModifiers] = defineModel<string>({ default: '' })
 const country = defineModel<string>('country', { default: 'SE' })
+const attrs = useAttrs()
 
 const props = withDefaults(defineProps<FdsPhonenumberProps>(), {
   label: undefined,
@@ -20,6 +21,16 @@ const props = withDefaults(defineProps<FdsPhonenumberProps>(), {
   optional: false,
   valid: undefined,
   invalidMessage: undefined,
+  id: undefined,
+  autocomplete: 'tel',
+  required: false,
+  placeholder: undefined,
+  maxlength: undefined,
+  minlength: undefined,
+  name: undefined,
+  autofocus: false,
+  readonly: false,
+  pattern: undefined,
   defaultCountry: 'SE',
   countries: undefined,
   locale: undefined,
@@ -35,6 +46,26 @@ const emit = defineEmits<FdsPhonenumberEmits>()
 const { t, locale: fdsLocale } = useFdsI18n()
 
 const resolvedLocale = computed(() => props.locale ?? fdsLocale.value)
+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,
+  maxlength: props.maxlength,
+  minlength: props.minlength,
+  name: props.name,
+  autofocus: props.autofocus,
+  readonly: props.readonly,
+  pattern: props.pattern,
+  ...inputAttrs.value,
+}))
 
 const countryItems = computed(() => {
   const options = props.countries?.length
@@ -52,6 +83,12 @@ const phoneValidationOptions = computed(() => ({ numberType: props.numberType })
 /** Set after the phone number field has blurred; validation does not run on input. */
 const committedValid = ref<boolean | null>(null)
 
+const resolvedLabel = computed(() => (props.label === undefined ? t('FdsPhonenumber.phoneNumber') : props.label))
+
+const resolvedInvalidMessage = computed(() =>
+  props.invalidMessage === undefined ? t('FdsPhonenumber.invalidPhone') : props.invalidMessage,
+)
+
 const displayValid = computed((): boolean | null | undefined => {
   if (props.valid === false) return false
   if (props.valid === true) return true
@@ -61,7 +98,7 @@ const displayValid = computed((): boolean | null | undefined => {
 })
 
 const showInvalidMessage = computed(
-  () => displayValid.value === false && !props.optional && props.invalidMessage && !props.disabled,
+  () => displayValid.value === false && !props.optional && !!resolvedInvalidMessage.value && !props.disabled,
 )
 
 const noCountryResults = ref(false)
@@ -99,8 +136,12 @@ function onNoCountryResults(value: boolean) {
 
 <template>
   <div class="w-full mb-6">
-    <label v-if="label" class="block font-bold text-gray-900 cursor-pointer" :class="{ 'mb-0': meta, 'mb-1': !meta }">
-      {{ label }}
+    <label
+      v-if="resolvedLabel"
+      class="block font-bold text-gray-900 cursor-pointer"
+      :class="{ 'mb-0': meta, 'mb-1': !meta }"
+    >
+      {{ resolvedLabel }}
     </label>
     <div v-if="meta" class="font-thin mb-1">
       {{ meta }}
@@ -118,6 +159,7 @@ function onNoCountryResults(value: boolean) {
       />
       <FdsInput
         v-model="nationalNumber"
+        :modelModifiers="modelModifiers"
         type="tel"
         :valid="displayValid"
         :disabled="disabled"
@@ -125,6 +167,7 @@ function onNoCountryResults(value: boolean) {
         :ariaLabel="t('FdsPhonenumber.phoneNumber')"
         :data-testid="dataTestid ? `${dataTestid}-number` : undefined"
         :class="['mb-0! min-w-0 flex-1', inputClass ?? '']"
+        v-bind="forwardedInputProps"
         @blur="handleBlur"
       />
     </div>
@@ -132,7 +175,7 @@ function onNoCountryResults(value: boolean) {
       {{ t('FdsPhonenumber.noCountryResults') }}
     </div>
     <div v-if="showInvalidMessage" class="text-red-700 font-bold mt-1">
-      {{ invalidMessage }}
+      {{ resolvedInvalidMessage }}
     </div>
   </div>
 </template>

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

@@ -125,8 +125,7 @@ const arrowClasses = computed(() => [
   'pointer-events-none transition-transform duration-200 ease-in-out',
   {
     'fill-gray-500': props.disabled,
-    'fill-red-600': isInvalid.value && !props.disabled,
-    'fill-blue-500': !props.disabled && !isInvalid.value,
+    'fill-blue-500': (!props.disabled && !isInvalid.value) || isInvalid.value,
     'rotate-180': dropdownOpen.value && !props.disabled,
   },
 ])

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

@@ -1,3 +1,4 @@
+import type { FdsInputProps } from '../FdsInput/types'
 import type { CountryPhoneOption } from './countries'
 
 /**
@@ -6,13 +7,27 @@ import type { CountryPhoneOption } from './countries'
  */
 export type FdsPhonenumberNumberType = 'mobile' | 'any'
 
-export interface FdsPhonenumberProps {
+type FdsPhonenumberInputPassthroughProps = Pick<
+  FdsInputProps,
+  | 'id'
+  | 'autocomplete'
+  | 'required'
+  | 'placeholder'
+  | 'maxlength'
+  | 'minlength'
+  | 'name'
+  | 'autofocus'
+  | 'readonly'
+  | 'pattern'
+>
+
+export interface FdsPhonenumberProps extends FdsPhonenumberInputPassthroughProps {
   label?: string
   meta?: string
   optional?: boolean
   valid?: boolean | null
   invalidMessage?: string
-  /** National number (without country calling code). */
+  /** National number as typed by the user (without country calling code). */
   modelValue?: string
   /** ISO 3166-1 alpha-2 country code, e.g. `SE`. */
   country?: string
@@ -28,9 +43,17 @@ export interface FdsPhonenumberProps {
   dataTestid?: string
   selectClass?: string
   inputClass?: string
+  // Event handler props for consumer type inference
+  onValid?: ((value: boolean | null) => void) | Array<(value: boolean | null) => void>
+  onNoCountryResults?: ((value: boolean) => void) | Array<(value: boolean) => void>
+  onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>
+  'onUpdate:modelValue'?: ((value: string) => void) | Array<(value: string) => void>
+  'onUpdate:e164'?: ((value: string) => void) | Array<(value: string) => void>
+  'onUpdate:country'?: ((value: string) => void) | Array<(value: string) => void>
 }
 
 export interface FdsPhonenumberEmits {
+  'update:modelValue': [value: string]
   'update:country': [country: string]
   'update:e164': [phoneNumber: string]
   valid: [value: boolean | null]

package/src/lang/en.json

@@ -44,6 +44,7 @@
   "FdsPagination.nextPage": "Go to next page",
   "FdsPagination.previousPage": "Go to previous page",
   "FdsPhonenumber.countryCode": "Country code",
+  "FdsPhonenumber.invalidPhone": "Enter a valid phone number",
   "FdsPhonenumber.noCountryResults": "No country matches your search",
   "FdsPhonenumber.phoneNumber": "Phone number",
   "FdsSearchSelectPro.loadingMore": "Loading more...",

package/src/lang/sv.json

@@ -44,6 +44,7 @@
   "FdsPagination.nextPage": "Gå till nästa sida",
   "FdsPagination.previousPage": "Gå till föregående sida",
   "FdsPhonenumber.countryCode": "Landskod",
+  "FdsPhonenumber.invalidPhone": "Ange ett giltigt telefonnummer",
   "FdsPhonenumber.noCountryResults": "Inget land matchar sökningen",
   "FdsPhonenumber.phoneNumber": "Telefonnummer",
   "FdsSearchSelectPro.loadingMore": "Hämtar fler...",