fds-vue-core 7.2.2 → 7.2.4

package/package.json

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

@@ -80,10 +80,6 @@ const showActiveDialPreview = computed(
   () => !showHoverDialPreview.value && !!activeCountry.value && dropdownOpen.value && !isSearching.value,
 )
 
-const showDialPreviewPadding = computed(
-  () => showSelectedDialPreview.value || showHoverDialPreview.value || showActiveDialPreview.value,
-)
-
 const dialPreviewCountry = computed(() => {
   if (showHoverDialPreview.value && hoveredCountry.value) {
     return hoveredCountry.value
@@ -111,13 +107,13 @@ const dialPreviewClasses = computed(() => [
 ])
 
 const inputClasses = computed(() => [
-  'block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums',
-  showDialPreviewPadding.value ? 'pl-10 pr-10' : 'px-3 pr-10',
+  'block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums px-3 pr-10',
   '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 bg-gray-50'
     : 'cursor-text bg-white text-gray-900',
   isInvalid.value && 'outline-2 -outline-offset-2 outline-red-600',
+  hasNoCountryResults.value && 'outline-red-600!',
 ])
 
 const arrowButtonClasses = computed(() => [
@@ -341,11 +337,11 @@ onBeforeUnmount(() => {
 <template>
   <div ref="rootRef" class="relative w-32" :class="props.class">
     <div class="relative w-full">
-      <div v-if="dialPreviewCountry" :class="dialPreviewClasses" aria-hidden="true">
+      <div v-if="!dropdownOpen" :class="dialPreviewClasses" aria-hidden="true">
         <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none">
-          {{ countryCodeToFlag(dialPreviewCountry.value) }}
+          {{ countryCodeToFlag(dialPreviewCountry?.value ?? '') }}
         </span>
-        {{ t('common.plus') }}{{ dialPreviewCountry.countryCode }}
+        {{ t('common.plus') }}{{ dialPreviewCountry?.countryCode ?? '' }}
       </div>
       <input
         ref="inputRef"

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,18 @@ 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,6 +34,12 @@ 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:e164'?: ((value: string) => void) | Array<(value: string) => void>
+  'onUpdate:country'?: ((value: string) => void) | Array<(value: string) => void>
 }
 
 export interface FdsPhonenumberEmits {

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