@tanstack/vue-query-devtools 6.3.1 → 6.3.3

package/dist/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","names":["_openBlock","_createElementBlock","_sfc_main"],"sources":["../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setButtonPosition(props.buttonPosition || 'bottom-right')\n  devtools.setPosition(props.position || 'bottom')\n  devtools.setInitialIsOpen(props.initialIsOpen)\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme || 'system')\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;CA0CO,OAAM;CAAwB,KAAI;;;CAAvC,OAAAA,UAAA,GAAAC,mBAAmD,OAAnD,YAAmD,MAAA,GAAA"}
+{"version":3,"file":"devtools.js","names":["_openBlock","_createElementBlock","_sfc_main"],"sources":["../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setClient(props.client || client)\n  devtools.setButtonPosition(props.buttonPosition || 'bottom-right')\n  devtools.setPosition(props.position || 'bottom')\n  devtools.setInitialIsOpen(props.initialIsOpen)\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme || 'system')\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;CA2CO,OAAM;CAAwB,KAAI;;;CAAvC,OAAAA,UAAA,GAAAC,mBAAmD,OAAnD,YAAmD,MAAA,GAAA"}

package/dist/devtools.vue_vue_type_script_setup_true_lang.js

@@ -62,6 +62,7 @@ var devtools_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			theme: props.theme
 		});
 		watchEffect(() => {
+			devtools.setClient(props.client || client);
 			devtools.setButtonPosition(props.buttonPosition || "bottom-right");
 			devtools.setPosition(props.position || "bottom");
 			devtools.setInitialIsOpen(props.initialIsOpen);

package/dist/devtools.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setButtonPosition(props.buttonPosition || 'bottom-right')\n  devtools.setPosition(props.position || 'bottom')\n  devtools.setInitialIsOpen(props.initialIsOpen)\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme || 'system')\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAEd,MAAM,MAAM,IAAiB;EAC7B,MAAM,SAAS,MAAM,UAAU,eAAe;EAC9C,MAAM,WAAW,IAAI,sBAAsB;GACzC;GACA,aAAa;GACb,SAAS;GACT;GACA,gBAAgB,MAAM;GACtB,UAAU,MAAM;GAChB,eAAe,MAAM;GACrB,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,iBAAiB,MAAM;GACvB,qBAAqB,MAAM;GAC3B,OAAO,MAAM;EACf,CAAC;EAED,kBAAkB;GAChB,SAAS,kBAAkB,MAAM,kBAAkB,cAAc;GACjE,SAAS,YAAY,MAAM,YAAY,QAAQ;GAC/C,SAAS,iBAAiB,MAAM,aAAa;GAC7C,SAAS,cAAc,MAAM,cAAc,CAAC,CAAC;GAC7C,SAAS,SAAS,MAAM,SAAS,QAAQ;EAC3C,CAAC;EAED,gBAAgB;GACd,SAAS,MAAM,IAAI,KAAoB;GACvC,qBAAqB;IACnB,SAAS,QAAQ;GACnB,CAAC;EACH,CAAC"}
+{"version":3,"file":"devtools.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setClient(props.client || client)\n  devtools.setButtonPosition(props.buttonPosition || 'bottom-right')\n  devtools.setPosition(props.position || 'bottom')\n  devtools.setInitialIsOpen(props.initialIsOpen)\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme || 'system')\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAEd,MAAM,MAAM,IAAiB;EAC7B,MAAM,SAAS,MAAM,UAAU,eAAe;EAC9C,MAAM,WAAW,IAAI,sBAAsB;GACzC;GACA,aAAa;GACb,SAAS;GACT;GACA,gBAAgB,MAAM;GACtB,UAAU,MAAM;GAChB,eAAe,MAAM;GACrB,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,iBAAiB,MAAM;GACvB,qBAAqB,MAAM;GAC3B,OAAO,MAAM;EACf,CAAC;EAED,kBAAkB;GAChB,SAAS,UAAU,MAAM,UAAU,MAAM;GACzC,SAAS,kBAAkB,MAAM,kBAAkB,cAAc;GACjE,SAAS,YAAY,MAAM,YAAY,QAAQ;GAC/C,SAAS,iBAAiB,MAAM,aAAa;GAC7C,SAAS,cAAc,MAAM,cAAc,CAAC,CAAC;GAC7C,SAAS,SAAS,MAAM,SAAS,QAAQ;EAC3C,CAAC;EAED,gBAAgB;GACd,SAAS,MAAM,IAAI,KAAoB;GACvC,qBAAqB;IACnB,SAAS,QAAQ;GACnB,CAAC;EACH,CAAC"}

package/dist/devtoolsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_sfc_main"],"sources":["../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<any>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme)\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div :style=\"style\" class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;CA+CE,OAAAA,UAAA,GAAAC,mBAAkE,OAAA;EAA5D,OAAKC,eAAE,OAAA,KAAK;EAAE,OAAM;EAAwB,KAAI"}
+{"version":3,"file":"devtoolsPanel.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_sfc_main"],"sources":["../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<any>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setClient(props.client || client)\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme)\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div :style=\"style\" class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;CAgDE,OAAAA,UAAA,GAAAC,mBAAkE,OAAA;EAA5D,OAAKC,eAAE,OAAA,KAAK;EAAE,OAAM;EAAwB,KAAI"}

package/dist/devtoolsPanel.vue_vue_type_script_setup_true_lang.js

@@ -65,6 +65,7 @@ var devtoolsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			theme: props.theme
 		});
 		watchEffect(() => {
+			devtools.setClient(props.client || client);
 			devtools.setOnClose(props.onClose ?? (() => {}));
 			devtools.setErrorTypes(props.errorTypes || []);
 			devtools.setTheme(props.theme);

package/dist/devtoolsPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<any>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme)\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div :style=\"style\" class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EACd,MAAM,QAAQ,eAAoB;GAChC,OAAO;IACL,QAAQ;IACR,GAAG,MAAM;GACX;EACF,CAAC;EAED,MAAM,MAAM,IAAiB;EAC7B,MAAM,SAAS,MAAM,UAAU,eAAe;EAC9C,MAAM,WAAW,IAAI,2BAA2B;GAC9C;GACA,aAAa;GACb,SAAS;GACT;GACA,gBAAgB;GAChB,UAAU;GACV,eAAe;GACf,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,iBAAiB,MAAM;GACvB,qBAAqB,MAAM;GAC3B,SAAS,MAAM;GACf,OAAO,MAAM;EACf,CAAC;EAED,kBAAkB;GAChB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;GAC/C,SAAS,cAAc,MAAM,cAAc,CAAC,CAAC;GAC7C,SAAS,SAAS,MAAM,KAAK;EAC/B,CAAC;EAED,gBAAgB;GACd,SAAS,MAAM,IAAI,KAAoB;GACvC,qBAAqB;IACnB,SAAS,QAAQ;GACnB,CAAC;EACH,CAAC"}
+{"version":3,"file":"devtoolsPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<any>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  theme: props.theme,\n})\n\nwatchEffect(() => {\n  devtools.setClient(props.client || client)\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n  devtools.setTheme(props.theme)\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div :style=\"style\" class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EACd,MAAM,QAAQ,eAAoB;GAChC,OAAO;IACL,QAAQ;IACR,GAAG,MAAM;GACX;EACF,CAAC;EAED,MAAM,MAAM,IAAiB;EAC7B,MAAM,SAAS,MAAM,UAAU,eAAe;EAC9C,MAAM,WAAW,IAAI,2BAA2B;GAC9C;GACA,aAAa;GACb,SAAS;GACT;GACA,gBAAgB;GAChB,UAAU;GACV,eAAe;GACf,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,iBAAiB,MAAM;GACvB,qBAAqB,MAAM;GAC3B,SAAS,MAAM;GACf,OAAO,MAAM;EACf,CAAC;EAED,kBAAkB;GAChB,SAAS,UAAU,MAAM,UAAU,MAAM;GACzC,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;GAC/C,SAAS,cAAc,MAAM,cAAc,CAAC,CAAC;GAC7C,SAAS,SAAS,MAAM,KAAK;EAC/B,CAAC;EAED,gBAAgB;GACd,SAAS,MAAM,IAAI,KAAoB;GACvC,qBAAqB;IACnB,SAAS,QAAQ;GACnB,CAAC;EACH,CAAC"}

package/dist/types.d.ts

@@ -1,6 +1,9 @@
 import { QueryClient } from "@tanstack/vue-query";
 import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from "@tanstack/query-devtools";
 //#region src/types.d.ts
+/**
+ * The props of `VueQueryDevtools`, which renders the devtools with a toggle button that opens them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -9,14 +12,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition;
   /**
    * The position of the Vue Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition;
@@ -33,7 +34,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -42,11 +44,13 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * The props of `VueQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -61,7 +65,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -81,7 +86,6 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;iBAQiB;;;;EAIf;;;;;;;EAOA,iBAAiB;;;;;;;EAOjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;EAIlB;;;;;;EAMA,QAAQ;;iBAGO;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;;;;EAQlB,QAAQ,QAAQ;;;;EAKhB;;;;EAIA;;;;;;EAMA,QAAQ"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;;iBAWiB;;;;EAIf;;;;;;EAMA,iBAAiB;;;;;;EAMjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;EAIlB;;;;;EAKA,QAAQ;;;;;iBAMO;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;;;;EAQlB,QAAQ,QAAQ;;;;EAKhB;;;;EAIA;;;;;EAKA,QAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "6.3.1",
+  "version": "6.3.3",
   "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -38,26 +38,24 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.104.1"
+    "@tanstack/query-devtools": "5.104.3"
   },
   "devDependencies": {
-    "@tanstack/vue-query": "5.104.1",
-    "eslint-plugin-vue": "^10.11.1",
+    "@tanstack/vue-query": "5.104.3",
     "typescript": "6.0.3",
     "unplugin-vue": "^8.0.0",
     "vue": "^3.5.43",
     "vue-tsc": "^2.2.8"
   },
   "peerDependencies": {
-    "@tanstack/vue-query": "^5.104.1",
+    "@tanstack/vue-query": "^5.104.3",
     "vue": "^3.3.0"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts ./.cache/test-types",
     "compile": "vue-tsc --project tsconfig.json",
-    "test:eslint": "eslint --concurrency=auto ./src",
+    "test:oxlint": "oxlint ./src",
     "test:types": "npm-run-all --serial test:types:*",
-    "test:types:ts56": "node -e \"process.argv.splice(1, 0, ''); require('vue-tsc').run(require.resolve('typescript56/lib/tsc'))\" -- --project tsconfig.legacy.json --outDir .cache/test-types/ts56 --tsBuildInfoFile .cache/test-types/ts56.tsbuildinfo",
     "test:types:ts57": "node -e \"process.argv.splice(1, 0, ''); require('vue-tsc').run(require.resolve('typescript57/lib/tsc'))\" -- --project tsconfig.legacy.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo",
     "test:types:ts58": "node -e \"process.argv.splice(1, 0, ''); require('vue-tsc').run(require.resolve('typescript58/lib/tsc'))\" -- --project tsconfig.legacy.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo",
     "test:types:ts59": "node -e \"process.argv.splice(1, 0, ''); require('vue-tsc').run(require.resolve('typescript59/lib/tsc'))\" -- --project tsconfig.legacy.json --outDir .cache/test-types/ts59 --tsBuildInfoFile .cache/test-types/ts59.tsbuildinfo",

package/src/devtools.vue

@@ -24,6 +24,7 @@ const devtools = new TanstackQueryDevtools({
 })
 
 watchEffect(() => {
+  devtools.setClient(props.client || client)
   devtools.setButtonPosition(props.buttonPosition || 'bottom-right')
   devtools.setPosition(props.position || 'bottom')
   devtools.setInitialIsOpen(props.initialIsOpen)

package/src/devtoolsPanel.vue

@@ -31,6 +31,7 @@ const devtools = new TanstackQueryDevtoolsPanel({
 })
 
 watchEffect(() => {
+  devtools.setClient(props.client || client)
   devtools.setOnClose(props.onClose ?? (() => {}))
   devtools.setErrorTypes(props.errorTypes || [])
   devtools.setTheme(props.theme)

package/src/types.ts

@@ -6,6 +6,9 @@ import type {
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/vue-query'
 
+/**
+ * The props of `VueQueryDevtools`, which renders the devtools with a toggle button that opens them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -14,14 +17,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition
   /**
    * The position of the Vue Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition
@@ -38,7 +39,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot
   /**
@@ -47,12 +49,14 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme
 }
 
+/**
+ * The props of `VueQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -67,7 +71,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot
 
@@ -89,7 +94,6 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme