@tanstack/vue-query-devtools 5.91.0 → 6.1.0

package/dist/cjs/devtools.vue.cjs

@@ -12,7 +12,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     errorTypes: {},
     styleNonce: {},
     shadowDOMTarget: {},
-    hideDisabledQueries: { type: Boolean }
+    hideDisabledQueries: { type: Boolean },
+    theme: {}
   },
   setup(__props) {
     const props = __props;
@@ -29,13 +30,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       errorTypes: props.errorTypes,
       styleNonce: props.styleNonce,
       shadowDOMTarget: props.shadowDOMTarget,
-      hideDisabledQueries: props.hideDisabledQueries
+      hideDisabledQueries: props.hideDisabledQueries,
+      theme: props.theme
     });
     vue.watchEffect(() => {
       devtools.setButtonPosition(props.buttonPosition || "bottom-right");
       devtools.setPosition(props.position || "bottom");
       devtools.setInitialIsOpen(props.initialIsOpen);
       devtools.setErrorTypes(props.errorTypes || []);
+      devtools.setTheme(props.theme || "system");
     });
     vue.onMounted(() => {
       devtools.mount(div.value);

package/dist/cjs/devtools.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.vue.cjs","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})\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})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["ref","useQueryClient","TanstackQueryDevtools","onlineManager","watchEffect","onMounted","onScopeDispose"],"mappings":";;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAMA,IAAAA,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAUC,wBAAe;AACxC,UAAA,WAAW,IAAIC,oCAAsB;AAAA,MACzC;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAA;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,UAAU,MAAM;AAAA,MAChB,eAAe,MAAM;AAAA,MACrB,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,IAAA,CAC5B;AAEDC,QAAAA,YAAY,MAAM;AACP,eAAA,kBAAkB,MAAM,kBAAkB,cAAc;AACxD,eAAA,YAAY,MAAM,YAAY,QAAQ;AACtC,eAAA,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAEDC,QAAAA,UAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;"}
+{"version":3,"file":"devtools.vue.cjs","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})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["ref","useQueryClient","TanstackQueryDevtools","onlineManager","watchEffect","onMounted","onScopeDispose"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAMA,IAAAA,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAUC,wBAAe;AACxC,UAAA,WAAW,IAAIC,oCAAsB;AAAA,MACzC;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAA;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,UAAU,MAAM;AAAA,MAChB,eAAe,MAAM;AAAA,MACrB,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,OAAO,MAAM;AAAA,IAAA,CACd;AAEDC,QAAAA,YAAY,MAAM;AACP,eAAA,kBAAkB,MAAM,kBAAkB,cAAc;AACxD,eAAA,YAAY,MAAM,YAAY,QAAQ;AACtC,eAAA,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AACpC,eAAA,SAAS,MAAM,SAAS,QAAQ;AAAA,IAAA,CAC1C;AAEDC,QAAAA,UAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;"}

package/dist/cjs/devtoolsPanel.vue.cjs

@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     shadowDOMTarget: {},
     style: {},
     onClose: { type: Function },
-    hideDisabledQueries: { type: Boolean }
+    hideDisabledQueries: { type: Boolean },
+    theme: {}
   },
   setup(__props) {
     const props = __props;
@@ -35,12 +36,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       styleNonce: props.styleNonce,
       shadowDOMTarget: props.shadowDOMTarget,
       hideDisabledQueries: props.hideDisabledQueries,
-      onClose: props.onClose
+      onClose: props.onClose,
+      theme: props.theme
     });
     vue.watchEffect(() => {
       devtools.setOnClose(props.onClose ?? (() => {
       }));
       devtools.setErrorTypes(props.errorTypes || []);
+      devtools.setTheme(props.theme);
     });
     vue.onMounted(() => {
       devtools.mount(div.value);

package/dist/cjs/devtoolsPanel.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.vue.cjs","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 { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\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})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["computed","ref","useQueryClient","TanstackQueryDevtoolsPanel","onlineManager","watchEffect","onMounted","onScopeDispose"],"mappings":";;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQA,IAAAA,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAMC,IAAAA,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAUC,wBAAe;AACxC,UAAA,WAAW,IAAIC,yCAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAA;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,IAAA,CAChB;AAEDC,QAAAA,YAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAEDC,QAAAA,UAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;;"}
+{"version":3,"file":"devtoolsPanel.vue.cjs","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 { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\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})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["computed","ref","useQueryClient","TanstackQueryDevtoolsPanel","onlineManager","watchEffect","onMounted","onScopeDispose"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQA,IAAAA,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAMC,IAAAA,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAUC,wBAAe;AACxC,UAAA,WAAW,IAAIC,yCAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAA;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,MACf,OAAO,MAAM;AAAA,IAAA,CACd;AAEDC,QAAAA,YAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AACpC,eAAA,SAAS,MAAM,KAAK;AAAA,IAAA,CAC9B;AAEDC,QAAAA,UAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;;"}

package/dist/cjs/types.d.cts

@@ -1,4 +1,4 @@
-import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/vue-query';
 export interface DevtoolsOptions {
     /**
@@ -37,6 +37,11 @@ export interface DevtoolsOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 export interface DevtoolsPanelOptions {
     /**
@@ -70,4 +75,9 @@ export interface DevtoolsPanelOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }

package/dist/esm/devtools.vue.js

@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     errorTypes: {},
     styleNonce: {},
     shadowDOMTarget: {},
-    hideDisabledQueries: { type: Boolean }
+    hideDisabledQueries: { type: Boolean },
+    theme: {}
   },
   setup(__props) {
     const props = __props;
@@ -28,13 +29,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       errorTypes: props.errorTypes,
       styleNonce: props.styleNonce,
       shadowDOMTarget: props.shadowDOMTarget,
-      hideDisabledQueries: props.hideDisabledQueries
+      hideDisabledQueries: props.hideDisabledQueries,
+      theme: props.theme
     });
     watchEffect(() => {
       devtools.setButtonPosition(props.buttonPosition || "bottom-right");
       devtools.setPosition(props.position || "bottom");
       devtools.setInitialIsOpen(props.initialIsOpen);
       devtools.setErrorTypes(props.errorTypes || []);
+      devtools.setTheme(props.theme || "system");
     });
     onMounted(() => {
       devtools.mount(div.value);

package/dist/esm/devtools.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.vue.js","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})\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})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAM,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAU,eAAe;AACxC,UAAA,WAAW,IAAI,sBAAsB;AAAA,MACzC;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,UAAU,MAAM;AAAA,MAChB,eAAe,MAAM;AAAA,MACrB,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,IAAA,CAC5B;AAED,gBAAY,MAAM;AACP,eAAA,kBAAkB,MAAM,kBAAkB,cAAc;AACxD,eAAA,YAAY,MAAM,YAAY,QAAQ;AACtC,eAAA,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAED,cAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;"}
+{"version":3,"file":"devtools.vue.js","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})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAM,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAU,eAAe;AACxC,UAAA,WAAW,IAAI,sBAAsB;AAAA,MACzC;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,UAAU,MAAM;AAAA,MAChB,eAAe,MAAM;AAAA,MACrB,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,OAAO,MAAM;AAAA,IAAA,CACd;AAED,gBAAY,MAAM;AACP,eAAA,kBAAkB,MAAM,kBAAkB,cAAc;AACxD,eAAA,YAAY,MAAM,YAAY,QAAQ;AACtC,eAAA,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AACpC,eAAA,SAAS,MAAM,SAAS,QAAQ;AAAA,IAAA,CAC1C;AAED,cAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;"}

package/dist/esm/devtoolsPanel.vue.js

@@ -10,7 +10,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     shadowDOMTarget: {},
     style: {},
     onClose: { type: Function },
-    hideDisabledQueries: { type: Boolean }
+    hideDisabledQueries: { type: Boolean },
+    theme: {}
   },
   setup(__props) {
     const props = __props;
@@ -34,12 +35,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       styleNonce: props.styleNonce,
       shadowDOMTarget: props.shadowDOMTarget,
       hideDisabledQueries: props.hideDisabledQueries,
-      onClose: props.onClose
+      onClose: props.onClose,
+      theme: props.theme
     });
     watchEffect(() => {
       devtools.setOnClose(props.onClose ?? (() => {
       }));
       devtools.setErrorTypes(props.errorTypes || []);
+      devtools.setTheme(props.theme);
     });
     onMounted(() => {
       devtools.mount(div.value);

package/dist/esm/devtoolsPanel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.vue.js","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 { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\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})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQ,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAM,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAU,eAAe;AACxC,UAAA,WAAW,IAAI,2BAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,IAAA,CAChB;AAED,gBAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAED,cAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;"}
+{"version":3,"file":"devtoolsPanel.vue.js","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 { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\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})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQ,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAM,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAU,eAAe;AACxC,UAAA,WAAW,IAAI,2BAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,MACf,OAAO,MAAM;AAAA,IAAA,CACd;AAED,gBAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AACpC,eAAA,SAAS,MAAM,KAAK;AAAA,IAAA,CAC9B;AAED,cAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;"}

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/vue-query';
 export interface DevtoolsOptions {
     /**
@@ -37,6 +37,11 @@ export interface DevtoolsOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 export interface DevtoolsPanelOptions {
     /**
@@ -70,4 +75,9 @@ export interface DevtoolsPanelOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "5.91.0",
+  "version": "6.1.0",
   "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.90.1"
+    "@tanstack/query-devtools": "5.91.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
@@ -51,11 +51,11 @@
     "vite": "^6.3.6",
     "vue": "^3.4.27",
     "vue-tsc": "^2.2.8",
-    "@tanstack/vue-query": "5.90.5"
+    "@tanstack/vue-query": "5.91.2"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "@tanstack/vue-query": "^5.90.5"
+    "@tanstack/vue-query": "^5.91.2"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/devtools.vue

@@ -20,6 +20,7 @@ const devtools = new TanstackQueryDevtools({
   styleNonce: props.styleNonce,
   shadowDOMTarget: props.shadowDOMTarget,
   hideDisabledQueries: props.hideDisabledQueries,
+  theme: props.theme,
 })
 
 watchEffect(() => {
@@ -27,6 +28,7 @@ watchEffect(() => {
   devtools.setPosition(props.position || 'bottom')
   devtools.setInitialIsOpen(props.initialIsOpen)
   devtools.setErrorTypes(props.errorTypes || [])
+  devtools.setTheme(props.theme || 'system')
 })
 
 onMounted(() => {

package/src/devtoolsPanel.vue

@@ -28,11 +28,13 @@ const devtools = new TanstackQueryDevtoolsPanel({
   shadowDOMTarget: props.shadowDOMTarget,
   hideDisabledQueries: props.hideDisabledQueries,
   onClose: props.onClose,
+  theme: props.theme,
 })
 
 watchEffect(() => {
   devtools.setOnClose(props.onClose ?? (() => {}))
   devtools.setErrorTypes(props.errorTypes || [])
+  devtools.setTheme(props.theme)
 })
 
 onMounted(() => {

package/src/types.ts

@@ -2,6 +2,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/vue-query'
 
@@ -42,6 +43,11 @@ export interface DevtoolsOptions {
    * Set this to true to hide disabled queries from the devtools panel.
    */
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }
 
 export interface DevtoolsPanelOptions {
@@ -78,4 +84,9 @@ export interface DevtoolsPanelOptions {
    * Set this to true to hide disabled queries from the devtools panel.
    */
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }