@ulu/frontend-vue 0.6.25 → 0.6.26

package/dist/plugins/popovers/UluPopoverBase.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluPopoverBase.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopoverBase.vue"],"names":[],"mappings":"AA+BA;wBAoeqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAdjC;IAzHI;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;oBA0HJ"}
+{"version":3,"file":"UluPopoverBase.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopoverBase.vue"],"names":[],"mappings":"AA+BA;wBAweqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAdjC;IAzHI;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;oBA0HJ"}

package/dist/plugins/popovers/UluPopoverBase.vue.js

@@ -1,8 +1,8 @@
-import { ref as B, computed as g, watch as x, nextTick as y, onUnmounted as L, createElementBlock as u, openBlock as p, withKeys as M, unref as l, normalizeStyle as v, normalizeClass as T, createElementVNode as j, createCommentVNode as O, renderSlot as k } from "vue";
-import { useUluFloating as A } from "../../composables/useUluFloating.js";
-import { useModifiers as H } from "../../composables/useModifiers.js";
-import { wasClickOutside as U } from "@ulu/utils/browser/dom.js";
-const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
+import { ref as x, computed as y, watch as L, nextTick as v, onUnmounted as M, createElementBlock as u, openBlock as p, withKeys as T, unref as l, normalizeStyle as O, normalizeClass as j, createElementVNode as A, createCommentVNode as k, renderSlot as C } from "vue";
+import { useUluFloating as H } from "../../composables/useUluFloating.js";
+import { useModifiers as U } from "../../composables/useModifiers.js";
+import { wasClickOutside as $ } from "@ulu/utils/browser/dom.js";
+const z = ["data-placement"], K = { class: "popover__inner" }, N = {
   key: 0,
   class: "popover__footer"
 }, G = {
@@ -59,21 +59,21 @@ const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
   },
   emits: ["close", "update:isOpen"],
   setup(s, { expose: r, emit: c }) {
-    const d = c, e = s, o = B(null), { resolvedModifiers: C } = H({ props: e, baseClass: "popover" }), f = g(() => e.config || {}), { floatingStyles: _, placement: w, arrowStyles: E, update: m, isFixedStrategy: F, contentArrow: S } = A(
-      g(() => e.trigger),
+    const d = c, e = s, o = x(null), { resolvedModifiers: _ } = U({ props: e, baseClass: "popover" }), f = y(() => e.config || {}), { floatingStyles: w, placement: E, arrowStyles: F, update: m, isFixedStrategy: S, contentArrow: h } = H(
+      y(() => e.trigger),
       o,
       f
     ), i = () => {
       d("close"), d("update:isOpen", !1);
-    }, h = (t) => {
+    }, b = (t) => {
       e.isOpen && e.escapeCloses && (t.preventDefault(), i());
     };
     let n = null;
     const a = () => {
       n && (document.removeEventListener("click", n), n = null);
-    }, b = () => {
+    }, B = () => {
       a(), e.clickOutsideCloses && (n = (t) => {
-        if (!(!e.isOpen || !o.value) && document.body.contains(t.target) && !o.value.contains(t.target) && U(o.value, t)) {
+        if (!(!e.isOpen || !o.value) && document.body.contains(t.target) && !o.value.contains(t.target) && $(o.value, t)) {
           if (e.trigger instanceof HTMLElement && e.trigger.contains(t.target))
             return;
           i();
@@ -82,13 +82,13 @@ const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
         n && document.addEventListener("click", n);
       }, 0));
     };
-    return x(() => e.isOpen, (t) => {
-      t ? (m(), b(), e.directFocus && y(() => {
+    return L(() => e.isOpen, (t, g) => {
+      t ? (m(), B(), e.directFocus && v(() => {
         e.directFocus({ isOpen: !0, trigger: e.trigger, content: o.value });
-      })) : (a(), e.directFocus && y(() => {
+      })) : (a(), e.directFocus && g === !0 && v(() => {
         e.directFocus({ isOpen: !1, trigger: e.trigger, content: o.value });
       }));
-    }, { immediate: !0 }), L(() => {
+    }, { immediate: !0 }), M(() => {
       a();
     }), r({
       /**
@@ -103,42 +103,42 @@ const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
        * The internal root popover element reference
        */
       content: o
-    }), (t, N) => (p(), u("span", {
-      class: T(["popover", [
+    }), (t, g) => (p(), u("span", {
+      class: j(["popover", [
         {
-          "popover--fixed": l(F),
+          "popover--fixed": l(S),
           "is-active": s.isOpen
         },
-        l(C)
+        l(_)
       ]]),
       ref_key: "contentEl",
       ref: o,
-      style: v(l(_)),
-      "data-placement": l(w),
-      onKeydown: M(h, ["esc"]),
+      style: O(l(w)),
+      "data-placement": l(E),
+      onKeydown: T(b, ["esc"]),
       tabindex: "-1"
     }, [
-      j("span", z, [
-        k(t.$slots, "default", {
+      A("span", K, [
+        C(t.$slots, "default", {
           isOpen: s.isOpen,
           close: i
         })
       ]),
-      t.$slots.footer ? (p(), u("span", K, [
-        k(t.$slots, "footer", {
+      t.$slots.footer ? (p(), u("span", N, [
+        C(t.$slots, "footer", {
           isOpen: s.isOpen,
           close: i
         })
-      ])) : O("", !0),
+      ])) : k("", !0),
       f.value.arrow ? (p(), u("span", {
         key: 1,
         class: "popover__arrow",
         ref_key: "contentArrow",
-        ref: S,
-        style: v(l(E)),
+        ref: h,
+        style: O(l(F)),
         "data-ulu-popover-arrow": ""
-      }, null, 4)) : O("", !0)
-    ], 46, $));
+      }, null, 4)) : k("", !0)
+    ], 46, z));
   }
 };
 export {

package/lib/plugins/popovers/UluPopoverBase.vue

@@ -158,7 +158,7 @@
     }
   };
 
-  watch(() => props.isOpen, (newVal) => {
+  watch(() => props.isOpen, (newVal, oldVal) => {
     if (newVal) {
       update();
       addOutsideClick();
@@ -169,7 +169,9 @@
       }
     } else {
       destroyOutsideClick();
-      if (props.directFocus) {
+      // Only return focus if we are actually transitioning from open to closed
+      // This prevents stealing focus on initial mount when oldVal is undefined
+      if (props.directFocus && oldVal === true) {
         nextTick(() => {
           props.directFocus({ isOpen: false, trigger: props.trigger, content: contentEl.value });
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.25",
+  "version": "0.6.26",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [