fds-vue-core 2.0.3 → 2.0.4

package/dist/fds-vue-core.css

@@ -46,6 +46,7 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }
@@ -127,6 +128,7 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --leading-tight: 1.25;
+  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
   --animate-spin: spin 1s linear infinite;
   --default-transition-duration: .15s;
   --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -1778,6 +1780,10 @@
     accent-color: var(--color-gray-600);
   }
 
+  .opacity-0 {
+    opacity: 0;
+  }
+
   .opacity-20 {
     opacity: .2;
   }
@@ -1790,6 +1796,10 @@
     opacity: .5;
   }
 
+  .opacity-100 {
+    opacity: 1;
+  }
+
   .shadow-\[0_2px_4px_rgba\(12\,72\,153\,0\.12\)\] {
     --tw-shadow: 0 2px 4px var(--tw-shadow-color, #0c48991f);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1905,6 +1915,16 @@
     transition-duration: .2s;
   }
 
+  .duration-500 {
+    --tw-duration: .5s;
+    transition-duration: .5s;
+  }
+
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
   .outline-dashed {
     --tw-outline-style: dashed;
     outline-style: dashed;
@@ -2524,6 +2544,11 @@
   inherits: false
 }
 
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

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

@@ -1,4 +1,4 @@
-import { reactive, ref, watch, computed, defineComponent, useSlots, nextTick, createElementBlock, openBlock, normalizeClass, withDirectives, createCommentVNode, createElementVNode, vModelCheckbox, renderSlot, normalizeStyle, createBlock, inject, resolveComponent, createVNode, unref, withCtx, Fragment, createTextVNode, toDisplayString, withModifiers, renderList, withKeys, watchEffect, resolveDynamicComponent, mergeProps, vModelDynamic, provide, onMounted, vModelText, vModelSelect, vShow, onBeforeUnmount, Teleport } from "vue";
+import { reactive, ref, watch, computed, defineComponent, useSlots, nextTick, createElementBlock, openBlock, normalizeClass, withDirectives, createCommentVNode, createElementVNode, vModelCheckbox, renderSlot, normalizeStyle, createBlock, inject, resolveComponent, createVNode, unref, withCtx, Fragment, createTextVNode, toDisplayString, Transition, withModifiers, renderList, withKeys, watchEffect, resolveDynamicComponent, mergeProps, vModelDynamic, provide, onMounted, vModelText, vModelSelect, vShow, onBeforeUnmount, Teleport } from "vue";
 const getTitleFromProperties = (node, titleTemplate) => {
   if (!titleTemplate) {
     return node.title;
@@ -1186,7 +1186,8 @@ const _hoisted_4$8 = {
   style: { "max-height": "28px" }
 };
 const _hoisted_5$6 = { class: "flex flex-col gap-2" };
-const _hoisted_6$5 = { key: 0 };
+const _hoisted_6$5 = ["onClick"];
+const _hoisted_7$3 = { key: 0 };
 const popoverWidth = 327;
 const popoverHeight = 80;
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
@@ -1301,13 +1302,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       firstRadio?.focus();
     };
     const closePopover = () => {
-      setTimeout(() => {
-        isOpen.value = false;
-        window.removeEventListener("scroll", computePopoverCoords, true);
-        window.removeEventListener("resize", computePopoverCoords);
-        document.removeEventListener("pointerdown", handleGlobalPointerDown);
-        document.removeEventListener("keydown", handleGlobalKeydown);
-      }, 300);
+      isOpen.value = false;
+    };
+    const onAfterPopoverLeave = () => {
+      window.removeEventListener("scroll", computePopoverCoords, true);
+      window.removeEventListener("resize", computePopoverCoords);
+      document.removeEventListener("pointerdown", handleGlobalPointerDown);
+      document.removeEventListener("keydown", handleGlobalKeydown);
     };
     const togglePopover = () => {
       if (isOpen.value) closePopover();
@@ -1354,14 +1355,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       return "";
     });
     const handleOptionClick = (option) => {
-      setTimeout(() => {
-        if (option === "parent_and_children") {
-          treeState?.selectNodeAndAllChildren(props.nodeId);
-        } else if (option === "parent") {
-          treeState?.deselectChildrenOnly(props.nodeId);
-        }
-        isOpen.value = false;
-      }, 300);
+      if (option === "parent_and_children") {
+        treeState?.selectNodeAndAllChildren(props.nodeId);
+      } else if (option === "parent") {
+        treeState?.deselectChildrenOnly(props.nodeId);
+      }
+      closePopover();
     };
     return (_ctx, _cache) => {
       const _component_TreeNode = resolveComponent("TreeNode", true);
@@ -1430,65 +1429,84 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 onClick: togglePopover,
                 ariaLabel: `Fler val för ${_ctx.title}`
               }, null, 8, ["ariaLabel"]),
-              isOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "fixed z-9999",
-                style: normalizeStyle({
-                  top: popoverCoords.top + "px",
-                  left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
-                })
-              }, [
-                createElementVNode("div", {
-                  ref_key: "popoverPanelRef",
-                  ref: popoverPanelRef,
-                  class: "bg-white rounded-md p-4 shadow-lg flex flex-row justify-between items-start gap-3",
-                  style: normalizeStyle({
-                    width: popoverWidth + "px",
-                    minHeight: popoverHeight + "px"
-                  }),
-                  onClick: _cache[3] || (_cache[3] = withModifiers(() => {
-                  }, ["stop"])),
-                  onFocusout: onPanelFocusOut
-                }, [
-                  createElementVNode("div", _hoisted_5$6, [
-                    (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
-                      return createElementVNode("div", {
-                        key: option.value
-                      }, [
-                        createVNode(_sfc_main$p, {
-                          checked: currentOption.value === option.value,
-                          id: `tree-popover-${props.nodeId}-${option.value}`,
-                          name: `tree-popover-${props.nodeId}`,
-                          value: option.value,
-                          onChange: ($event) => handleOptionClick(option.value),
-                          onBlur: closePopover,
-                          onKeydown: [
-                            withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
-                            withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
-                          ]
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(option.label), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
-                      ]);
-                    }), 64))
-                  ]),
-                  createVNode(_sfc_main$r, {
-                    icon: "cross",
-                    id: "tree-popover-close-button",
-                    size: "24px",
-                    onClick: _cache[2] || (_cache[2] = ($event) => closePopover()),
-                    class: "fill-blue-500",
-                    ariaLabel: "Stäng"
-                  })
-                ], 36)
-              ], 4)) : createCommentVNode("", true)
+              createVNode(Transition, {
+                "enter-active-class": "transition-opacity duration-200 ease-in-out",
+                "enter-from-class": "opacity-0",
+                "enter-to-class": "opacity-100",
+                "leave-active-class": "transition-opacity duration-500 ease-in-out",
+                "leave-from-class": "opacity-100",
+                "leave-to-class": "opacity-0",
+                onAfterLeave: onAfterPopoverLeave
+              }, {
+                default: withCtx(() => [
+                  isOpen.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: "fixed z-9999",
+                    style: normalizeStyle({
+                      top: popoverCoords.top + "px",
+                      left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
+                    })
+                  }, [
+                    createElementVNode("div", {
+                      ref_key: "popoverPanelRef",
+                      ref: popoverPanelRef,
+                      class: "bg-white rounded-md p-4 shadow-lg flex flex-row justify-between items-start gap-3",
+                      style: normalizeStyle({
+                        width: popoverWidth + "px",
+                        minHeight: popoverHeight + "px"
+                      }),
+                      onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                      }, ["stop"])),
+                      onFocusout: onPanelFocusOut
+                    }, [
+                      createElementVNode("div", _hoisted_5$6, [
+                        (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
+                          return createElementVNode("div", {
+                            key: option.value,
+                            onClick: (e) => {
+                              if (e.target.tagName !== "INPUT") {
+                                handleOptionClick(option.value);
+                              }
+                            },
+                            class: "cursor-pointer"
+                          }, [
+                            createVNode(_sfc_main$p, {
+                              checked: currentOption.value === option.value,
+                              id: `tree-popover-${props.nodeId}-${option.value}`,
+                              name: `tree-popover-${props.nodeId}`,
+                              value: option.value,
+                              onChange: () => handleOptionClick(option.value),
+                              onBlur: closePopover,
+                              onKeydown: [
+                                withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
+                                withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
+                              ]
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
+                          ], 8, _hoisted_6$5);
+                        }), 64))
+                      ]),
+                      createVNode(_sfc_main$r, {
+                        icon: "cross",
+                        id: "tree-popover-close-button",
+                        size: "24px",
+                        onClick: _cache[2] || (_cache[2] = ($event) => closePopover()),
+                        class: "fill-blue-500",
+                        ariaLabel: "Stäng"
+                      })
+                    ], 36)
+                  ], 4)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
             ])) : createCommentVNode("", true)
           ])
         ], 4),
-        unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+        unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(filteredNodes.value, (child) => {
             return openBlock(), createBlock(_component_TreeNode, {
               key: child.nodeId,
@@ -1661,12 +1679,17 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       }
       emit("click", ev);
     }
+    const linkAttrs = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(rootClasses.value),
         "aria-disabled": _ctx.disabled ? "true" : null
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({ href: _ctx.as === "a" ? _ctx.href : void 0, to: _ctx.as === "router-link" ? _ctx.href : void 0 }, {
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
           type: _ctx.as === "button" ? _ctx.type : void 0,
           disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
           class: buttonClasses.value,
@@ -2172,18 +2195,22 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
       emit("click", ev);
     }
+    const linkAttrs = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(rootClasses.value),
         "aria-disabled": _ctx.disabled ? "true" : null
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), {
-          href: _ctx.as === "a" ? _ctx.href : void 0,
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
           type: _ctx.as === "button" ? _ctx.type : void 0,
           disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
-          class: normalizeClass(buttonClasses.value),
+          class: buttonClasses.value,
           onClick
-        }, {
+        }), {
           default: withCtx(() => [
             _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
               key: 0,
@@ -2204,7 +2231,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             createTextVNode(" " + toDisplayString(_ctx.text), 1)
           ]),
           _: 1
-        }, 8, ["href", "type", "disabled", "class"]))
+        }, 16, ["type", "disabled", "class"]))
       ], 10, _hoisted_1$d);
     };
   }
@@ -2261,18 +2288,22 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
       emit("click", ev);
     }
+    const linkAttrs = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(rootClasses.value),
         "aria-disabled": _ctx.disabled ? "true" : null
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), {
-          href: _ctx.as === "a" ? _ctx.href : void 0,
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
           type: _ctx.as === "button" ? _ctx.type : void 0,
           disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
-          class: normalizeClass(buttonClasses.value),
+          class: buttonClasses.value,
           onClick
-        }, {
+        }), {
           default: withCtx(() => [
             _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
               key: 0,
@@ -2293,7 +2324,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createTextVNode(" " + toDisplayString(_ctx.text), 1)
           ]),
           _: 1
-        }, 8, ["href", "type", "disabled", "class"]))
+        }, 16, ["type", "disabled", "class"]))
       ], 10, _hoisted_1$c);
     };
   }