@tanstack/vue-query-devtools 6.2.4 → 6.3.0

package/dist/_virtual/_/plugin-vue/export-helper.js

@@ -0,0 +1,8 @@
+//#region \0/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { export_helper_default as default };

package/dist/devtools.js

@@ -0,0 +1,16 @@
+import devtools_vue_vue_type_script_setup_true_lang_default from "./devtools.vue_vue_type_script_setup_true_lang.js";
+import export_helper_default from "./_virtual/_/plugin-vue/export-helper.js";
+import { createElementBlock, openBlock } from "vue";
+//#region src/devtools.vue
+const _hoisted_1 = {
+	class: "tsqd-parent-container",
+	ref: "div"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, null, 512);
+}
+var devtools_default = /*#__PURE__*/ export_helper_default(devtools_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/runner/work/query/query/packages/vue-query-devtools/src/devtools.vue"]]);
+//#endregion
+export { devtools_default as default };
+
+//# sourceMappingURL=devtools.js.map

package/dist/devtools.js.map

@@ -0,0 +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"}

package/dist/devtools.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import { defineComponent, onMounted, onScopeDispose, ref, watchEffect } from "vue";
+import { onlineManager, useQueryClient } from "@tanstack/vue-query";
+import { TanstackQueryDevtools } from "@tanstack/query-devtools";
+//#region src/devtools.vue?vue&type=script&setup=true&lang.ts
+var devtools_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "devtools",
+	props: {
+		initialIsOpen: {
+			type: Boolean,
+			required: false
+		},
+		buttonPosition: {
+			type: null,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		client: {
+			type: Object,
+			required: false
+		},
+		errorTypes: {
+			type: Array,
+			required: false
+		},
+		styleNonce: {
+			type: String,
+			required: false
+		},
+		shadowDOMTarget: {
+			type: null,
+			required: false
+		},
+		hideDisabledQueries: {
+			type: Boolean,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const div = ref();
+		const client = props.client || useQueryClient();
+		const devtools = new TanstackQueryDevtools({
+			client,
+			queryFlavor: "Vue Query",
+			version: "5",
+			onlineManager,
+			buttonPosition: props.buttonPosition,
+			position: props.position,
+			initialIsOpen: props.initialIsOpen,
+			errorTypes: props.errorTypes,
+			styleNonce: props.styleNonce,
+			shadowDOMTarget: props.shadowDOMTarget,
+			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);
+			onScopeDispose(() => {
+				devtools.unmount();
+			});
+		});
+		const __returned__ = {
+			props,
+			div,
+			client,
+			devtools
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+//#endregion
+export { devtools_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=devtools.vue_vue_type_script_setup_true_lang.js.map

package/dist/devtools.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +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"}

package/dist/devtoolsPanel.js

@@ -0,0 +1,16 @@
+import export_helper_default from "./_virtual/_/plugin-vue/export-helper.js";
+import devtoolsPanel_vue_vue_type_script_setup_true_lang_default from "./devtoolsPanel.vue_vue_type_script_setup_true_lang.js";
+import { createElementBlock, normalizeStyle, openBlock } from "vue";
+//#region src/devtoolsPanel.vue
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		style: normalizeStyle($setup.style),
+		class: "tsqd-parent-container",
+		ref: "div"
+	}, null, 4);
+}
+var devtoolsPanel_default = /*#__PURE__*/ export_helper_default(devtoolsPanel_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/runner/work/query/query/packages/vue-query-devtools/src/devtoolsPanel.vue"]]);
+//#endregion
+export { devtoolsPanel_default as default };
+
+//# sourceMappingURL=devtoolsPanel.js.map

package/dist/devtoolsPanel.js.map

@@ -0,0 +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"}

package/dist/devtoolsPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,95 @@
+import { computed, defineComponent, onMounted, onScopeDispose, ref, watchEffect } from "vue";
+import { onlineManager, useQueryClient } from "@tanstack/vue-query";
+import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
+//#region src/devtoolsPanel.vue?vue&type=script&setup=true&lang.ts
+var devtoolsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "devtoolsPanel",
+	props: {
+		client: {
+			type: Object,
+			required: false
+		},
+		errorTypes: {
+			type: Array,
+			required: false
+		},
+		styleNonce: {
+			type: String,
+			required: false
+		},
+		shadowDOMTarget: {
+			type: null,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		onClose: {
+			type: Function,
+			required: false
+		},
+		hideDisabledQueries: {
+			type: Boolean,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const style = computed(() => {
+			return {
+				height: "500px",
+				...props.style
+			};
+		});
+		const div = ref();
+		const client = props.client || useQueryClient();
+		const devtools = new TanstackQueryDevtoolsPanel({
+			client,
+			queryFlavor: "Vue Query",
+			version: "5",
+			onlineManager,
+			buttonPosition: "bottom-left",
+			position: "bottom",
+			initialIsOpen: true,
+			errorTypes: props.errorTypes,
+			styleNonce: props.styleNonce,
+			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(() => {
+			devtools.mount(div.value);
+			onScopeDispose(() => {
+				devtools.unmount();
+			});
+		});
+		const __returned__ = {
+			props,
+			style,
+			div,
+			client,
+			devtools
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+//#endregion
+export { devtoolsPanel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=devtoolsPanel.vue_vue_type_script_setup_true_lang.js.map

package/dist/devtoolsPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +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"}

package/dist/{esm/index.d.ts → index.d.ts}

@@ -1,4 +1,7 @@
-import { DefineComponent } from 'vue';
-import { DevtoolsOptions, DevtoolsPanelOptions } from './types.js';
+import { DevtoolsOptions, DevtoolsPanelOptions } from "./types.js";
+import { DefineComponent } from "vue";
+//#region src/index.d.ts
 export declare const VueQueryDevtools: DefineComponent<DevtoolsOptions, {}, unknown>;
 export declare const VueQueryDevtoolsPanel: DefineComponent<DevtoolsPanelOptions, {}, unknown>;
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;;qBAKa,kBAA+B,gBAC1C;qBAKW,uBAAyC,gBACpD"}

package/dist/index.js

@@ -0,0 +1,9 @@
+import devtools_default from "./devtools.js";
+import devtoolsPanel_default from "./devtoolsPanel.js";
+//#region src/index.ts
+const VueQueryDevtools = devtools_default;
+const VueQueryDevtoolsPanel = devtoolsPanel_default;
+//#endregion
+export { VueQueryDevtools, VueQueryDevtoolsPanel };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["devtools","devtoolsPanel"],"sources":["../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport devtoolsPanel from './devtoolsPanel.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions, DevtoolsPanelOptions } from './types'\n\nexport const VueQueryDevtools = devtools as DefineComponent<\n  DevtoolsOptions,\n  {},\n  unknown\n>\n\nexport const VueQueryDevtoolsPanel = devtoolsPanel as DefineComponent<\n  DevtoolsPanelOptions,\n  {},\n  unknown\n>\n"],"mappings":";;;AAKA,MAAa,mBAAmBA;AAMhC,MAAa,wBAAwBC"}

package/dist/stub.d.ts

@@ -0,0 +1,5 @@
+//#region src/stub.d.ts
+export declare const VueQueryDevtools: () => null;
+export declare const VueQueryDevtoolsPanel: () => null;
+//#endregion
+//# sourceMappingURL=stub.d.ts.map

package/dist/stub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stub.d.ts","names":[],"sources":["../src/stub.ts"],"mappings":";qBAAa;qBAIA"}

package/dist/stub.js

@@ -0,0 +1,11 @@
+//#region src/stub.ts
+const VueQueryDevtools = function() {
+	return null;
+};
+const VueQueryDevtoolsPanel = function() {
+	return null;
+};
+//#endregion
+export { VueQueryDevtools, VueQueryDevtoolsPanel };
+
+//# sourceMappingURL=stub.js.map

package/dist/stub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stub.js","names":[],"sources":["../src/stub.ts"],"sourcesContent":["export const VueQueryDevtools = function () {\n  return null\n}\n\nexport const VueQueryDevtoolsPanel = function () {\n  return null\n}\n"],"mappings":";AAAA,MAAa,mBAAmB,WAAY;CAC1C,OAAO;AACT;AAEA,MAAa,wBAAwB,WAAY;CAC/C,OAAO;AACT"}

package/dist/types.d.ts

@@ -0,0 +1,90 @@
+import { QueryClient } from "@tanstack/vue-query";
+import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from "@tanstack/query-devtools";
+//#region src/types.d.ts
+export interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean;
+  /**
+   * 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;
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient;
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>;
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string;
+  /**
+   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot;
+  /**
+   * 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.
+   *
+   * @defaultValue system
+   */
+  theme?: Theme;
+}
+export interface DevtoolsPanelOptions {
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient;
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>;
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string;
+  /**
+   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot;
+  /**
+   * Custom styles for the devtools panel
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Callback function that is called when the devtools panel is closed
+   */
+  onClose?: () => void;
+  /**
+   * 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.
+   *
+   * @defaultValue system
+   */
+  theme?: Theme;
+}
+//#endregion
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "6.2.4",
+  "version": "6.3.0",
   "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -15,23 +15,19 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "module": "dist/esm/index.js",
-  "main": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "exports": {
     ".": {
       "@tanstack/custom-condition": "./src/index.ts",
-      "types": "./dist/esm/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "development": "./dist/index.js",
+      "default": "./dist/stub.js"
     },
     "./production": {
-      "@tanstack/custom-condition": "./src/production.ts",
-      "types": "./dist/esm/production.d.ts",
-      "default": "./dist/esm/production.js"
-    },
-    "./dist/production.js": {
-      "types": "./dist/esm/production.d.ts",
-      "default": "./dist/esm/production.js"
+      "@tanstack/custom-condition": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -42,20 +38,19 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.103.2"
+    "@tanstack/query-devtools": "5.104.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
-    "eslint-plugin-vue": "^10.5.0",
+    "@tanstack/vue-query": "5.104.0",
+    "eslint-plugin-vue": "^10.11.1",
     "typescript": "5.8.3",
-    "vite": "^6.4.1",
-    "vue": "^3.4.27",
-    "vue-tsc": "^2.2.8",
-    "@tanstack/vue-query": "5.103.2"
+    "unplugin-vue": "^8.0.0",
+    "vue": "^3.5.43",
+    "vue-tsc": "^2.2.8"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "@tanstack/vue-query": "^5.103.2"
+    "@tanstack/vue-query": "^5.104.0",
+    "vue": "^3.3.0"
   },
   "nx": {
     "targets": {
@@ -72,9 +67,7 @@
     "compile": "vue-tsc --project tsconfig.json",
     "test:eslint": "eslint --concurrency=auto ./src",
     "test:types": "vue-tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo",
-    "test:lib": "vitest",
-    "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict && attw --pack",
-    "build": "vite build"
+    "build": "tsdown"
   }
 }

package/src/index.ts

@@ -3,18 +3,14 @@ import devtoolsPanel from './devtoolsPanel.vue'
 import type { DefineComponent } from 'vue'
 import type { DevtoolsOptions, DevtoolsPanelOptions } from './types'
 
-export const VueQueryDevtools = (
-  process.env.NODE_ENV !== 'development'
-    ? function () {
-        return null
-      }
-    : devtools
-) as DefineComponent<DevtoolsOptions, {}, unknown>
+export const VueQueryDevtools = devtools as DefineComponent<
+  DevtoolsOptions,
+  {},
+  unknown
+>
 
-export const VueQueryDevtoolsPanel = (
-  process.env.NODE_ENV !== 'development'
-    ? function () {
-        return null
-      }
-    : devtoolsPanel
-) as DefineComponent<DevtoolsPanelOptions, {}, unknown>
+export const VueQueryDevtoolsPanel = devtoolsPanel as DefineComponent<
+  DevtoolsPanelOptions,
+  {},
+  unknown
+>

package/src/stub.ts

@@ -0,0 +1,7 @@
+export const VueQueryDevtools = function () {
+  return null
+}
+
+export const VueQueryDevtoolsPanel = function () {
+  return null
+}

package/dist/cjs/__tests__/VueQueryDevtoolsPanel.test.d.cts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/devtools.vue.cjs

@@ -1,59 +0,0 @@
-"use strict";
-const vue = require("vue");
-const vueQuery = require("@tanstack/vue-query");
-const queryDevtools = require("@tanstack/query-devtools");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "devtools",
-  props: {
-    initialIsOpen: { type: Boolean },
-    buttonPosition: {},
-    position: {},
-    client: {},
-    errorTypes: {},
-    styleNonce: {},
-    shadowDOMTarget: {},
-    hideDisabledQueries: { type: Boolean },
-    theme: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const div = vue.ref();
-    const client = props.client || vueQuery.useQueryClient();
-    const devtools = new queryDevtools.TanstackQueryDevtools({
-      client,
-      queryFlavor: "Vue Query",
-      version: "5",
-      onlineManager: vueQuery.onlineManager,
-      buttonPosition: props.buttonPosition,
-      position: props.position,
-      initialIsOpen: props.initialIsOpen,
-      errorTypes: props.errorTypes,
-      styleNonce: props.styleNonce,
-      shadowDOMTarget: props.shadowDOMTarget,
-      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);
-      vue.onScopeDispose(() => {
-        devtools.unmount();
-      });
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: "tsqd-parent-container",
-        ref_key: "div",
-        ref: div
-      }, null, 512);
-    };
-  }
-});
-module.exports = _sfc_main;
-//# sourceMappingURL=devtools.vue.cjs.map

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

@@ -1 +0,0 @@
-{"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  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["ref","useQueryClient","TanstackQueryDevtools","onlineManager","watchEffect","onMounted","onScopeDispose","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAMA,IAAAA,IAAA;AACZ,UAAM,SAAS,MAAM,UAAUC,wBAAA;AAC/B,UAAM,WAAW,IAAIC,oCAAsB;AAAA,MACzC;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAAA;AAAAA,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;AAChB,eAAS,kBAAkB,MAAM,kBAAkB,cAAc;AACjE,eAAS,YAAY,MAAM,YAAY,QAAQ;AAC/C,eAAS,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAC7C,eAAS,SAAS,MAAM,SAAS,QAAQ;AAAA,IAC3C,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,eAAS,MAAM,IAAI,KAAoB;AACvCC,UAAAA,eAAe,MAAM;AACnB,iBAAS,QAAA;AAAA,MACX,CAAC;AAAA,IACH,CAAC;;8BAICC,IAAAA,mBAAmD,OAAA;AAAA,QAA9C,OAAM;AAAA,iBAA4B;AAAA,QAAJ,KAAI;AAAA,MAAA;;;;;"}

package/dist/cjs/devtools.vue.d.cts

@@ -1,3 +0,0 @@
-import { DevtoolsOptions } from './types.cjs';
-declare const _default: import('vue').DefineComponent<DevtoolsOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DevtoolsOptions> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/cjs/devtools.vue2.cjs

@@ -1,4 +0,0 @@
-"use strict";
-const devtools_vue_vue_type_script_setup_true_lang = require("./devtools.vue.cjs");
-module.exports = devtools_vue_vue_type_script_setup_true_lang;
-//# sourceMappingURL=devtools.vue2.cjs.map

package/dist/cjs/devtools.vue2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/devtoolsPanel.vue.cjs

@@ -1,65 +0,0 @@
-"use strict";
-const vue = require("vue");
-const vueQuery = require("@tanstack/vue-query");
-const queryDevtools = require("@tanstack/query-devtools");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "devtoolsPanel",
-  props: {
-    client: {},
-    errorTypes: {},
-    styleNonce: {},
-    shadowDOMTarget: {},
-    style: {},
-    onClose: { type: Function },
-    hideDisabledQueries: { type: Boolean },
-    theme: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const style = vue.computed(() => {
-      return {
-        height: "500px",
-        ...props.style
-      };
-    });
-    const div = vue.ref();
-    const client = props.client || vueQuery.useQueryClient();
-    const devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
-      client,
-      queryFlavor: "Vue Query",
-      version: "5",
-      onlineManager: vueQuery.onlineManager,
-      buttonPosition: "bottom-left",
-      position: "bottom",
-      initialIsOpen: true,
-      errorTypes: props.errorTypes,
-      styleNonce: props.styleNonce,
-      shadowDOMTarget: props.shadowDOMTarget,
-      hideDisabledQueries: props.hideDisabledQueries,
-      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);
-      vue.onScopeDispose(() => {
-        devtools.unmount();
-      });
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        style: vue.normalizeStyle(style.value),
-        class: "tsqd-parent-container",
-        ref_key: "div",
-        ref: div
-      }, null, 4);
-    };
-  }
-});
-module.exports = _sfc_main;
-//# sourceMappingURL=devtoolsPanel.vue.cjs.map

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

@@ -1 +0,0 @@
-{"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 { 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"],"names":["computed","ref","useQueryClient","TanstackQueryDevtoolsPanel","onlineManager","watchEffect","onMounted","onScopeDispose","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AACd,UAAM,QAAQA,IAAAA,SAAc,MAAM;AAChC,aAAO;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MAAA;AAAA,IAEb,CAAC;AAED,UAAM,MAAMC,IAAAA,IAAA;AACZ,UAAM,SAAS,MAAM,UAAUC,wBAAA;AAC/B,UAAM,WAAW,IAAIC,yCAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAAA;AAAAA,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;AAChB,eAAS,WAAW,MAAM,YAAY,MAAM;AAAA,MAAC,EAAE;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAC7C,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,eAAS,MAAM,IAAI,KAAoB;AACvCC,UAAAA,eAAe,MAAM;AACnB,iBAAS,QAAA;AAAA,MACX,CAAC;AAAA,IACH,CAAC;;8BAICC,IAAAA,mBAAkE,OAAA;AAAA,QAA5D,0BAAO,MAAA,KAAK;AAAA,QAAE,OAAM;AAAA,iBAA4B;AAAA,QAAJ,KAAI;AAAA,MAAA;;;;;"}

package/dist/cjs/devtoolsPanel.vue.d.cts

@@ -1,3 +0,0 @@
-import { DevtoolsPanelOptions } from './types.cjs';
-declare const _default: import('vue').DefineComponent<DevtoolsPanelOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DevtoolsPanelOptions> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/cjs/devtoolsPanel.vue2.cjs

@@ -1,4 +0,0 @@
-"use strict";
-const devtoolsPanel_vue_vue_type_script_setup_true_lang = require("./devtoolsPanel.vue.cjs");
-module.exports = devtoolsPanel_vue_vue_type_script_setup_true_lang;
-//# sourceMappingURL=devtoolsPanel.vue2.cjs.map

package/dist/cjs/devtoolsPanel.vue2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtoolsPanel.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/index.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const devtools_vue_vue_type_script_setup_true_lang = require("./devtools.vue.cjs");
-const devtoolsPanel_vue_vue_type_script_setup_true_lang = require("./devtoolsPanel.vue.cjs");
-const VueQueryDevtools = process.env.NODE_ENV !== "development" ? function() {
-  return null;
-} : devtools_vue_vue_type_script_setup_true_lang;
-const VueQueryDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
-  return null;
-} : devtoolsPanel_vue_vue_type_script_setup_true_lang;
-exports.VueQueryDevtools = VueQueryDevtools;
-exports.VueQueryDevtoolsPanel = VueQueryDevtoolsPanel;
-//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport devtoolsPanel from './devtoolsPanel.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions, DevtoolsPanelOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n\nexport const VueQueryDevtoolsPanel = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtoolsPanel\n) as DefineComponent<DevtoolsPanelOptions, {}, unknown>\n"],"names":["devtools","devtoolsPanel"],"mappings":";;;;AAKO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAC;;;"}

package/dist/cjs/index.d.cts

@@ -1,4 +0,0 @@
-import { DefineComponent } from 'vue';
-import { DevtoolsOptions, DevtoolsPanelOptions } from './types.cjs';
-export declare const VueQueryDevtools: DefineComponent<DevtoolsOptions, {}, unknown>;
-export declare const VueQueryDevtoolsPanel: DefineComponent<DevtoolsPanelOptions, {}, unknown>;

package/dist/cjs/production.cjs

@@ -1,4 +0,0 @@
-"use strict";
-const devtools_vue_vue_type_script_setup_true_lang = require("./devtools.vue.cjs");
-module.exports = devtools_vue_vue_type_script_setup_true_lang;
-//# sourceMappingURL=production.cjs.map

package/dist/cjs/production.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"production.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/production.d.cts

@@ -1,2 +0,0 @@
-import { default as devtools } from './devtools.vue';
-export default devtools;

package/dist/cjs/types.d.cts

@@ -1,87 +0,0 @@
-import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/vue-query';
-export interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * 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;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * 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.
-     *
-     * @defaultValue system
-     */
-    theme?: Theme;
-}
-export interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: Partial<CSSStyleDeclaration>;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => void;
-    /**
-     * 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.
-     *
-     * @defaultValue system
-     */
-    theme?: Theme;
-}

package/dist/esm/__tests__/VueQueryDevtools.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/esm/__tests__/VueQueryDevtoolsPanel.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/esm/devtools.vue.d.ts

@@ -1,3 +0,0 @@
-import { DevtoolsOptions } from './types.js';
-declare const _default: import('vue').DefineComponent<DevtoolsOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DevtoolsOptions> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/esm/devtools.vue.js

@@ -1,60 +0,0 @@
-import { defineComponent, ref, watchEffect, onMounted, onScopeDispose, openBlock, createElementBlock } from "vue";
-import { useQueryClient, onlineManager } from "@tanstack/vue-query";
-import { TanstackQueryDevtools } from "@tanstack/query-devtools";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "devtools",
-  props: {
-    initialIsOpen: { type: Boolean },
-    buttonPosition: {},
-    position: {},
-    client: {},
-    errorTypes: {},
-    styleNonce: {},
-    shadowDOMTarget: {},
-    hideDisabledQueries: { type: Boolean },
-    theme: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const div = ref();
-    const client = props.client || useQueryClient();
-    const devtools = new TanstackQueryDevtools({
-      client,
-      queryFlavor: "Vue Query",
-      version: "5",
-      onlineManager,
-      buttonPosition: props.buttonPosition,
-      position: props.position,
-      initialIsOpen: props.initialIsOpen,
-      errorTypes: props.errorTypes,
-      styleNonce: props.styleNonce,
-      shadowDOMTarget: props.shadowDOMTarget,
-      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);
-      onScopeDispose(() => {
-        devtools.unmount();
-      });
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "tsqd-parent-container",
-        ref_key: "div",
-        ref: div
-      }, null, 512);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=devtools.vue.js.map

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

@@ -1 +0,0 @@
-{"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  onScopeDispose(() => {\n    devtools.unmount()\n  })\n})\n</script>\n\n<template>\n  <div class=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,MAAM,IAAA;AACZ,UAAM,SAAS,MAAM,UAAU,eAAA;AAC/B,UAAM,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;AAChB,eAAS,kBAAkB,MAAM,kBAAkB,cAAc;AACjE,eAAS,YAAY,MAAM,YAAY,QAAQ;AAC/C,eAAS,iBAAiB,MAAM,aAAa;AAC7C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAC7C,eAAS,SAAS,MAAM,SAAS,QAAQ;AAAA,IAC3C,CAAC;AAED,cAAU,MAAM;AACd,eAAS,MAAM,IAAI,KAAoB;AACvC,qBAAe,MAAM;AACnB,iBAAS,QAAA;AAAA,MACX,CAAC;AAAA,IACH,CAAC;;0BAICA,mBAAmD,OAAA;AAAA,QAA9C,OAAM;AAAA,iBAA4B;AAAA,QAAJ,KAAI;AAAA,MAAA;;;;"}

package/dist/esm/devtools.vue2.js

@@ -1,5 +0,0 @@
-import _sfc_main from "./devtools.vue.js";
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=devtools.vue2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"devtools.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/devtoolsPanel.vue.d.ts

@@ -1,3 +0,0 @@
-import { DevtoolsPanelOptions } from './types.js';
-declare const _default: import('vue').DefineComponent<DevtoolsPanelOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DevtoolsPanelOptions> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/esm/devtoolsPanel.vue.js

@@ -1,66 +0,0 @@
-import { defineComponent, computed, ref, watchEffect, onMounted, onScopeDispose, openBlock, createElementBlock, normalizeStyle } from "vue";
-import { useQueryClient, onlineManager } from "@tanstack/vue-query";
-import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "devtoolsPanel",
-  props: {
-    client: {},
-    errorTypes: {},
-    styleNonce: {},
-    shadowDOMTarget: {},
-    style: {},
-    onClose: { type: Function },
-    hideDisabledQueries: { type: Boolean },
-    theme: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const style = computed(() => {
-      return {
-        height: "500px",
-        ...props.style
-      };
-    });
-    const div = ref();
-    const client = props.client || useQueryClient();
-    const devtools = new TanstackQueryDevtoolsPanel({
-      client,
-      queryFlavor: "Vue Query",
-      version: "5",
-      onlineManager,
-      buttonPosition: "bottom-left",
-      position: "bottom",
-      initialIsOpen: true,
-      errorTypes: props.errorTypes,
-      styleNonce: props.styleNonce,
-      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(() => {
-      devtools.mount(div.value);
-      onScopeDispose(() => {
-        devtools.unmount();
-      });
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        style: normalizeStyle(style.value),
-        class: "tsqd-parent-container",
-        ref_key: "div",
-        ref: div
-      }, null, 4);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=devtoolsPanel.vue.js.map

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

@@ -1 +0,0 @@
-{"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 { 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"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AACd,UAAM,QAAQ,SAAc,MAAM;AAChC,aAAO;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MAAA;AAAA,IAEb,CAAC;AAED,UAAM,MAAM,IAAA;AACZ,UAAM,SAAS,MAAM,UAAU,eAAA;AAC/B,UAAM,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;AAChB,eAAS,WAAW,MAAM,YAAY,MAAM;AAAA,MAAC,EAAE;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAC7C,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B,CAAC;AAED,cAAU,MAAM;AACd,eAAS,MAAM,IAAI,KAAoB;AACvC,qBAAe,MAAM;AACnB,iBAAS,QAAA;AAAA,MACX,CAAC;AAAA,IACH,CAAC;;0BAICA,mBAAkE,OAAA;AAAA,QAA5D,sBAAO,MAAA,KAAK;AAAA,QAAE,OAAM;AAAA,iBAA4B;AAAA,QAAJ,KAAI;AAAA,MAAA;;;;"}

package/dist/esm/devtoolsPanel.vue2.js

@@ -1,5 +0,0 @@
-import _sfc_main from "./devtoolsPanel.vue.js";
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=devtoolsPanel.vue2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"devtoolsPanel.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/index.js

@@ -1,13 +0,0 @@
-import _sfc_main from "./devtools.vue.js";
-import _sfc_main$1 from "./devtoolsPanel.vue.js";
-const VueQueryDevtools = process.env.NODE_ENV !== "development" ? function() {
-  return null;
-} : _sfc_main;
-const VueQueryDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
-  return null;
-} : _sfc_main$1;
-export {
-  VueQueryDevtools,
-  VueQueryDevtoolsPanel
-};
-//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport devtoolsPanel from './devtoolsPanel.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions, DevtoolsPanelOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n\nexport const VueQueryDevtoolsPanel = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtoolsPanel\n) as DefineComponent<DevtoolsPanelOptions, {}, unknown>\n"],"names":["devtools","devtoolsPanel"],"mappings":";;AAKO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAC;"}

package/dist/esm/production.d.ts

@@ -1,2 +0,0 @@
-import { default as devtools } from './devtools.vue';
-export default devtools;

package/dist/esm/production.js

@@ -1,5 +0,0 @@
-import _sfc_main from "./devtools.vue.js";
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=production.js.map

package/dist/esm/production.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/types.d.ts

@@ -1,87 +0,0 @@
-import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/vue-query';
-export interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * 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;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * 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.
-     *
-     * @defaultValue system
-     */
-    theme?: Theme;
-}
-export interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: Partial<CSSStyleDeclaration>;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => void;
-    /**
-     * 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.
-     *
-     * @defaultValue system
-     */
-    theme?: Theme;
-}

package/src/production.ts

@@ -1,3 +0,0 @@
-import devtools from './devtools.vue'
-
-export default devtools