@tanstack/vue-query-devtools 6.0.0 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/devtools.vue.cjs +5 -2
  2. package/dist/cjs/devtools.vue.cjs.map +1 -1
  3. package/dist/cjs/devtoolsPanel.vue.cjs +5 -2
  4. package/dist/cjs/devtoolsPanel.vue.cjs.map +1 -1
  5. package/dist/cjs/types.d.cts +11 -1
  6. package/dist/esm/devtools.vue.js +5 -2
  7. package/dist/esm/devtools.vue.js.map +1 -1
  8. package/dist/esm/devtoolsPanel.vue.js +5 -2
  9. package/dist/esm/devtoolsPanel.vue.js.map +1 -1
  10. package/dist/esm/types.d.ts +11 -1
  11. package/package.json +4 -4
  12. package/src/devtools.vue +2 -0
  13. package/src/devtoolsPanel.vue +2 -0
  14. package/src/types.ts +11 -0
package/dist/cjs/devtools.vue.cjs CHANGED
@@ -12,7 +12,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
12
12
  errorTypes: {},
13
13
  styleNonce: {},
14
14
  shadowDOMTarget: {},
15
- hideDisabledQueries: { type: Boolean }
15
+ hideDisabledQueries: { type: Boolean },
16
+ theme: {}
16
17
  },
17
18
  setup(__props) {
18
19
  const props = __props;
@@ -29,13 +30,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
29
30
  errorTypes: props.errorTypes,
30
31
  styleNonce: props.styleNonce,
31
32
  shadowDOMTarget: props.shadowDOMTarget,
32
- hideDisabledQueries: props.hideDisabledQueries
33
+ hideDisabledQueries: props.hideDisabledQueries,
34
+ theme: props.theme
33
35
  });
34
36
  vue.watchEffect(() => {
35
37
  devtools.setButtonPosition(props.buttonPosition || "bottom-right");
36
38
  devtools.setPosition(props.position || "bottom");
37
39
  devtools.setInitialIsOpen(props.initialIsOpen);
38
40
  devtools.setErrorTypes(props.errorTypes || []);
41
+ devtools.setTheme(props.theme || "system");
39
42
  });
40
43
  vue.onMounted(() => {
41
44
  devtools.mount(div.value);
package/dist/cjs/devtools.vue.cjs.map CHANGED
@@ -1 +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;;;;;;;;;;;"}
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 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 CHANGED
@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
11
11
  shadowDOMTarget: {},
12
12
  style: {},
13
13
  onClose: { type: Function },
14
- hideDisabledQueries: { type: Boolean }
14
+ hideDisabledQueries: { type: Boolean },
15
+ theme: {}
15
16
  },
16
17
  setup(__props) {
17
18
  const props = __props;
@@ -35,12 +36,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
35
36
  styleNonce: props.styleNonce,
36
37
  shadowDOMTarget: props.shadowDOMTarget,
37
38
  hideDisabledQueries: props.hideDisabledQueries,
38
- onClose: props.onClose
39
+ onClose: props.onClose,
40
+ theme: props.theme
39
41
  });
40
42
  vue.watchEffect(() => {
41
43
  devtools.setOnClose(props.onClose ?? (() => {
42
44
  }));
43
45
  devtools.setErrorTypes(props.errorTypes || []);
46
+ devtools.setTheme(props.theme);
44
47
  });
45
48
  vue.onMounted(() => {
46
49
  devtools.mount(div.value);
package/dist/cjs/devtoolsPanel.vue.cjs.map CHANGED
@@ -1 +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;;;;;;;;;;;;"}
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 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 CHANGED
@@ -1,4 +1,4 @@
1
- import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
1
+ import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
2
2
  import { QueryClient } from '@tanstack/vue-query';
3
3
  export interface DevtoolsOptions {
4
4
  /**
@@ -37,6 +37,11 @@ export interface DevtoolsOptions {
37
37
  * Set this to true to hide disabled queries from the devtools panel.
38
38
  */
39
39
  hideDisabledQueries?: boolean;
40
+ /**
41
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
42
+ * Defaults to 'system'.
43
+ */
44
+ theme?: Theme;
40
45
  }
41
46
  export interface DevtoolsPanelOptions {
42
47
  /**
@@ -70,4 +75,9 @@ export interface DevtoolsPanelOptions {
70
75
  * Set this to true to hide disabled queries from the devtools panel.
71
76
  */
72
77
  hideDisabledQueries?: boolean;
78
+ /**
79
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
80
+ * Defaults to 'system'.
81
+ */
82
+ theme?: Theme;
73
83
  }
package/dist/esm/devtools.vue.js CHANGED
@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
11
11
  errorTypes: {},
12
12
  styleNonce: {},
13
13
  shadowDOMTarget: {},
14
- hideDisabledQueries: { type: Boolean }
14
+ hideDisabledQueries: { type: Boolean },
15
+ theme: {}
15
16
  },
16
17
  setup(__props) {
17
18
  const props = __props;
@@ -28,13 +29,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
28
29
  errorTypes: props.errorTypes,
29
30
  styleNonce: props.styleNonce,
30
31
  shadowDOMTarget: props.shadowDOMTarget,
31
- hideDisabledQueries: props.hideDisabledQueries
32
+ hideDisabledQueries: props.hideDisabledQueries,
33
+ theme: props.theme
32
34
  });
33
35
  watchEffect(() => {
34
36
  devtools.setButtonPosition(props.buttonPosition || "bottom-right");
35
37
  devtools.setPosition(props.position || "bottom");
36
38
  devtools.setInitialIsOpen(props.initialIsOpen);
37
39
  devtools.setErrorTypes(props.errorTypes || []);
40
+ devtools.setTheme(props.theme || "system");
38
41
  });
39
42
  onMounted(() => {
40
43
  devtools.mount(div.value);
package/dist/esm/devtools.vue.js.map CHANGED
@@ -1 +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;;;;;;;;;;"}
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 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 CHANGED
@@ -10,7 +10,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
10
10
  shadowDOMTarget: {},
11
11
  style: {},
12
12
  onClose: { type: Function },
13
- hideDisabledQueries: { type: Boolean }
13
+ hideDisabledQueries: { type: Boolean },
14
+ theme: {}
14
15
  },
15
16
  setup(__props) {
16
17
  const props = __props;
@@ -34,12 +35,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
34
35
  styleNonce: props.styleNonce,
35
36
  shadowDOMTarget: props.shadowDOMTarget,
36
37
  hideDisabledQueries: props.hideDisabledQueries,
37
- onClose: props.onClose
38
+ onClose: props.onClose,
39
+ theme: props.theme
38
40
  });
39
41
  watchEffect(() => {
40
42
  devtools.setOnClose(props.onClose ?? (() => {
41
43
  }));
42
44
  devtools.setErrorTypes(props.errorTypes || []);
45
+ devtools.setTheme(props.theme);
43
46
  });
44
47
  onMounted(() => {
45
48
  devtools.mount(div.value);
package/dist/esm/devtoolsPanel.vue.js.map CHANGED
@@ -1 +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;;;;;;;;;;;"}
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 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 CHANGED
@@ -1,4 +1,4 @@
1
- import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
1
+ import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
2
2
  import { QueryClient } from '@tanstack/vue-query';
3
3
  export interface DevtoolsOptions {
4
4
  /**
@@ -37,6 +37,11 @@ export interface DevtoolsOptions {
37
37
  * Set this to true to hide disabled queries from the devtools panel.
38
38
  */
39
39
  hideDisabledQueries?: boolean;
40
+ /**
41
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
42
+ * Defaults to 'system'.
43
+ */
44
+ theme?: Theme;
40
45
  }
41
46
  export interface DevtoolsPanelOptions {
42
47
  /**
@@ -70,4 +75,9 @@ export interface DevtoolsPanelOptions {
70
75
  * Set this to true to hide disabled queries from the devtools panel.
71
76
  */
72
77
  hideDisabledQueries?: boolean;
78
+ /**
79
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
80
+ * Defaults to 'system'.
81
+ */
82
+ theme?: Theme;
73
83
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/vue-query-devtools",
3
- "version": "6.0.0",
3
+ "version": "6.1.0",
4
4
  "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -42,7 +42,7 @@
42
42
  "!src/__tests__"
43
43
  ],
44
44
  "dependencies": {
45
- "@tanstack/query-devtools": "5.90.1"
45
+ "@tanstack/query-devtools": "5.91.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@vitejs/plugin-vue": "^5.2.4",
@@ -51,11 +51,11 @@
51
51
  "vite": "^6.3.6",
52
52
  "vue": "^3.4.27",
53
53
  "vue-tsc": "^2.2.8",
54
- "@tanstack/vue-query": "5.91.0"
54
+ "@tanstack/vue-query": "5.91.2"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "vue": "^3.3.0",
58
- "@tanstack/vue-query": "^5.91.0"
58
+ "@tanstack/vue-query": "^5.91.2"
59
59
  },
60
60
  "scripts": {
61
61
  "clean": "premove ./build ./coverage ./dist-ts",
package/src/devtools.vue CHANGED
@@ -20,6 +20,7 @@ const devtools = new TanstackQueryDevtools({
20
20
  styleNonce: props.styleNonce,
21
21
  shadowDOMTarget: props.shadowDOMTarget,
22
22
  hideDisabledQueries: props.hideDisabledQueries,
23
+ theme: props.theme,
23
24
  })
24
25
 
25
26
  watchEffect(() => {
@@ -27,6 +28,7 @@ watchEffect(() => {
27
28
  devtools.setPosition(props.position || 'bottom')
28
29
  devtools.setInitialIsOpen(props.initialIsOpen)
29
30
  devtools.setErrorTypes(props.errorTypes || [])
31
+ devtools.setTheme(props.theme || 'system')
30
32
  })
31
33
 
32
34
  onMounted(() => {
package/src/devtoolsPanel.vue CHANGED
@@ -28,11 +28,13 @@ const devtools = new TanstackQueryDevtoolsPanel({
28
28
  shadowDOMTarget: props.shadowDOMTarget,
29
29
  hideDisabledQueries: props.hideDisabledQueries,
30
30
  onClose: props.onClose,
31
+ theme: props.theme,
31
32
  })
32
33
 
33
34
  watchEffect(() => {
34
35
  devtools.setOnClose(props.onClose ?? (() => {}))
35
36
  devtools.setErrorTypes(props.errorTypes || [])
37
+ devtools.setTheme(props.theme)
36
38
  })
37
39
 
38
40
  onMounted(() => {
package/src/types.ts CHANGED
@@ -2,6 +2,7 @@ import type {
2
2
  DevtoolsButtonPosition,
3
3
  DevtoolsErrorType,
4
4
  DevtoolsPosition,
5
+ Theme,
5
6
  } from '@tanstack/query-devtools'
6
7
  import type { QueryClient } from '@tanstack/vue-query'
7
8
 
@@ -42,6 +43,11 @@ export interface DevtoolsOptions {
42
43
  * Set this to true to hide disabled queries from the devtools panel.
43
44
  */
44
45
  hideDisabledQueries?: boolean
46
+ /**
47
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
48
+ * Defaults to 'system'.
49
+ */
50
+ theme?: Theme
45
51
  }
46
52
 
47
53
  export interface DevtoolsPanelOptions {
@@ -78,4 +84,9 @@ export interface DevtoolsPanelOptions {
78
84
  * Set this to true to hide disabled queries from the devtools panel.
79
85
  */
80
86
  hideDisabledQueries?: boolean
87
+ /**
88
+ * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
89
+ * Defaults to 'system'.
90
+ */
91
+ theme?: Theme
81
92
  }