fds-vue-core 8.1.0 → 8.2.0

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

@@ -849,7 +849,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$z = { class: "flex items-start gap-2" };
-const _hoisted_2$r = { class: "h-7 flex items-center" };
+const _hoisted_2$q = { class: "h-7 flex items-center" };
 const _hoisted_3$l = { class: "leading-7" };
 const _hoisted_4$j = { class: "relative h-7" };
 const _hoisted_5$h = {
@@ -913,7 +913,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
               class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
             }, [
               vue.createElementVNode("div", _hoisted_1$z, [
-                vue.createElementVNode("div", _hoisted_2$r, [
+                vue.createElementVNode("div", _hoisted_2$q, [
                   vue.createVNode(_sfc_main$M, {
                     name: "alert",
                     size: 24,
@@ -953,7 +953,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$y = ["id"];
-const _hoisted_2$q = {
+const _hoisted_2$p = {
   key: 0,
   class: "flex items-start justify-between gap-4 mb-4"
 };
@@ -1004,7 +1004,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
         class: contentClasses.value,
         style: borderLeftStyle.value
       }, rootAttrs.value), [
-        __props.heading ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$q, [
+        __props.heading ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$p, [
           vue.createElementVNode("div", _hoisted_3$k, [
             vue.createElementVNode("h3", {
               class: vue.normalizeClass(headerClasses.value)
@@ -1070,7 +1070,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$x = { class: "leading-6 w-full flex justify-between gap-4" };
-const _hoisted_2$p = {
+const _hoisted_2$o = {
   key: 0,
   class: "flex items-center mr-4"
 };
@@ -1157,7 +1157,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(["flex items-center", { "inline-flex items-start": __props.icon }])
               }, [
-                __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$p, [
+                __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$o, [
                   vue.createVNode(_sfc_main$M, {
                     name: __props.icon,
                     size: 24,
@@ -1205,7 +1205,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$w = ["id"];
-const _hoisted_2$o = {
+const _hoisted_2$n = {
   key: 0,
   class: "flex items-start gap-4"
 };
@@ -1261,7 +1261,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         id: contentBlockId.value,
         class: contentClasses.value
       }, rootAttrs.value), [
-        __props.iconSize === "large" && __props.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [
+        __props.iconSize === "large" && __props.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [
           vue.createVNode(_sfc_main$M, {
             name: __props.icon,
             size: largeIconSize,
@@ -1309,7 +1309,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$v = { class: "mb-0-last-child" };
-const _hoisted_2$n = {
+const _hoisted_2$m = {
   key: 0,
   class: "flex items-end"
 };
@@ -1448,7 +1448,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("div", _hoisted_1$v, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ]),
-                vue.unref(hasStickerSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [
+                vue.unref(hasStickerSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$m, [
                   vue.renderSlot(_ctx.$slots, "sticker")
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -1552,8 +1552,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$t = ["aria-disabled"];
-const _hoisted_2$m = { class: "pt-0.5" };
-const elBase$2 = "box-border appearance-none inline-flex items-start justify-center w-fit shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
+const elBase$2 = "box-border appearance-none inline-flex items-center justify-center w-fit min-h-0 shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-middle no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -1583,7 +1582,10 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const { disabled, href, target, rel, attrs } = useAttrsWithDefaults(props);
-    const rootClasses = vue.computed(() => ["flex transition-opacity duration-200", props.block && "block w-full"]);
+    const rootClasses = vue.computed(() => [
+      props.block ? "flex w-full" : "inline-flex shrink-0 self-center",
+      "transition-opacity duration-200"
+    ]);
     const externalClass = vue.computed(() => attrs.class);
     const variantClasses2 = vue.computed(
       () => props.invert ? "border-0 font-normal text-white bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white hover:bg-blue-800 active:bg-blue-900" : "border-0 font-normal text-blue-600 bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200"
@@ -1652,7 +1654,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                 size: __props.iconSize
               }, null, 8, ["class", "name", "size"])
             ], 2)) : vue.createCommentVNode("", true),
-            vue.createElementVNode("span", _hoisted_2$m, vue.toDisplayString(__props.text), 1)
+            vue.createElementVNode("span", null, vue.toDisplayString(__props.text), 1)
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
@@ -6391,7 +6393,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
       {
         "sm:flex-row sm:justify-end": !props.alignLeftFooter,
         "sm:flex-row sm:justify-start": props.alignLeftFooter,
-        "sticky bg-white bottom-0 shadow-[0px_-8px_16px_0px_rgba(255,255,255,0.59)] z-[2] -mx-6 px-6 pb-6": props.stickyFooter
+        "sticky bg-white bottom-0 shadow-[0px_-8px_16px_0px_rgba(255,255,255,0.59)] z-[2] -mx-6 p-6 mt-0!": props.stickyFooter
       }
     ]);
     const setHtmlOverflow = (value) => {
@@ -11202,6 +11204,26 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+function debounce(fn, delayMs) {
+  let timeoutId;
+  const debounced = (...args) => {
+    if (timeoutId !== void 0) {
+      clearTimeout(timeoutId);
+    }
+    const delay = typeof delayMs === "function" ? delayMs() : delayMs;
+    timeoutId = setTimeout(() => {
+      timeoutId = void 0;
+      fn(...args);
+    }, delay);
+  };
+  debounced.cancel = () => {
+    if (timeoutId !== void 0) {
+      clearTimeout(timeoutId);
+      timeoutId = void 0;
+    }
+  };
+  return debounced;
+}
 const _hoisted_1$f = ["id"];
 const _hoisted_2$c = { class: "flex items-center justify-start gap-1 w-[100px]" };
 const _hoisted_3$c = { class: "flex items-center justify-center w-auto gap-2 order-0 sm:order-0" };
@@ -11246,15 +11268,6 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
         internalValue.value = newValue;
       }
     );
-    const debounce = (fn, delay = 300) => {
-      let timer;
-      return (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-          fn(...args);
-        }, delay);
-      };
-    };
     const handlePageChange = debounce((event) => {
       const target = event.target;
       const incomingPage = Number.parseInt(target.value);
@@ -11273,7 +11286,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       }
       internalValue.value = page;
       emit("paginate", { target: { id: inputId.value }, detail: page });
-    }, 500);
+    }, 300);
     const handlePagination = (action) => {
       let page = 0;
       switch (action) {
@@ -11858,13 +11871,6 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
-    const debounce = (fn, delay) => {
-      let timeout;
-      return (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => fn(...args), delay);
-      };
-    };
     const debouncedEmitChange = debounce((value) => {
       const formattedValue = formatPidWithDash(value);
       emit("change", formattedValue);
@@ -12743,26 +12749,24 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
-    let changeTimeout = null;
-    let inputTimeout = null;
     const isDebouncingChange = vue.ref(false);
     const isSearching = vue.computed(() => isDebouncingChange.value || props.loading);
-    const debouncedEmitChange = (value) => {
-      if (changeTimeout) clearTimeout(changeTimeout);
-      const delay = Math.max(0, props.debounceMs ?? 500);
-      isDebouncingChange.value = true;
-      changeTimeout = setTimeout(() => {
-        const formattedValue = formatPidWithDash(value);
-        emit("change", formattedValue);
+    const debouncedEmitChange = debounce(
+      (value) => {
+        emit("change", formatPidWithDash(value));
         isDebouncingChange.value = false;
-      }, delay);
-    };
-    const debouncedEmitInput = (ev) => {
-      if (inputTimeout) clearTimeout(inputTimeout);
-      const delay = Math.max(0, props.debounceMs ?? 500);
-      inputTimeout = setTimeout(() => {
+      },
+      () => Math.max(0, props.debounceMs ?? 500)
+    );
+    const debouncedEmitInput = debounce(
+      (ev) => {
         emit("input", ev);
-      }, delay);
+      },
+      () => Math.max(0, props.debounceMs ?? 500)
+    );
+    const scheduleDebouncedEmitChange = (value) => {
+      isDebouncingChange.value = true;
+      debouncedEmitChange(value);
     };
     vue.watch(
       () => searchTerm.value,
@@ -12772,7 +12776,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
         }
         filterAndPaginate();
         if (isMultiple.value || selectedItem.value === null) {
-          debouncedEmitChange(newValue);
+          scheduleDebouncedEmitChange(newValue);
         }
       }
     );
@@ -13122,8 +13126,8 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       window.removeEventListener("mouseup", onClickOutside);
-      if (changeTimeout) clearTimeout(changeTimeout);
-      if (inputTimeout) clearTimeout(inputTimeout);
+      debouncedEmitChange.cancel();
+      debouncedEmitInput.cancel();
       isDebouncingChange.value = false;
       const input = getInputElement();
       if (input) {
@@ -20105,6 +20109,7 @@ exports.buildCountryOptions = buildCountryOptions;
 exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.clearUnsavedChanges = clearUnsavedChanges;
 exports.countryCodeToFlag = countryCodeToFlag;
+exports.debounce = debounce;
 exports.default = FdsVueCorePlugin;
 exports.filterCountryOptions = filterCountryOptions;
 exports.formatPidWithDash = formatPidWithDash;