fds-vue-core 8.2.2 → 8.2.3

package/dist/components/FdsSearchSelect/FdsSearchSelect.vue.d.ts

@@ -83,6 +83,7 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProps, {
         optional: boolean;
         labelLeft: boolean;
         clearButton: boolean;
+        displayChar: string;
         ariaLabel: string;
         maskOptions: {
             lazy?: boolean;
@@ -127,6 +128,7 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProps, {
         optional: boolean;
         labelLeft: boolean;
         clearButton: boolean;
+        displayChar: string;
         ariaLabel: string;
         maskOptions: {
             lazy?: boolean;

package/dist/components/FdsSearchSelectPro/FdsSearchSelectPro.vue.d.ts

@@ -104,6 +104,7 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProProps, {
         optional: boolean;
         labelLeft: boolean;
         clearButton: boolean;
+        displayChar: string;
         ariaLabel: string;
         maskOptions: {
             lazy?: boolean;
@@ -148,6 +149,7 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProProps, {
         optional: boolean;
         labelLeft: boolean;
         clearButton: boolean;
+        displayChar: string;
         ariaLabel: string;
         maskOptions: {
             lazy?: boolean;

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

@@ -37,6 +37,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     optional: boolean;
     labelLeft: boolean;
     clearButton: boolean;
+    displayChar: string;
     ariaLabel: string;
     maskOptions: {
         lazy?: boolean;

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

@@ -9,6 +9,8 @@ export interface FdsInputProps {
     labelLeft?: boolean;
     clearButton?: boolean;
     mask?: string | RegExp | Array<string | RegExp>;
+    /** Character shown for unfilled mask positions while typing (maps to IMask placeholderChar). */
+    displayChar?: string;
     modelValue?: string;
     value?: string;
     type?: string;

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

@@ -9877,12 +9877,13 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$j = ["for", "id"];
-const _hoisted_2$f = { class: "relative" };
-const _hoisted_3$f = ["type", "required", "value", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
+const _hoisted_2$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
+const _hoisted_3$f = { class: "whitespace-pre text-base leading-6 tabular-nums" };
 const _hoisted_4$e = {
   key: 0,
   class: "text-red-700 font-bold mt-1"
 };
+const maskFieldPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -9899,6 +9900,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
     mask: { default: void 0 },
+    displayChar: { default: void 0 },
     modelValue: {},
     value: { default: void 0 },
     type: {},
@@ -9940,7 +9942,10 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { id, type, maxlength, attrs } = useAttrsWithDefaults(props);
     const { t } = useFdsI18n();
-    const inputType = vue.computed(() => type.value ?? props.type ?? "text");
+    const inputType = vue.computed(() => {
+      if (props.mask) return "text";
+      return type.value ?? props.type ?? "text";
+    });
     const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
     const inputId = vue.computed(() => id.value ?? autoId);
     const labelId = vue.computed(() => `${inputId.value}-label`);
@@ -10011,29 +10016,92 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return "pr-40";
     });
     const externalClass = vue.computed(() => props.class ?? attrs.class);
-    const inputClasses = vue.computed(() => [
-      "block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]",
-      maxlength.value ? "" : "w-full",
-      inputPaddingRight.value,
-      "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-      showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
-      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
-      isInvalid.value && "outline-2 outline-red-600",
-      props.inputClass
+    const maskDisplayValue = vue.ref("");
+    const maskPlaceholderChar = vue.ref("");
+    const resolvedPlaceholderChar = vue.computed(() => props.displayChar ?? props.maskOptions?.placeholderChar ?? null);
+    const useMaskPlaceholderStyle = vue.computed(() => {
+      if (!props.mask || !resolvedPlaceholderChar.value) return false;
+      const lazy = props.maskOptions?.lazy ?? (props.displayChar ? false : true);
+      return !lazy;
+    });
+    const maskFieldWrapperClasses = vue.computed(() => {
+      if (!useMaskPlaceholderStyle.value) return void 0;
+      return [
+        "rounded-md border border-gray-500 bg-white bg-clip-padding",
+        props.disabled && "outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent",
+        isInvalid.value ? "outline-2 -outline-offset-2 outline-red-600" : "focus-within:outline-2 focus-within:outline-blue-500 focus-within:outline-offset-0",
+        "focus-within:border-transparent"
+      ];
+    });
+    const maskOverlayClasses = vue.computed(() => [
+      "pointer-events-none absolute inset-0 z-[3] flex items-center",
+      maskFieldPaddingClasses,
+      inputPaddingRight.value
     ]);
+    const maskDisplayChars = vue.computed(() => {
+      const display = maskDisplayValue.value;
+      const placeholder = maskPlaceholderChar.value || resolvedPlaceholderChar.value;
+      if (!display || !placeholder) return [];
+      return [...display].map((char) => ({
+        char,
+        isPlaceholder: char === placeholder
+      }));
+    });
+    function maskCharStyle(isPlaceholder) {
+      if (isPlaceholder) {
+        return { color: props.disabled ? "var(--color-gray-500)" : "var(--color-gray-400)" };
+      }
+      return { color: props.disabled ? "var(--color-gray-800)" : "var(--color-gray-900)" };
+    }
+    const inputClasses = vue.computed(() => {
+      const shared = [
+        "block rounded-md",
+        maxlength.value ? "" : "w-full",
+        inputPaddingRight.value,
+        showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
+        props.inputClass
+      ];
+      if (useMaskPlaceholderStyle.value) {
+        return [
+          ...shared,
+          "relative z-[2] border-0 bg-transparent shadow-none focus:outline-none",
+          maskFieldPaddingClasses,
+          "text-base leading-6 tabular-nums",
+          props.disabled ? "cursor-not-allowed" : ""
+        ];
+      }
+      return [
+        ...shared,
+        "rounded-md border border-gray-500",
+        maskFieldPaddingClasses,
+        "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" : "text-gray-900 bg-white",
+        isInvalid.value && "outline-2 outline-red-600"
+      ];
+    });
     const inputStyle = vue.computed(() => {
-      if (maxlength.value) {
-        return {
-          width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
-          maxWidth: "100%"
-        };
+      const size = maxlength.value ? {
+        width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
+        maxWidth: "100%"
+      } : {};
+      if (!useMaskPlaceholderStyle.value) {
+        return size;
       }
-      return {};
+      return {
+        ...size,
+        color: "transparent",
+        WebkitTextFillColor: "transparent",
+        caretColor: props.disabled ? "#1f2937" : "#111827"
+      };
     });
     const rightIconsContainerClasses = vue.computed(() => [
-      "absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
+      "absolute z-10 flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
       showClearButton.value ? "right-2" : "right-3"
     ]);
+    const inputBindings = vue.computed(() => ({
+      ...inputAttrs.value,
+      ...props.mask ? {} : { value: internalValue.value }
+    }));
     const internalValue = vue.computed({
       get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
       set: (newValue) => {
@@ -10045,6 +10113,10 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     });
     function onClear() {
       internalValue.value = "";
+      if (maskInstance) {
+        maskInstance.value = "";
+        vue.nextTick(syncMaskDisplay);
+      }
       emit("clearInput");
     }
     function onDateIconClick() {
@@ -10073,6 +10145,23 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     }
     const inputRef = vue.ref(null);
     let maskInstance = null;
+    function getMaskEmittedValue(instance) {
+      if (!instance) return "";
+      const raw = String(instance.value ?? "");
+      if (!useMaskPlaceholderStyle.value) return raw;
+      const placeholder = instance.masked?.placeholderChar ?? resolvedPlaceholderChar.value;
+      if (!placeholder) return raw;
+      return raw.split(placeholder).join("").replace(/\s+$/, "");
+    }
+    function syncMaskDisplay() {
+      if (!inputRef.value) {
+        maskDisplayValue.value = "";
+        maskPlaceholderChar.value = "";
+        return;
+      }
+      maskPlaceholderChar.value = maskInstance?.masked?.placeholderChar ?? resolvedPlaceholderChar.value ?? "";
+      maskDisplayValue.value = maskInstance?.displayValue ?? inputRef.value.value ?? maskInstance?.value ?? "";
+    }
     const createMask2 = () => {
       if (maskInstance) {
         maskInstance.destroy();
@@ -10081,7 +10170,11 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       if (props.mask && inputRef.value) {
         const maskConfig = {
           mask: props.mask,
-          ...props.maskOptions
+          ...props.maskOptions,
+          ...props.displayChar ? {
+            placeholderChar: props.displayChar,
+            lazy: props.maskOptions?.lazy ?? false
+          } : {}
         };
         maskInstance = IMask(inputRef.value, maskConfig);
         if (internalValue.value) {
@@ -10089,9 +10182,20 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         }
         maskInstance.on("accept", () => {
           if (maskInstance) {
-            internalValue.value = maskInstance.value;
+            internalValue.value = getMaskEmittedValue(maskInstance);
+            vue.nextTick(syncMaskDisplay);
           }
         });
+        maskInstance.on("complete", () => {
+          vue.nextTick(syncMaskDisplay);
+        });
+        vue.nextTick(() => {
+          syncMaskDisplay();
+          vue.nextTick(syncMaskDisplay);
+        });
+      } else {
+        maskDisplayValue.value = "";
+        maskPlaceholderChar.value = "";
       }
     };
     vue.onMounted(() => {
@@ -10120,19 +10224,21 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return props.meta ? metaId.value : void 0;
     });
     vue.watch(
-      () => props.mask,
+      () => [props.mask, props.displayChar, props.maskOptions],
       () => {
         vue.nextTick(() => {
           createMask2();
         });
-      }
+      },
+      { deep: true }
     );
     vue.watch(
       () => props.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
           if (document.activeElement !== inputRef.value) {
             maskInstance.value = newValue;
+            vue.nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10140,9 +10246,10 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => modelValue.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
           if (document.activeElement !== inputRef.value) {
             maskInstance.value = newValue;
+            vue.nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10177,13 +10284,14 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", {
             class: vue.normalizeClass({ "flex-1": props.labelLeft })
           }, [
-            vue.createElementVNode("div", _hoisted_2$f, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["relative", maskFieldWrapperClasses.value])
+            }, [
               vue.createElementVNode("input", vue.mergeProps({
                 ref_key: "inputRef",
                 ref: inputRef,
                 type: inputType.value === "password" ? showPassword.value ? "text" : "password" : inputType.value,
                 required: props.required,
-                value: internalValue.value,
                 disabled: props.disabled,
                 tabindex: props.disabled ? -1 : void 0,
                 "aria-invalid": props.valid === false ? "true" : void 0,
@@ -10196,7 +10304,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                 placeholder: props.placeholder,
                 pattern: props.pattern,
                 searchIcon: props.searchIcon
-              }, inputAttrs.value, {
+              }, inputBindings.value, {
                 onInput: handleInputChange,
                 onChange: handleInputChange,
                 onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("blur", $event)),
@@ -10204,7 +10312,21 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                   _ctx.$emit("keyup", ev);
                   if (ev.key === "Enter") _ctx.$emit("keyup.enter", ev);
                 })
-              }), null, 16, _hoisted_3$f),
+              }), null, 16, _hoisted_2$f),
+              useMaskPlaceholderStyle.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(maskOverlayClasses.value),
+                "aria-hidden": "true"
+              }, [
+                vue.createElementVNode("span", _hoisted_3$f, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(maskDisplayChars.value, (item, index) => {
+                    return vue.openBlock(), vue.createElementBlock("span", {
+                      key: index,
+                      style: vue.normalizeStyle(maskCharStyle(item.isPlaceholder))
+                    }, vue.toDisplayString(item.char), 5);
+                  }), 128))
+                ])
+              ], 2)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(rightIconsContainerClasses.value)
               }, [
@@ -10246,11 +10368,11 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["icon", "text"])) : vue.createCommentVNode("", true)
               ], 2),
               showTodaySuffixInField.value ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 0,
+                key: 1,
                 class: vue.normalizeClass(todaySuffixClasses.value),
                 style: vue.normalizeStyle(todaySuffixStyle.value)
               }, vue.toDisplayString(todayLabel.value), 7)) : vue.createCommentVNode("", true)
-            ])
+            ], 2)
           ], 2)
         ], 2),
         showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, vue.toDisplayString(props.invalidMessage), 1)) : vue.createCommentVNode("", true)
@@ -18916,7 +19038,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           role: "listbox",
           id: listboxId,
-          class: "absolute left-0 z-20 mt-1 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
+          class: "absolute left-0 z-20 mt-2 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
         }, listDataAttrs.value, { onMouseleave: clearHoverPreview }), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredCountries.value, (option, index) => {
             return vue.openBlock(), vue.createElementBlock("li", {
@@ -19025,7 +19147,7 @@ const _hoisted_2$3 = {
   key: 1,
   class: "font-thin mb-1"
 };
-const _hoisted_3$3 = { class: "flex flex-wrap items-start gap-x-1" };
+const _hoisted_3$3 = { class: "flex flex-wrap items-start gap-x-2" };
 const _hoisted_4$3 = {
   key: 2,
   class: "text-red-700 font-bold mt-1"