ag-studio-vue3 2.1.2 → 3.0.0

package/README.md

@@ -2,12 +2,12 @@
 
 <div align="center">
     <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="https://ag-grid.com/studio/images/ag-studio-logo-dark.svg"/>
-        <source media="(prefers-color-scheme: light)" srcset="https://ag-grid.com/studio/images/ag-studio-logo.svg"/>
-        <img width="100%" alt="AG Studio Logo" src="https://ag-grid.com/studio/images/ag-studio-logo.svg"/>
+        <source media="(prefers-color-scheme: dark)" srcset="https://www.ag-grid.com/studio/images/ag-studio-logo-dark.svg"/>
+        <source media="(prefers-color-scheme: light)" srcset="https://www.ag-grid.com/studio/images/ag-studio-logo.svg"/>
+        <img width="100%" alt="AG Studio Logo" src="https://www.ag-grid.com/studio/images/ag-studio-logo.svg"/>
     </picture>
     <div align="center">
-        <h4><a href="https://ag-grid.com/studio/">Website</a> · <a href="https://ag-grid.com/studio/vue/overview/">Documentation</a> · <a href="https://ag-grid.com/studio/example/">Live Demo</a></h4>
+        <h4><a href="https://www.ag-grid.com/studio/">Website</a> · <a href="https://www.ag-grid.com/studio/vue/overview/">Documentation</a> · <a href="https://www.ag-grid.com/studio/example/">Live Demo</a></h4>
     </div>
     <br>
     <a href="https://www.npmjs.com/package/ag-studio-vue3">
@@ -18,18 +18,18 @@
     </a>
     <br><br>
     <!-- START MAIN DESCRIPTION -->
-    <p><strong><a href="https://ag-grid.com/studio/vue/overview/"><img src="https://ag-grid.com/images/fw-logos/vue.svg" height="16" width="16" alt="Vue Logo"> AG Studio</a></strong> is a <strong>Vue</strong> Embedded Analytics component for creating dashboards, built on top of <a href="https://ag-grid.com">AG Grid</a> and <a href="https://ag-grid.com/charts">AG Charts</a>.</p>
+    <p><strong><a href="https://www.ag-grid.com/studio/vue/overview/"><img src="https://www.ag-grid.com/images/fw-logos/vue.svg" height="16" width="16" alt="Vue Logo"> AG Studio</a></strong> is a <strong>Vue</strong> Embedded Analytics component for creating dashboards, built on top of <a href="https://www.ag-grid.com/">AG Grid</a> and <a href="https://www.ag-grid.com/charts/">AG Charts</a>.</p>
     <!-- END MAIN DESCRIPTION -->
     <br>
 </div>
 
 <picture>
-    <source srcset="https://ag-grid.com/studio/images/studio-footer.png" media="(prefers-color-scheme: light)">
-    <source srcset="https://ag-grid.com/studio/images/studio-footer-dark.png" media="(prefers-color-scheme: dark)">
-    <img src="https://ag-grid.com/studio/images/studio-footer.png" alt="AG Studio Preview">
+    <source srcset="https://www.ag-grid.com/studio/images/studio-footer.png" media="(prefers-color-scheme: light)">
+    <source srcset="https://www.ag-grid.com/studio/images/studio-footer-dark.png" media="(prefers-color-scheme: dark)">
+    <img src="https://www.ag-grid.com/studio/images/studio-footer.png" alt="AG Studio Preview">
 </picture>
 <div align="right">
-    <a href="https://ag-grid.com/studio/example/"><br><img alt="Live Demo" src="https://img.shields.io/badge/ag--grid.com%2Fstudio-Live%20Demo-blue?style=for-the-badge"></a>
+    <a href="https://www.ag-grid.com/studio/example/"><br><img alt="Live Demo" src="https://img.shields.io/badge/ag--grid.com%2Fstudio-Live%20Demo-blue?style=for-the-badge"></a>
 </div>
 
 ## Overview
@@ -46,13 +46,13 @@ You can ship pre-built reports in code so users see a finished dashboard on firs
 
 ### Features
 
-| Feature                                                                    | Description                                                                                                                                                                                                                                                                 |
-| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Drag & Drop Report Builder](https://ag-grid.com/studio/vue/modes-layout/) | Bar charts, line charts, pie charts, grids, KPI tiles, text, and images on a drag-and-drop canvas. Design in **edit mode**, then switch to **view mode** to lock the layout while keeping the dashboard fully interactive.                                                  |
-| [Data Engine](https://ag-grid.com/studio/vue/data/)                        | Provide one or more data sources and the data engine automatically manages joins across tables via relationships, aggregation, filtering, and calculated fields through an expression language. No query layer required.                                                    |
-| [Advanced Filtering](https://ag-grid.com/studio/vue/filters/)              | Page-level filters, widget-level filters, and cross-filtering between widgets are all built in. Users can filter from the filters panel, from on-canvas filter widgets (list, button, and date), or by clicking data points in charts to cross-filter the rest of the page. |
-| [Theming](https://ag-grid.com/studio/vue/theming/)                         | Full customisation via the Theming API. Override colours, fonts, spacing, and borders across the Studio UI, grid widgets, and chart widgets independently. Light and dark modes are supported out of the box.                                                               |
-| [State Management](https://ag-grid.com/studio/vue/state/)                  | The entire dashboard state (pages, widgets, layout, and filters) is captured in a single serialisable JSON object. Save and restore state to persist reports, and let users switch between saved reports.                                                                   |
+| Feature                                                                        | Description                                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Drag & Drop Report Builder](https://www.ag-grid.com/studio/vue/modes-layout/) | Bar charts, line charts, pie charts, grids, KPI tiles, text, and images on a drag-and-drop canvas. Design in **edit mode**, then switch to **view mode** to lock the layout while keeping the dashboard fully interactive.                                                  |
+| [Data Engine](https://www.ag-grid.com/studio/vue/data/)                        | Provide one or more data sources and the data engine automatically manages joins across tables via relationships, aggregation, filtering, and calculated fields through an expression language. No query layer required.                                                    |
+| [Advanced Filtering](https://www.ag-grid.com/studio/vue/filters/)              | Page-level filters, widget-level filters, and cross-filtering between widgets are all built in. Users can filter from the filters panel, from on-canvas filter widgets (list, button, and date), or by clicking data points in charts to cross-filter the rest of the page. |
+| [Theming](https://www.ag-grid.com/studio/vue/theming/)                         | Full customisation via the Theming API. Override colours, fonts, spacing, and borders across the Studio UI, grid widgets, and chart widgets independently. Light and dark modes are supported out of the box.                                                               |
+| [State Management](https://www.ag-grid.com/studio/vue/state/)                  | The entire dashboard state (pages, widgets, layout, and filters) is captured in a single serialisable JSON object. Save and restore state to persist reports, and let users switch between saved reports.                                                                   |
 
 ## Quick Start
 
@@ -128,11 +128,11 @@ const data = { /* ... */ };
 
 That's it — users can now build reports using the drag-and-drop editor.
 
-> **Note:** For more information on building dashboards with AG Studio, refer to our [Quick Start](https://ag-grid.com/studio/vue/quick-start/) guide or step through the full [Tutorial](https://ag-grid.com/studio/vue/tutorial/).
+> **Note:** For more information on building dashboards with AG Studio, refer to our [Quick Start](https://www.ag-grid.com/studio/vue/quick-start/) guide or step through the full [Tutorial](https://www.ag-grid.com/studio/vue/tutorial/).
 
 ## User Guides
 
-Our [User Guides](https://ag-grid.com/studio/vue/user-interface/) contain comprehensive guides to help users understand how to use AG Studio.
+Our [User Guides](https://www.ag-grid.com/studio/vue/user-interface/) contain comprehensive guides to help users understand how to use AG Studio.
 
 ## Support
 
@@ -142,9 +142,9 @@ AG Studio customers have access to dedicated support via [ZenDesk](https://ag-gr
 
 `ag-studio` has a **Commercial** license. See the [LICENSE file](https://www.ag-grid.com/studio/licenses/ag-studio-vue3/LICENSE.html) for more info.
 
-[Request a free 45-day enterprise trial](https://ag-grid.com/studio/license-pricing/?tab=trial) to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.
+[Request a free 45-day enterprise trial](https://www.ag-grid.com/studio/license-pricing/?tab=trial) to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.
 
-<div><h2><img vertical-align="middle" width="32" height="32" src="https://ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Grid Logo">&nbsp;AG Grid</h2></div>
+<div><h2><img vertical-align="middle" width="32" height="32" src="https://www.ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Grid Logo">&nbsp;AG Grid</h2></div>
 
 AG Studio is built on top of [AG Grid](https://www.ag-grid.com/) — the best JavaScript Data Grid in the world. If you need a standalone data grid with sorting, filtering, grouping, pivoting, and more, check out [AG Grid Repo](https://github.com/ag-grid/ag-grid).
 
@@ -154,7 +154,7 @@ AG Studio is built on top of [AG Grid](https://www.ag-grid.com/) — the best Ja
     <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/kitchen-sink-demo-light.gif?raw=true" alt="High Performance Demo">
 </picture>
 
-<div><h2><img vertical-align="middle" width="32" height="32" src="https://ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Charts Logo">&nbsp;AG Charts</h2></div>
+<div><h2><img vertical-align="middle" width="32" height="32" src="https://www.ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Charts Logo">&nbsp;AG Charts</h2></div>
 
 AG Studio is built on top of [AG Charts](https://www.ag-grid.com/charts/) — the best JavaScript Charting library in the world. If you need standalone charts with bar, line, pie, scatter, treemap, and more, check out [AG Charts](https://github.com/ag-grid/ag-charts).
 

package/dist/main.mjs

@@ -1,9 +1,10 @@
-var E = Object.defineProperty;
-var F = (c, e, t) => e in c ? E(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
-var f = (c, e, t) => F(c, typeof e != "symbol" ? e + "" : e, t);
-import { isRef as w, isReactive as I, isProxy as x, toRaw as P, defineComponent as b, createVNode as L, render as S, mergeDefaults as j, useTemplateRef as M, shallowRef as m, toRefs as D, watch as W, onMounted as $, getCurrentInstance as y, markRaw as B, onUnmounted as V, createElementBlock as G, openBlock as N } from "vue";
-import { _AgLogger as _, _BaseComponentWrapper as U, _VanillaFrameworkOverrides as z, _GET_SHALLOW_STUDIO_PROPERTIES as H, _GET_ALL_STUDIO_PROPERTIES as A, _processPropertyChanges as Y, _combineAttributesAndStudioProperties as q, _PUBLIC_EVENT_HANDLERS_MAP as J, _createStudio as K, _ALWAYS_SYNC_GLOBAL_EVENTS as Q } from "ag-studio";
-function X() {
+var Y = Object.defineProperty;
+var q = (l, e, t) => e in l ? Y(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var v = (l, e, t) => q(l, typeof e != "symbol" ? e + "" : e, t);
+import { isRef as E, isReactive as G, isProxy as D, toRaw as F, defineComponent as x, createVNode as J, render as L, ref as B, useTemplateRef as R, shallowRef as y, inject as $, onMounted as A, onUnmounted as T, createElementBlock as O, openBlock as w, normalizeStyle as V, createBlock as N, createCommentVNode as U, unref as I, mergeDefaults as Q, toRefs as X, watch as Z, getCurrentInstance as S, markRaw as ee } from "vue";
+import { _AgLogger as P, _BaseComponentWrapper as te, _VanillaFrameworkOverrides as oe, _GridWidgetCore as re, _STUDIO_GRID_MODULES as z, _PivotGridWidgetCore as ne, _createWidgetDefaults as se, _GET_SHALLOW_STUDIO_PROPERTIES as ie, _GET_ALL_STUDIO_PROPERTIES as M, _processPropertyChanges as ae, _combineAttributesAndStudioProperties as de, _PUBLIC_EVENT_HANDLERS_MAP as le, _createStudio as ce, _ALWAYS_SYNC_GLOBAL_EVENTS as ue, _createWidgets as pe } from "ag-studio";
+import { AgGridVue as H } from "ag-grid-vue3";
+function fe() {
   return {
     studioProperties: {},
     // @START_DEFAULTS@
@@ -17,6 +18,7 @@ function X() {
     themeStyleContainer: void 0,
     getDocument: void 0,
     suppressTouch: void 0,
+    suppressKeyboard: void 0,
     localeText: void 0,
     aiText: void 0,
     getLocaleText: void 0,
@@ -25,8 +27,11 @@ function X() {
     initialState: void 0,
     data: void 0,
     mode: void 0,
+    history: void 0,
+    enableFilterEditingInViewMode: void 0,
     layout: void 0,
     ai: void 0,
+    aiToolDisplay: void 0,
     dataOptions: void 0,
     panels: void 0,
     page: void 0,
@@ -43,166 +48,179 @@ function X() {
     // @END_EVENT_PROPS@
   };
 }
-function Z(c) {
-  if (!c || typeof c != "object" || Array.isArray(c))
+function he(l) {
+  if (!l || typeof l != "object" || Array.isArray(l))
     return !1;
-  const e = Object.getPrototypeOf(c);
+  const e = Object.getPrototypeOf(l);
   return e !== null && e !== Object.prototype;
 }
-function ee(c) {
-  if (c == null || typeof c != "object")
-    return c;
+function me(l) {
+  if (l == null || typeof l != "object")
+    return l;
   const e = /* @__PURE__ */ new WeakSet(), t = (o) => {
     if (o == null || typeof o != "object")
       return o;
-    if (w(o))
+    if (E(o))
       return t(o.value);
-    if (I(o) || x(o))
-      return t(P(o));
-    if (Z(o))
-      return P(o);
+    if (G(o) || D(o))
+      return t(F(o));
+    if (he(o))
+      return F(o);
     if (Array.isArray(o)) {
-      let n = !1;
-      for (let d = 0; d < o.length; d++) {
-        const r = o[d];
-        if (r !== null && typeof r == "object") {
-          if (w(r) || I(r) || x(r)) {
-            n = !0;
+      let r = !1;
+      for (let i = 0; i < o.length; i++) {
+        const n = o[i];
+        if (n !== null && typeof n == "object") {
+          if (E(n) || G(n) || D(n)) {
+            r = !0;
             break;
           }
-          n = !0;
+          r = !0;
           break;
         }
       }
-      return n ? o.map((d) => t(d)) : o;
+      return r ? o.map((i) => t(i)) : o;
     }
     if (e.has(o))
       return o;
     e.add(o);
-    const s = Object.keys(o), a = {};
-    for (let n = 0; n < s.length; n++)
-      a[s[n]] = t(o[s[n]]);
-    return a;
+    const a = Object.keys(o), d = {};
+    for (let r = 0; r < a.length; r++)
+      d[a[r]] = t(o[a[r]]);
+    return d;
   };
-  return t(c);
+  return t(l);
 }
-const v = class v {
+const b = class b {
   static getComponentDefinition(e, t) {
     let o;
-    return typeof e == "string" ? o = this.searchForComponentInstance(t, e) : o = { extends: b({ ...e }) }, o || _.error(`Could not find component with name of ${e}. Is it in Vue.components?`), o.extends ? (o.extends.setup && (o.setup = o.extends.setup), o.extends.props = this.addParamsToProps(o.extends.props)) : o.props = this.addParamsToProps(o.props), o;
+    return typeof e == "string" ? o = this.searchForComponentInstance(t, e) : o = { extends: x({ ...e }) }, o || P.error(`Could not find component with name of ${e}. Is it in Vue.components?`), o.extends ? (o.extends.setup && (o.setup = o.extends.setup), o.extends.props = this.addParamsToProps(o.extends.props)) : o.props = this.addParamsToProps(o.props), o;
   }
   static addParamsToProps(e) {
     return !e || Array.isArray(e) && e.indexOf("params") === -1 ? e = ["params", ...e || []] : typeof e == "object" && !e.params && (e.params = {
       type: Object
     }), e;
   }
-  static createAndMountComponent(e, t, o, s) {
-    const a = v.getComponentDefinition(e, o);
-    if (!a)
+  static createAndMountComponent(e, t, o, a) {
+    const d = b.getComponentDefinition(e, o);
+    if (!d)
       return;
-    const { vNode: n, destroy: d, el: r } = this.mount(
-      a,
+    const { vNode: r, destroy: i, el: n } = this.mount(
+      d,
       { params: Object.freeze(t) },
       o,
-      s || {}
+      a || {}
     );
     return {
-      componentInstance: n.component.proxy,
-      element: r,
-      destroy: d
+      componentInstance: r.component.proxy,
+      element: n,
+      destroy: i
     };
   }
-  static mount(e, t, o, s) {
-    let a = L(e, t);
-    a.appContext = { ...o.appContext, provides: s };
-    let n = document.createDocumentFragment();
-    return S(a, n), { vNode: a, destroy: () => {
-      n && S(null, n), n = null, a = null;
-    }, el: n };
+  static mount(e, t, o, a) {
+    let d = J(e, t);
+    d.appContext = { ...o.appContext, provides: a };
+    let r = document.createDocumentFragment();
+    return L(d, r), { vNode: d, destroy: () => {
+      r && L(null, r), r = null, d = null;
+    }, el: r };
   }
-  static searchForComponentInstance(e, t, o = 10, s = !1) {
-    let a = this.componentCache.get(e);
-    if (a) {
-      const i = a.get(t);
-      if (i !== void 0)
-        return i;
+  static searchForComponentInstance(e, t, o = 10, a = !1) {
+    let d = this.componentCache.get(e);
+    if (d) {
+      const s = d.get(t);
+      if (s !== void 0)
+        return s;
     }
-    let n = null, d = 0, r = e.parent;
-    for (; !n && r && r.components && ++d < o; )
-      r.components && r.components[t] && (n = r.components[t]), r = r.parent;
-    for (d = 0, r = e.parent; !n && r && r.$options && ++d < o; ) {
-      const i = r;
-      i.$options && i.$options.components && i.$options.components[t] ? n = i.$options.components[t] : i[t] && (n = i[t]), r = r.parent;
+    let r = null, i = 0, n = e.parent;
+    for (; !r && n && n.components && ++i < o; )
+      n.components && n.components[t] && (r = n.components[t]), n = n.parent;
+    for (i = 0, n = e.parent; !r && n && n.$options && ++i < o; ) {
+      const s = n;
+      s.$options && s.$options.components && s.$options.components[t] ? r = s.$options.components[t] : s[t] && (r = s[t]), n = n.parent;
     }
-    for (d = 0, r = e.parent; !n && r && ++d < o; ) {
-      if (r.exposed) {
-        const i = r;
-        i.exposed && i.exposed[t] ? n = i.exposed[t] : i[t] && (n = i[t]);
+    for (i = 0, n = e.parent; !r && n && ++i < o; ) {
+      if (n.exposed) {
+        const s = n;
+        s.exposed && s.exposed[t] ? r = s.exposed[t] : s[t] && (r = s[t]);
       }
-      r = r.parent;
+      n = n.parent;
     }
-    if (!n) {
-      const i = e.appContext.components;
-      i && i[t] && (n = i[t]);
+    if (!r) {
+      const s = e.appContext.components;
+      s && s[t] && (r = s[t]);
     }
-    return !n && !s ? (_.error(`Could not find component with name of ${t}. Is it in Vue.components?`), null) : (n && (a || (a = /* @__PURE__ */ new Map(), this.componentCache.set(e, a)), a.set(t, n)), n);
+    return !r && !a ? (P.error(`Could not find component with name of ${t}. Is it in Vue.components?`), null) : (r && (d || (d = /* @__PURE__ */ new Map(), this.componentCache.set(e, d)), d.set(t, r)), r);
   }
 };
 // WeakMap avoids repeat component tree traversals and allows GC of parent components
-f(v, "componentCache", /* @__PURE__ */ new WeakMap());
-let h = v;
-class te extends U {
+v(b, "componentCache", /* @__PURE__ */ new WeakMap());
+let C = b;
+const k = Symbol("ag-studio-beans"), j = "initialised";
+class ve extends te {
   constructor(t, o) {
     super();
-    f(this, "parent");
-    f(this, "provides");
+    v(this, "parent");
+    v(this, "provides");
     this.parent = t, this.provides = o;
   }
   createWrapper(t) {
-    return new oe(this, t);
+    return new ye(this, t);
   }
   createComponent(t, o) {
-    return h.createAndMountComponent(t, o, this.parent, this.provides);
+    return C.createAndMountComponent(t, o, this.parent, this.provides);
+  }
+  /** Keeps `provides` private to this class; see `DynamicComponent.wireBeans`. */
+  publishBeans(t) {
+    this.provides[k] = t;
   }
   destroy() {
     this.parent = null;
   }
 }
-class oe {
+class ye {
   constructor(e, t) {
-    f(this, "componentInstance");
-    f(this, "element");
-    f(this, "unmount");
+    v(this, "componentInstance");
+    v(this, "element");
+    v(this, "unmount");
     this.frameworkCompWrapper = e, this.component = t;
   }
   getGui() {
     return this.element;
   }
+  /**
+   * Vue has no equivalent of `agInit`: a component's `setup()` has already run by the time an
+   * instance exists, so the beans cannot be handed to it. They go onto the provides object every
+   * wrapped component is mounted against instead. The studio's bean context calls this before
+   * `init`, so they are there before the mount that follows.
+   */
+  wireBeans(e) {
+    this.frameworkCompWrapper.publishBeans(e);
+  }
   init(e) {
     const {
       componentInstance: t,
       element: o,
-      destroy: s
+      destroy: a
     } = this.frameworkCompWrapper.createComponent(this.component, e);
-    this.componentInstance = t, this.unmount = s, this.element = o.firstElementChild ?? o;
+    return this.componentInstance = t, this.unmount = a, this.element = o.firstElementChild ?? o, this.hasMethod(j) ? this.callMethod(j, []) : void 0;
   }
   async refresh(e) {
-    var t, o;
-    return (o = (t = this.componentInstance).refresh) == null ? void 0 : o.call(t, e);
+    return this.hasMethod("refresh") ? this.callMethod("refresh", [e]) : void 0;
   }
   hasMethod(e) {
-    var o, s;
+    var o, a;
     const t = this.componentInstance;
-    return t[e] ? !0 : ((o = t.$.exposed) == null ? void 0 : o[e]) != null || ((s = t.exposed) == null ? void 0 : s[e]) != null || t.$.setupState[e] != null;
+    return t[e] ? !0 : ((o = t.$.exposed) == null ? void 0 : o[e]) != null || ((a = t.exposed) == null ? void 0 : a[e]) != null || t.$.setupState[e] != null;
   }
   callMethod(e, t) {
-    var s, a;
+    var a, d;
     const o = this.componentInstance;
     if (o[e])
       return o[e](...t);
     {
-      const n = ((s = o.$.exposed) == null ? void 0 : s[e]) || ((a = o.exposed) == null ? void 0 : a[e]) || o.$.setupState[e];
-      return n == null ? void 0 : n.apply(o, t);
+      const r = ((a = o.$.exposed) == null ? void 0 : a[e]) || ((d = o.exposed) == null ? void 0 : d[e]) || o.$.setupState[e];
+      return r == null ? void 0 : r.apply(o, t);
     }
   }
   addMethod(e, t) {
@@ -219,7 +237,7 @@ class oe {
     typeof ((e = this.componentInstance) == null ? void 0 : e.destroy) == "function" && this.componentInstance.destroy(), (t = this.unmount) == null || t.call(this);
   }
 }
-class ne extends z {
+class ge extends oe {
   constructor(e) {
     super("vue"), this.parent = e;
   }
@@ -228,10 +246,10 @@ class ne extends z {
    * if a given component is within that context - this method provides this
    */
   frameworkComponent(e, t) {
-    let o = h.searchForComponentInstance(this.parent, e, 10, !0) ? e : null;
+    let o = C.searchForComponentInstance(this.parent, e, 10, !0) ? e : null;
     if (!o && t && t[e]) {
-      const s = t[e];
-      o = h.searchForComponentInstance(this.parent, s, 10, !0) ? s : null;
+      const a = t[e];
+      o = C.searchForComponentInstance(this.parent, a, 10, !0) ? a : null;
     }
     return o;
   }
@@ -239,9 +257,127 @@ class ne extends z {
     return e !== null && typeof e == "object" && !Array.isArray(e);
   }
 }
-const re = { ref: "root" }, ce = /* @__PURE__ */ b({
+const _e = /* @__PURE__ */ x({
+  __name: "GridWidget",
+  props: {
+    params: {}
+  },
+  setup(l, { expose: e }) {
+    const t = l, o = B({}), a = R("eRoot"), d = y(), r = $(k, void 0);
+    let i, n, s;
+    A(() => {
+      const f = a.value;
+      if (!r || !f) {
+        P.error("GridWidget can only be used as the component of a studio grid widget.");
+        return;
+      }
+      i = new re({
+        beans: r,
+        createGrid: (u) => new Promise((h) => {
+          s = () => h(void 0), d.value = {
+            ...u,
+            onGridReady: (c) => {
+              var p;
+              s = void 0;
+              try {
+                (p = u.onGridReady) == null || p.call(u, c);
+              } finally {
+                h(c.api);
+              }
+            }
+          };
+        }),
+        setCssProperties: (u) => {
+          o.value = u;
+        },
+        getWidth: () => f.offsetWidth
+      }), n = i.init(t.params);
+    }), T(() => {
+      s == null || s(), s = void 0, i == null || i.destroy(), i = void 0;
+    });
+    function g() {
+      return n;
+    }
+    function _(f) {
+      return i == null ? void 0 : i.refresh(f);
+    }
+    return e({ initialised: g, refresh: _ }), (f, u) => (w(), O("div", {
+      ref_key: "eRoot",
+      ref: a,
+      class: "ag-studio-grid-widget",
+      style: V(o.value)
+    }, [
+      d.value ? (w(), N(I(H), {
+        key: 0,
+        style: { width: "100%", height: "100%" },
+        gridOptions: d.value,
+        modules: I(z)
+      }, null, 8, ["gridOptions", "modules"])) : U("", !0)
+    ], 4));
+  }
+}), we = /* @__PURE__ */ x({
+  __name: "PivotGridWidget",
+  props: {
+    params: {}
+  },
+  setup(l, { expose: e }) {
+    const t = l, o = B({}), a = R("eRoot"), d = y(), r = $(k, void 0);
+    let i, n, s;
+    A(() => {
+      const f = a.value;
+      if (!r || !f) {
+        P.error("PivotGridWidget can only be used as the component of a studio pivot grid widget.");
+        return;
+      }
+      i = new ne({
+        beans: r,
+        createGrid: (u) => new Promise((h) => {
+          s = () => h(void 0), d.value = {
+            ...u,
+            onGridReady: (c) => {
+              var p;
+              s = void 0;
+              try {
+                (p = u.onGridReady) == null || p.call(u, c);
+              } finally {
+                h(c.api);
+              }
+            }
+          };
+        }),
+        setCssProperties: (u) => {
+          o.value = u;
+        }
+      }), n = i.init(t.params);
+    }), T(() => {
+      s == null || s(), s = void 0, i == null || i.destroy(), i = void 0;
+    });
+    function g() {
+      return n;
+    }
+    function _(f) {
+      return i == null ? void 0 : i.refresh(f);
+    }
+    return e({ initialised: g, refresh: _ }), (f, u) => (w(), O("div", {
+      ref_key: "eRoot",
+      ref: a,
+      class: "ag-studio-pivot-grid-widget",
+      style: V(o.value)
+    }, [
+      d.value ? (w(), N(I(H), {
+        key: 0,
+        style: { width: "100%", height: "100%" },
+        gridOptions: d.value,
+        modules: I(z)
+      }, null, 8, ["gridOptions", "modules"])) : U("", !0)
+    ], 4));
+  }
+}), K = se({
+  grid: _e,
+  "pivot-grid": we
+}), Ce = { ref: "root" }, Se = /* @__PURE__ */ x({
   __name: "AgStudio",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ Q({
     studioProperties: {},
     modules: {},
     tabIndex: {},
@@ -254,6 +390,7 @@ const re = { ref: "root" }, ce = /* @__PURE__ */ b({
     themeStyleContainer: { type: Function },
     getDocument: { type: Function },
     suppressTouch: { type: Boolean },
+    suppressKeyboard: {},
     localeText: {},
     aiText: {},
     getLocaleText: { type: Function },
@@ -262,8 +399,11 @@ const re = { ref: "root" }, ce = /* @__PURE__ */ b({
     initialState: {},
     data: {},
     mode: {},
+    history: {},
+    enableFilterEditingInViewMode: { type: Boolean },
     layout: {},
-    ai: {},
+    ai: { type: [Object, Function] },
+    aiToolDisplay: {},
     dataOptions: {},
     panels: {},
     page: { type: [Object, Function] },
@@ -275,58 +415,65 @@ const re = { ref: "root" }, ce = /* @__PURE__ */ b({
     "onRender-state-changed": {},
     "onStudio-pre-destroyed": {},
     "onError-raised": {}
-  }, X()),
-  setup(c, { expose: e }) {
-    const t = c, o = M("root"), s = m(void 0), a = m(!1), n = m(!1), d = m(!1);
-    let r = {}, i = !1;
-    const T = D(t), R = new Set(H());
-    A().filter((l) => l != "studioProperties").forEach((l) => {
-      const u = T[l];
-      u && W(
-        u,
-        (p, g) => {
-          k(l, p);
+  }, fe()),
+  setup(l, { expose: e }) {
+    const t = l, o = R("root"), a = y(void 0), d = y(!1), r = y(!1), i = y(!1);
+    let n = {}, s = !1;
+    const g = X(t), _ = new Set(ie());
+    M().filter((c) => c != "studioProperties").forEach((c) => {
+      const p = g[c];
+      p && Z(
+        p,
+        (m, W) => {
+          u(c, m);
         },
-        R.has(l) ? void 0 : { deep: !0 }
+        _.has(c) ? void 0 : { deep: !0 }
       );
     });
-    const C = (l) => (u) => {
-      if (n.value)
+    const f = (c) => (p) => {
+      if (r.value)
         return;
-      u === "apiReady" && (d.value = !0);
-      const p = Q.has(u);
-    }, k = (l, u, p) => {
-      if (a.value) {
-        let g = u;
-        r[l] = g, i || (i = !0, queueMicrotask(() => {
-          i = !1, !n.value && s.value && Y(r, s.value), r = {};
+      p === "apiReady" && (i.value = !0);
+      const m = ue.has(p);
+    }, u = (c, p, m) => {
+      if (d.value) {
+        let W = p;
+        n[c] = W, s || (s = !0, queueMicrotask(() => {
+          s = !1, !r.value && a.value && ae(n, a.value), n = {};
         }));
       }
-    }, O = () => Object.create(y().provides);
-    return $(() => {
-      const l = new te(y(), O()), u = {
-        globalListener: C(),
-        globalSyncListener: C(!0),
-        frameworkOverrides: new ne(y()),
+    }, h = () => Object.create(S().provides);
+    return A(() => {
+      const c = new ve(S(), h()), p = {
+        globalListener: f(),
+        globalSyncListener: f(!0),
+        frameworkOverrides: new ge(S()),
         providedBeanInstances: {
-          frameworkCompWrapper: l
+          frameworkCompWrapper: c,
+          widgetDefaults: K
         },
         modules: t.modules
-      }, p = B(
-        q(ee(t.studioProperties), t, [
-          ...A(),
-          ...Object.values(J)
+      }, m = ee(
+        de(me(t.studioProperties), t, [
+          ...M(),
+          ...Object.values(le)
         ])
       );
-      s.value = K(o.value, p, u), a.value = !0;
-    }), V(() => {
-      var l;
-      a.value && ((l = s == null ? void 0 : s.value) == null || l.destroy(), n.value = !0);
+      a.value = ce(o.value, m, p), d.value = !0;
+    }), T(() => {
+      var c;
+      d.value && ((c = a == null ? void 0 : a.value) == null || c.destroy(), r.value = !0);
     }), e({
-      api: s
-    }), (l, u) => (N(), G("div", re, null, 512));
+      api: a
+    }), (c, p) => (w(), O("div", Ce, null, 512));
   }
 });
+function Re(l) {
+  return pe(l, K);
+}
 export {
-  ce as AgStudio
+  Se as AgStudio,
+  _e as GridWidget,
+  we as PivotGridWidget,
+  Re as createWidgets
 };

package/dist/main.umd.js

@@ -1 +1 @@
-(function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("ag-studio")):typeof define=="function"&&define.amd?define(["exports","vue","ag-studio"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f.AgStudio={},f.Vue,f.agStudio))})(this,function(f,n,d){"use strict";var L=Object.defineProperty;var F=(f,n,d)=>n in f?L(f,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):f[n]=d;var y=(f,n,d)=>F(f,typeof n!="symbol"?n+"":n,d);function x(){return{studioProperties:{},tabIndex:void 0,enableRtl:void 0,popupParent:void 0,theme:void 0,loadThemeGoogleFonts:void 0,themeCssLayer:void 0,styleNonce:void 0,themeStyleContainer:void 0,getDocument:void 0,suppressTouch:void 0,localeText:void 0,aiText:void 0,getLocaleText:void 0,studioId:void 0,context:void 0,initialState:void 0,data:void 0,mode:void 0,layout:void 0,ai:void 0,dataOptions:void 0,panels:void 0,page:void 0,widgets:void 0,components:void 0,"onState-updated":void 0,"onApi-ready":void 0,"onStudio-ready":void 0,"onRender-state-changed":void 0,"onStudio-pre-destroyed":void 0,"onError-raised":void 0}}function g(u){if(!u||typeof u!="object"||Array.isArray(u))return!1;const e=Object.getPrototypeOf(u);return e!==null&&e!==Object.prototype}function P(u){if(u==null||typeof u!="object")return u;const e=new WeakSet,o=t=>{if(t==null||typeof t!="object")return t;if(n.isRef(t))return o(t.value);if(n.isReactive(t)||n.isProxy(t))return o(n.toRaw(t));if(g(t))return n.toRaw(t);if(Array.isArray(t)){let r=!1;for(let l=0;l<t.length;l++){const s=t[l];if(s!==null&&typeof s=="object"){if(n.isRef(s)||n.isReactive(s)||n.isProxy(s)){r=!0;break}r=!0;break}}return r?t.map(l=>o(l)):t}if(e.has(t))return t;e.add(t);const i=Object.keys(t),a={};for(let r=0;r<i.length;r++)a[i[r]]=o(t[i[r]]);return a};return o(u)}const v=class v{static getComponentDefinition(e,o){let t;return typeof e=="string"?t=this.searchForComponentInstance(o,e):t={extends:n.defineComponent({...e})},t||d._AgLogger.error(`Could not find component with name of ${e}. Is it in Vue.components?`),t.extends?(t.extends.setup&&(t.setup=t.extends.setup),t.extends.props=this.addParamsToProps(t.extends.props)):t.props=this.addParamsToProps(t.props),t}static addParamsToProps(e){return!e||Array.isArray(e)&&e.indexOf("params")===-1?e=["params",...e||[]]:typeof e=="object"&&!e.params&&(e.params={type:Object}),e}static createAndMountComponent(e,o,t,i){const a=v.getComponentDefinition(e,t);if(!a)return;const{vNode:r,destroy:l,el:s}=this.mount(a,{params:Object.freeze(o)},t,i||{});return{componentInstance:r.component.proxy,element:s,destroy:l}}static mount(e,o,t,i){let a=n.createVNode(e,o);a.appContext={...t.appContext,provides:i};let r=document.createDocumentFragment();return n.render(a,r),{vNode:a,destroy:()=>{r&&n.render(null,r),r=null,a=null},el:r}}static searchForComponentInstance(e,o,t=10,i=!1){let a=this.componentCache.get(e);if(a){const c=a.get(o);if(c!==void 0)return c}let r=null,l=0,s=e.parent;for(;!r&&s&&s.components&&++l<t;)s.components&&s.components[o]&&(r=s.components[o]),s=s.parent;for(l=0,s=e.parent;!r&&s&&s.$options&&++l<t;){const c=s;c.$options&&c.$options.components&&c.$options.components[o]?r=c.$options.components[o]:c[o]&&(r=c[o]),s=s.parent}for(l=0,s=e.parent;!r&&s&&++l<t;){if(s.exposed){const c=s;c.exposed&&c.exposed[o]?r=c.exposed[o]:c[o]&&(r=c[o])}s=s.parent}if(!r){const c=e.appContext.components;c&&c[o]&&(r=c[o])}return!r&&!i?(d._AgLogger.error(`Could not find component with name of ${o}. Is it in Vue.components?`),null):(r&&(a||(a=new Map,this.componentCache.set(e,a)),a.set(o,r)),r)}};y(v,"componentCache",new WeakMap);let C=v;class _ extends d._BaseComponentWrapper{constructor(o,t){super();y(this,"parent");y(this,"provides");this.parent=o,this.provides=t}createWrapper(o){return new A(this,o)}createComponent(o,t){return C.createAndMountComponent(o,t,this.parent,this.provides)}destroy(){this.parent=null}}class A{constructor(e,o){y(this,"componentInstance");y(this,"element");y(this,"unmount");this.frameworkCompWrapper=e,this.component=o}getGui(){return this.element}init(e){const{componentInstance:o,element:t,destroy:i}=this.frameworkCompWrapper.createComponent(this.component,e);this.componentInstance=o,this.unmount=i,this.element=t.firstElementChild??t}async refresh(e){var o,t;return(t=(o=this.componentInstance).refresh)==null?void 0:t.call(o,e)}hasMethod(e){var t,i;const o=this.componentInstance;return o[e]?!0:((t=o.$.exposed)==null?void 0:t[e])!=null||((i=o.exposed)==null?void 0:i[e])!=null||o.$.setupState[e]!=null}callMethod(e,o){var i,a;const t=this.componentInstance;if(t[e])return t[e](...o);{const r=((i=t.$.exposed)==null?void 0:i[e])||((a=t.exposed)==null?void 0:a[e])||t.$.setupState[e];return r==null?void 0:r.apply(t,o)}}addMethod(e,o){this[e]=o}processMethod(e,o){return e==="refresh"&&(this.componentInstance.params=Object.freeze(o[0])),this.hasMethod(e)?this.callMethod(e,o):e==="refresh"}getFrameworkComponentInstance(){return this.componentInstance}destroy(){var e,o;typeof((e=this.componentInstance)==null?void 0:e.destroy)=="function"&&this.componentInstance.destroy(),(o=this.unmount)==null||o.call(this)}}class R extends d._VanillaFrameworkOverrides{constructor(e){super("vue"),this.parent=e}frameworkComponent(e,o){let t=C.searchForComponentInstance(this.parent,e,10,!0)?e:null;if(!t&&o&&o[e]){const i=o[e];t=C.searchForComponentInstance(this.parent,i,10,!0)?i:null}return t}isFrameworkComponent(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}}const T={ref:"root"},b=n.defineComponent({__name:"AgStudio",props:n.mergeDefaults({studioProperties:{},modules:{},tabIndex:{},enableRtl:{type:Boolean},popupParent:{},theme:{},loadThemeGoogleFonts:{type:Boolean},themeCssLayer:{},styleNonce:{},themeStyleContainer:{type:Function},getDocument:{type:Function},suppressTouch:{type:Boolean},localeText:{},aiText:{},getLocaleText:{type:Function},studioId:{},context:{},initialState:{},data:{},mode:{},layout:{},ai:{},dataOptions:{},panels:{},page:{type:[Object,Function]},widgets:{type:[Object,Function]},components:{},"onState-updated":{},"onApi-ready":{},"onStudio-ready":{},"onRender-state-changed":{},"onStudio-pre-destroyed":{},"onError-raised":{}},x()),setup(u,{expose:e}){const o=u,t=n.useTemplateRef("root"),i=n.shallowRef(void 0),a=n.shallowRef(!1),r=n.shallowRef(!1),l=n.shallowRef(!1);let s={},c=!1;const S=n.toRefs(o),O=new Set(d._GET_SHALLOW_STUDIO_PROPERTIES());d._GET_ALL_STUDIO_PROPERTIES().filter(p=>p!="studioProperties").forEach(p=>{const h=S[p];h&&n.watch(h,(m,I)=>{k(p,m)},O.has(p)?void 0:{deep:!0})});const w=p=>h=>{if(r.value)return;h==="apiReady"&&(l.value=!0);const m=d._ALWAYS_SYNC_GLOBAL_EVENTS.has(h)},k=(p,h,m)=>{if(a.value){let I=h;s[p]=I,c||(c=!0,queueMicrotask(()=>{c=!1,!r.value&&i.value&&d._processPropertyChanges(s,i.value),s={}}))}},E=()=>Object.create(n.getCurrentInstance().provides);return n.onMounted(()=>{const p=new _(n.getCurrentInstance(),E()),h={globalListener:w(),globalSyncListener:w(!0),frameworkOverrides:new R(n.getCurrentInstance()),providedBeanInstances:{frameworkCompWrapper:p},modules:o.modules},m=n.markRaw(d._combineAttributesAndStudioProperties(P(o.studioProperties),o,[...d._GET_ALL_STUDIO_PROPERTIES(),...Object.values(d._PUBLIC_EVENT_HANDLERS_MAP)]));i.value=d._createStudio(t.value,m,h),a.value=!0}),n.onUnmounted(()=>{var p;a.value&&((p=i==null?void 0:i.value)==null||p.destroy(),r.value=!0)}),e({api:i}),(p,h)=>(n.openBlock(),n.createElementBlock("div",T,null,512))}});f.AgStudio=b,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+(function(u,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("ag-studio"),require("ag-grid-vue3")):typeof define=="function"&&define.amd?define(["exports","vue","ag-studio","ag-grid-vue3"],o):(u=typeof globalThis<"u"?globalThis:u||self,o(u.AgStudio={},u.Vue,u.agStudio,u.agGridVue3))})(this,function(u,o,c,b){"use strict";var j=Object.defineProperty;var V=(u,o,c)=>o in u?j(u,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):u[o]=c;var w=(u,o,c)=>V(u,typeof o!="symbol"?o+"":o,c);function E(){return{studioProperties:{},tabIndex:void 0,enableRtl:void 0,popupParent:void 0,theme:void 0,loadThemeGoogleFonts:void 0,themeCssLayer:void 0,styleNonce:void 0,themeStyleContainer:void 0,getDocument:void 0,suppressTouch:void 0,suppressKeyboard:void 0,localeText:void 0,aiText:void 0,getLocaleText:void 0,studioId:void 0,context:void 0,initialState:void 0,data:void 0,mode:void 0,history:void 0,enableFilterEditingInViewMode:void 0,layout:void 0,ai:void 0,aiToolDisplay:void 0,dataOptions:void 0,panels:void 0,page:void 0,widgets:void 0,components:void 0,"onState-updated":void 0,"onApi-ready":void 0,"onStudio-ready":void 0,"onRender-state-changed":void 0,"onStudio-pre-destroyed":void 0,"onError-raised":void 0}}function G(f){if(!f||typeof f!="object"||Array.isArray(f))return!1;const e=Object.getPrototypeOf(f);return e!==null&&e!==Object.prototype}function S(f){if(f==null||typeof f!="object")return f;const e=new WeakSet,n=t=>{if(t==null||typeof t!="object")return t;if(o.isRef(t))return n(t.value);if(o.isReactive(t)||o.isProxy(t))return n(o.toRaw(t));if(G(t))return o.toRaw(t);if(Array.isArray(t)){let r=!1;for(let a=0;a<t.length;a++){const s=t[a];if(s!==null&&typeof s=="object"){if(o.isRef(s)||o.isReactive(s)||o.isProxy(s)){r=!0;break}r=!0;break}}return r?t.map(a=>n(a)):t}if(e.has(t))return t;e.add(t);const d=Object.keys(t),l={};for(let r=0;r<d.length;r++)l[d[r]]=n(t[d[r]]);return l};return n(f)}const R=class R{static getComponentDefinition(e,n){let t;return typeof e=="string"?t=this.searchForComponentInstance(n,e):t={extends:o.defineComponent({...e})},t||c._AgLogger.error(`Could not find component with name of ${e}. Is it in Vue.components?`),t.extends?(t.extends.setup&&(t.setup=t.extends.setup),t.extends.props=this.addParamsToProps(t.extends.props)):t.props=this.addParamsToProps(t.props),t}static addParamsToProps(e){return!e||Array.isArray(e)&&e.indexOf("params")===-1?e=["params",...e||[]]:typeof e=="object"&&!e.params&&(e.params={type:Object}),e}static createAndMountComponent(e,n,t,d){const l=R.getComponentDefinition(e,t);if(!l)return;const{vNode:r,destroy:a,el:s}=this.mount(l,{params:Object.freeze(n)},t,d||{});return{componentInstance:r.component.proxy,element:s,destroy:a}}static mount(e,n,t,d){let l=o.createVNode(e,n);l.appContext={...t.appContext,provides:d};let r=document.createDocumentFragment();return o.render(l,r),{vNode:l,destroy:()=>{r&&o.render(null,r),r=null,l=null},el:r}}static searchForComponentInstance(e,n,t=10,d=!1){let l=this.componentCache.get(e);if(l){const i=l.get(n);if(i!==void 0)return i}let r=null,a=0,s=e.parent;for(;!r&&s&&s.components&&++a<t;)s.components&&s.components[n]&&(r=s.components[n]),s=s.parent;for(a=0,s=e.parent;!r&&s&&s.$options&&++a<t;){const i=s;i.$options&&i.$options.components&&i.$options.components[n]?r=i.$options.components[n]:i[n]&&(r=i[n]),s=s.parent}for(a=0,s=e.parent;!r&&s&&++a<t;){if(s.exposed){const i=s;i.exposed&&i.exposed[n]?r=i.exposed[n]:i[n]&&(r=i[n])}s=s.parent}if(!r){const i=e.appContext.components;i&&i[n]&&(r=i[n])}return!r&&!d?(c._AgLogger.error(`Could not find component with name of ${n}. Is it in Vue.components?`),null):(r&&(l||(l=new Map,this.componentCache.set(e,l)),l.set(n,r)),r)}};w(R,"componentCache",new WeakMap);let C=R;const P=Symbol("ag-studio-beans"),T="initialised";class W extends c._BaseComponentWrapper{constructor(n,t){super();w(this,"parent");w(this,"provides");this.parent=n,this.provides=t}createWrapper(n){return new D(this,n)}createComponent(n,t){return C.createAndMountComponent(n,t,this.parent,this.provides)}publishBeans(n){this.provides[P]=n}destroy(){this.parent=null}}class D{constructor(e,n){w(this,"componentInstance");w(this,"element");w(this,"unmount");this.frameworkCompWrapper=e,this.component=n}getGui(){return this.element}wireBeans(e){this.frameworkCompWrapper.publishBeans(e)}init(e){const{componentInstance:n,element:t,destroy:d}=this.frameworkCompWrapper.createComponent(this.component,e);return this.componentInstance=n,this.unmount=d,this.element=t.firstElementChild??t,this.hasMethod(T)?this.callMethod(T,[]):void 0}async refresh(e){return this.hasMethod("refresh")?this.callMethod("refresh",[e]):void 0}hasMethod(e){var t,d;const n=this.componentInstance;return n[e]?!0:((t=n.$.exposed)==null?void 0:t[e])!=null||((d=n.exposed)==null?void 0:d[e])!=null||n.$.setupState[e]!=null}callMethod(e,n){var d,l;const t=this.componentInstance;if(t[e])return t[e](...n);{const r=((d=t.$.exposed)==null?void 0:d[e])||((l=t.exposed)==null?void 0:l[e])||t.$.setupState[e];return r==null?void 0:r.apply(t,n)}}addMethod(e,n){this[e]=n}processMethod(e,n){return e==="refresh"&&(this.componentInstance.params=Object.freeze(n[0])),this.hasMethod(e)?this.callMethod(e,n):e==="refresh"}getFrameworkComponentInstance(){return this.componentInstance}destroy(){var e,n;typeof((e=this.componentInstance)==null?void 0:e.destroy)=="function"&&this.componentInstance.destroy(),(n=this.unmount)==null||n.call(this)}}class L extends c._VanillaFrameworkOverrides{constructor(e){super("vue"),this.parent=e}frameworkComponent(e,n){let t=C.searchForComponentInstance(this.parent,e,10,!0)?e:null;if(!t&&n&&n[e]){const d=n[e];t=C.searchForComponentInstance(this.parent,d,10,!0)?d:null}return t}isFrameworkComponent(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}}const A=o.defineComponent({__name:"GridWidget",props:{params:{}},setup(f,{expose:e}){const n=f,t=o.ref({}),d=o.useTemplateRef("eRoot"),l=o.shallowRef(),r=o.inject(P,void 0);let a,s,i;o.onMounted(()=>{const y=d.value;if(!r||!y){c._AgLogger.error("GridWidget can only be used as the component of a studio grid widget.");return}a=new c._GridWidgetCore({beans:r,createGrid:h=>new Promise(g=>{i=()=>g(void 0),l.value={...h,onGridReady:p=>{var m;i=void 0;try{(m=h.onGridReady)==null||m.call(h,p)}finally{g(p.api)}}}}),setCssProperties:h=>{t.value=h},getWidth:()=>y.offsetWidth}),s=a.init(n.params)}),o.onUnmounted(()=>{i==null||i(),i=void 0,a==null||a.destroy(),a=void 0});function I(){return s}function v(y){return a==null?void 0:a.refresh(y)}return e({initialised:I,refresh:v}),(y,h)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"eRoot",ref:d,class:"ag-studio-grid-widget",style:o.normalizeStyle(t.value)},[l.value?(o.openBlock(),o.createBlock(o.unref(b.AgGridVue),{key:0,style:{width:"100%",height:"100%"},gridOptions:l.value,modules:o.unref(c._STUDIO_GRID_MODULES)},null,8,["gridOptions","modules"])):o.createCommentVNode("",!0)],4))}}),x=o.defineComponent({__name:"PivotGridWidget",props:{params:{}},setup(f,{expose:e}){const n=f,t=o.ref({}),d=o.useTemplateRef("eRoot"),l=o.shallowRef(),r=o.inject(P,void 0);let a,s,i;o.onMounted(()=>{const y=d.value;if(!r||!y){c._AgLogger.error("PivotGridWidget can only be used as the component of a studio pivot grid widget.");return}a=new c._PivotGridWidgetCore({beans:r,createGrid:h=>new Promise(g=>{i=()=>g(void 0),l.value={...h,onGridReady:p=>{var m;i=void 0;try{(m=h.onGridReady)==null||m.call(h,p)}finally{g(p.api)}}}}),setCssProperties:h=>{t.value=h}}),s=a.init(n.params)}),o.onUnmounted(()=>{i==null||i(),i=void 0,a==null||a.destroy(),a=void 0});function I(){return s}function v(y){return a==null?void 0:a.refresh(y)}return e({initialised:I,refresh:v}),(y,h)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"eRoot",ref:d,class:"ag-studio-pivot-grid-widget",style:o.normalizeStyle(t.value)},[l.value?(o.openBlock(),o.createBlock(o.unref(b.AgGridVue),{key:0,style:{width:"100%",height:"100%"},gridOptions:l.value,modules:o.unref(c._STUDIO_GRID_MODULES)},null,8,["gridOptions","modules"])):o.createCommentVNode("",!0)],4))}}),k=c._createWidgetDefaults({grid:A,"pivot-grid":x}),M={ref:"root"},B=o.defineComponent({__name:"AgStudio",props:o.mergeDefaults({studioProperties:{},modules:{},tabIndex:{},enableRtl:{type:Boolean},popupParent:{},theme:{},loadThemeGoogleFonts:{type:Boolean},themeCssLayer:{},styleNonce:{},themeStyleContainer:{type:Function},getDocument:{type:Function},suppressTouch:{type:Boolean},suppressKeyboard:{},localeText:{},aiText:{},getLocaleText:{type:Function},studioId:{},context:{},initialState:{},data:{},mode:{},history:{},enableFilterEditingInViewMode:{type:Boolean},layout:{},ai:{type:[Object,Function]},aiToolDisplay:{},dataOptions:{},panels:{},page:{type:[Object,Function]},widgets:{type:[Object,Function]},components:{},"onState-updated":{},"onApi-ready":{},"onStudio-ready":{},"onRender-state-changed":{},"onStudio-pre-destroyed":{},"onError-raised":{}},E()),setup(f,{expose:e}){const n=f,t=o.useTemplateRef("root"),d=o.shallowRef(void 0),l=o.shallowRef(!1),r=o.shallowRef(!1),a=o.shallowRef(!1);let s={},i=!1;const I=o.toRefs(n),v=new Set(c._GET_SHALLOW_STUDIO_PROPERTIES());c._GET_ALL_STUDIO_PROPERTIES().filter(p=>p!="studioProperties").forEach(p=>{const m=I[p];m&&o.watch(m,(_,O)=>{h(p,_)},v.has(p)?void 0:{deep:!0})});const y=p=>m=>{if(r.value)return;m==="apiReady"&&(a.value=!0);const _=c._ALWAYS_SYNC_GLOBAL_EVENTS.has(m)},h=(p,m,_)=>{if(l.value){let O=m;s[p]=O,i||(i=!0,queueMicrotask(()=>{i=!1,!r.value&&d.value&&c._processPropertyChanges(s,d.value),s={}}))}},g=()=>Object.create(o.getCurrentInstance().provides);return o.onMounted(()=>{const p=new W(o.getCurrentInstance(),g()),m={globalListener:y(),globalSyncListener:y(!0),frameworkOverrides:new L(o.getCurrentInstance()),providedBeanInstances:{frameworkCompWrapper:p,widgetDefaults:k},modules:n.modules},_=o.markRaw(c._combineAttributesAndStudioProperties(S(n.studioProperties),n,[...c._GET_ALL_STUDIO_PROPERTIES(),...Object.values(c._PUBLIC_EVENT_HANDLERS_MAP)]));d.value=c._createStudio(t.value,_,m),l.value=!0}),o.onUnmounted(()=>{var p;l.value&&((p=d==null?void 0:d.value)==null||p.destroy(),r.value=!0)}),e({api:d}),(p,m)=>(o.openBlock(),o.createElementBlock("div",M,null,512))}});function F(f){return c._createWidgets(f,k)}u.AgStudio=B,u.GridWidget=A,u.PivotGridWidget=x,u.createWidgets=F,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/dist/typings/components/AgStudio.vue.d.ts

@@ -13,7 +13,7 @@ declare const __VLS_export: <TRegistry extends AgRegistry = AgDefaultRegistry>(_
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/typings/components/GridWidget.vue.d.ts

@@ -0,0 +1,14 @@
+import type { AgGridWidget, AgWidgetParams } from 'ag-studio';
+import type { AgGridWidgetOptions } from './interfaces';
+type GridWidgetParams = AgWidgetParams<AgGridWidget, AgGridWidgetOptions>;
+type __VLS_Props = {
+    params: GridWidgetParams;
+};
+declare function initialised(): Promise<void> | undefined;
+declare function refresh(params: GridWidgetParams): Promise<void> | undefined;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    initialised: typeof initialised;
+    refresh: typeof refresh;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/typings/components/PivotGridWidget.vue.d.ts

@@ -0,0 +1,14 @@
+import type { AgPivotGridWidget, AgWidgetParams } from 'ag-studio';
+import type { AgPivotGridWidgetOptions } from './interfaces';
+type PivotGridWidgetParams = AgWidgetParams<AgPivotGridWidget, AgPivotGridWidgetOptions>;
+type __VLS_Props = {
+    params: PivotGridWidgetParams;
+};
+declare function initialised(): Promise<void> | undefined;
+declare function refresh(params: PivotGridWidgetParams): Promise<void> | undefined;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    initialised: typeof initialised;
+    refresh: typeof refresh;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/typings/components/VueFrameworkComponentWrapper.d.ts

@@ -1,14 +1,18 @@
 import { _BaseComponentWrapper } from 'ag-studio';
-import type { _WrappableInterface } from 'ag-studio';
+import type { _BeanCollection, _WrappableInterface } from 'ag-studio';
 interface VueWrappableInterface extends _WrappableInterface {
     processMethod(methodName: string, args: IArguments): any;
+    /** Required here, though optional on `_WrappableInterface`, so it cannot be dropped silently. */
+    wireBeans(beans: _BeanCollection): void;
 }
 export declare class VueFrameworkComponentWrapper extends _BaseComponentWrapper<VueWrappableInterface> {
     private parent;
     private readonly provides;
-    constructor(parent: any, provides?: any);
+    constructor(parent: any, provides: any);
     protected createWrapper(component: any): VueWrappableInterface;
     createComponent(component: any, params: any): any;
+    /** Keeps `provides` private to this class; see `DynamicComponent.wireBeans`. */
+    publishBeans(beans: _BeanCollection): void;
     protected destroy(): void;
 }
 export {};

package/dist/typings/components/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { AgBaseRegistry, AgBaseWidgetDefinition, AgDefaultWidgetType, AgTypeScriptComponent, AgWidgetData, AgWidgetDataFormat, AgWidgetParams, AgWidgetRegistry } from 'ag-studio';
+import type { AgAiToolDetailParams, AgBaseAiToolDisplay, AgBaseRegistry, AgBaseWidgetDefinition, AgGridWidgetOptions as AgCoreGridWidgetOptions, AgPivotGridWidgetOptions as AgCorePivotGridWidgetOptions, AgDefaultWidgetType, AgTypeScriptComponent, AgWidgetData, AgWidgetDataFormat, AgWidgetField, AgWidgetParams, AgWidgetRegistry } from 'ag-studio';
 import type { Component } from 'vue';
 export interface AgWidgetDefinition<TWidgetType extends string = string, TIn extends AgWidgetData<unknown, AgWidgetDataFormat<unknown>> = any, TOut extends AgWidgetData<unknown, AgWidgetDataFormat<unknown>> = TIn, TOptions = unknown> extends AgBaseWidgetDefinition<TWidgetType, TIn, TOut, TOptions> {
     /**
@@ -21,5 +21,47 @@ export type AgCustomComponentDefs<TRegistry extends AgBaseRegistry> = {
 export interface AgRegistry extends AgBaseRegistry {
     widgets: readonly AgWidgetDefinition[];
     components: AgCustomComponentDefs<this>;
+    aiToolDisplay: AgAiToolDisplay;
+}
+/**
+ * Grid widget options, with `createCellRenderer` typed for a Vue component.
+ * See `AgGridWidgetOptions` in `ag-studio`.
+ */
+export interface AgGridWidgetOptions extends Omit<AgCoreGridWidgetOptions, 'createCellRenderer'> {
+    /**
+     * Optional. Returns the cell renderer to use for a field's column, or `undefined` to leave that
+     * column with its default rendering. Called once for every column, each time the widget builds
+     * its columns.
+     */
+    createCellRenderer?: (field: AgWidgetField) => Component | undefined;
+}
+/**
+ * Pivot grid widget options, with `createCellRenderer` typed for a Vue component.
+ * See `AgPivotGridWidgetOptions` in `ag-studio`.
+ */
+export interface AgPivotGridWidgetOptions extends Omit<AgCorePivotGridWidgetOptions, 'createCellRenderer'> {
+    /**
+     * Optional. Returns the cell renderer to use for a field's cells, or `undefined` to leave them
+     * with their default rendering. Called for each value field and each Row Labels field.
+     *
+     * A renderer returned for a Row Labels field renders alongside the row's expand control and
+     * indentation rather than replacing the whole cell, and it receives no field information in its
+     * parameters - a renderer that needs to know which field it is rendering should close over the
+     * one passed to this callback.
+     */
+    createCellRenderer?: (field: AgWidgetField) => Component | undefined;
+}
+/**
+ * How a tool's calls are presented in the chat panel, with `detail` typed for a Vue component.
+ * See `AgBaseAiToolDisplay`.
+ */
+export interface AgAiToolDisplay extends AgBaseAiToolDisplay {
+    /**
+     * Component rendering the expanded body of this tool's calls. Either:
+     * - The name of a Vue component registered on the component that hosts Studio
+     * - A custom Vue component
+     * - A custom TypeScript component class (no Vue; working directly with the DOM)
+     */
+    detail?: string | Component<AgAiToolDetailParams> | (new () => AgTypeScriptComponent<AgAiToolDetailParams>);
 }
 export {};

package/dist/typings/components/studioBeans.d.ts

@@ -0,0 +1,4 @@
+import type { _BeanCollection } from 'ag-studio';
+import type { InjectionKey } from 'vue';
+/** How a framework-native widget component receives the studio's beans. Package-internal. */
+export declare const AG_STUDIO_BEANS: InjectionKey<_BeanCollection>;

package/dist/typings/components/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AgAiAssistant, AgAiStrings, AgDataEngine, AgDataOptions, AgDataSourcesDefinition, AgDefaultRegistry, AgPageConfig, AgPageLayoutState, AgPanelConfig, AgReportState, AgStudioGetLocaleTextParams, AgStudioLocaleText, AgStudioMode, AgStudioTheme, AgWidgetsConfig } from 'ag-studio';
+import type { AgAiHarnessSetup, AgAiStrings, AgDataEngine, AgDataOptions, AgDataSourcesDefinition, AgDefaultRegistry, AgHistoryOptions, AgPageConfig, AgPageLayoutState, AgPanelConfig, AgReportState, AgStudioGetLocaleTextParams, AgStudioLocaleText, AgStudioMode, AgStudioTheme, AgSuppressKeyboard, AgWidgetsConfig } from 'ag-studio';
 import type { AgStudioApiReadyEvent, AgStudioErrorRaisedEvent, AgStudioPreDestroyedEvent, AgStudioReadyEvent, AgStudioRenderStateChangedEvent, AgStudioStateUpdatedEvent } from 'ag-studio';
 import type { AgStudioModule, AgStudioProperties } from 'ag-studio';
 import type { AgRegistry } from './interfaces';
@@ -74,6 +74,11 @@ export interface Props<TRegistry extends AgRegistry = AgDefaultRegistry> {
          * @initial
          */
     suppressTouch?: boolean;
+    /** Keyboard shortcuts Studio should not handle, so an application can bind them itself.
+         * Each shortcut is suppressed independently, e.g. `{ redo: true }` keeps undo on ctrl/cmd+Z and
+         * leaves ctrl/cmd+shift+Z to the application.
+         */
+    suppressKeyboard?: AgSuppressKeyboard;
     /** A map of key->value pairs for localising text within Studio.
          * @initial
          */
@@ -106,20 +111,44 @@ export interface Props<TRegistry extends AgRegistry = AgDefaultRegistry> {
          */
     data?: AgDataSourcesDefinition<TRegistry> | AgDataEngine;
     /** Which mode Studio is in.
+         * Changing this only changes what is shown and what is editable: the active state is
+         * neither saved nor restored on a mode change, and carries across the switch unchanged.
+         * The undo and redo history also carries across by default; set `history.onModeChange` to
+         * discard it instead.
          * @default 'view'
          */
     mode?: AgStudioMode;
+    /** How Studio's undo and redo history behaves.     */
+    history?: AgHistoryOptions;
+    /** Allows filters to be added to, and removed from, the filters panel while in view mode.
+         *
+         * When `false`, filters can only be added and removed in edit mode.
+         *
+         * Studio does not store filters added this way. Listen to `onStateUpdated` and persist the
+         * state yourself if it needs to survive a reload.
+         * @default false
+         */
+    enableFilterEditingInViewMode?: boolean;
     /** Default layout styling.
          */
     layout?: Partial<AgPageLayoutState>;
-    /** AI Assistant configuration.
-         *
-         * NOTE: The     **AI Assistant** is an experimental feature. Behaviour will be
-         * slightly different depending on the LLM being used, and results can vary across queries.
+    /** The agent harness powering the AI Assistant panel: either a harness, or a function building
+         * one from the Studio API. Results vary with the LLM you supply.
          *
          * @initial
          */
-    ai?: AgAiAssistant;
+    ai?: AgAiHarnessSetup;
+    /** How each tool's calls are presented in the AI Assistant panel, keyed by tool name: the words
+         * on the step, an optional component for the body that opens beneath it, or `hidden` to leave
+         * the tool out of the transcript. Studio's own tools come pre-declared; an entry here overrides
+         * them, and any tool of your own needs one to render as more than its name.
+         *
+         * Keyed by name because a call replayed from history no longer carries the tool that ran it,
+         * only the name it was called by. Applies whichever harness is driving the panel.
+         *
+         * `detail` is checked against the component type of the framework you are using.
+         */
+    aiToolDisplay?: Record<string, TRegistry['aiToolDisplay']>;
     /** Data-layer configuration. Controls behaviours such as export row limits.
          */
     dataOptions?: AgDataOptions;
@@ -153,6 +182,7 @@ export declare function getProps(): {
     themeStyleContainer: undefined;
     getDocument: undefined;
     suppressTouch: undefined;
+    suppressKeyboard: undefined;
     localeText: undefined;
     aiText: undefined;
     getLocaleText: undefined;
@@ -161,8 +191,11 @@ export declare function getProps(): {
     initialState: undefined;
     data: undefined;
     mode: undefined;
+    history: undefined;
+    enableFilterEditingInViewMode: undefined;
     layout: undefined;
     ai: undefined;
+    aiToolDisplay: undefined;
     dataOptions: undefined;
     panels: undefined;
     page: undefined;

package/dist/typings/createWidgets.d.ts

@@ -0,0 +1,6 @@
+import type { AgCreateWidgetsParams, AgDefaultRegistry, AgWidgetsConfig } from 'ag-studio';
+import type { AgRegistry } from './components/interfaces';
+/**
+ * Helper function for the `widgets` Studio property.
+ */
+export declare function createWidgets<TRegistry extends AgRegistry = AgDefaultRegistry>(params: AgCreateWidgetsParams<TRegistry>): AgWidgetsConfig<TRegistry>;

package/dist/typings/main.d.ts

@@ -1,3 +1,6 @@
 import AgStudio from './components/AgStudio.vue';
-export { AgStudio };
-export type { AgWidgetDefinition, AgRegistry } from './components/interfaces';
+import GridWidget from './components/GridWidget.vue';
+import PivotGridWidget from './components/PivotGridWidget.vue';
+export { AgStudio, GridWidget, PivotGridWidget };
+export { createWidgets } from './createWidgets';
+export type { AgWidgetDefinition, AgRegistry, AgAiToolDisplay, AgGridWidgetOptions, AgPivotGridWidgetOptions, } from './components/interfaces';

package/dist/typings/widgetDefaults.d.ts

@@ -0,0 +1,3 @@
+import type { _WidgetDefaults } from 'ag-studio';
+/** The widget defaults for Vue Studio: the vanilla defs with the Vue grid widgets swapped in. */
+export declare const WIDGET_DEFAULTS: _WidgetDefaults;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ag-studio-vue3",
   "description": "AG Studio Vue Component",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "author": "Sean Landsman <sean@thelandsmans.com>",
   "license": "Commercial",
   "files": [
@@ -10,7 +10,7 @@
   "bugs": {
     "url": "https://ag-grid.zendesk.com/"
   },
-  "homepage": "https://www.ag-grid.com/studio",
+  "homepage": "https://www.ag-grid.com/studio/",
   "keywords": [],
   "main": "./dist/main.umd.js",
   "module": "./dist/main.mjs",
@@ -34,8 +34,10 @@
     "build-only:watch": "vite build --watch"
   },
   "dependencies": {
-    "ag-stack": "~36.1.0",
-    "ag-studio": "2.1.2"
+    "ag-grid-enterprise": "~36.2.0",
+    "ag-grid-vue3": "~36.2.0",
+    "ag-stack": "~36.2.0",
+    "ag-studio": "3.0.0"
   },
   "devDependencies": {
     "vue": "^3.5.0",