fds-vue-core 7.2.3 → 7.2.5

package/dist/components/Form/FdsPhonenumber/FdsPhonenumber.vue.d.ts

@@ -7,25 +7,35 @@ type __VLS_PublicProps = {
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     blur: (ev: FocusEvent) => any;
     valid: (value: boolean | null) => any;
-    "update:modelValue": (value: string) => any;
+    "update:modelValue": (...args: unknown[]) => any;
     noCountryResults: (value: boolean) => any;
     "update:country": (...args: unknown[]) => any;
     "update:e164": (phoneNumber: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onBlur?: ((ev: FocusEvent) => any) | undefined;
     onValid?: ((value: boolean | null) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
     onNoCountryResults?: ((value: boolean) => any) | undefined;
     "onUpdate:country"?: ((...args: unknown[]) => any) | undefined;
     "onUpdate:e164"?: ((phoneNumber: string) => any) | undefined;
 }>, {
     disabled: boolean;
+    required: boolean;
+    id: string;
+    name: string;
+    placeholder: string;
+    maxlength: number;
     dataTestid: string;
     label: string;
     meta: string;
+    pattern: string;
+    autofocus: boolean;
     valid: boolean | null;
     optional: boolean;
     invalidMessage: string;
+    minlength: number;
+    autocomplete: string;
+    readonly: boolean;
     inputClass: string;
     locale: string;
     defaultCountry: string;

package/dist/components/Form/FdsPhonenumber/types.d.ts

@@ -1,16 +1,18 @@
+import { FdsInputProps } from '../FdsInput/types';
 import { CountryPhoneOption } from './countries';
 /**
  * `mobile` – mobile numbers only (Google libphonenumber metadata).
  * `any` – mobile and fixed-line numbers.
  */
 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;
@@ -26,11 +28,19 @@ export interface FdsPhonenumberProps {
     dataTestid?: string;
     selectClass?: string;
     inputClass?: string;
+    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];
     noCountryResults: [value: boolean];
     blur: [ev: FocusEvent];
 }
+export {};

package/dist/fds-vue-core.cjs.js

@@ -82,6 +82,7 @@ const en = {
   "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...",
@@ -148,6 +149,7 @@ const sv = {
   "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...",
@@ -18351,8 +18353,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       "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
       }
     ]);
@@ -18740,21 +18741,58 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean, default: false },
     dataTestid: { default: void 0 },
     selectClass: { default: void 0 },
-    inputClass: { default: void 0 }
+    inputClass: { default: void 0 },
+    onValid: {},
+    onNoCountryResults: {},
+    onBlur: {},
+    "onUpdate:modelValue": {},
+    "onUpdate:e164": {},
+    "onUpdate:country": {},
+    id: { default: void 0 },
+    autocomplete: { default: "tel" },
+    required: { type: Boolean, default: false },
+    placeholder: { default: void 0 },
+    maxlength: { default: void 0 },
+    minlength: { default: void 0 },
+    name: { default: void 0 },
+    autofocus: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    pattern: { default: void 0 }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {},
     "country": { default: "SE" },
     "countryModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
   setup(__props, { emit: __emit }) {
-    const nationalNumber = vue.useModel(__props, "modelValue");
+    const [nationalNumber, modelModifiers] = vue.useModel(__props, "modelValue");
     const country = vue.useModel(__props, "country");
+    const attrs = vue.useAttrs();
     const props = __props;
     const emit = __emit;
     const { t, locale: fdsLocale } = useFdsI18n();
     const resolvedLocale = vue.computed(() => props.locale ?? fdsLocale.value);
+    const inputAttrs = vue.computed(() => {
+      const { class: _class, style, ...rest } = attrs;
+      return {
+        ...rest,
+        ...style == null ? {} : { style }
+      };
+    });
+    const forwardedInputProps = vue.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 = vue.computed(() => {
       const options = props.countries?.length ? props.countries : buildCountryOptions(resolvedLocale.value, props.defaultCountry);
       return sortCountryOptionsByName(
@@ -18765,6 +18803,10 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     });
     const phoneValidationOptions = vue.computed(() => ({ numberType: props.numberType }));
     const committedValid = vue.ref(null);
+    const resolvedLabel = vue.computed(() => props.label === void 0 ? t("FdsPhonenumber.phoneNumber") : props.label);
+    const resolvedInvalidMessage = vue.computed(
+      () => props.invalidMessage === void 0 ? t("FdsPhonenumber.invalidPhone") : props.invalidMessage
+    );
     const displayValid = vue.computed(() => {
       if (props.valid === false) return false;
       if (props.valid === true) return true;
@@ -18773,7 +18815,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       return props.valid;
     });
     const showInvalidMessage = vue.computed(
-      () => displayValid.value === false && !props.optional && props.invalidMessage && !props.disabled
+      () => displayValid.value === false && !props.optional && !!resolvedInvalidMessage.value && !props.disabled
     );
     const noCountryResults = vue.ref(false);
     function runValidation() {
@@ -18803,10 +18845,10 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-        __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
+        resolvedLabel.value ? (vue.openBlock(), vue.createElementBlock("label", {
           key: 0,
           class: vue.normalizeClass(["block font-bold text-gray-900 cursor-pointer", { "mb-0": __props.meta, "mb-1": !__props.meta }])
-        }, vue.toDisplayString(__props.label), 3)) : vue.createCommentVNode("", true),
+        }, vue.toDisplayString(resolvedLabel.value), 3)) : vue.createCommentVNode("", true),
         __props.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, vue.toDisplayString(__props.meta), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3$3, [
           vue.createVNode(_sfc_main$b, {
@@ -18820,21 +18862,21 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
             onNoCountryResults
           }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
-          vue.createVNode(_sfc_main$u, {
-            modelValue: nationalNumber.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalNumber.value = $event),
+          vue.createVNode(_sfc_main$u, vue.mergeProps({
+            modelValue: vue.unref(nationalNumber),
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(nationalNumber) ? nationalNumber.value = $event : null),
+            modelModifiers: vue.unref(modelModifiers),
             type: "tel",
             valid: displayValid.value,
             disabled: __props.disabled,
             optional: __props.optional,
             ariaLabel: vue.unref(t)("FdsPhonenumber.phoneNumber"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-number` : void 0,
-            class: vue.normalizeClass(["mb-0! min-w-0 flex-1", __props.inputClass ?? ""]),
-            onBlur: handleBlur
-          }, null, 8, ["modelValue", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
+            class: ["mb-0! min-w-0 flex-1", __props.inputClass ?? ""]
+          }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "modelModifiers", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
         ]),
         noCountryResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(vue.unref(t)("FdsPhonenumber.noCountryResults")), 1)) : vue.createCommentVNode("", true),
-        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
+        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, vue.toDisplayString(resolvedInvalidMessage.value), 1)) : vue.createCommentVNode("", true)
       ]);
     };
   }