@tanstack/vue-query-devtools 6.1.3 → 6.1.5

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

@@ -1 +1 @@
-{"version":3,"file":"devtools.vue.cjs","sources":["../../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  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;;;;;;;;;;;"}
+{"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,12 +1,3 @@
 import { DevtoolsOptions } from './types.cjs';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsOptions>>>, {}, {}>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.vue.cjs","sources":["../../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  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;;;;;;;;;;;;"}
+{"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,12 +1,3 @@
 import { DevtoolsPanelOptions } from './types.cjs';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsPanelOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsPanelOptions>>>, {}, {}>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"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;AACH,SAAA;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC;;;"}
+{"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/types.d.cts

@@ -66,7 +66,7 @@ export interface DevtoolsPanelOptions {
      * @example { height: '100%' }
      * @example { height: '100%', width: '100%' }
      */
-    style?: React.CSSProperties;
+    style?: Partial<CSSStyleDeclaration>;
     /**
      * Callback function that is called when the devtools panel is closed
      */

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

@@ -1,12 +1,3 @@
 import { DevtoolsOptions } from './types.js';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsOptions>>>, {}, {}>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/esm/devtools.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watchEffect, onMounted, onScopeDispose, createElementBlock, openBlock } from "vue";
+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({

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

@@ -1 +1 @@
-{"version":3,"file":"devtools.vue.js","sources":["../../src/devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type { DevtoolsOptions } from './types'\n\nconst props = defineProps<DevtoolsOptions>()\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtools({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: props.buttonPosition,\n  position: props.position,\n  initialIsOpen: props.initialIsOpen,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  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;;;;;;;;;;"}
+{"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/devtoolsPanel.vue.d.ts

@@ -1,12 +1,3 @@
 import { DevtoolsPanelOptions } from './types.js';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsPanelOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsPanelOptions>>>, {}, {}>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/esm/devtoolsPanel.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watchEffect, onMounted, onScopeDispose, createElementBlock, openBlock, normalizeStyle } from "vue";
+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({

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

@@ -1 +1 @@
-{"version":3,"file":"devtoolsPanel.vue.js","sources":["../../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n  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;;;;;;;;;;;"}
+{"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/index.js.map

@@ -1 +1 @@
-{"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;AACH,SAAA;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC;"}
+{"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/types.d.ts

@@ -66,7 +66,7 @@ export interface DevtoolsPanelOptions {
      * @example { height: '100%' }
      * @example { height: '100%', width: '100%' }
      */
-    style?: React.CSSProperties;
+    style?: Partial<CSSStyleDeclaration>;
     /**
      * Callback function that is called when the devtools panel is closed
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -42,20 +42,20 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.92.0"
+    "@tanstack/query-devtools": "5.93.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
     "eslint-plugin-vue": "^10.5.0",
     "typescript": "5.8.3",
-    "vite": "^6.3.6",
+    "vite": "^6.4.1",
     "vue": "^3.4.27",
     "vue-tsc": "^2.2.8",
-    "@tanstack/vue-query": "5.92.3"
+    "@tanstack/vue-query": "5.92.9"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "@tanstack/vue-query": "^5.92.3"
+    "@tanstack/vue-query": "^5.92.9"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/devtoolsPanel.vue

@@ -2,11 +2,10 @@
 import { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'
 import { onlineManager, useQueryClient } from '@tanstack/vue-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type { StyleValue } from 'vue'
 import type { DevtoolsPanelOptions } from './types'
 
 const props = defineProps<DevtoolsPanelOptions>()
-const style = computed<StyleValue>(() => {
+const style = computed<any>(() => {
   return {
     height: '500px',
     ...props.style,

package/src/types.ts

@@ -74,7 +74,7 @@ export interface DevtoolsPanelOptions {
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
-  style?: React.CSSProperties
+  style?: Partial<CSSStyleDeclaration>
 
   /**
    * Callback function that is called when the devtools panel is closed