@ulu/frontend-vue 0.6.24 → 0.6.26

package/dist/plugins/popovers/UluPopover.vue.d.ts

@@ -7,7 +7,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     /**
      * The reactive internal open/closed state of the popover
      */
-    isOpen: import('vue').Ref<boolean, boolean>;
+    isOpen: import('vue').WritableComputedRef<boolean, boolean>;
     /**
      * Method to toggle the popover open/closed
      */
@@ -21,7 +21,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
      * @param {Boolean} toOpen - The desired state
      */
     changeTo: (toOpen: any) => void;
-    $emit: (event: "toggle", ...args: any[]) => void;
+    $emit: (event: "toggle" | "update:modelValue", ...args: any[]) => void;
     clickOutsideCloses: boolean;
     config: Record<string, any>;
     disabled: boolean;
@@ -30,6 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     activeClass: string;
     classes: Record<string, any>;
     directFocus?: Function | undefined;
+    modelValue?: boolean | undefined;
     triggerText?: string | undefined;
     triggerAlt?: string | undefined;
     tooltip?: string | undefined;
@@ -43,6 +44,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly activeClass?: string | undefined;
         readonly classes?: Record<string, any> | undefined;
         readonly directFocus?: Function | undefined;
+        readonly modelValue?: boolean | undefined;
         readonly triggerText?: string | undefined;
         readonly triggerAlt?: string | undefined;
         readonly tooltip?: string | undefined;
@@ -75,7 +77,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
             close: () => void;
             update: Function;
             content: import('vue').Ref<null, null>;
-            $emit: (event: "close", ...args: any[]) => void;
+            $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
             isOpen: boolean;
             clickOutsideCloses: boolean;
             escapeCloses: boolean;
@@ -116,7 +118,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         close: () => void;
         update: Function;
         content: import('vue').Ref<null, null>;
-        $emit: (event: "close", ...args: any[]) => void;
+        $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
         isOpen: boolean;
         clickOutsideCloses: boolean;
         escapeCloses: boolean;
@@ -183,7 +185,7 @@ type __VLS_TemplateResult = {
                 close: () => void;
                 update: Function;
                 content: Ref<null, null>;
-                $emit: (event: "close", ...args: any[]) => void;
+                $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
                 isOpen: boolean;
                 clickOutsideCloses: boolean;
                 escapeCloses: boolean;
@@ -208,7 +210,7 @@ type __VLS_TemplateResult = {
             close: () => void;
             update: Function;
             content: Ref<null, null>;
-            $emit: (event: "close", ...args: any[]) => void;
+            $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
             isOpen: boolean;
             clickOutsideCloses: boolean;
             escapeCloses: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"UluPopover.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopover.vue"],"names":[],"mappings":"AA8CA;wBA2XqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;IAhLI;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAoLi4e,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAT3/e;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCASq4e,GAAG"}
+{"version":3,"file":"UluPopover.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopover.vue"],"names":[],"mappings":"AA8CA;wBAmaqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;IAhLI;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAoLy8c,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QATnkd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAS68c,GAAG"}

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

@@ -1,12 +1,19 @@
-import { computed as x, ref as n, resolveDirective as T, createElementBlock as p, openBlock as m, Fragment as j, withDirectives as z, createVNode as I, unref as s, normalizeClass as O, renderSlot as r, createTextVNode as h, toDisplayString as w, createSlots as D, withCtx as b } from "vue";
+import { computed as O, ref as r, resolveDirective as I, createElementBlock as b, openBlock as y, Fragment as T, withDirectives as j, createVNode as z, unref as a, normalizeClass as C, renderSlot as d, createTextVNode as h, toDisplayString as w, createSlots as D, withCtx as k } from "vue";
 import { useRequiredInject as E } from "../../composables/useRequiredInject.js";
 import { POPOVER_OPTIONS_KEY as N } from "./index.js";
-import V from "./defaults.js";
-import { newId as C } from "../../utils/dom.js";
-import A from "./UluPopoverBase.vue.js";
-const R = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], L = {
+import A from "./defaults.js";
+import { newId as B } from "../../utils/dom.js";
+import R from "./UluPopoverBase.vue.js";
+const q = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], M = {
   __name: "UluPopover",
   props: {
+    /**
+     * V-model state to control the popover externally
+     */
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    },
     triggerText: String,
     triggerAlt: String,
     disabled: Boolean,
@@ -36,90 +43,97 @@ const R = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], L
      */
     directFocus: Function
   },
-  emits: ["toggle"],
-  setup(e, { expose: y, emit: k }) {
-    const S = k, c = e, d = C(), g = C(), u = E(N), B = u ? u.popover : V.popover, $ = x(() => ({ ...B, ...c.config })), t = n(c.startOpen || !1), f = n(null), F = n(null), a = () => {
-      i(!t.value);
-    }, i = (o) => {
-      t.value = o, S("toggle", { isOpen: o });
-    }, l = () => i(!1);
-    return y({
+  emits: ["toggle", "update:modelValue"],
+  setup(e, { expose: S, emit: V }) {
+    const c = V, l = e, u = B(), g = B(), f = E(N), $ = f ? f.popover : A.popover, F = O(() => ({ ...$, ...l.config })), m = r(l.startOpen || !1), p = r(null), P = r(null), o = O({
+      get() {
+        return l.modelValue !== void 0 ? l.modelValue : m.value;
+      },
+      set(t) {
+        l.modelValue !== void 0 ? c("update:modelValue", t) : m.value = t;
+      }
+    }), n = () => {
+      i(!o.value);
+    }, i = (t) => {
+      o.value = t, c("toggle", { isOpen: t });
+    }, s = () => i(!1);
+    return S({
       /**
        * The reactive internal open/closed state of the popover
        */
-      isOpen: t,
+      isOpen: o,
       /**
        * Method to toggle the popover open/closed
        */
-      toggle: a,
+      toggle: n,
       /**
        * Method to force the popover closed
        */
-      close: l,
+      close: s,
       /**
        * Method to explicitly set the open state
        * @param {Boolean} toOpen - The desired state
        */
       changeTo: i
-    }), (o, v) => {
-      const P = T("ulu-tooltip");
-      return m(), p(j, null, [
-        z((m(), p("button", {
+    }), (t, v) => {
+      const x = I("ulu-tooltip");
+      return y(), b(T, null, [
+        j((y(), b("button", {
           type: "button",
           ref_key: "trigger",
-          ref: f,
-          onClick: a,
-          id: s(g),
+          ref: p,
+          onClick: n,
+          id: a(g),
           disabled: e.disabled,
-          class: O([
-            { [e.activeClass]: t.value },
+          class: C([
+            { [e.activeClass]: o.value },
             e.classes.trigger
           ]),
-          "aria-expanded": t.value ? "true" : "false",
-          "aria-controls": s(d),
+          "aria-expanded": o.value ? "true" : "false",
+          "aria-controls": a(u),
           "aria-label": e.triggerAlt
         }, [
-          r(o.$slots, "trigger", {
-            isOpen: t.value,
-            close: l
+          d(t.$slots, "trigger", {
+            isOpen: o.value,
+            close: s
           }, () => [
             h(w(e.triggerText), 1)
           ])
-        ], 10, R)), [
-          [P, e.tooltip ? e.tooltip : null]
+        ], 10, q)), [
+          [x, e.tooltip ? e.tooltip : null]
         ]),
-        I(A, {
+        z(R, {
           ref_key: "popoverBase",
-          ref: F,
-          trigger: f.value,
-          config: $.value,
-          isOpen: t.value,
+          ref: P,
+          trigger: p.value,
+          config: F.value,
+          isOpen: o.value,
           clickOutsideCloses: e.clickOutsideCloses,
           directFocus: e.directFocus,
-          class: O([
+          class: C([
             e.size ? `popover--${e.size}` : "",
             {
               "popover--no-padding": e.noPadding
             },
             e.classes.content
           ]),
-          "aria-labelledby": s(g),
-          id: s(d),
-          onClose: v[0] || (v[0] = (q) => i(!1))
+          "aria-labelledby": a(g),
+          id: a(u),
+          onClose: v[0] || (v[0] = (K) => i(!1))
         }, D({
-          default: b(() => [
-            r(o.$slots, "default", {
-              isOpen: t.value,
-              toggle: a,
-              close: l
+          default: k(() => [
+            d(t.$slots, "default", {
+              isOpen: o.value,
+              toggle: n,
+              close: s
             })
           ]),
           _: 2
         }, [
-          o.$slots.footer ? {
+          t.$slots.footer ? {
             name: "footer",
-            fn: b(() => [
-              r(o.$slots, "footer", { close: l })
+            fn: k(() => [
+              d(t.$slots, "footer", { close: s })
             ]),
             key: "0"
           } : void 0
@@ -129,5 +143,5 @@ const R = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], L
   }
 };
 export {
-  L as default
+  M as default
 };

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

@@ -16,7 +16,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
      * The internal root popover element reference
      */
     content: import('vue').Ref<null, null>;
-    $emit: (event: "close", ...args: any[]) => void;
+    $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
     isOpen: boolean;
     clickOutsideCloses: boolean;
     escapeCloses: boolean;

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;wBAkeqB,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 m, watch as x, nextTick as g, onUnmounted as L, createElementBlock as u, openBlock as d, withKeys as M, unref as l, normalizeStyle as y, normalizeClass as T, createElementVNode as j, createCommentVNode as v, renderSlot as O } 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 = {
@@ -57,23 +57,23 @@ const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
      */
     modifiers: [String, Array, Object]
   },
-  emits: ["close"],
+  emits: ["close", "update:isOpen"],
   setup(s, { expose: r, emit: c }) {
-    const k = c, e = s, o = B(null), { resolvedModifiers: C } = H({ props: e, baseClass: "popover" }), f = m(() => e.config || {}), { floatingStyles: _, placement: w, arrowStyles: E, update: p, isFixedStrategy: F, contentArrow: S } = A(
-      m(() => 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 = () => {
-      k("close");
-    }, h = (t) => {
+      d("close"), d("update:isOpen", !1);
+    }, 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 ? (p(), b(), e.directFocus && g(() => {
+    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 && g(() => {
+      })) : (a(), e.directFocus && g === !0 && v(() => {
         e.directFocus({ isOpen: !1, trigger: e.trigger, content: o.value });
       }));
-    }, { immediate: !0 }), L(() => {
+    }, { immediate: !0 }), M(() => {
       a();
     }), r({
       /**
@@ -98,47 +98,47 @@ const $ = ["data-placement"], z = { class: "popover__inner" }, K = {
       /**
        * Manually trigger a floating UI position update
        */
-      update: p,
+      update: m,
       /**
        * The internal root popover element reference
        */
       content: o
-    }), (t, N) => (d(), 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: y(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, [
-        O(t.$slots, "default", {
+      A("span", K, [
+        C(t.$slots, "default", {
           isOpen: s.isOpen,
           close: i
         })
       ]),
-      t.$slots.footer ? (d(), u("span", K, [
-        O(t.$slots, "footer", {
+      t.$slots.footer ? (p(), u("span", N, [
+        C(t.$slots, "footer", {
           isOpen: s.isOpen,
           close: i
         })
-      ])) : v("", !0),
-      f.value.arrow ? (d(), u("span", {
+      ])) : k("", !0),
+      f.value.arrow ? (p(), u("span", {
         key: 1,
         class: "popover__arrow",
         ref_key: "contentArrow",
-        ref: S,
-        style: y(l(E)),
+        ref: h,
+        style: O(l(F)),
         "data-ulu-popover-arrow": ""
-      }, null, 4)) : v("", !0)
-    ], 46, $));
+      }, null, 4)) : k("", !0)
+    ], 46, z));
   }
 };
 export {

package/dist/plugins/tour/UluTourDisplay.vue.d.ts

@@ -25,7 +25,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             close: () => void;
             update: Function;
             content: import('vue').Ref<null, null>;
-            $emit: (event: "close", ...args: any[]) => void;
+            $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
             isOpen: boolean;
             clickOutsideCloses: boolean;
             escapeCloses: boolean;
@@ -66,7 +66,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         close: () => void;
         update: Function;
         content: import('vue').Ref<null, null>;
-        $emit: (event: "close", ...args: any[]) => void;
+        $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
         isOpen: boolean;
         clickOutsideCloses: boolean;
         escapeCloses: boolean;

package/lib/plugins/popovers/UluPopover.vue

@@ -52,8 +52,15 @@
   import { newId } from "../../utils/dom.js";
   import UluPopoverBase from "./UluPopoverBase.vue";
 
-  const emit = defineEmits(["toggle"]);
+  const emit = defineEmits(["toggle", "update:modelValue"]);
   const props = defineProps({
+    /**
+     * V-model state to control the popover externally
+     */
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
     triggerText: String,
     triggerAlt: String,
     disabled: Boolean,
@@ -91,10 +98,23 @@
   const baseConfig = injectedOptions ? injectedOptions.popover : defaults.popover;
   const resolvedConfig = computed(() => ({ ...baseConfig, ...props.config }));
   
-  const isOpen = ref(props.startOpen || false);
+  const internalIsOpen = ref(props.startOpen || false);
   const trigger = ref(null);
   const popoverBase = ref(null);
 
+  const isOpen = computed({
+    get() {
+      return props.modelValue !== undefined ? props.modelValue : internalIsOpen.value;
+    },
+    set(val) {
+      if (props.modelValue !== undefined) {
+        emit("update:modelValue", val);
+      } else {
+        internalIsOpen.value = val;
+      }
+    }
+  });
+
   const toggle = () => {
     changeTo(!isOpen.value);
   };

package/lib/plugins/popovers/UluPopoverBase.vue

@@ -36,7 +36,7 @@
   import { useModifiers } from '../../composables/useModifiers.js';
   import { wasClickOutside } from '@ulu/utils/browser/dom.js';
 
-  const emit = defineEmits(['close']);
+  const emit = defineEmits(['close', 'update:isOpen']);
 
   const props = defineProps({
     /**
@@ -108,6 +108,7 @@
 
   const close = () => {
     emit('close');
+    emit('update:isOpen', false);
   };
 
   const handleEsc = (event) => {
@@ -157,7 +158,7 @@
     }
   };
 
-  watch(() => props.isOpen, (newVal) => {
+  watch(() => props.isOpen, (newVal, oldVal) => {
     if (newVal) {
       update();
       addOutsideClick();
@@ -168,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.24",
+  "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": [