fds-vue-core 7.2.2 → 7.2.4

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

@@ -20,12 +20,22 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "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,6 +28,11 @@ 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:e164'?: ((value: string) => void) | Array<(value: string) => void>;
+    'onUpdate:country'?: ((value: string) => void) | Array<(value: string) => void>;
 }
 export interface FdsPhonenumberEmits {
     'update:country': [country: string];
@@ -34,3 +41,4 @@ export interface FdsPhonenumberEmits {
     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...",
@@ -18315,9 +18317,6 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     const showActiveDialPreview = vue.computed(
       () => !showHoverDialPreview.value && !!activeCountry.value && dropdownOpen.value && !isSearching.value
     );
-    const showDialPreviewPadding = vue.computed(
-      () => showSelectedDialPreview.value || showHoverDialPreview.value || showActiveDialPreview.value
-    );
     const dialPreviewCountry = vue.computed(() => {
       if (showHoverDialPreview.value && hoveredCountry.value) {
         return hoveredCountry.value;
@@ -18340,11 +18339,11 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       showHoverDialPreview.value ? "text-gray-900/50" : "text-gray-900"
     ]);
     const inputClasses = vue.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"
+      isInvalid.value && "outline-2 -outline-offset-2 outline-red-600",
+      hasNoCountryResults.value && "outline-red-600!"
     ]);
     const arrowButtonClasses = vue.computed(() => [
       "absolute right-0 top-0 z-10 flex h-12 w-10 items-center justify-center border-0 bg-transparent p-0",
@@ -18541,13 +18540,13 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["relative w-32", props.class])
       }, [
         vue.createElementVNode("div", _hoisted_1$5, [
-          dialPreviewCountry.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          !dropdownOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: vue.normalizeClass(dialPreviewClasses.value),
             "aria-hidden": "true"
           }, [
-            vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString(vue.unref(countryCodeToFlag)(dialPreviewCountry.value.value)), 1),
-            vue.createTextVNode(" " + vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(dialPreviewCountry.value.countryCode), 1)
+            vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString(vue.unref(countryCodeToFlag)(dialPreviewCountry.value?.value ?? "")), 1),
+            vue.createTextVNode(" " + vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(dialPreviewCountry.value?.countryCode ?? ""), 1)
           ], 2)) : vue.createCommentVNode("", true),
           vue.createElementVNode("input", vue.mergeProps({
             ref_key: "inputRef",
@@ -18743,7 +18742,22 @@ 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: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": {},
@@ -18752,12 +18766,33 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   }),
   emits: /* @__PURE__ */ vue.mergeModels(["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(
@@ -18768,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;
@@ -18776,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() {
@@ -18806,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, {
@@ -18823,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)
       ]);
     };
   }