fds-vue-core 6.2.6 → 6.2.8

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

@@ -1015,7 +1015,7 @@ const _hoisted_9$4 = { key: 1 };
 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$1 = { class: "flex items-start gap-3" };
+const _hoisted_13$2 = { class: "flex items-start gap-3" };
 const _hoisted_14$1 = { class: "mb-0-last-child" };
 const smallIconSize = 24;
 const largeIconSize = 48;
@@ -1085,7 +1085,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["name"])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("h3", _hoisted_12$2, vue.toDisplayString(__props.heading), 1)
               ]),
-              vue.createElementVNode("div", _hoisted_13$1, [
+              vue.createElementVNode("div", _hoisted_13$2, [
                 vue.renderSlot(_ctx.$slots, "headerInfo")
               ])
             ])
@@ -8982,7 +8982,7 @@ const _hoisted_12$1 = {
   key: 0,
   class: "text-sm text-gray-600"
 };
-const _hoisted_13 = {
+const _hoisted_13$1 = {
   key: 1,
   class: "max-h-72 overflow-auto border border-gray-200 rounded-md"
 };
@@ -9327,7 +9327,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
               iconSize: "small"
             }, {
               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, [
+                !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, [
                     _cache[15] || (_cache[15] = vue.createElementVNode("thead", { class: "bg-gray-50" }, [
                       vue.createElementVNode("tr", null, [
@@ -10624,7 +10624,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     name: {},
     dataTestid: { default: void 0 },
     inputClass: { default: void 0 },
-    disableFocusOutline: { type: Boolean, default: false },
+    disablePseudoStates: { type: Boolean, default: false },
     onInput: {},
     onChange: {},
     onFocus: {},
@@ -10675,13 +10675,14 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     const wrapperClasses = vue.computed(() => ["block relative flex items-center mb-2 last:mb-0"]);
     const innerWrapperClasses = vue.computed(() => [
       "flex p-0.5 items-start rounded-md",
-      "hover:bg-blue_t-100 active:bg-blue_t-200",
-      !props.disableFocusOutline && "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
+      !props.disablePseudoStates && "hover:bg-blue_t-100 active:bg-blue_t-200",
+      props.disablePseudoStates ? "[&:has(:focus)]:outline-none [&:has(:focus-visible)]:outline-none" : "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
       props.disabled && "hover:bg-transparent active:bg-transparent"
     ]);
     const inputClasses = vue.computed(() => [
       "rounded-md transition-colors duration-200 accent-blue-500 m-[3px]",
-      "peer z-2 bg-white min-w-[18px] min-h-[18px] focus-visible:outline-none",
+      "peer z-2 bg-white min-w-[18px] min-h-[18px]",
+      props.disablePseudoStates ? "focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0" : "focus-visible:outline-none",
       props.disabled && "cursor-not-allowed",
       props.inputClass
     ]);
@@ -10800,7 +10801,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     tabindex: {},
     autofocus: { type: Boolean },
     inputClass: { default: void 0 },
-    disableFocusOutline: { type: Boolean, default: false },
+    disablePseudoStates: { type: Boolean, default: false },
     onInput: {},
     onChange: {},
     onFocus: {},
@@ -10876,12 +10877,13 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     const wrapperClasses = vue.computed(() => ["block relative flex items-center mb-2 last:mb-0"]);
     const innerWrapperClasses = vue.computed(() => [
       "flex p-0.5 items-start rounded-l-xl rounded-r-md",
-      "hover:bg-blue_t-100 active:bg-blue_t-200",
-      !props.disableFocusOutline && "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
+      !props.disablePseudoStates && "hover:bg-blue_t-100 active:bg-blue_t-200",
+      props.disablePseudoStates ? "[&:has(:focus)]:outline-none [&:has(:focus-visible)]:outline-none" : "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
       props.disabled && "hover:bg-transparent active:bg-transparent"
     ]);
     const inputClasses = vue.computed(() => [
-      "peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500",
+      "peer z-2 bg-white min-w-[20px] min-h-[20px] rounded-full accent-blue-500",
+      props.disablePseudoStates ? "focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0" : "focus-visible:outline-none",
       props.disabled && "cursor-not-allowed",
       props.inputClass
     ]);
@@ -10919,6 +10921,7 @@ const useSearchSelectProItems = ({
   props,
   searchFields,
   searchTerm,
+  bypassSearchFilter,
   showSelectedOnly,
   selectedItems,
   isMultiple,
@@ -11114,6 +11117,7 @@ const useSearchSelectProItems = ({
     });
   };
   const matchesSearchTerm = (item) => {
+    if (bypassSearchFilter.value) return true;
     if (!searchTerm.value) return true;
     const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, "") : searchTerm.value;
     const searchLower = searchValue.toLowerCase();
@@ -11129,6 +11133,7 @@ const useSearchSelectProItems = ({
     });
   };
   const matchesDividerSearchTerm = (item) => {
+    if (bypassSearchFilter.value) return false;
     if (!isDividerItem(item) || !searchTerm.value) return false;
     const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, "") : searchTerm.value;
     const searchLower = searchValue.toLowerCase();
@@ -11140,7 +11145,7 @@ const useSearchSelectProItems = ({
     });
   };
   const filterWithDividerGroups = (sourceData) => {
-    if (!searchTerm.value) return sourceData;
+    if (bypassSearchFilter.value || !searchTerm.value) return sourceData;
     const matched = [];
     let currentDivider = null;
     let currentChildren = [];
@@ -11196,7 +11201,10 @@ const useSearchSelectProItems = ({
     } else {
       displayedItems.value = effectiveLimit !== null ? matchedArray.slice(0, effectiveLimit) : matchedArray;
     }
-    onTotal(matchingItems.value.length);
+    const totalMatchingCount = matchingItems.value.filter(
+      (item) => props.dividerSelectable || !isDividerItem(item)
+    ).length;
+    onTotal(totalMatchingCount);
   };
   const resetVisibleItemsLimit = () => {
     visibleItemsLimit.value = props.maxItems && props.maxItems > 0 ? props.maxItems : null;
@@ -11248,18 +11256,19 @@ const _hoisted_4$6 = {
 };
 const _hoisted_5$6 = ["id", "role", "onMouseup"];
 const _hoisted_6$4 = ["innerHTML"];
-const _hoisted_7$4 = ["innerHTML"];
+const _hoisted_7$4 = ["onClick"];
 const _hoisted_8$3 = ["innerHTML"];
-const _hoisted_9$1 = {
+const _hoisted_9$1 = ["innerHTML"];
+const _hoisted_10 = {
   key: 0,
   class: "border-b border-blue_t-200 p-3"
 };
-const _hoisted_10 = ["aria-disabled"];
-const _hoisted_11 = {
+const _hoisted_11 = ["aria-disabled"];
+const _hoisted_12 = {
   key: 2,
   class: "block m-0 list-none p-0"
 };
-const _hoisted_12 = { class: "p-3" };
+const _hoisted_13 = { class: "p-3" };
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSearchSelectPro",
   props: {
@@ -11321,6 +11330,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const dropdownVisible = vue.ref(false);
     const searchTerm = vue.ref("");
+    const bypassSearchFilter = vue.ref(false);
     const selectedItem = vue.ref(null);
     const selectedItems = vue.ref([...props.initialSelectedItems ?? []]);
     const showSelectedOnly = vue.ref(false);
@@ -11351,6 +11361,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       props,
       searchFields,
       searchTerm,
+      bypassSearchFilter,
       showSelectedOnly,
       selectedItems,
       isMultiple,
@@ -11458,6 +11469,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return { maxHeight: `${maxHeight}px` };
     });
     const handleClear = () => {
+      bypassSearchFilter.value = false;
       searchTerm.value = "";
       selectedItem.value = null;
       selectedItems.value = [];
@@ -11548,6 +11560,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const handleInput = (e) => {
       const target = e.target;
       const { value } = target;
+      bypassSearchFilter.value = false;
       searchTerm.value = value;
       dropdownVisible.value = true;
       if (!isMultiple.value) {
@@ -11696,7 +11709,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       selectItem(item);
       dropdownVisible.value = false;
       setTimeout(() => {
-        focusInput();
+        handleBlurInput();
       }, 100);
     };
     const handleClick = (e, item) => {
@@ -11742,12 +11755,17 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
     const handleInputFocus = () => {
       inputHasFocus.value = true;
-      if ((isMultiple.value || !selectedItem.value) && displayedItems.value.length > 0) {
+      if (!isMultiple.value && !!selectedItem.value) {
+        bypassSearchFilter.value = true;
+        filterAndPaginate();
+      }
+      if (displayedItems.value.length > 0) {
         dropdownVisible.value = true;
       }
     };
     const handleInputBlur = () => {
       inputHasFocus.value = false;
+      bypassSearchFilter.value = false;
     };
     const handleListKeyDown = (e) => {
       const target = e.target;
@@ -11943,7 +11961,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   key: 0,
                   label: `${__props.selectedToggleLabel} (${selectedItems.value.length})`,
                   checked: showSelectedOnly.value,
-                  disableFocusOutline: true,
+                  disablePseudoStates: true,
                   onChange: handleToggleSelectedOnly
                 }, null, 8, ["label", "checked"])) : vue.createCommentVNode("", true)
               ], 2),
@@ -11971,6 +11989,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                       innerHTML: handleMatchingString(item)
                     }, null, 14, _hoisted_6$4)) : (vue.openBlock(), vue.createElementBlock("div", {
                       key: 1,
+                      onClick: () => handleMultipleSelectionChange(item),
                       class: vue.normalizeClass([labelClasses.value, listItemClasses.value]),
                       style: vue.normalizeStyle(vue.unref(optionPaddingStyle)(item))
                     }, [
@@ -11980,7 +11999,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                         name: `search-select-checkbox-group-${inputId}`,
                         checked: vue.unref(isItemSelected)(item),
                         tabindex: -1,
-                        disableFocusOutline: true,
+                        disablePseudoStates: true,
                         class: "mb-0!",
                         onChange: () => handleMultipleSelectionChange(item)
                       }, {
@@ -11988,7 +12007,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                           vue.createElementVNode("span", {
                             class: "min-w-0 flex-1",
                             innerHTML: handleMatchingString(item)
-                          }, null, 8, _hoisted_7$4)
+                          }, null, 8, _hoisted_8$3)
                         ]),
                         _: 2
                       }, 1032, ["id", "name", "checked", "onChange"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, {
@@ -11998,7 +12017,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                         value: index,
                         checked: !!selectedItem.value && vue.unref(getItemIdentifier)(selectedItem.value) === vue.unref(getItemIdentifier)(item),
                         tabindex: -1,
-                        disableFocusOutline: true,
+                        disablePseudoStates: true,
                         class: "mb-0!",
                         onChange: () => handleSingleSelection(item),
                         onKeydown: vue.withKeys((e) => handleClick(e, item), ["enter"])
@@ -12007,14 +12026,14 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                           vue.createElementVNode("span", {
                             class: "min-w-0 flex-1",
                             innerHTML: handleMatchingString(item)
-                          }, null, 8, _hoisted_8$3)
+                          }, null, 8, _hoisted_9$1)
                         ]),
                         _: 2
                       }, 1032, ["id", "value", "checked", "onChange", "onKeydown"]))
-                    ], 6))
+                    ], 14, _hoisted_7$4))
                   ], 42, _hoisted_5$6);
                 }), 128)),
-                vue.unref(shouldShowLoadMore) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$1, [
+                vue.unref(shouldShowLoadMore) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_10, [
                   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",
@@ -12034,11 +12053,11 @@ const _sfc_main$h = /* @__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_10)
+                  ], 42, _hoisted_11)
                 ])) : vue.createCommentVNode("", true)
               ], 32)
-            ], 64)) : !__props.loading ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_11, [
-              vue.createElementVNode("li", _hoisted_12, vue.toDisplayString(__props.noResultPrompt), 1)
+            ], 64)) : !__props.loading ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_12, [
+              vue.createElementVNode("li", _hoisted_13, vue.toDisplayString(__props.noResultPrompt), 1)
             ])) : vue.createCommentVNode("", true)
           ], 38)) : vue.createCommentVNode("", true)
         ])
@@ -15131,6 +15150,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     disableNextWeek: { type: Boolean, default: false },
     enableHorizontalAnimation: { type: Boolean, default: true },
     minWeek: { default: void 0 },
+    goToWeek: {},
     maxDate: { default: void 0 },
     previewOtherDays: { type: Boolean, default: false },
     selected: { default: null },
@@ -15210,6 +15230,17 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         emit("select-date", newSelected ?? null);
       }
     );
+    vue.watch(
+      () => props.goToWeek?.getTime(),
+      (newTimestamp) => {
+        if (!newTimestamp) return;
+        const normalizedWeek = startOfISOWeek(new Date(newTimestamp));
+        if (isSameWeek(normalizedWeek, currentWeek.value, { weekStartsOn: 1 })) return;
+        slideDirection.value = normalizedWeek.getTime() > currentWeek.value.getTime() ? "left" : "right";
+        onHandleSetCurrentWeek(normalizedWeek);
+      },
+      { immediate: true }
+    );
     const onHandleSelectedDay = (weekDay) => {
       selectedDay.value = weekDay;
       emit("select-date", weekDay);
@@ -15220,17 +15251,22 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       }
       currentWeek.value = week;
     };
+    const navigateToWeek = (week) => {
+      const normalizedWeek = startOfISOWeek(week);
+      if (isSameWeek(normalizedWeek, currentWeek.value, { weekStartsOn: 1 })) return;
+      const isForward = normalizedWeek.getTime() > currentWeek.value.getTime();
+      if (isForward && disableNextWeekInteraction.value) return;
+      if (!isForward && disableLastWeekInteraction.value) return;
+      slideDirection.value = isForward ? "left" : "right";
+      onHandleSetCurrentWeek(normalizedWeek);
+    };
     const incrementWeek = () => {
-      if (disableNextWeekInteraction.value) return;
-      slideDirection.value = "left";
       emit("increment-week");
-      onHandleSetCurrentWeek(addWeeks(currentWeek.value, 1));
+      navigateToWeek(addWeeks(currentWeek.value, 1));
     };
     const decrementWeek = () => {
-      if (disableLastWeekInteraction.value) return;
-      slideDirection.value = "right";
       emit("decrement-week");
-      onHandleSetCurrentWeek(subWeeks(currentWeek.value));
+      navigateToWeek(subWeeks(currentWeek.value));
     };
     const isWeekDayDisabled = (weekDay) => checkIfDateIsBeforeToday(weekDay) || !checkIfDateIsEnabled(weekDay, props.enabledDates);
     const isTodayDate = (weekDay) => isSameDay(weekDay, /* @__PURE__ */ new Date());