fds-vue-core 7.2.3 → 7.2.4

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

@@ -1,4 +1,4 @@
-import { useAttrs, computed, useSlots, Comment, inject, defineComponent, openBlock, createElementBlock, mergeProps, createBlock, ref, watch, createElementVNode, normalizeClass, unref, createVNode, toDisplayString, createCommentVNode, renderSlot, withCtx, createTextVNode, withDirectives, vShow, resolveDynamicComponent, normalizeStyle, onMounted, onUnmounted, onBeforeUnmount, Fragment, renderList, nextTick, Teleport, withModifiers, useModel, mergeModels, provide, getCurrentInstance, vModelText, withKeys, vModelCheckbox, watchEffect, reactive, resolveComponent, Transition, normalizeProps, guardReactiveProps, vModelSelect } from "vue";
+import { useAttrs, computed, useSlots, Comment, inject, defineComponent, openBlock, createElementBlock, mergeProps, createBlock, ref, watch, createElementVNode, normalizeClass, unref, createVNode, toDisplayString, createCommentVNode, renderSlot, withCtx, createTextVNode, withDirectives, vShow, resolveDynamicComponent, normalizeStyle, onMounted, onUnmounted, onBeforeUnmount, Fragment, renderList, nextTick, Teleport, withModifiers, useModel, mergeModels, provide, getCurrentInstance, vModelText, withKeys, vModelCheckbox, watchEffect, reactive, resolveComponent, Transition, normalizeProps, guardReactiveProps, isRef, vModelSelect } from "vue";
 function useAttrsWithDefaults(props) {
   const attrs = useAttrs();
   return {
@@ -80,6 +80,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...",
@@ -146,6 +147,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...",
@@ -18738,7 +18740,22 @@ const _sfc_main$a = /* @__PURE__ */ 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": {},
@@ -18747,12 +18764,33 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
   setup(__props, { emit: __emit }) {
-    const nationalNumber = useModel(__props, "modelValue");
+    const [nationalNumber, modelModifiers] = useModel(__props, "modelValue");
     const country = useModel(__props, "country");
+    const attrs = useAttrs();
     const props = __props;
     const emit = __emit;
     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 }
+      };
+    });
+    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 ? props.countries : buildCountryOptions(resolvedLocale.value, props.defaultCountry);
       return sortCountryOptionsByName(
@@ -18763,6 +18801,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     });
     const phoneValidationOptions = computed(() => ({ numberType: props.numberType }));
     const committedValid = ref(null);
+    const resolvedLabel = computed(() => props.label === void 0 ? t("FdsPhonenumber.phoneNumber") : props.label);
+    const resolvedInvalidMessage = computed(
+      () => props.invalidMessage === void 0 ? t("FdsPhonenumber.invalidPhone") : props.invalidMessage
+    );
     const displayValid = computed(() => {
       if (props.valid === false) return false;
       if (props.valid === true) return true;
@@ -18771,7 +18813,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return props.valid;
     });
     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);
     function runValidation() {
@@ -18801,10 +18843,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        __props.label ? (openBlock(), createElementBlock("label", {
+        resolvedLabel.value ? (openBlock(), createElementBlock("label", {
           key: 0,
           class: normalizeClass(["block font-bold text-gray-900 cursor-pointer", { "mb-0": __props.meta, "mb-1": !__props.meta }])
-        }, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
+        }, toDisplayString(resolvedLabel.value), 3)) : createCommentVNode("", true),
         __props.meta ? (openBlock(), createElementBlock("div", _hoisted_2$3, toDisplayString(__props.meta), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$3, [
           createVNode(_sfc_main$b, {
@@ -18818,21 +18860,21 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
             onNoCountryResults
           }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
-          createVNode(_sfc_main$u, {
-            modelValue: nationalNumber.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalNumber.value = $event),
+          createVNode(_sfc_main$u, mergeProps({
+            modelValue: unref(nationalNumber),
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(nationalNumber) ? nationalNumber.value = $event : null),
+            modelModifiers: unref(modelModifiers),
             type: "tel",
             valid: displayValid.value,
             disabled: __props.disabled,
             optional: __props.optional,
             ariaLabel: unref(t)("FdsPhonenumber.phoneNumber"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-number` : void 0,
-            class: 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 ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(unref(t)("FdsPhonenumber.noCountryResults")), 1)) : createCommentVNode("", true),
-        showInvalidMessage.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, toDisplayString(__props.invalidMessage), 1)) : createCommentVNode("", true)
+        showInvalidMessage.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, toDisplayString(resolvedInvalidMessage.value), 1)) : createCommentVNode("", true)
       ]);
     };
   }