@tanstack/vue-query-devtools 6.1.5 → 6.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "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.93.0"
+    "@tanstack/query-devtools": "5.94.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
@@ -51,11 +51,11 @@
     "vite": "^6.4.1",
     "vue": "^3.4.27",
     "vue-tsc": "^2.2.8",
-    "@tanstack/vue-query": "5.92.9"
+    "@tanstack/vue-query": "5.94.4"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "@tanstack/vue-query": "^5.92.9"
+    "@tanstack/vue-query": "^5.94.4"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

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", {
-        className: "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})\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","_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;AAAA,IACzC,CAAC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;8BAICC,IAAAA,mBAAuD,OAAA;AAAA,QAAlD,WAAU;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),
-        className: "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})\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","_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;AAAA,IACzC,CAAC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;8BAICC,IAAAA,mBAAsE,OAAA;AAAA,QAAhE,0BAAO,MAAA,KAAK;AAAA,QAAE,WAAU;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,83 +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 React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to '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.
-     * Defaults to '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?: () => unknown;
-    /**
-     * 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.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", {
-        className: "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})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div className=\"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;AAAA,IACzC,CAAC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;0BAICA,mBAAuD,OAAA;AAAA,QAAlD,WAAU;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),
-        className: "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})\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":["_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;AAAA,IACzC,CAAC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;0BAICA,mBAAsE,OAAA;AAAA,QAAhE,sBAAO,MAAA,KAAK;AAAA,QAAE,WAAU;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.d.ts

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

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,83 +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 React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to '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.
-     * Defaults to '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?: () => unknown;
-    /**
-     * 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;
-}