@ulu/frontend-vue 0.6.29 → 0.6.30

package/dist/components/collapsible/UluModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":"AAsEA;wBA07BqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4OAUG"}
+{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":"AAuEA;wBA47BqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4OAUG"}

package/dist/components/collapsible/UluModal.vue.js

@@ -1,10 +1,10 @@
-import { useSlots as J, ref as n, computed as u, watch as M, nextTick as w, onMounted as K, onBeforeUnmount as Q, createBlock as F, openBlock as d, Teleport as Z, createElementVNode as f, withModifiers as x, normalizeStyle as H, normalizeClass as r, unref as L, createElementBlock as C, createCommentVNode as g, renderSlot as m, toDisplayString as ee, createVNode as T } from "vue";
+import { useSlots as G, ref as n, computed as c, watch as M, nextTick as w, onMounted as J, onBeforeUnmount as K, createBlock as F, openBlock as u, Teleport as Q, createElementVNode as d, mergeProps as Z, unref as H, withModifiers as x, createElementBlock as C, createCommentVNode as g, normalizeClass as f, renderSlot as m, toDisplayString as ee, createVNode as L, normalizeStyle as le } from "vue";
 import R from "../elements/UluIcon.vue.js";
-import { useModifiers as le } from "../../composables/useModifiers.js";
-import { preventScroll as oe, wasClickOutside as te } from "@ulu/utils/browser/dom.js";
-import { getSoleIframeLayout as se, youtubePrepVideos as ie, youtubePauseVideos as ae, Resizer as ne, observeDialogToggle as re } from "@ulu/frontend";
-import { newId as ce } from "../../utils/dom.js";
-const ue = ["aria-labelledby", "aria-describedby"], de = ["id"], fe = { class: "modal__title-text" }, pe = {
+import { useModifiers as oe } from "../../composables/useModifiers.js";
+import { preventScroll as te, wasClickOutside as se } from "@ulu/utils/browser/dom.js";
+import { getSoleIframeLayout as ie, youtubePrepVideos as ae, youtubePauseVideos as ne, Resizer as re, observeDialogToggle as ce } from "@ulu/frontend";
+import { newId as ue } from "../../utils/dom.js";
+const de = ["aria-labelledby", "aria-describedby"], fe = ["id"], me = { class: "modal__title-text" }, he = {
   __name: "UluModal",
   props: {
     /**
@@ -128,21 +128,21 @@ const ue = ["aria-labelledby", "aria-describedby"], de = ["id"], fe = { class: "
     noPauseVideos: Boolean
   },
   emits: ["update:modelValue", "close", "open"],
-  setup(t, { emit: j }) {
-    const c = j, e = t, D = J(), N = n(null), E = ce("ulu-modal-title"), B = n(!1), o = n(null), O = n(null), k = n(null), i = n({
+  setup(t, { emit: T }) {
+    const r = T, e = t, j = G(), D = n(null), E = ue("ulu-modal-title"), B = n(!1), o = n(null), $ = n(null), k = n(null), i = n({
       isStaticSize: !1,
       isFill: !1,
       bodyStyle: {}
-    }), $ = u(() => e.title || D.title), v = u(() => {
+    }), O = c(() => e.title || j.title), v = c(() => {
       const { allowResize: l, position: s } = e;
       if (!l || !s) return !1;
       const h = ["left", "right", "center"];
       return h.includes(s) ? !0 : (console.warn(`Passed invalid position for resize (${s}), use ${h.join(", ")}`), !1);
-    }), _ = u(() => e.position === "center" ? "type:resizeBoth" : "type:resizeHorizontal"), A = u(() => ({
+    }), N = c(() => e.position === "center" ? "type:resizeBoth" : "type:resizeHorizontal"), A = c(() => ({
       [e.position]: e.position,
       resize: e.allowResize,
       "no-resize": !e.allowResize,
-      "no-header": !$.value,
+      "no-header": !O.value,
       "body-fills": e.bodyFills,
       "no-backdrop": e.noBackdrop,
       "no-min-height": e.noMinHeight,
@@ -152,33 +152,33 @@ const ue = ["aria-labelledby", "aria-describedby"], de = ["id"], fe = { class: "
       "fullscreen-mobile": e.fullscreenMobile,
       "frame-ratio": i.value.isStaticSize,
       "frame-fill": i.value.isFill
-    })), { resolvedModifiers: U } = le({
+    })), { resolvedModifiers: U } = oe({
       props: e,
       baseClass: "modal",
       internal: A
-    }), X = u(() => e.labelledby ? e.labelledby : E), a = () => {
-      c("update:modelValue", !1), c("close");
-    }, q = () => {
-      e.modelValue && (c("update:modelValue", !1), c("close"));
-    }, W = (l) => {
+    }), X = c(() => e.labelledby ? e.labelledby : E), a = () => {
+      r("update:modelValue", !1), r("close");
+    }, _ = () => {
+      e.modelValue && (r("update:modelValue", !1), r("close"));
+    }, q = (l) => {
       if (e.clickOutsideCloses && !B.value) {
         const { target: s } = l;
-        s === o.value && te(o.value, l) && a();
+        s === o.value && se(o.value, l) && a();
       }
     };
     let y = null, b = null, S = null, z = null, p = null;
-    const Y = () => {
-      !e.nonModal && e.preventScroll && (y = re(o.value, (l) => {
-        l ? b = oe({ preventShift: e.preventScrollShift }) : P();
+    const W = () => {
+      !e.nonModal && e.preventScroll && (y = ce(o.value, (l) => {
+        l ? b = te({ preventShift: e.preventScrollShift }) : P();
       }));
-    }, G = () => {
+    }, Y = () => {
       y && (y.destroy(), y = null);
     }, P = () => {
       b && (b(), b = null);
     }, I = () => {
       if (v.value) {
         const l = e.position === "center" ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: e.position === "right" ? "left" : "right" };
-        S = new ne(o.value, O.value, l), z = () => {
+        S = new re(o.value, $.value, l), z = () => {
           B.value = !0;
         }, p = () => {
           setTimeout(() => {
@@ -194,12 +194,12 @@ const ue = ["aria-labelledby", "aria-describedby"], de = ["id"], fe = { class: "
         if (o.value)
           if (l) {
             if (e.autoIframe && k.value) {
-              const s = se(k.value);
+              const s = ie(k.value);
               s && (s.iframe.classList.add("modal__frame-content"), s.isStaticSize ? (i.value.isStaticSize = !0, i.value.isFill = !1, i.value.bodyStyle = { aspectRatio: s.aspectRatio }) : (i.value.isFill = !0, i.value.isStaticSize = !1, i.value.bodyStyle = s.fillHeight ? { minHeight: s.fillHeight } : {}));
             }
-            e.noPauseVideos || ie(o.value), o.value[e.nonModal ? "show" : "showModal"](), c("open");
+            e.noPauseVideos || ae(o.value), o.value[e.nonModal ? "show" : "showModal"](), r("open");
           } else
-            e.noPauseVideos || (ae(o.value), o.value.querySelectorAll("video").forEach((h) => h.pause())), o.value.close(), i.value = { isStaticSize: !1, isFill: !1, bodyStyle: {} };
+            e.noPauseVideos || (ne(o.value), o.value.querySelectorAll("video").forEach((h) => h.pause())), o.value.close(), i.value = { isStaticSize: !1, isFill: !1, bodyStyle: {} };
       });
     }, { immediate: !0 }), M(v, (l) => {
       l ? w(() => {
@@ -209,88 +209,89 @@ const ue = ["aria-labelledby", "aria-describedby"], de = ["id"], fe = { class: "
       l !== s && (V(), w(() => {
         I();
       }));
+    }), J(() => {
+      W(), I();
     }), K(() => {
-      Y(), I();
-    }), Q(() => {
-      o.value && o.value.open && o.value.close(), G(), P(), V();
-    }), (l, s) => (d(), F(Z, {
+      o.value && o.value.open && o.value.close(), Y(), P(), V();
+    }), (l, s) => (u(), F(Q, {
       to: t.teleport === !1 ? null : t.teleport,
       disabled: t.teleport === !1
     }, [
-      f("dialog", {
-        class: r(["modal", [L(U), t.classes.container]]),
+      d("dialog", Z({
+        class: ["modal", [H(U), t.classes.container]],
         "aria-labelledby": X.value,
         "aria-describedby": t.describedby,
         ref_key: "container",
         ref: o,
-        style: H({ width: N.value }),
+        style: { width: D.value }
+      }, l.$attrs, {
         onCancel: x(a, ["prevent"]),
-        onClose: q,
-        onClick: W
-      }, [
-        $.value ? (d(), C("header", {
+        onClose: _,
+        onClick: q
+      }), [
+        O.value ? (u(), C("header", {
           key: 0,
-          class: r(["modal__header", t.classes.header])
+          class: f(["modal__header", t.classes.header])
         }, [
-          f("h2", {
-            class: r(["modal__title", t.classes.title]),
-            id: L(E)
+          d("h2", {
+            class: f(["modal__title", t.classes.title]),
+            id: H(E)
           }, [
             m(l.$slots, "title", { close: a }, () => [
-              t.titleIcon ? (d(), F(R, {
+              t.titleIcon ? (u(), F(R, {
                 key: 0,
                 class: "modal__title-icon",
                 icon: t.titleIcon
               }, null, 8, ["icon"])) : g("", !0),
-              f("span", fe, ee(t.title), 1)
+              d("span", me, ee(t.title), 1)
             ])
-          ], 10, de),
-          f("button", {
-            class: r(["modal__close", t.classes.close]),
+          ], 10, fe),
+          d("button", {
+            class: f(["modal__close", t.classes.close]),
             "aria-label": "Close modal",
             onClick: a,
             autofocus: ""
           }, [
             m(l.$slots, "closeIcon", {}, () => [
-              T(R, {
+              L(R, {
                 class: "modal__close-icon",
                 icon: t.closeIcon || "type:close"
               }, null, 8, ["icon"])
             ])
           ], 2)
         ], 2)) : g("", !0),
-        f("div", {
-          class: r(["modal__body", t.classes.body]),
-          style: H(i.value.bodyStyle),
+        d("div", {
+          class: f(["modal__body", t.classes.body]),
+          style: le(i.value.bodyStyle),
           ref_key: "body",
           ref: k
         }, [
           m(l.$slots, "default", { close: a })
         ], 6),
-        l.$slots.footer ? (d(), C("div", {
+        l.$slots.footer ? (u(), C("div", {
           key: 1,
-          class: r(["modal__footer", t.classes.footer])
+          class: f(["modal__footer", t.classes.footer])
         }, [
           m(l.$slots, "footer", { close: a })
         ], 2)) : g("", !0),
-        v.value ? (d(), C("button", {
+        v.value ? (u(), C("button", {
           key: 2,
           class: "modal__resizer",
           ref_key: "resizer",
-          ref: O,
+          ref: $,
           type: "button"
         }, [
           m(l.$slots, "resizerIcon", {}, () => [
-            T(R, {
+            L(R, {
               class: "modal__resizer-icon",
-              icon: t.resizerIcon || _.value
+              icon: t.resizerIcon || N.value
             }, null, 8, ["icon"])
           ])
         ], 512)) : g("", !0)
-      ], 46, ue)
+      ], 16, de)
     ], 8, ["to", "disabled"]));
   }
 };
 export {
-  pe as default
+  he as default
 };

package/dist/mcp-data.json

@@ -64,22 +64,6 @@
         "code": "<toast>Content</toast>"
       }
     ],
-    "useTooltipFollow": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<useTooltipFollow>Content</useTooltipFollow>"
-      }
-    ],
-    "useTooltip": [],
-    "tooltip": [
-      {
-        "title": "Basic",
-        "description": "Basic variation",
-        "code": "<tooltip>This is a basic tooltip!</tooltip>"
-      }
-    ],
-    "UluPopover": [],
     "useModals": [],
     "modals": [
       {
@@ -113,6 +97,22 @@
         "code": "<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>"
       }
     ],
+    "useTooltipFollow": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<useTooltipFollow>Content</useTooltipFollow>"
+      }
+    ],
+    "useTooltip": [],
+    "tooltip": [
+      {
+        "title": "Basic",
+        "description": "Basic variation",
+        "code": "<tooltip>This is a basic tooltip!</tooltip>"
+      }
+    ],
+    "UluPopover": [],
     "UluProgressCircle": [],
     "UluProgressBar": [],
     "UluAnimateNumber": [],
@@ -156,6 +156,10 @@
         "code": "<UluAction href=\"{...}\" download>Content</UluAction>"
       }
     ],
+    "UluWhenBreakpoint": [],
+    "UluTitleRail": [],
+    "UluDataGrid": [],
+    "UluAdaptiveLayout": [],
     "UluSkipLink": [
       {
         "title": "Default",
@@ -228,10 +232,6 @@
         "code": "<UluBreadcrumb items=\"{...}\">Content</UluBreadcrumb>"
       }
     ],
-    "UluWhenBreakpoint": [],
-    "UluTitleRail": [],
-    "UluDataGrid": [],
-    "UluAdaptiveLayout": [],
     "UluSelectableMenu": [],
     "UluSearchForm": [],
     "UluFormTextarea": [],
@@ -248,34 +248,6 @@
     "UluFormActions": [],
     "UluForm": [],
     "UluFileDisplay": [],
-    "UluTabGroup": [
-      {
-        "title": "Default",
-        "description": "Default variation",
-        "code": "<UluTabGroup>Content</UluTabGroup>"
-      },
-      {
-        "title": "Vertical",
-        "description": "Vertical variation",
-        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
-      },
-      {
-        "title": "DefaultIndex",
-        "description": "DefaultIndex variation",
-        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
-      },
-      {
-        "title": "FullWidth",
-        "description": "FullWidth variation",
-        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
-      }
-    ],
-    "UluOverflowPopover": [],
-    "UluModal": [],
-    "UluDropdown": [],
-    "UluCollapsible": [],
-    "UluAccordionGroup": [],
-    "UluAccordion": [],
     "UluTag": [],
     "UluTable": [
       {
@@ -499,6 +471,34 @@
       }
     ],
     "UluAlert": [],
+    "UluTabGroup": [
+      {
+        "title": "Default",
+        "description": "Default variation",
+        "code": "<UluTabGroup>Content</UluTabGroup>"
+      },
+      {
+        "title": "Vertical",
+        "description": "Vertical variation",
+        "code": "<UluTabGroup vertical>Content</UluTabGroup>"
+      },
+      {
+        "title": "DefaultIndex",
+        "description": "DefaultIndex variation",
+        "code": "<UluTabGroup :defaultIndex=\"2\">Content</UluTabGroup>"
+      },
+      {
+        "title": "FullWidth",
+        "description": "FullWidth variation",
+        "code": "<UluTabGroup modifiers=\"{...}\">Content</UluTabGroup>"
+      }
+    ],
+    "UluOverflowPopover": [],
+    "UluModal": [],
+    "UluDropdown": [],
+    "UluCollapsible": [],
+    "UluAccordionGroup": [],
+    "UluAccordion": [],
     "UluTableSticky": [
       {
         "title": "Default",
@@ -517,6 +517,10 @@
         "code": "<CardExample horizontal>Content</CardExample>"
       }
     ],
+    "UluScrollAnchorsNavAnimated": [],
+    "UluScrollAnchorsNav": [],
+    "UluScrollAnchorsHeadlessSection": [],
+    "UluScrollAnchors": [],
     "facets-router": [
       {
         "title": "Default",
@@ -593,10 +597,6 @@
         "code": "<Facets facetFields=\"{...}\" countMode=\"intuitive\">Content</Facets>"
       }
     ],
-    "UluScrollAnchorsNavAnimated": [],
-    "UluScrollAnchorsNav": [],
-    "UluScrollAnchorsHeadlessSection": [],
-    "UluScrollAnchors": [],
     "FullFormDemo": [],
     "FrontPage": [
       {
@@ -657,28 +657,28 @@
         "code": "<script setup>\n  import { ref, computed, provide } from \"vue\";\n  import { useBreakpointManager } from \"./useBreakpointManager.js\";\n\n  const isMobile = ref(false);\n\n  // Example using the onReady callback to set reactive value isMobile\n  // - In this situation isMobile is being used as a primary change in  \n  //   the applications layout \n  const options = { \n    onReady(manager) {\n      manager.at(\"small\").max(() => isMobile.value = true);\n      manager.at(\"large\").min(() => isMobile.value = false);\n    }\n  };\n\n  // Composable returns the following\n  const { \n    /**\n     * Reference to underlying BreakpointManager class\n    */\n    breakpointManager, \n    /**\n     * Active breakpoint name\n    */\n    breakpointActive, \n    /**\n     * Current resizeDirection (\"up\"|\"down\"|null)\n    */\n    breakpointDirection \n  } = useBreakpointManager(options);\n\n\n  // Allowing all components to access these values\n  provide(\"uluBreakpointActive\", computed(() => breakpointActive));\n  provide(\"uluBreakpointDirection\", computed(() => breakpointDirection));\n  provide(\"uluBreakpointManager\", computed(() => breakpointManager));\n  provide(\"uluIsMobile\", computed(() => isMobile));\n\n</script>"
       }
     ],
-    "breakpoints": [
+    "core": [
       {
-        "title": "breakpoints Example 1",
+        "title": "core Example 1",
         "description": "Code example extracted from markdown.",
-        "code": "<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>"
+        "code": "<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>"
       },
       {
-        "title": "breakpoints Example 2",
+        "title": "core Example 2",
         "description": "Code example extracted from markdown.",
-        "code": "<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>"
+        "code": "<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>"
       }
     ],
-    "core": [
+    "breakpoints": [
       {
-        "title": "core Example 1",
+        "title": "breakpoints Example 1",
         "description": "Code example extracted from markdown.",
-        "code": "<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>"
+        "code": "<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>"
       },
       {
-        "title": "core Example 2",
+        "title": "breakpoints Example 2",
         "description": "Code example extracted from markdown.",
-        "code": "<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>"
+        "code": "<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>"
       }
     ],
     "forms": [],
@@ -12629,12 +12629,12 @@
     "modals": {
       "raw_markdown": "import { Canvas } from '@storybook/addon-docs/blocks';\nimport * as ModalStories from '../../components/collapsible/UluModal.stories.js';\n\n# Modals\n\nModals plugin allows configuring app-wide modals that are triggered by the global API. Register your modals when you install the plugin then interact with them using the global API.\n\n## Registering your app-wide modals\n\nCreate the modal component file like:\n\n```html\n<template>\n  <UluModal>\n    User setting modal…\n  </UluModal>\n</template>\n```\n\n\nExample ./scr/modals.js\n\n```js\nimport { defineAsyncComponent } from \"vue\";\n\nexport default [\n  {\n    name: \"settings\",\n    component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n  }\n]\n```\n\n## Installing the plugin\n\nExample ./src/main.js\n\n```js\nimport UluModals from \"@ulu/frontend-vue/plugins/modals/index.js\";\nimport modals from \"./src/modals.js\";\n\n//...\n\napp.use(UluModals, { modals });\n\n```\n\n## Using Global API\n\n```js\n\n// Open a app-wide modal\nthis.$uluModals.open({ exampleProp: value });\n\n// Close app-wide modal \nthis.$uluModals.close();\n\n// Add modals after post-install\nthis.$uluModals.add({\n  name: \"settings\",\n  component: defineAsyncComponent(() => import('./components/modals/UserSettingsModal.vue')),\n});\n\n// Remove a modal from the registry\nthis.$uluModals.remove(\"settings\");\n\n// Get Modal from registry (not usually needed)\nconst settingsModal = this.$uluModals.get(\"settings\");\n// console.log(settingsModal.name) ==> \"settings\"\n```\n\n## Using Composition API (via composable)\n\nComposable is used get access to modals API (through inject)\n\n```html\n\n<template>\n  <button @click=\"showSettingsModal\">My Settings</button>\n</template>\n\n<script setup>\n  import { useModals } from \"./useModals\";\n\n  const modals = useModals();\n  const showSettingsModal = () => {\n    console.log(\"This is opening via uluModals composable\");\n    modals.open(\"settings\");\n  };\n</script>\n\n```\n\n## Standalone Modal Component\n\nThe `UluModal` **component is independent of this plugin.** The plugin is simply a convenient way to manage global modals (for things like a settings dialog) that need to be opened from anywhere in your application.\n\nYou can use `UluModal` as the component that the plugin displays, or you can use it on its own for any case where you are managing the state locally within a component and don't need a global API.\n\nHere is a demonstration of the standalone `UluModal` component:\n\n<Canvas of={ModalStories.Default} />"
     },
-    "breakpoints": {
-      "raw_markdown": "# Breakpoints Plugin\n\n## Purpose\n\nThe Breakpoints Plugin provides app-wide, reactive breakpoint information to your Vue components. It is a lightweight wrapper around the `useBreakpointManager` composable, ensuring that resize events and active breakpoint states are tracked centrally and distributed efficiently via Vue's `provide`/`inject` system.\n\nBy installing this plugin, any component in your application can instantly know the current breakpoint, whether the device is considered \"mobile,\" and the direction the window was just resized.\n\n## Installation\n\nRegister the `breakpointsPlugin` on your Vue app instance.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { breakpointsPlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the breakpoints plugin\napp.use(breakpointsPlugin, {\n  // Optional: Change which breakpoint triggers the 'isMobile' flag (default is 'small')\n  breakpointMobile: 'small',\n  \n  // Optional: Pass options directly to the underlying useBreakpointManager\n  managerOptions: {\n    // onReady(manager) { ... }\n  }\n});\n\napp.mount('#app');\n```\n\n## Provided Injections\n\nThe plugin does not attach methods to the Vue instance. Instead, it provides reactive `computed` refs that you can inject into any component.\n\n- **`uluIsMobile`**: `ComputedRef<Boolean>` - True if the current active breakpoint is less than or equal to the configured `breakpointMobile` (defaults to `'small'`).\n- **`uluBreakpointActive`**: `ComputedRef<String>` - The name of the currently active breakpoint (e.g., `'small'`, `'medium'`, `'large'`).\n- **`uluBreakpointDirection`**: `ComputedRef<Number>` - Indicates the resize direction (`1` for growing larger, `-1` for shrinking smaller, `0` for initialization).\n- **`uluBreakpointManager`**: `ComputedRef<Object>` - The underlying vanilla JS BreakpointManager instance, allowing advanced programmatic subscriptions if needed.\n\n## Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>\n```\n\n## Why use the Plugin vs the Composable?\n\nWhile you can import and use `useBreakpointManager()` directly in individual components, registering the Breakpoints Plugin ensures that the vanilla JS `BreakpointManager` is only instantiated once. This centralizes the resize event listeners, significantly improving performance across large applications with many responsive components.\n"
-    },
     "core": {
       "raw_markdown": "# Core Plugin\n\n## Purpose\n\nThe Core Plugin is the central, **required** plugin for the `@ulu/frontend-vue` library. Its primary purpose is to establish a single, reactive source of truth for configuration settings that are shared across multiple components. \n\nBy using Vue's `provide`/`inject` system, this plugin ensures that all components within your application access the same configuration, preventing inconsistencies that can arise from separate module imports.\n\n## Installation\n\nTo use this library, you must register the `corePlugin` on your Vue app instance. You can also pass an options object to override the default settings.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { corePlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the core plugin\napp.use(corePlugin, {\n  // Optional: override general settings\n  fontAwesomeStatic: true,\n\n  // Optional: override specific icons safely\n  iconsByType: {\n    danger: 'my-custom-danger-icon',\n    close: 'my-custom-close-icon'\n  }\n});\n\napp.mount('#app');\n```\n\n## API Reference\n\nThe plugin provides its API to your application in two ways:\n\n-   **Composition API:** `inject('uluCore')`\n-   **Options API:** `this.$uluCore`\n\nThe API object contains the following methods:\n\n- `getSettings()`: Returns the full reactive settings object.\n- `getSetting(key)`: Retrieves a single setting by its key (e.g., `'fontAwesomeStatic'`).\n- `updateSetting(key, value)`: Updates a single setting.\n- `updateSettings(changes)`: Merges an object of changes into the settings.\n- `getDefaultSettings()`: Returns a non-reactive copy of the original default settings.\n- `getIcon(type)`: Retrieves a specific icon class string by its semantic type (e.g., `'danger'`, `'close'`).\n- `setIcon(type, definition)`: Safely sets or overrides a single icon definition.\n\n### Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\nimport { inject, onMounted } from 'vue';\n\nconst uluCore = inject('uluCore');\n\nonMounted(() => {\n  const icons = uluCore.getSetting('iconsByType');\n  console.log('Danger Icon:', icons.danger);\n\n  // Example of updating a single icon dynamically\n  uluCore.setIcon('success', 'my-awesome-success-icon');\n});\n</script>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  mounted() {\n    const icons = this.$uluCore.getSetting('icons');\n    console.log('Danger Icon:', icons.danger);\n  }\n}\n</script>\n```\n\n"
     },
+    "breakpoints": {
+      "raw_markdown": "# Breakpoints Plugin\n\n## Purpose\n\nThe Breakpoints Plugin provides app-wide, reactive breakpoint information to your Vue components. It is a lightweight wrapper around the `useBreakpointManager` composable, ensuring that resize events and active breakpoint states are tracked centrally and distributed efficiently via Vue's `provide`/`inject` system.\n\nBy installing this plugin, any component in your application can instantly know the current breakpoint, whether the device is considered \"mobile,\" and the direction the window was just resized.\n\n## Installation\n\nRegister the `breakpointsPlugin` on your Vue app instance.\n\n```javascript\n// src/main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { breakpointsPlugin } from '@ulu/frontend-vue';\n\nconst app = createApp(App);\n\n// Register the breakpoints plugin\napp.use(breakpointsPlugin, {\n  // Optional: Change which breakpoint triggers the 'isMobile' flag (default is 'small')\n  breakpointMobile: 'small',\n  \n  // Optional: Pass options directly to the underlying useBreakpointManager\n  managerOptions: {\n    // onReady(manager) { ... }\n  }\n});\n\napp.mount('#app');\n```\n\n## Provided Injections\n\nThe plugin does not attach methods to the Vue instance. Instead, it provides reactive `computed` refs that you can inject into any component.\n\n- **`uluIsMobile`**: `ComputedRef<Boolean>` - True if the current active breakpoint is less than or equal to the configured `breakpointMobile` (defaults to `'small'`).\n- **`uluBreakpointActive`**: `ComputedRef<String>` - The name of the currently active breakpoint (e.g., `'small'`, `'medium'`, `'large'`).\n- **`uluBreakpointDirection`**: `ComputedRef<Number>` - Indicates the resize direction (`1` for growing larger, `-1` for shrinking smaller, `0` for initialization).\n- **`uluBreakpointManager`**: `ComputedRef<Object>` - The underlying vanilla JS BreakpointManager instance, allowing advanced programmatic subscriptions if needed.\n\n## Example Usage\n\n**Composition API (`<script setup>`)**\n```vue\n<script setup>\n  import { inject } from 'vue';\n\n  const isMobile = inject('uluIsMobile');\n  const currentBreakpoint = inject('uluBreakpointActive');\n</script>\n\n<template>\n  <div>\n    <p v-if=\"isMobile\">You are on a mobile device!</p>\n    <p>Current Breakpoint: {{ currentBreakpoint }}</p>\n  </div>\n</template>\n```\n\n**Options API**\n```vue\n<script>\nexport default {\n  inject: ['uluIsMobile', 'uluBreakpointActive'],\n  mounted() {\n    console.log('Is mobile?', this.uluIsMobile);\n  }\n}\n</script>\n```\n\n## Why use the Plugin vs the Composable?\n\nWhile you can import and use `useBreakpointManager()` directly in individual components, registering the Breakpoints Plugin ensures that the vanilla JS `BreakpointManager` is only instantiated once. This centralizes the resize event listeners, significantly improving performance across large applications with many responsive components.\n"
+    },
     "forms": {
       "raw_markdown": "import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';\nimport * as FullFormDemoStories from './tests/FullFormDemo.stories.js';\n\n# Forms\n\nThis is a demonstration of a full form built with the `ulu-form` components.\n\n<Canvas of={FullFormDemoStories.Default} />\n"
     },
@@ -13042,70 +13042,70 @@
         "order": 100
       },
       {
-        "id": "module:corePlugin",
-        "longname": "module:corePlugin",
-        "name": "corePlugin",
+        "id": "module:useModals",
+        "longname": "module:useModals",
+        "name": "useModals",
         "kind": "module",
-        "description": "Core plugin for managing shared configuration for the library.",
         "meta": {
           "lineno": 1,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
+          "filename": "useModals.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
         "order": 122,
         "level": 0
       },
       {
-        "id": "module:breakpointsPlugin",
-        "longname": "module:breakpointsPlugin",
-        "name": "breakpointsPlugin",
+        "id": "module:modalsPlugin",
+        "longname": "module:modalsPlugin",
+        "name": "modalsPlugin",
         "kind": "module",
+        "description": "Modals plugin (adds components, global registry, etc)\n- Updated version handles both independent and global registered/triggered modals",
         "meta": {
           "lineno": 1,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
         "order": 124,
         "level": 0
       },
       {
-        "id": "module:useModals",
-        "longname": "module:useModals",
-        "name": "useModals",
+        "id": "modals.module:api",
+        "longname": "modals.module:api",
+        "name": "api",
         "kind": "module",
         "meta": {
           "lineno": 1,
-          "filename": "useModals.js",
+          "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 129,
+        "order": 127,
         "level": 0
       },
       {
-        "id": "module:modalsPlugin",
-        "longname": "module:modalsPlugin",
-        "name": "modalsPlugin",
+        "id": "module:breakpointsPlugin",
+        "longname": "module:breakpointsPlugin",
+        "name": "breakpointsPlugin",
         "kind": "module",
-        "description": "Modals plugin (adds components, global registry, etc)\n- Updated version handles both independent and global registered/triggered modals",
         "meta": {
           "lineno": 1,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
         },
-        "order": 131,
+        "order": 136,
         "level": 0
       },
       {
-        "id": "modals.module:api",
-        "longname": "modals.module:api",
-        "name": "api",
+        "id": "module:corePlugin",
+        "longname": "module:corePlugin",
+        "name": "corePlugin",
         "kind": "module",
+        "description": "Core plugin for managing shared configuration for the library.",
         "meta": {
           "lineno": 1,
-          "filename": "api.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
         },
-        "order": 134,
+        "order": 141,
         "level": 0
       },
       {
@@ -13226,42 +13226,58 @@
         "level": 0
       },
       {
-        "id": "module:corePlugin--module.exports",
-        "longname": "module:corePlugin",
+        "id": "module:modalsPlugin--module.exports",
+        "longname": "module:modalsPlugin",
         "name": "module.exports",
         "kind": "function",
         "isExported": true,
-        "description": "Installs the core plugin, which provides a centralized, reactive configuration for the entire library.\nIt is essential for managing global settings, particularly for the icon system.",
-        "memberof": "module:corePlugin",
+        "description": "Modals Vue Plugin",
+        "memberof": "module:modalsPlugin",
         "params": [
           {
             "type": {
               "names": [
-                "object"
+                "Object"
               ]
             },
-            "description": "The Vue app instance.",
-            "name": "app"
+            "description": "Vue app instance passed to plugin",
+            "name": "App"
           },
           {
             "type": {
               "names": [
-                "object"
+                "module:modalsPlugin~UluModalsPluginOptions"
               ]
             },
-            "optional": true,
-            "description": "User-defined settings to override defaults.",
-            "name": "userSettings"
-          },
+            "description": "Options to change (see defaults)",
+            "name": "userOptions"
+          }
+        ],
+        "meta": {
+          "lineno": 28,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+        },
+        "order": 126,
+        "level": 0
+      },
+      {
+        "id": "module:breakpointsPlugin--module.exports",
+        "longname": "module:breakpointsPlugin",
+        "name": "module.exports",
+        "kind": "function",
+        "isExported": true,
+        "description": "Installs the breakpoints plugin, providing app-wide reactive breakpoint information.\nIt uses `useBreakpointManager` internally and provides `uluIsMobile`,\n`uluBreakpointActive`, `uluBreakpointDirection`, and `uluBreakpointManager` to all components.",
+        "memberof": "module:breakpointsPlugin",
+        "params": [
           {
             "type": {
               "names": [
-                "boolean"
+                "object"
               ]
             },
-            "optional": true,
-            "description": "If true, uses static FontAwesome CSS classes instead of the Vue component.",
-            "name": "userSettings.fontAwesomeStatic"
+            "description": "The Vue app instance.",
+            "name": "app"
           },
           {
             "type": {
@@ -13269,19 +13285,19 @@
                 "object"
               ]
             },
-            "optional": true,
-            "description": "A custom component to use for rendering icons.",
-            "name": "userSettings.iconComponent"
+            "description": "User-defined options.",
+            "name": "userOptions"
           },
           {
             "type": {
               "names": [
-                "function"
+                "string"
               ]
             },
             "optional": true,
-            "description": "A function to resolve props for the custom icon component.",
-            "name": "userSettings.iconPropResolver"
+            "defaultvalue": "\"small\"",
+            "description": "The breakpoint name to use for `isMobile` detection.",
+            "name": "userOptions.breakpointMobile"
           },
           {
             "type": {
@@ -13290,26 +13306,26 @@
               ]
             },
             "optional": true,
-            "description": "An object to override default icon definitions by type (e.g., `{ danger: 'my-icon' }`).",
-            "name": "userSettings.iconsByType"
+            "description": "Options to pass to the underlying `useBreakpointManager`.",
+            "name": "userOptions.managerOptions"
           }
         ],
         "meta": {
-          "lineno": 49,
+          "lineno": 31,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
         },
-        "order": 123,
+        "order": 140,
         "level": 0
       },
       {
-        "id": "module:breakpointsPlugin--module.exports",
-        "longname": "module:breakpointsPlugin",
+        "id": "module:corePlugin--module.exports",
+        "longname": "module:corePlugin",
         "name": "module.exports",
         "kind": "function",
         "isExported": true,
-        "description": "Installs the breakpoints plugin, providing app-wide reactive breakpoint information.\nIt uses `useBreakpointManager` internally and provides `uluIsMobile`,\n`uluBreakpointActive`, `uluBreakpointDirection`, and `uluBreakpointManager` to all components.",
-        "memberof": "module:breakpointsPlugin",
+        "description": "Installs the core plugin, which provides a centralized, reactive configuration for the entire library.\nIt is essential for managing global settings, particularly for the icon system.",
+        "memberof": "module:corePlugin",
         "params": [
           {
             "type": {
@@ -13326,19 +13342,19 @@
                 "object"
               ]
             },
-            "description": "User-defined options.",
-            "name": "userOptions"
+            "optional": true,
+            "description": "User-defined settings to override defaults.",
+            "name": "userSettings"
           },
           {
             "type": {
               "names": [
-                "string"
+                "boolean"
               ]
             },
             "optional": true,
-            "defaultvalue": "\"small\"",
-            "description": "The breakpoint name to use for `isMobile` detection.",
-            "name": "userOptions.breakpointMobile"
+            "description": "If true, uses static FontAwesome CSS classes instead of the Vue component.",
+            "name": "userSettings.fontAwesomeStatic"
           },
           {
             "type": {
@@ -13347,52 +13363,36 @@
               ]
             },
             "optional": true,
-            "description": "Options to pass to the underlying `useBreakpointManager`.",
-            "name": "userOptions.managerOptions"
-          }
-        ],
-        "meta": {
-          "lineno": 31,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
-        },
-        "order": 128,
-        "level": 0
-      },
-      {
-        "id": "module:modalsPlugin--module.exports",
-        "longname": "module:modalsPlugin",
-        "name": "module.exports",
-        "kind": "function",
-        "isExported": true,
-        "description": "Modals Vue Plugin",
-        "memberof": "module:modalsPlugin",
-        "params": [
+            "description": "A custom component to use for rendering icons.",
+            "name": "userSettings.iconComponent"
+          },
           {
             "type": {
               "names": [
-                "Object"
+                "function"
               ]
             },
-            "description": "Vue app instance passed to plugin",
-            "name": "App"
+            "optional": true,
+            "description": "A function to resolve props for the custom icon component.",
+            "name": "userSettings.iconPropResolver"
           },
           {
             "type": {
               "names": [
-                "module:modalsPlugin~UluModalsPluginOptions"
+                "object"
               ]
             },
-            "description": "Options to change (see defaults)",
-            "name": "userOptions"
+            "optional": true,
+            "description": "An object to override default icon definitions by type (e.g., `{ danger: 'my-icon' }`).",
+            "name": "userSettings.iconsByType"
           }
         ],
         "meta": {
-          "lineno": 28,
+          "lineno": 49,
           "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/core"
         },
-        "order": 133,
+        "order": 142,
         "level": 0
       },
       {
@@ -14314,7 +14314,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
         },
-        "order": 126,
+        "order": 138,
         "level": 0
       },
       {
@@ -14330,7 +14330,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
         },
-        "order": 127,
+        "order": 139,
         "level": 0
       },
       {
@@ -14532,7 +14532,7 @@
           "filename": "useModals.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 130,
+        "order": 123,
         "level": 0
       },
       {
@@ -16295,7 +16295,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 136,
+        "order": 129,
         "level": 0
       },
       {
@@ -16311,7 +16311,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 137,
+        "order": 130,
         "level": 0
       },
       {
@@ -16348,23 +16348,6 @@
         "order": 45,
         "level": 0
       },
-      {
-        "id": "module:breakpointsPlugin--module.exports~defaults",
-        "longname": "module:breakpointsPlugin~defaults",
-        "name": "defaults",
-        "kind": "constant",
-        "scope": "inner",
-        "description": "Plugin Options",
-        "memberof": "module:breakpointsPlugin--module.exports",
-        "params": [],
-        "meta": {
-          "lineno": 10,
-          "filename": "index.js",
-          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
-        },
-        "order": 125,
-        "level": 0
-      },
       {
         "id": "modals.module:api~state",
         "longname": "modals.module:api~state",
@@ -16379,7 +16362,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 135,
+        "order": 128,
         "level": 0
       },
       {
@@ -16396,7 +16379,24 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 138,
+        "order": 131,
+        "level": 0
+      },
+      {
+        "id": "module:breakpointsPlugin--module.exports~defaults",
+        "longname": "module:breakpointsPlugin~defaults",
+        "name": "defaults",
+        "kind": "constant",
+        "scope": "inner",
+        "description": "Plugin Options",
+        "memberof": "module:breakpointsPlugin--module.exports",
+        "params": [],
+        "meta": {
+          "lineno": 10,
+          "filename": "index.js",
+          "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/breakpoints"
+        },
+        "order": 137,
         "level": 0
       },
       {
@@ -16614,7 +16614,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 139,
+        "order": 132,
         "level": 0
       },
       {
@@ -16640,7 +16640,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 140,
+        "order": 133,
         "level": 0
       },
       {
@@ -16656,7 +16656,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 141,
+        "order": 134,
         "level": 0
       },
       {
@@ -16682,7 +16682,7 @@
           "filename": "api.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 142,
+        "order": 135,
         "level": 0
       },
       {
@@ -17165,7 +17165,7 @@
           "filename": "index.js",
           "path": "/Users/joescherben/Personal/Projects/ULU/frontend-vue/lib/plugins/modals"
         },
-        "order": 132,
+        "order": 125,
         "level": 0
       }
     ],

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;wBAweqB,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;wBAkfqB,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,4 +1,4 @@
-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 { ref as x, computed as y, watch as L, nextTick as O, onUnmounted as M, createElementBlock as u, openBlock as d, withKeys as T, unref as l, normalizeStyle as v, 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";
@@ -34,8 +34,8 @@ const z = ["data-placement"], K = { class: "popover__inner" }, N = {
      */
     directFocus: {
       type: Function,
-      default: ({ isOpen: s, trigger: r, content: c }) => {
-        s && c ? c.focus({ preventScroll: !0 }) : !s && r && r instanceof HTMLElement && r.focus({ preventScroll: !0 });
+      default: ({ isOpen: s, trigger: n, content: c }) => {
+        s && c ? c.focus({ preventScroll: !0 }) : !s && n && n instanceof HTMLElement && n.focus({ preventScroll: !0 });
       }
     },
     /**
@@ -58,39 +58,39 @@ const z = ["data-placement"], K = { class: "popover__inner" }, N = {
     modifiers: [String, Array, Object]
   },
   emits: ["close", "update:isOpen"],
-  setup(s, { expose: r, emit: c }) {
-    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(
+  setup(s, { expose: n, emit: c }) {
+    const p = 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);
+      p("close"), p("update:isOpen", !1);
     }, b = (t) => {
       e.isOpen && e.escapeCloses && (t.preventDefault(), i());
     };
-    let n = null;
+    let r = null;
     const a = () => {
-      n && (document.removeEventListener("click", n), n = null);
+      r && (document.removeEventListener("click", r), r = null);
     }, B = () => {
-      a(), e.clickOutsideCloses && (n = (t) => {
-        if (!(!e.isOpen || !o.value) && document.body.contains(t.target) && !o.value.contains(t.target) && $(o.value, t)) {
+      a(), e.clickOutsideCloses && (r = (t) => {
+        if (!(!e.isOpen || !o.value) && document.body.contains(t.target) && !o.value.contains(t.target) && !t.target.closest("[data-ulu-tour-ui]") && $(o.value, t)) {
           if (e.trigger instanceof HTMLElement && e.trigger.contains(t.target))
             return;
           i();
         }
       }, setTimeout(() => {
-        n && document.addEventListener("click", n);
+        r && document.addEventListener("click", r);
       }, 0));
     };
     return L(() => e.isOpen, (t, g) => {
-      t ? (m(), B(), e.directFocus && v(() => {
+      t ? (m(), B(), e.directFocus && O(() => {
         e.directFocus({ isOpen: !0, trigger: e.trigger, content: o.value });
-      })) : (a(), e.directFocus && g === !0 && v(() => {
+      })) : (a(), e.directFocus && g === !0 && O(() => {
         e.directFocus({ isOpen: !1, trigger: e.trigger, content: o.value });
       }));
     }, { immediate: !0 }), M(() => {
       a();
-    }), r({
+    }), n({
       /**
        * Emits the close event
        */
@@ -103,7 +103,7 @@ const z = ["data-placement"], K = { class: "popover__inner" }, N = {
        * The internal root popover element reference
        */
       content: o
-    }), (t, g) => (p(), u("span", {
+    }), (t, g) => (d(), u("span", {
       class: j(["popover", [
         {
           "popover--fixed": l(S),
@@ -113,7 +113,7 @@ const z = ["data-placement"], K = { class: "popover__inner" }, N = {
       ]]),
       ref_key: "contentEl",
       ref: o,
-      style: O(l(w)),
+      style: v(l(w)),
       "data-placement": l(E),
       onKeydown: T(b, ["esc"]),
       tabindex: "-1"
@@ -124,18 +124,18 @@ const z = ["data-placement"], K = { class: "popover__inner" }, N = {
           close: i
         })
       ]),
-      t.$slots.footer ? (p(), u("span", N, [
+      t.$slots.footer ? (d(), u("span", N, [
         C(t.$slots, "footer", {
           isOpen: s.isOpen,
           close: i
         })
       ])) : k("", !0),
-      f.value.arrow ? (p(), u("span", {
+      f.value.arrow ? (d(), u("span", {
         key: 1,
         class: "popover__arrow",
         ref_key: "contentArrow",
         ref: h,
-        style: O(l(F)),
+        style: v(l(F)),
         "data-ulu-popover-arrow": ""
       }, null, 4)) : k("", !0)
     ], 46, z));

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

@@ -1 +1 @@
-{"version":3,"file":"UluTourDisplay.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourDisplay.vue"],"names":[],"mappings":"AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAkhBs4S,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA1Vn7S,KAAK"}
+{"version":3,"file":"UluTourDisplay.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourDisplay.vue"],"names":[],"mappings":"AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6hBklS,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAjW/nS,KAAK"}

package/dist/plugins/tour/UluTourDisplay.vue.js

@@ -1,4 +1,4 @@
-import { computed as i, ref as f, watch as S, nextTick as T, onMounted as b, onUnmounted as L, createBlock as l, openBlock as o, Teleport as F, createElementBlock as x, createCommentVNode as $, unref as v, Fragment as I, resolveDynamicComponent as g, normalizeProps as h, mergeProps as s, createSlots as k, withCtx as c, createVNode as w, normalizeStyle as R } from "vue";
+import { computed as p, ref as f, watch as S, nextTick as T, onMounted as b, onUnmounted as L, createBlock as l, openBlock as o, Teleport as F, createElementBlock as y, createCommentVNode as x, unref as v, Fragment as I, resolveDynamicComponent as g, mergeProps as s, createSlots as $, withCtx as c, normalizeProps as k, createVNode as w, normalizeStyle as R } from "vue";
 import V from "../../components/collapsible/UluModal.vue.js";
 import D from "../popovers/UluPopoverBase.vue.js";
 import P from "./UluTourPager.vue.js";
@@ -7,20 +7,20 @@ import { useTour as M } from "./useTour.js";
 const H = {
   __name: "UluTourDisplay",
   setup(N) {
-    const { api: m, state: a } = M(), t = i(() => a.active?.steps[a.stepIndex]), u = f(null), d = f(null), C = i(() => ({
+    const { api: d, state: u } = M(), t = p(() => u.active?.steps[u.stepIndex]), a = f(null), m = f(null), C = p(() => ({
       placement: t.value?.placement || "bottom",
       arrow: !0,
       offset: 8
-    })), E = i(() => ({
-      ...a.active?.modalProps || {},
+    })), E = p(() => ({
+      ...u.active?.modalProps || {},
       ...t.value?.modalProps || {}
-    })), z = i(() => ({
+    })), z = p(() => ({
       modifiers: "large",
-      ...a.active?.popoverProps || {},
+      ...u.active?.popoverProps || {},
       ...t.value?.popoverProps || {}
-    })), r = f(null), p = () => {
-      if (u.value) {
-        const e = u.value.getBoundingClientRect();
+    })), r = f(null), i = () => {
+      if (a.value) {
+        const e = a.value.getBoundingClientRect();
         r.value = {
           top: e.top,
           left: e.left,
@@ -29,7 +29,7 @@ const H = {
         };
       } else
         r.value = null;
-    }, B = i(() => {
+    }, B = p(() => {
       if (!r.value) return {};
       const e = r.value;
       return {
@@ -60,27 +60,31 @@ const H = {
       if (e?.target) {
         await T();
         const n = document.querySelector(e.target);
-        n ? (u.value = n, d.value && d.value.update(), e.highlight && p()) : console.warn(`Tour target not found: ${e.target}`);
+        n ? (a.value = n, m.value && m.value.update(), e.highlight && i()) : console.warn(`Tour target not found: ${e.target}`);
       } else
-        u.value = null, r.value = null;
+        a.value = null, r.value = null;
     }, { immediate: !0 }), b(() => {
-      window.addEventListener("resize", p), window.addEventListener("scroll", p);
+      window.addEventListener("resize", i), window.addEventListener("scroll", i);
     }), L(() => {
-      window.removeEventListener("resize", p), window.removeEventListener("scroll", p);
+      window.removeEventListener("resize", i), window.removeEventListener("scroll", i);
     }), (e, n) => (o(), l(F, { to: "body" }, [
-      v(a).active ? (o(), x(I, { key: 0 }, [
-        t.value?.component ? (o(), l(g(t.value.component), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : t.value?.target ? (o(), l(D, s({
+      v(u).active ? (o(), y(I, { key: 0 }, [
+        t.value?.component ? (o(), l(g(t.value.component), s({
+          key: 0,
+          "data-ulu-tour-ui": "true"
+        }, t.value.componentProps), null, 16)) : t.value?.target ? (o(), l(D, s({
           key: 2,
           ref_key: "popoverBase",
-          ref: d,
-          trigger: u.value,
+          ref: m,
+          trigger: a.value,
           config: C.value,
           style: { zIndex: 9999 },
           isOpen: !0,
-          onClose: n[1] || (n[1] = (y) => v(m).stop())
-        }, z.value), k({
+          "data-ulu-tour-ui": "true",
+          onClose: n[1] || (n[1] = (h) => v(d).stop())
+        }, z.value), $({
           default: c(() => [
-            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
+            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), k(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
               key: 1,
               step: t.value,
               "is-modal": !1
@@ -97,12 +101,13 @@ const H = {
           }
         ]), 1040, ["trigger", "config"])) : (o(), l(V, s({
           key: 1,
-          modelValue: !0
+          modelValue: !0,
+          "data-ulu-tour-ui": "true"
         }, E.value, {
-          onClose: n[0] || (n[0] = (y) => v(m).stop())
-        }), k({
+          onClose: n[0] || (n[0] = (h) => v(d).stop())
+        }), $({
           default: c(() => [
-            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
+            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), k(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
               key: 1,
               step: t.value,
               "is-modal": !0
@@ -118,13 +123,14 @@ const H = {
             key: "0"
           }
         ]), 1040)),
-        t.value?.target && t.value?.highlight && r.value ? (o(), x("div", {
+        t.value?.target && t.value?.highlight && r.value ? (o(), y("div", {
           key: 3,
           class: "tour-highlight-backdrop",
           style: R(B.value),
-          onClick: n[2] || (n[2] = (y) => v(m).stop())
-        }, null, 4)) : $("", !0)
-      ], 64)) : $("", !0)
+          "data-ulu-tour-ui": "true",
+          onClick: n[2] || (n[2] = (h) => v(d).stop())
+        }, null, 4)) : x("", !0)
+      ], 64)) : x("", !0)
     ]));
   }
 };

package/lib/components/collapsible/UluModal.vue

@@ -11,6 +11,7 @@
       :aria-describedby="describedby"
       ref="container" 
       :style="{ width: containerWidth }"
+      v-bind="$attrs"
       @cancel.prevent="close"  
       @close="handleDialogCloseEvent"
       @click="handleClick"

package/package.json

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