fds-vue-core 4.8.0 → 4.9.0

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

@@ -1015,7 +1015,7 @@ const _hoisted_10$3 = { class: "flex items-start justify-between gap-4" };
 const _hoisted_11$3 = { class: "flex items-center gap-3" };
 const _hoisted_12$2 = { class: "m-0 text-base font-main font-bold tracking-wide" };
 const _hoisted_13$2 = { class: "flex items-start gap-3" };
-const _hoisted_14$1 = { class: "mb-0-last-child" };
+const _hoisted_14$2 = { class: "mb-0-last-child" };
 const smallIconSize = 24;
 const largeIconSize = 48;
 const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
@@ -1089,7 +1089,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               ])
             ])
           ], 2)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_14$1, [
+          vue.createElementVNode("div", _hoisted_14$2, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ]))
@@ -8928,7 +8928,7 @@ const _hoisted_13$1 = {
   key: 1,
   class: "max-h-72 overflow-auto border border-gray-200 rounded-md"
 };
-const _hoisted_14 = { class: "w-full text-left text-xs border-collapse" };
+const _hoisted_14$1 = { class: "w-full text-left text-xs border-collapse" };
 const _hoisted_15 = ["onClick"];
 const _hoisted_16 = { class: "py-1.5 px-3 font-mono break-all" };
 const _hoisted_17 = { class: "py-1.5 px-3 font-mono whitespace-pre-wrap break-all" };
@@ -9270,7 +9270,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
             }, {
               default: vue.withCtx(() => [
                 !sessionStorageEntries.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, "Inga värden i sessionStorage.")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
-                  vue.createElementVNode("table", _hoisted_14, [
+                  vue.createElementVNode("table", _hoisted_14$1, [
                     _cache[15] || (_cache[15] = vue.createElementVNode("thead", { class: "bg-gray-50" }, [
                       vue.createElementVNode("tr", null, [
                         vue.createElementVNode("th", { class: "py-2 px-3 font-semibold" }, "Nyckel"),
@@ -10454,7 +10454,6 @@ const useSearchSelectProItems = ({
     });
   };
   const matchesSearchTerm = (item) => {
-    if (isDividerItem(item) && searchTerm.value) return false;
     if (!searchTerm.value) return true;
     const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, "") : searchTerm.value;
     const searchLower = searchValue.toLowerCase();
@@ -10469,6 +10468,53 @@ const useSearchSelectProItems = ({
       return valueLower.includes(searchLower) || unmaskedValue.length > 0 && unmaskedValue.includes(searchValue);
     });
   };
+  const matchesDividerSearchTerm = (item) => {
+    if (!isDividerItem(item) || !searchTerm.value) return false;
+    const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, "") : searchTerm.value;
+    const searchLower = searchValue.toLowerCase();
+    const dividerSearchFields = [...searchFields.value, "label", "name"];
+    return dividerSearchFields.some((field) => {
+      const value = item[field];
+      if (!value) return false;
+      return String(value).toLowerCase().includes(searchLower);
+    });
+  };
+  const filterWithDividerGroups = (sourceData) => {
+    if (!searchTerm.value) return sourceData;
+    const matched = [];
+    let currentDivider = null;
+    let currentChildren = [];
+    const flushCurrentGroup = () => {
+      if (!currentDivider) {
+        matched.push(...currentChildren.filter((item) => matchesSearchTerm(item)));
+      } else {
+        const dividerMatched = matchesDividerSearchTerm(currentDivider);
+        const matchedChildren = currentChildren.filter((item) => matchesSearchTerm(item));
+        if (!dividerMatched && matchedChildren.length === 0) {
+          return;
+        }
+        if (dividerMatched || props.showOutOfBoundsDivider !== false) {
+          matched.push(currentDivider);
+        }
+        if (dividerMatched) {
+          matched.push(...currentChildren);
+        } else {
+          matched.push(...matchedChildren);
+        }
+      }
+    };
+    sourceData.forEach((item) => {
+      if (isDividerItem(item)) {
+        flushCurrentGroup();
+        currentDivider = item;
+        currentChildren = [];
+        return;
+      }
+      currentChildren.push(item);
+    });
+    flushCurrentGroup();
+    return matched;
+  };
   const filterAndPaginate = (onTotal) => {
     if (!sourceItems.value.length) {
       matchingItems.value = [];
@@ -10480,7 +10526,7 @@ const useSearchSelectProItems = ({
     if (props.preserveOrder && sourceData.length) {
       sourceData = sortResponse(sourceData);
     }
-    const matchedArray = sourceData.filter((item) => matchesSearchTerm(item));
+    const matchedArray = hasDividerMode.value ? filterWithDividerGroups(sourceData) : sourceData.filter((item) => matchesSearchTerm(item));
     matchingItems.value = matchedArray;
     const shouldLimitItems = props.maxItems !== void 0 && props.maxItems > 0;
     const effectiveLimit = shouldLimitItems ? visibleItemsLimit.value ?? props.maxItems : null;
@@ -10501,7 +10547,11 @@ const useSearchSelectProItems = ({
     selectedItems.value = selectedItems.value.filter((item) => currentIds.has(getItemIdentifier(item)));
   };
   const hasInternalMoreItems = vue.computed(() => matchingItems.value.length > displayedItems.value.length);
-  const shouldShowLoadMore = vue.computed(() => props.showLoadMore || hasInternalMoreItems.value);
+  const shouldShowLoadMore = vue.computed(() => {
+    if (hasInternalMoreItems.value) return true;
+    if (props.maxItems && props.maxItems > 0) return false;
+    return props.showLoadMore;
+  });
   const handleInternalLoadMore = () => {
     if (props.maxItems && props.maxItems > 0 && hasInternalMoreItems.value) {
       visibleItemsLimit.value = (visibleItemsLimit.value ?? props.maxItems) + props.maxItems;
@@ -10536,18 +10586,19 @@ const _hoisted_5$5 = {
 };
 const _hoisted_6$3 = ["checked"];
 const _hoisted_7$3 = ["id", "role", "onMouseup"];
-const _hoisted_8$2 = ["type", "id", "name", "checked", "onChange", "onKeydown"];
-const _hoisted_9$2 = ["innerHTML"];
-const _hoisted_10 = {
+const _hoisted_8$2 = ["innerHTML"];
+const _hoisted_9$2 = ["type", "id", "name", "checked", "onChange", "onKeydown"];
+const _hoisted_10 = ["innerHTML"];
+const _hoisted_11 = {
   key: 0,
   class: "border-b border-blue_t-200 p-3"
 };
-const _hoisted_11 = ["aria-disabled"];
-const _hoisted_12 = {
+const _hoisted_12 = ["aria-disabled"];
+const _hoisted_13 = {
   key: 2,
   class: "block m-0 list-none p-0"
 };
-const _hoisted_13 = { class: "p-3" };
+const _hoisted_14 = { class: "p-3" };
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSearchSelectPro",
   props: {
@@ -10564,6 +10615,10 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     selectedToggleLabel: { default: "Dina val" },
     showLoadMore: { type: Boolean, default: false },
     loadingMore: { type: Boolean, default: false },
+    autoLoadOnScroll: { type: Boolean, default: false },
+    autoLoadThreshold: { default: 24 },
+    highlightDividerMatch: { type: Boolean, default: true },
+    showOutOfBoundsDivider: { type: Boolean, default: true },
     maxItems: { default: void 0 },
     page: { default: void 0 },
     totalPages: { default: void 0 },
@@ -10572,6 +10627,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     searchFields: { default: () => [] },
     preserveOrder: { type: Boolean, default: false },
     initialValue: { default: "" },
+    displayValue: { default: "" },
     disabled: { type: Boolean, default: false },
     dropdownAbsolute: { type: Boolean, default: false },
     labelLeft: { type: Boolean, default: false },
@@ -10697,6 +10753,9 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     const resolvedLoadMoreLabel = vue.computed(() => props.locale === "en" ? "Show more" : "Visa fler");
     const resolvedLoadingMoreLabel = vue.computed(() => props.locale === "en" ? "Loading more..." : "Hämtar fler...");
     const displayInputValue = vue.computed(() => {
+      if (!inputHasFocus.value && !hasSelection.value && !searchTerm.value.length && props.displayValue) {
+        return props.displayValue;
+      }
       if (isMultiple.value && !inputHasFocus.value && selectedItems.value.length > 0) {
         return `${selectedItems.value.length} val`;
       }
@@ -10841,24 +10900,39 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     const handleMatchingString = (item) => {
       if (isDividerItem(item)) {
         const dividerLabel = searchFields.value.map((key) => String(item[key] ?? "").trim()).find((value) => value.length > 0) ?? String(item.label ?? item.name ?? "");
+        if (props.highlightDividerMatch && searchTerm.value) {
+          const formattedTerm = formatPidWithDash(searchTerm.value);
+          const escaped = formattedTerm.replace(/[()]/g, "\\$&");
+          if (new RegExp(escaped, "i").test(dividerLabel)) {
+            return boldQuery(dividerLabel);
+          }
+        }
         return dividerLabel;
       }
-      const values = searchFields.value.map((key) => String(item[key] || ""));
+      const values = searchFields.value.map((key) => String(item[key] ?? "").trim()).filter((value) => value.length > 0);
       let result = "";
+      if (values.length === 0) {
+        return "";
+      }
       if (values.length === 1) {
-        result = values[0] || "";
+        result = values[0] ?? "";
       } else {
         if (values[1]?.length === 12 && parseInt(values[1])) {
           values[1] = formatPidWithDash(values[1]);
         }
         if (props.preserveOrder) {
-          const combined = `${values[0]} (${values[1]})`;
+          const primaryValue = values[0] ?? "";
+          const secondaryValue = values[1];
+          const combined = secondaryValue ? `${primaryValue} (${secondaryValue})` : primaryValue;
           const rest = values.slice(2).join("<br>");
           result = rest ? `${combined}<br>${rest}` : combined;
         } else {
-          result = values[0] || "";
+          result = values[0] ?? "";
           for (let i = 1; i < values.length; i++) {
-            result += ` (${values[i]})`;
+            const value = values[i];
+            if (value) {
+              result += ` (${value})`;
+            }
           }
         }
       }
@@ -10962,6 +11036,16 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       }
       emit("loadMore");
     };
+    const handleDropdownScroll = (event) => {
+      if (!props.autoLoadOnScroll || props.loadingMore || !shouldShowLoadMore.value) return;
+      const target = event.target;
+      if (!target) return;
+      const threshold = Math.max(0, props.autoLoadThreshold ?? 24);
+      const remaining = target.scrollHeight - (target.scrollTop + target.clientHeight);
+      if (remaining <= threshold) {
+        handleLoadMore();
+      }
+    };
     const handleInputFocus = () => {
       inputHasFocus.value = true;
       if ((isMultiple.value || !selectedItem.value) && displayedItems.value.length > 0) {
@@ -11099,7 +11183,8 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
             ref_key: "dropdownRef",
             ref: dropdownRef,
             class: vue.normalizeClass(listWrapperClasses.value),
-            style: vue.normalizeStyle(listWrapperStyle.value)
+            style: vue.normalizeStyle(listWrapperStyle.value),
+            onScrollPassive: handleDropdownScroll
           }, [
             __props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
               vue.createVNode(_sfc_main$x, {
@@ -11141,8 +11226,9 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                         labelClasses.value,
                         "font-normal text-gray-700 border-b border-gray-100 cursor-default pointer-events-none"
                       ]),
-                      style: vue.normalizeStyle(vue.unref(optionPaddingStyle)(item))
-                    }, vue.toDisplayString(handleMatchingString(item).replace(/<[^>]*>/g, "")), 7)) : (vue.openBlock(), vue.createElementBlock("label", {
+                      style: vue.normalizeStyle(vue.unref(optionPaddingStyle)(item)),
+                      innerHTML: handleMatchingString(item)
+                    }, null, 14, _hoisted_8$2)) : (vue.openBlock(), vue.createElementBlock("label", {
                       key: 1,
                       class: vue.normalizeClass([labelClasses.value, listItemClasses.value, "flex items-start gap-2"]),
                       style: vue.normalizeStyle(vue.unref(optionPaddingStyle)(item))
@@ -11158,15 +11244,15 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                           vue.withKeys((e) => !__props.multiple && handleClick(e, item), ["enter"]),
                           vue.withKeys(vue.withModifiers((e) => !__props.multiple && handleClick(e, item), ["prevent"]), ["space"])
                         ]
-                      }, null, 42, _hoisted_8$2),
+                      }, null, 42, _hoisted_9$2),
                       vue.createElementVNode("span", {
                         class: "min-w-0 flex-1",
                         innerHTML: handleMatchingString(item)
-                      }, null, 8, _hoisted_9$2)
+                      }, null, 8, _hoisted_10)
                     ], 6))
                   ], 42, _hoisted_7$3);
                 }), 128)),
-                vue.unref(shouldShowLoadMore) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_10, [
+                vue.unref(shouldShowLoadMore) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_11, [
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["flex items-center gap-2 text-blue-600", { "cursor-pointer": !__props.loadingMore, "cursor-not-allowed opacity-70": __props.loadingMore }]),
                     role: "button",
@@ -11186,7 +11272,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                       class: "w-6 h-6 pointer-events-none"
                     }, null, 8, ["loading", "aria-label"]),
                     vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMore ? resolvedLoadingMoreLabel.value : resolvedLoadMoreLabel.value), 1)
-                  ], 42, _hoisted_11)
+                  ], 42, _hoisted_12)
                 ])) : vue.createCommentVNode("", true)
               ], 32),
               __props.page !== void 0 && totalPages.value !== null && totalPages.value > 1 ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
@@ -11196,10 +11282,10 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                 onPaginate: handlePagination,
                 class: "my-4! px-2"
               }, null, 8, ["current", "max"])) : vue.createCommentVNode("", true)
-            ], 64)) : !__props.loading ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_12, [
-              vue.createElementVNode("li", _hoisted_13, vue.toDisplayString(__props.noResultPrompt), 1)
+            ], 64)) : !__props.loading ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_13, [
+              vue.createElementVNode("li", _hoisted_14, vue.toDisplayString(__props.noResultPrompt), 1)
             ])) : vue.createCommentVNode("", true)
-          ], 6)) : vue.createCommentVNode("", true)
+          ], 38)) : vue.createCommentVNode("", true)
         ])
       ], 16);
     };