@tanstack/query-devtools 5.91.0 → 5.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/DevtoolsComponent/{TO44TVBA.js → CDWEKZTF.js} +1 -1
- package/build/DevtoolsComponent/{3Y4HR3WR.js → WDYDFRGG.js} +1 -1
- package/build/DevtoolsPanelComponent/{NZQXYXX4.js → 2SSKDMRQ.js} +1 -1
- package/build/DevtoolsPanelComponent/{YK4QRCEX.js → 5A54IY5X.js} +1 -1
- package/build/chunk/{ZDWCUMSJ.js → AP7HFJJL.js} +313 -246
- package/build/chunk/{2LDRPXKC.js → LZRB7T7H.js} +314 -246
- package/build/dev.cjs +314 -246
- package/build/dev.js +2 -2
- package/build/index.cjs +313 -246
- package/build/index.js +2 -2
- package/package.json +3 -3
- package/src/Devtools.tsx +286 -164
- package/src/Explorer.tsx +16 -2
- package/src/contexts/PiPContext.tsx +17 -5
package/build/index.cjs
CHANGED
|
@@ -11949,7 +11949,7 @@ var init_QueryDevtoolsContext = __esm({
|
|
|
11949
11949
|
});
|
|
11950
11950
|
|
|
11951
11951
|
// src/contexts/PiPContext.tsx
|
|
11952
|
-
var PiPContext, PiPProvider, usePiPWindow;
|
|
11952
|
+
var PipOpenError, PiPContext, PiPProvider, usePiPWindow;
|
|
11953
11953
|
var init_PiPContext = __esm({
|
|
11954
11954
|
"src/contexts/PiPContext.tsx"() {
|
|
11955
11955
|
init_web();
|
|
@@ -11957,6 +11957,8 @@ var init_PiPContext = __esm({
|
|
|
11957
11957
|
init_web();
|
|
11958
11958
|
init_constants();
|
|
11959
11959
|
init_QueryDevtoolsContext();
|
|
11960
|
+
PipOpenError = class extends Error {
|
|
11961
|
+
};
|
|
11960
11962
|
PiPContext = createContext(void 0);
|
|
11961
11963
|
PiPProvider = (props) => {
|
|
11962
11964
|
const [pipWindow, setPipWindow] = createSignal(null);
|
|
@@ -11973,7 +11975,7 @@ var init_PiPContext = __esm({
|
|
|
11973
11975
|
}
|
|
11974
11976
|
const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
|
|
11975
11977
|
if (!pip) {
|
|
11976
|
-
throw new
|
|
11978
|
+
throw new PipOpenError("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
|
|
11977
11979
|
}
|
|
11978
11980
|
pip.document.head.innerHTML = "";
|
|
11979
11981
|
pip.document.body.innerHTML = "";
|
|
@@ -12017,7 +12019,16 @@ var init_PiPContext = __esm({
|
|
|
12017
12019
|
createEffect(() => {
|
|
12018
12020
|
const pip_open = props.localStore.pip_open ?? "false";
|
|
12019
12021
|
if (pip_open === "true" && !props.disabled) {
|
|
12020
|
-
|
|
12022
|
+
try {
|
|
12023
|
+
requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
|
|
12024
|
+
} catch (error) {
|
|
12025
|
+
if (error instanceof PipOpenError) {
|
|
12026
|
+
props.setLocalStore("pip_open", "false");
|
|
12027
|
+
props.setLocalStore("open", "false");
|
|
12028
|
+
return;
|
|
12029
|
+
}
|
|
12030
|
+
throw error;
|
|
12031
|
+
}
|
|
12021
12032
|
}
|
|
12022
12033
|
});
|
|
12023
12034
|
createEffect(() => {
|
|
@@ -12154,6 +12165,7 @@ function Explorer(props) {
|
|
|
12154
12165
|
});
|
|
12155
12166
|
const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
|
|
12156
12167
|
const currentDataPath = props.dataPath ?? [];
|
|
12168
|
+
const inputId = createUniqueId();
|
|
12157
12169
|
return (() => {
|
|
12158
12170
|
var _el$6 = _tmpl$72();
|
|
12159
12171
|
insert(_el$6, createComponent(Show, {
|
|
@@ -12229,15 +12241,17 @@ function Explorer(props) {
|
|
|
12229
12241
|
}
|
|
12230
12242
|
}), null);
|
|
12231
12243
|
createRenderEffect((_p$) => {
|
|
12232
|
-
var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
|
|
12244
|
+
var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = expanded() ? "true" : "false", _v$6 = styles().info;
|
|
12233
12245
|
_v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
|
|
12234
12246
|
_v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
|
|
12235
|
-
_v$5 !== _p$.a &&
|
|
12247
|
+
_v$5 !== _p$.a && setAttribute(_el$8, "aria-expanded", _p$.a = _v$5);
|
|
12248
|
+
_v$6 !== _p$.o && className(_el$10, _p$.o = _v$6);
|
|
12236
12249
|
return _p$;
|
|
12237
12250
|
}, {
|
|
12238
12251
|
e: void 0,
|
|
12239
12252
|
t: void 0,
|
|
12240
|
-
a: void 0
|
|
12253
|
+
a: void 0,
|
|
12254
|
+
o: void 0
|
|
12241
12255
|
});
|
|
12242
12256
|
return _el$7;
|
|
12243
12257
|
})(), createComponent(Show, {
|
|
@@ -12342,9 +12356,9 @@ function Explorer(props) {
|
|
|
12342
12356
|
}
|
|
12343
12357
|
}), null);
|
|
12344
12358
|
createRenderEffect((_p$) => {
|
|
12345
|
-
var _v$
|
|
12346
|
-
_v$
|
|
12347
|
-
_v$
|
|
12359
|
+
var _v$1 = styles().entry, _v$10 = styles().expanderButton;
|
|
12360
|
+
_v$1 !== _p$.e && className(_el$22, _p$.e = _v$1);
|
|
12361
|
+
_v$10 !== _p$.t && className(_el$23, _p$.t = _v$10);
|
|
12348
12362
|
return _p$;
|
|
12349
12363
|
}, {
|
|
12350
12364
|
e: void 0,
|
|
@@ -12367,6 +12381,7 @@ function Explorer(props) {
|
|
|
12367
12381
|
},
|
|
12368
12382
|
get children() {
|
|
12369
12383
|
var _el$16 = _tmpl$110(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
|
|
12384
|
+
setAttribute(_el$17, "for", inputId);
|
|
12370
12385
|
insert(_el$17, () => props.label, _el$18);
|
|
12371
12386
|
insert(_el$16, createComponent(Show, {
|
|
12372
12387
|
get when() {
|
|
@@ -12392,10 +12407,11 @@ function Explorer(props) {
|
|
|
12392
12407
|
const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
|
|
12393
12408
|
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
12394
12409
|
});
|
|
12410
|
+
setAttribute(_el$19, "id", inputId);
|
|
12395
12411
|
createRenderEffect((_p$) => {
|
|
12396
|
-
var _v$
|
|
12397
|
-
_v$
|
|
12398
|
-
_v$
|
|
12412
|
+
var _v$7 = type() === "number" ? "number" : "text", _v$8 = clsx(styles().value, styles().editableInput);
|
|
12413
|
+
_v$7 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$7);
|
|
12414
|
+
_v$8 !== _p$.t && className(_el$19, _p$.t = _v$8);
|
|
12399
12415
|
return _p$;
|
|
12400
12416
|
}, {
|
|
12401
12417
|
e: void 0,
|
|
@@ -12440,9 +12456,9 @@ function Explorer(props) {
|
|
|
12440
12456
|
}
|
|
12441
12457
|
}), null);
|
|
12442
12458
|
createRenderEffect((_p$) => {
|
|
12443
|
-
var _v$
|
|
12444
|
-
_v$
|
|
12445
|
-
_v$
|
|
12459
|
+
var _v$9 = styles().row, _v$0 = styles().label;
|
|
12460
|
+
_v$9 !== _p$.e && className(_el$16, _p$.e = _v$9);
|
|
12461
|
+
_v$0 !== _p$.t && className(_el$17, _p$.t = _v$0);
|
|
12446
12462
|
return _p$;
|
|
12447
12463
|
}, {
|
|
12448
12464
|
e: void 0,
|
|
@@ -12486,7 +12502,7 @@ var init_Explorer = __esm({
|
|
|
12486
12502
|
_tmpl$82 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
|
|
12487
12503
|
_tmpl$92 = /* @__PURE__ */ template(`<input>`);
|
|
12488
12504
|
_tmpl$02 = /* @__PURE__ */ template(`<span>`);
|
|
12489
|
-
_tmpl$110 = /* @__PURE__ */ template(`<div><
|
|
12505
|
+
_tmpl$110 = /* @__PURE__ */ template(`<div><label>:`);
|
|
12490
12506
|
_tmpl$102 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
|
|
12491
12507
|
Expander = (props) => {
|
|
12492
12508
|
const theme = useTheme();
|
|
@@ -12820,9 +12836,9 @@ var init_Devtools = __esm({
|
|
|
12820
12836
|
init_constants();
|
|
12821
12837
|
_tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
|
|
12822
12838
|
_tmpl$26 = /* @__PURE__ */ template(`<div>`);
|
|
12823
|
-
_tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
|
|
12824
|
-
_tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
|
|
12825
|
-
_tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
|
|
12839
|
+
_tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div role=separator aria-label="Resize devtools panel"tabindex=0></div><button aria-label="Close tanstack query devtools">`);
|
|
12840
|
+
_tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort aria-label="Sort queries by">`);
|
|
12841
|
+
_tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort aria-label="Sort mutations by">`);
|
|
12826
12842
|
_tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
|
|
12827
12843
|
_tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
|
|
12828
12844
|
_tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
|
|
@@ -12843,19 +12859,19 @@ var init_Devtools = __esm({
|
|
|
12843
12859
|
_tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
|
|
12844
12860
|
_tmpl$222 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
|
|
12845
12861
|
_tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
|
|
12846
|
-
_tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
|
|
12847
|
-
_tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
|
|
12862
|
+
_tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator aria-hidden=true>disabled`);
|
|
12863
|
+
_tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator aria-hidden=true>static`);
|
|
12848
12864
|
_tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
|
|
12849
12865
|
_tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
|
|
12850
12866
|
_tmpl$28 = /* @__PURE__ */ template(`<span>`);
|
|
12851
|
-
_tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
|
|
12852
|
-
_tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
|
|
12853
|
-
_tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
|
|
12867
|
+
_tmpl$29 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span><span>`);
|
|
12868
|
+
_tmpl$30 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span> Error`);
|
|
12869
|
+
_tmpl$31 = /* @__PURE__ */ template(`<div><span aria-hidden=true></span>Trigger Error<select aria-label="Select error type to trigger"><option value=""disabled selected>`);
|
|
12854
12870
|
_tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
|
|
12855
|
-
_tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
|
|
12856
|
-
_tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
|
|
12871
|
+
_tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data aria-label="Edit query data as JSON"></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
|
|
12872
|
+
_tmpl$34 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div role=heading aria-level=2>Actions</div><div><button><span aria-hidden=true></span>Refetch</button><button><span aria-hidden=true></span>Invalidate</button><button><span aria-hidden=true></span>Reset</button><button><span aria-hidden=true></span>Remove</button><button><span aria-hidden=true></span> Loading</button></div><div role=heading aria-level=2>Data </div><div role=heading aria-level=2>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
|
|
12857
12873
|
_tmpl$35 = /* @__PURE__ */ template(`<option>`);
|
|
12858
|
-
_tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
|
|
12874
|
+
_tmpl$36 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div role=heading aria-level=2>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
|
|
12859
12875
|
[selectedQueryHash, setSelectedQueryHash] = createSignal(null);
|
|
12860
12876
|
[selectedMutationId, setSelectedMutationId] = createSignal(null);
|
|
12861
12877
|
[panelWidth, setPanelWidth] = createSignal(0);
|
|
@@ -13111,6 +13127,10 @@ var init_Devtools = __esm({
|
|
|
13111
13127
|
const styles = createMemo(() => {
|
|
13112
13128
|
return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
|
|
13113
13129
|
});
|
|
13130
|
+
let closeBtnRef;
|
|
13131
|
+
onMount(() => {
|
|
13132
|
+
closeBtnRef.focus();
|
|
13133
|
+
});
|
|
13114
13134
|
const [isResizing, setIsResizing] = createSignal(false);
|
|
13115
13135
|
const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
|
|
13116
13136
|
const handleDragStart = (event) => {
|
|
@@ -13154,7 +13174,7 @@ var init_Devtools = __esm({
|
|
|
13154
13174
|
setIsResizing(false);
|
|
13155
13175
|
}
|
|
13156
13176
|
document.removeEventListener("mousemove", runDrag, false);
|
|
13157
|
-
document.removeEventListener("
|
|
13177
|
+
document.removeEventListener("mouseup", unsubscribe, false);
|
|
13158
13178
|
};
|
|
13159
13179
|
document.addEventListener("mousemove", runDrag, false);
|
|
13160
13180
|
document.addEventListener("mouseup", unsubscribe, false);
|
|
@@ -13215,8 +13235,32 @@ var init_Devtools = __esm({
|
|
|
13215
13235
|
var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
|
|
13216
13236
|
var _ref$3 = panelRef;
|
|
13217
13237
|
typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
|
|
13238
|
+
_el$8.$$keydown = (e2) => {
|
|
13239
|
+
const step = 10;
|
|
13240
|
+
const minHeight = convertRemToPixels(3.5);
|
|
13241
|
+
const minWidth = convertRemToPixels(12);
|
|
13242
|
+
if (position() === "top" || position() === "bottom") {
|
|
13243
|
+
if (e2.key === "ArrowUp" || e2.key === "ArrowDown") {
|
|
13244
|
+
e2.preventDefault();
|
|
13245
|
+
const currentHeight = Number(props.localStore.height || DEFAULT_HEIGHT);
|
|
13246
|
+
const delta = position() === "bottom" ? e2.key === "ArrowUp" ? step : -10 : e2.key === "ArrowDown" ? step : -10;
|
|
13247
|
+
const newHeight = Math.max(minHeight, currentHeight + delta);
|
|
13248
|
+
props.setLocalStore("height", String(newHeight));
|
|
13249
|
+
}
|
|
13250
|
+
} else {
|
|
13251
|
+
if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
|
|
13252
|
+
e2.preventDefault();
|
|
13253
|
+
const currentWidth = Number(props.localStore.width || DEFAULT_WIDTH);
|
|
13254
|
+
const delta = position() === "right" ? e2.key === "ArrowLeft" ? step : -10 : e2.key === "ArrowRight" ? step : -10;
|
|
13255
|
+
const newWidth = Math.max(minWidth, currentWidth + delta);
|
|
13256
|
+
props.setLocalStore("width", String(newWidth));
|
|
13257
|
+
}
|
|
13258
|
+
}
|
|
13259
|
+
};
|
|
13218
13260
|
_el$8.$$mousedown = handleDragStart;
|
|
13219
13261
|
_el$9.$$click = () => props.setLocalStore("open", "false");
|
|
13262
|
+
var _ref$4 = closeBtnRef;
|
|
13263
|
+
typeof _ref$4 === "function" ? use(_ref$4, _el$9) : closeBtnRef = _el$9;
|
|
13220
13264
|
insert(_el$9, createComponent(ChevronDown, {}));
|
|
13221
13265
|
insert(_el$7, createComponent(ContentView, props), null);
|
|
13222
13266
|
createRenderEffect((_p$) => {
|
|
@@ -13224,19 +13268,25 @@ var init_Devtools = __esm({
|
|
|
13224
13268
|
[css`
|
|
13225
13269
|
min-width: min-content;
|
|
13226
13270
|
`]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
|
|
13227
|
-
}, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$
|
|
13271
|
+
}, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = position() === "top" || position() === "bottom" ? "horizontal" : "vertical", _v$5 = position() === "top" || position() === "bottom" ? convertRemToPixels(3.5) : convertRemToPixels(12), _v$6 = position() === "top" || position() === "bottom" ? Number(props.localStore.height || DEFAULT_HEIGHT) : Number(props.localStore.width || DEFAULT_WIDTH), _v$7 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$8 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
|
|
13228
13272
|
_v$ !== _p$.e && className(_el$7, _p$.e = _v$);
|
|
13229
13273
|
_v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
|
|
13230
13274
|
_v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
|
|
13231
|
-
_v$4 !== _p$.o &&
|
|
13232
|
-
_v$5 !== _p$.i &&
|
|
13275
|
+
_v$4 !== _p$.o && setAttribute(_el$8, "aria-orientation", _p$.o = _v$4);
|
|
13276
|
+
_v$5 !== _p$.i && setAttribute(_el$8, "aria-valuemin", _p$.i = _v$5);
|
|
13277
|
+
_v$6 !== _p$.n && setAttribute(_el$8, "aria-valuenow", _p$.n = _v$6);
|
|
13278
|
+
_v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
|
|
13279
|
+
_v$8 !== _p$.h && className(_el$9, _p$.h = _v$8);
|
|
13233
13280
|
return _p$;
|
|
13234
13281
|
}, {
|
|
13235
13282
|
e: void 0,
|
|
13236
13283
|
t: void 0,
|
|
13237
13284
|
a: void 0,
|
|
13238
13285
|
o: void 0,
|
|
13239
|
-
i: void 0
|
|
13286
|
+
i: void 0,
|
|
13287
|
+
n: void 0,
|
|
13288
|
+
s: void 0,
|
|
13289
|
+
h: void 0
|
|
13240
13290
|
});
|
|
13241
13291
|
return _el$7;
|
|
13242
13292
|
})();
|
|
@@ -13301,8 +13351,8 @@ var init_Devtools = __esm({
|
|
|
13301
13351
|
};
|
|
13302
13352
|
return [(() => {
|
|
13303
13353
|
var _el$0 = _tmpl$222(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$1.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
|
|
13304
|
-
var _ref$
|
|
13305
|
-
typeof _ref$
|
|
13354
|
+
var _ref$5 = containerRef;
|
|
13355
|
+
typeof _ref$5 === "function" ? use(_ref$5, _el$0) : containerRef = _el$0;
|
|
13306
13356
|
_el$11.$$click = () => {
|
|
13307
13357
|
if (!pip().pipWindow && !props.showPanelViewOnly) {
|
|
13308
13358
|
props.setLocalStore("open", "false");
|
|
@@ -13321,6 +13371,7 @@ var init_Devtools = __esm({
|
|
|
13321
13371
|
get value() {
|
|
13322
13372
|
return selectedView();
|
|
13323
13373
|
},
|
|
13374
|
+
"aria-label": "Toggle between queries and mutations view",
|
|
13324
13375
|
onChange: (value) => {
|
|
13325
13376
|
setSelectedView(value);
|
|
13326
13377
|
setSelectedQueryHash(null);
|
|
@@ -13484,6 +13535,8 @@ var init_Devtools = __esm({
|
|
|
13484
13535
|
get ["class"]() {
|
|
13485
13536
|
return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
|
|
13486
13537
|
},
|
|
13538
|
+
"aria-label": "Open settings menu",
|
|
13539
|
+
title: "Open settings menu",
|
|
13487
13540
|
get children() {
|
|
13488
13541
|
return createComponent(Settings, {});
|
|
13489
13542
|
}
|
|
@@ -13530,51 +13583,48 @@ var init_Devtools = __esm({
|
|
|
13530
13583
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
13531
13584
|
},
|
|
13532
13585
|
get children() {
|
|
13533
|
-
return
|
|
13534
|
-
|
|
13535
|
-
|
|
13536
|
-
|
|
13537
|
-
as: "button",
|
|
13538
|
-
get ["class"]() {
|
|
13539
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
13540
|
-
},
|
|
13541
|
-
get children() {
|
|
13542
|
-
return [_tmpl$111(), createComponent(ArrowUp, {})];
|
|
13543
|
-
}
|
|
13544
|
-
}), createComponent(dropdown_menu_exports.Item, {
|
|
13545
|
-
onSelect: () => {
|
|
13546
|
-
setDevtoolsPosition("bottom");
|
|
13547
|
-
},
|
|
13548
|
-
as: "button",
|
|
13549
|
-
get ["class"]() {
|
|
13550
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
13551
|
-
},
|
|
13552
|
-
get children() {
|
|
13553
|
-
return [_tmpl$103(), createComponent(ArrowDown, {})];
|
|
13554
|
-
}
|
|
13555
|
-
}), createComponent(dropdown_menu_exports.Item, {
|
|
13556
|
-
onSelect: () => {
|
|
13557
|
-
setDevtoolsPosition("left");
|
|
13558
|
-
},
|
|
13559
|
-
as: "button",
|
|
13560
|
-
get ["class"]() {
|
|
13561
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
13586
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
13587
|
+
"aria-label": "Position settings",
|
|
13588
|
+
get value() {
|
|
13589
|
+
return props.localStore.position;
|
|
13562
13590
|
},
|
|
13591
|
+
onChange: (value) => setDevtoolsPosition(value),
|
|
13563
13592
|
get children() {
|
|
13564
|
-
return [
|
|
13593
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
13594
|
+
value: "top",
|
|
13595
|
+
get ["class"]() {
|
|
13596
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
13597
|
+
},
|
|
13598
|
+
get children() {
|
|
13599
|
+
return [_tmpl$111(), createComponent(ArrowUp, {})];
|
|
13600
|
+
}
|
|
13601
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13602
|
+
value: "bottom",
|
|
13603
|
+
get ["class"]() {
|
|
13604
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
13605
|
+
},
|
|
13606
|
+
get children() {
|
|
13607
|
+
return [_tmpl$103(), createComponent(ArrowDown, {})];
|
|
13608
|
+
}
|
|
13609
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13610
|
+
value: "left",
|
|
13611
|
+
get ["class"]() {
|
|
13612
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
13613
|
+
},
|
|
13614
|
+
get children() {
|
|
13615
|
+
return [_tmpl$112(), createComponent(ArrowLeft, {})];
|
|
13616
|
+
}
|
|
13617
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13618
|
+
value: "right",
|
|
13619
|
+
get ["class"]() {
|
|
13620
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
|
|
13621
|
+
},
|
|
13622
|
+
get children() {
|
|
13623
|
+
return [_tmpl$122(), createComponent(ArrowRight, {})];
|
|
13624
|
+
}
|
|
13625
|
+
})];
|
|
13565
13626
|
}
|
|
13566
|
-
})
|
|
13567
|
-
onSelect: () => {
|
|
13568
|
-
setDevtoolsPosition("right");
|
|
13569
|
-
},
|
|
13570
|
-
as: "button",
|
|
13571
|
-
get ["class"]() {
|
|
13572
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
|
|
13573
|
-
},
|
|
13574
|
-
get children() {
|
|
13575
|
-
return [_tmpl$122(), createComponent(ArrowRight, {})];
|
|
13576
|
-
}
|
|
13577
|
-
})];
|
|
13627
|
+
});
|
|
13578
13628
|
}
|
|
13579
13629
|
});
|
|
13580
13630
|
}
|
|
@@ -13605,40 +13655,42 @@ var init_Devtools = __esm({
|
|
|
13605
13655
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
13606
13656
|
},
|
|
13607
13657
|
get children() {
|
|
13608
|
-
return
|
|
13609
|
-
|
|
13610
|
-
props.
|
|
13658
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
13659
|
+
get value() {
|
|
13660
|
+
return props.localStore.theme_preference;
|
|
13611
13661
|
},
|
|
13612
|
-
|
|
13613
|
-
|
|
13614
|
-
return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
13662
|
+
onChange: (value) => {
|
|
13663
|
+
props.setLocalStore("theme_preference", value);
|
|
13615
13664
|
},
|
|
13665
|
+
"aria-label": "Theme preference",
|
|
13616
13666
|
get children() {
|
|
13617
|
-
return [
|
|
13618
|
-
|
|
13619
|
-
|
|
13620
|
-
|
|
13621
|
-
|
|
13622
|
-
|
|
13623
|
-
|
|
13624
|
-
|
|
13625
|
-
|
|
13626
|
-
|
|
13627
|
-
|
|
13628
|
-
|
|
13629
|
-
|
|
13630
|
-
|
|
13631
|
-
|
|
13632
|
-
|
|
13633
|
-
|
|
13634
|
-
|
|
13635
|
-
|
|
13636
|
-
|
|
13637
|
-
|
|
13638
|
-
|
|
13639
|
-
|
|
13667
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
13668
|
+
value: "light",
|
|
13669
|
+
get ["class"]() {
|
|
13670
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
13671
|
+
},
|
|
13672
|
+
get children() {
|
|
13673
|
+
return [_tmpl$142(), createComponent(Sun, {})];
|
|
13674
|
+
}
|
|
13675
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13676
|
+
value: "dark",
|
|
13677
|
+
get ["class"]() {
|
|
13678
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
13679
|
+
},
|
|
13680
|
+
get children() {
|
|
13681
|
+
return [_tmpl$152(), createComponent(Moon, {})];
|
|
13682
|
+
}
|
|
13683
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13684
|
+
value: "system",
|
|
13685
|
+
get ["class"]() {
|
|
13686
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
13687
|
+
},
|
|
13688
|
+
get children() {
|
|
13689
|
+
return [_tmpl$162(), createComponent(Monitor, {})];
|
|
13690
|
+
}
|
|
13691
|
+
})];
|
|
13640
13692
|
}
|
|
13641
|
-
})
|
|
13693
|
+
});
|
|
13642
13694
|
}
|
|
13643
13695
|
});
|
|
13644
13696
|
}
|
|
@@ -13667,43 +13719,46 @@ var init_Devtools = __esm({
|
|
|
13667
13719
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
13668
13720
|
},
|
|
13669
13721
|
get children() {
|
|
13670
|
-
return
|
|
13671
|
-
|
|
13672
|
-
props.
|
|
13673
|
-
},
|
|
13674
|
-
as: "button",
|
|
13675
|
-
get ["class"]() {
|
|
13676
|
-
return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
|
|
13722
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
13723
|
+
get value() {
|
|
13724
|
+
return props.localStore.hideDisabledQueries;
|
|
13677
13725
|
},
|
|
13726
|
+
"aria-label": "Hide disabled queries setting",
|
|
13727
|
+
onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
|
|
13678
13728
|
get children() {
|
|
13679
|
-
return [
|
|
13680
|
-
|
|
13681
|
-
|
|
13729
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
13730
|
+
value: "false",
|
|
13731
|
+
get ["class"]() {
|
|
13732
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
|
|
13682
13733
|
},
|
|
13683
13734
|
get children() {
|
|
13684
|
-
return createComponent(
|
|
13735
|
+
return [_tmpl$182(), createComponent(Show, {
|
|
13736
|
+
get when() {
|
|
13737
|
+
return props.localStore.hideDisabledQueries !== "true";
|
|
13738
|
+
},
|
|
13739
|
+
get children() {
|
|
13740
|
+
return createComponent(CheckCircle, {});
|
|
13741
|
+
}
|
|
13742
|
+
})];
|
|
13685
13743
|
}
|
|
13686
|
-
})
|
|
13687
|
-
|
|
13688
|
-
|
|
13689
|
-
|
|
13690
|
-
props.setLocalStore("hideDisabledQueries", "true");
|
|
13691
|
-
},
|
|
13692
|
-
as: "button",
|
|
13693
|
-
get ["class"]() {
|
|
13694
|
-
return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
|
|
13695
|
-
},
|
|
13696
|
-
get children() {
|
|
13697
|
-
return [_tmpl$192(), createComponent(Show, {
|
|
13698
|
-
get when() {
|
|
13699
|
-
return props.localStore.hideDisabledQueries === "true";
|
|
13744
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
13745
|
+
value: "true",
|
|
13746
|
+
get ["class"]() {
|
|
13747
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
|
|
13700
13748
|
},
|
|
13701
13749
|
get children() {
|
|
13702
|
-
return createComponent(
|
|
13750
|
+
return [_tmpl$192(), createComponent(Show, {
|
|
13751
|
+
get when() {
|
|
13752
|
+
return props.localStore.hideDisabledQueries === "true";
|
|
13753
|
+
},
|
|
13754
|
+
get children() {
|
|
13755
|
+
return createComponent(CheckCircle, {});
|
|
13756
|
+
}
|
|
13757
|
+
})];
|
|
13703
13758
|
}
|
|
13704
13759
|
})];
|
|
13705
13760
|
}
|
|
13706
|
-
})
|
|
13761
|
+
});
|
|
13707
13762
|
}
|
|
13708
13763
|
});
|
|
13709
13764
|
}
|
|
@@ -13759,33 +13814,33 @@ var init_Devtools = __esm({
|
|
|
13759
13814
|
}
|
|
13760
13815
|
}), null);
|
|
13761
13816
|
createRenderEffect((_p$) => {
|
|
13762
|
-
var _v$
|
|
13817
|
+
var _v$9 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
|
|
13763
13818
|
height: 50%;
|
|
13764
13819
|
max-height: 50%;
|
|
13765
13820
|
`, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
|
|
13766
13821
|
height: 100%;
|
|
13767
13822
|
max-height: 100%;
|
|
13768
|
-
`, "tsqd-queries-container"), _v$
|
|
13769
|
-
_v$
|
|
13770
|
-
_v$
|
|
13771
|
-
_v$
|
|
13772
|
-
_v$
|
|
13773
|
-
_v$
|
|
13774
|
-
_v$
|
|
13775
|
-
_v$
|
|
13776
|
-
_v$
|
|
13777
|
-
_v$
|
|
13778
|
-
_v$
|
|
13779
|
-
_v$
|
|
13780
|
-
_v$
|
|
13781
|
-
_v$
|
|
13782
|
-
_v$
|
|
13783
|
-
_v$
|
|
13784
|
-
_v$
|
|
13785
|
-
_v$
|
|
13786
|
-
_v$
|
|
13787
|
-
_v$
|
|
13788
|
-
_v$
|
|
13823
|
+
`, "tsqd-queries-container"), _v$0 = clsx(styles().row, "tsqd-header"), _v$1 = styles().logoAndToggleContainer, _v$10 = clsx(styles().logo, "tsqd-text-logo-container"), _v$11 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$12 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$13 = clsx(styles().row, "tsqd-filters-actions-container"), _v$14 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$15 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$16 = clsx("tsqd-query-filter-textfield"), _v$17 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$18 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$19 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$20 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$21 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$22 = `Clear ${selectedView()} cache`, _v$23 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$25 = offline(), _v$26 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
|
|
13824
|
+
_v$9 !== _p$.e && className(_el$0, _p$.e = _v$9);
|
|
13825
|
+
_v$0 !== _p$.t && className(_el$1, _p$.t = _v$0);
|
|
13826
|
+
_v$1 !== _p$.a && className(_el$10, _p$.a = _v$1);
|
|
13827
|
+
_v$10 !== _p$.o && className(_el$11, _p$.o = _v$10);
|
|
13828
|
+
_v$11 !== _p$.i && className(_el$12, _p$.i = _v$11);
|
|
13829
|
+
_v$12 !== _p$.n && className(_el$13, _p$.n = _v$12);
|
|
13830
|
+
_v$13 !== _p$.s && className(_el$15, _p$.s = _v$13);
|
|
13831
|
+
_v$14 !== _p$.h && className(_el$16, _p$.h = _v$14);
|
|
13832
|
+
_v$15 !== _p$.r && className(_el$17, _p$.r = _v$15);
|
|
13833
|
+
_v$16 !== _p$.d && className(_el$18, _p$.d = _v$16);
|
|
13834
|
+
_v$17 !== _p$.l && className(_el$19, _p$.l = _v$17);
|
|
13835
|
+
_v$18 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$18);
|
|
13836
|
+
_v$19 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$19);
|
|
13837
|
+
_v$20 !== _p$.w && className(_el$25, _p$.w = _v$20);
|
|
13838
|
+
_v$21 !== _p$.m && className(_el$26, _p$.m = _v$21);
|
|
13839
|
+
_v$22 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$22);
|
|
13840
|
+
_v$23 !== _p$.y && className(_el$27, _p$.y = _v$23);
|
|
13841
|
+
_v$24 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$24);
|
|
13842
|
+
_v$25 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$25);
|
|
13843
|
+
_v$26 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$26);
|
|
13789
13844
|
return _p$;
|
|
13790
13845
|
}, {
|
|
13791
13846
|
e: void 0,
|
|
@@ -13898,10 +13953,10 @@ var init_Devtools = __esm({
|
|
|
13898
13953
|
}
|
|
13899
13954
|
}), null);
|
|
13900
13955
|
createRenderEffect((_p$) => {
|
|
13901
|
-
var _v$
|
|
13902
|
-
_v$
|
|
13903
|
-
_v$
|
|
13904
|
-
_v$
|
|
13956
|
+
var _v$27 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Query key ${props.query.queryHash}${isDisabled() ? ", disabled" : ""}${isStatic() ? ", static" : ""}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
|
|
13957
|
+
_v$27 !== _p$.e && className(_el$50, _p$.e = _v$27);
|
|
13958
|
+
_v$28 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$28);
|
|
13959
|
+
_v$29 !== _p$.a && className(_el$51, _p$.a = _v$29);
|
|
13905
13960
|
return _p$;
|
|
13906
13961
|
}, {
|
|
13907
13962
|
e: void 0,
|
|
@@ -14009,10 +14064,10 @@ var init_Devtools = __esm({
|
|
|
14009
14064
|
}), null);
|
|
14010
14065
|
insert(_el$57, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
|
|
14011
14066
|
createRenderEffect((_p$) => {
|
|
14012
|
-
var _v$
|
|
14013
|
-
_v$
|
|
14014
|
-
_v$
|
|
14015
|
-
_v$
|
|
14067
|
+
var _v$30 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$31 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$32 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
|
|
14068
|
+
_v$30 !== _p$.e && className(_el$55, _p$.e = _v$30);
|
|
14069
|
+
_v$31 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$31);
|
|
14070
|
+
_v$32 !== _p$.a && className(_el$56, _p$.a = _v$32);
|
|
14016
14071
|
return _p$;
|
|
14017
14072
|
}, {
|
|
14018
14073
|
e: void 0,
|
|
@@ -14164,8 +14219,8 @@ var init_Devtools = __esm({
|
|
|
14164
14219
|
});
|
|
14165
14220
|
return (() => {
|
|
14166
14221
|
var _el$60 = _tmpl$29(), _el$62 = _el$60.firstChild, _el$64 = _el$62.nextSibling;
|
|
14167
|
-
var _ref$
|
|
14168
|
-
typeof _ref$
|
|
14222
|
+
var _ref$6 = tagRef;
|
|
14223
|
+
typeof _ref$6 === "function" ? use(_ref$6, _el$60) : tagRef = _el$60;
|
|
14169
14224
|
_el$60.addEventListener("mouseleave", () => {
|
|
14170
14225
|
setMouseOver(false);
|
|
14171
14226
|
setFocused(false);
|
|
@@ -14177,6 +14232,9 @@ var init_Devtools = __esm({
|
|
|
14177
14232
|
get disabled() {
|
|
14178
14233
|
return showLabel();
|
|
14179
14234
|
},
|
|
14235
|
+
get ["aria-label"]() {
|
|
14236
|
+
return `${props.label}: ${props.count}`;
|
|
14237
|
+
},
|
|
14180
14238
|
get ["class"]() {
|
|
14181
14239
|
return clsx(styles().queryStatusTag, !showLabel() && css`
|
|
14182
14240
|
cursor: pointer;
|
|
@@ -14212,17 +14270,17 @@ var init_Devtools = __esm({
|
|
|
14212
14270
|
}), _el$64);
|
|
14213
14271
|
insert(_el$64, () => props.count);
|
|
14214
14272
|
createRenderEffect((_p$) => {
|
|
14215
|
-
var _v$
|
|
14273
|
+
var _v$33 = clsx(css`
|
|
14216
14274
|
width: ${tokens.size[1.5]};
|
|
14217
14275
|
height: ${tokens.size[1.5]};
|
|
14218
14276
|
border-radius: ${tokens.border.radius.full};
|
|
14219
14277
|
background-color: ${tokens.colors[props.color][500]};
|
|
14220
|
-
`, "tsqd-query-status-tag-dot"), _v$
|
|
14278
|
+
`, "tsqd-query-status-tag-dot"), _v$34 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
|
|
14221
14279
|
background-color: ${t2(colors[props.color][100], colors[props.color][900])};
|
|
14222
14280
|
color: ${t2(colors[props.color][700], colors[props.color][300])};
|
|
14223
14281
|
`, "tsqd-query-status-tag-count");
|
|
14224
|
-
_v$
|
|
14225
|
-
_v$
|
|
14282
|
+
_v$33 !== _p$.e && className(_el$62, _p$.e = _v$33);
|
|
14283
|
+
_v$34 !== _p$.t && className(_el$64, _p$.t = _v$34);
|
|
14226
14284
|
return _p$;
|
|
14227
14285
|
}, {
|
|
14228
14286
|
e: void 0,
|
|
@@ -14423,14 +14481,14 @@ var init_Devtools = __esm({
|
|
|
14423
14481
|
};
|
|
14424
14482
|
insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
|
|
14425
14483
|
createRenderEffect((_p$) => {
|
|
14426
|
-
var _v$
|
|
14484
|
+
var _v$35 = clsx(css`
|
|
14427
14485
|
color: ${t2(colors.red[500], colors.red[400])};
|
|
14428
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$
|
|
14486
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$36 = queryStatus() === "pending", _v$37 = css`
|
|
14429
14487
|
background-color: ${t2(colors.red[500], colors.red[400])};
|
|
14430
14488
|
`;
|
|
14431
|
-
_v$
|
|
14432
|
-
_v$
|
|
14433
|
-
_v$
|
|
14489
|
+
_v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
|
|
14490
|
+
_v$36 !== _p$.t && (_el$91.disabled = _p$.t = _v$36);
|
|
14491
|
+
_v$37 !== _p$.a && className(_el$92, _p$.a = _v$37);
|
|
14434
14492
|
return _p$;
|
|
14435
14493
|
}, {
|
|
14436
14494
|
e: void 0,
|
|
@@ -14463,12 +14521,12 @@ var init_Devtools = __esm({
|
|
|
14463
14521
|
}), null);
|
|
14464
14522
|
insert(_el$94, createComponent(ChevronDown, {}), null);
|
|
14465
14523
|
createRenderEffect((_p$) => {
|
|
14466
|
-
var _v$
|
|
14524
|
+
var _v$38 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$39 = css`
|
|
14467
14525
|
background-color: ${tokens.colors.red[400]};
|
|
14468
|
-
`, _v$
|
|
14469
|
-
_v$
|
|
14470
|
-
_v$
|
|
14471
|
-
_v$
|
|
14526
|
+
`, _v$40 = queryStatus() === "pending";
|
|
14527
|
+
_v$38 !== _p$.e && className(_el$94, _p$.e = _v$38);
|
|
14528
|
+
_v$39 !== _p$.t && className(_el$95, _p$.t = _v$39);
|
|
14529
|
+
_v$40 !== _p$.a && (_el$97.disabled = _p$.a = _v$40);
|
|
14472
14530
|
return _p$;
|
|
14473
14531
|
}, {
|
|
14474
14532
|
e: void 0,
|
|
@@ -14526,19 +14584,19 @@ var init_Devtools = __esm({
|
|
|
14526
14584
|
insert(_el$105, () => dataEditError() ? "Invalid Value" : "");
|
|
14527
14585
|
_el$107.$$click = () => setDataMode("view");
|
|
14528
14586
|
createRenderEffect((_p$) => {
|
|
14529
|
-
var _v$
|
|
14587
|
+
var _v$41 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$42 = styles().devtoolsEditTextarea, _v$43 = dataEditError(), _v$44 = styles().devtoolsEditFormActions, _v$45 = styles().devtoolsEditFormError, _v$46 = styles().devtoolsEditFormActionContainer, _v$47 = clsx(styles().devtoolsEditFormAction, css`
|
|
14530
14588
|
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
14531
|
-
`), _v$
|
|
14589
|
+
`), _v$48 = clsx(styles().devtoolsEditFormAction, css`
|
|
14532
14590
|
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
14533
14591
|
`);
|
|
14534
|
-
_v$
|
|
14535
|
-
_v$
|
|
14536
|
-
_v$
|
|
14537
|
-
_v$
|
|
14538
|
-
_v$
|
|
14539
|
-
_v$
|
|
14540
|
-
_v$
|
|
14541
|
-
_v$
|
|
14592
|
+
_v$41 !== _p$.e && className(_el$102, _p$.e = _v$41);
|
|
14593
|
+
_v$42 !== _p$.t && className(_el$103, _p$.t = _v$42);
|
|
14594
|
+
_v$43 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$43);
|
|
14595
|
+
_v$44 !== _p$.o && className(_el$104, _p$.o = _v$44);
|
|
14596
|
+
_v$45 !== _p$.i && className(_el$105, _p$.i = _v$45);
|
|
14597
|
+
_v$46 !== _p$.n && className(_el$106, _p$.n = _v$46);
|
|
14598
|
+
_v$47 !== _p$.s && className(_el$107, _p$.s = _v$47);
|
|
14599
|
+
_v$48 !== _p$.h && className(_el$108, _p$.h = _v$48);
|
|
14542
14600
|
return _p$;
|
|
14543
14601
|
}, {
|
|
14544
14602
|
e: void 0,
|
|
@@ -14562,51 +14620,51 @@ var init_Devtools = __esm({
|
|
|
14562
14620
|
}
|
|
14563
14621
|
}));
|
|
14564
14622
|
createRenderEffect((_p$) => {
|
|
14565
|
-
var _v$
|
|
14623
|
+
var _v$49 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$50 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$51 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$52 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$53 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$54 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$55 = clsx(css`
|
|
14566
14624
|
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
14567
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$
|
|
14625
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$56 = statusLabel() === "fetching", _v$57 = css`
|
|
14568
14626
|
background-color: ${t2(colors.blue[600], colors.blue[400])};
|
|
14569
|
-
`, _v$
|
|
14627
|
+
`, _v$58 = clsx(css`
|
|
14570
14628
|
color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
14571
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$
|
|
14629
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$59 = queryStatus() === "pending", _v$60 = css`
|
|
14572
14630
|
background-color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
14573
|
-
`, _v$
|
|
14631
|
+
`, _v$61 = clsx(css`
|
|
14574
14632
|
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
14575
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$
|
|
14633
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$62 = queryStatus() === "pending", _v$63 = css`
|
|
14576
14634
|
background-color: ${t2(colors.gray[600], colors.gray[400])};
|
|
14577
|
-
`, _v$
|
|
14635
|
+
`, _v$64 = clsx(css`
|
|
14578
14636
|
color: ${t2(colors.pink[500], colors.pink[400])};
|
|
14579
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$
|
|
14637
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$65 = statusLabel() === "fetching", _v$66 = css`
|
|
14580
14638
|
background-color: ${t2(colors.pink[500], colors.pink[400])};
|
|
14581
|
-
`, _v$
|
|
14639
|
+
`, _v$67 = clsx(css`
|
|
14582
14640
|
color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
14583
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$
|
|
14641
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$68 = restoringLoading(), _v$69 = css`
|
|
14584
14642
|
background-color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
14585
|
-
`, _v$
|
|
14586
|
-
_v$
|
|
14587
|
-
_v$
|
|
14588
|
-
_v$
|
|
14589
|
-
_v$
|
|
14590
|
-
_v$
|
|
14591
|
-
_v$
|
|
14592
|
-
_v$
|
|
14593
|
-
_v$
|
|
14594
|
-
_v$
|
|
14595
|
-
_v$
|
|
14596
|
-
_v$
|
|
14597
|
-
_v$
|
|
14598
|
-
_v$
|
|
14599
|
-
_v$
|
|
14600
|
-
_v$
|
|
14601
|
-
_v$
|
|
14602
|
-
_v$
|
|
14603
|
-
_v$
|
|
14604
|
-
_v$
|
|
14605
|
-
_v$
|
|
14606
|
-
_v$
|
|
14607
|
-
_v$
|
|
14608
|
-
_v$
|
|
14609
|
-
_v$
|
|
14643
|
+
`, _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2];
|
|
14644
|
+
_v$49 !== _p$.e && className(_el$65, _p$.e = _v$49);
|
|
14645
|
+
_v$50 !== _p$.t && className(_el$66, _p$.t = _v$50);
|
|
14646
|
+
_v$51 !== _p$.a && className(_el$67, _p$.a = _v$51);
|
|
14647
|
+
_v$52 !== _p$.o && className(_el$71, _p$.o = _v$52);
|
|
14648
|
+
_v$53 !== _p$.i && className(_el$78, _p$.i = _v$53);
|
|
14649
|
+
_v$54 !== _p$.n && className(_el$79, _p$.n = _v$54);
|
|
14650
|
+
_v$55 !== _p$.s && className(_el$80, _p$.s = _v$55);
|
|
14651
|
+
_v$56 !== _p$.h && (_el$80.disabled = _p$.h = _v$56);
|
|
14652
|
+
_v$57 !== _p$.r && className(_el$81, _p$.r = _v$57);
|
|
14653
|
+
_v$58 !== _p$.d && className(_el$82, _p$.d = _v$58);
|
|
14654
|
+
_v$59 !== _p$.l && (_el$82.disabled = _p$.l = _v$59);
|
|
14655
|
+
_v$60 !== _p$.u && className(_el$83, _p$.u = _v$60);
|
|
14656
|
+
_v$61 !== _p$.c && className(_el$84, _p$.c = _v$61);
|
|
14657
|
+
_v$62 !== _p$.w && (_el$84.disabled = _p$.w = _v$62);
|
|
14658
|
+
_v$63 !== _p$.m && className(_el$85, _p$.m = _v$63);
|
|
14659
|
+
_v$64 !== _p$.f && className(_el$86, _p$.f = _v$64);
|
|
14660
|
+
_v$65 !== _p$.y && (_el$86.disabled = _p$.y = _v$65);
|
|
14661
|
+
_v$66 !== _p$.g && className(_el$87, _p$.g = _v$66);
|
|
14662
|
+
_v$67 !== _p$.p && className(_el$88, _p$.p = _v$67);
|
|
14663
|
+
_v$68 !== _p$.b && (_el$88.disabled = _p$.b = _v$68);
|
|
14664
|
+
_v$69 !== _p$.T && className(_el$89, _p$.T = _v$69);
|
|
14665
|
+
_v$70 !== _p$.A && className(_el$99, _p$.A = _v$70);
|
|
14666
|
+
_v$71 !== _p$.O && className(_el$109, _p$.O = _v$71);
|
|
14667
|
+
_v$72 !== _p$.I && ((_p$.I = _v$72) != null ? _el$110.style.setProperty("padding", _v$72) : _el$110.style.removeProperty("padding"));
|
|
14610
14668
|
return _p$;
|
|
14611
14669
|
}, {
|
|
14612
14670
|
e: void 0,
|
|
@@ -14740,19 +14798,19 @@ var init_Devtools = __esm({
|
|
|
14740
14798
|
}
|
|
14741
14799
|
}));
|
|
14742
14800
|
createRenderEffect((_p$) => {
|
|
14743
|
-
var _v$
|
|
14744
|
-
_v$
|
|
14745
|
-
_v$
|
|
14746
|
-
_v$
|
|
14747
|
-
_v$
|
|
14748
|
-
_v$
|
|
14749
|
-
_v$
|
|
14750
|
-
_v$
|
|
14751
|
-
_v$
|
|
14752
|
-
_v$
|
|
14753
|
-
_v$
|
|
14754
|
-
_v$
|
|
14755
|
-
_v$
|
|
14801
|
+
var _v$73 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$76 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$77 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$78 = tokens.size[2], _v$79 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$80 = tokens.size[2], _v$81 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$82 = tokens.size[2], _v$83 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$84 = tokens.size[2];
|
|
14802
|
+
_v$73 !== _p$.e && className(_el$112, _p$.e = _v$73);
|
|
14803
|
+
_v$74 !== _p$.t && className(_el$113, _p$.t = _v$74);
|
|
14804
|
+
_v$75 !== _p$.a && className(_el$114, _p$.a = _v$75);
|
|
14805
|
+
_v$76 !== _p$.o && className(_el$118, _p$.o = _v$76);
|
|
14806
|
+
_v$77 !== _p$.i && className(_el$122, _p$.i = _v$77);
|
|
14807
|
+
_v$78 !== _p$.n && ((_p$.n = _v$78) != null ? _el$123.style.setProperty("padding", _v$78) : _el$123.style.removeProperty("padding"));
|
|
14808
|
+
_v$79 !== _p$.s && className(_el$124, _p$.s = _v$79);
|
|
14809
|
+
_v$80 !== _p$.h && ((_p$.h = _v$80) != null ? _el$125.style.setProperty("padding", _v$80) : _el$125.style.removeProperty("padding"));
|
|
14810
|
+
_v$81 !== _p$.r && className(_el$126, _p$.r = _v$81);
|
|
14811
|
+
_v$82 !== _p$.d && ((_p$.d = _v$82) != null ? _el$127.style.setProperty("padding", _v$82) : _el$127.style.removeProperty("padding"));
|
|
14812
|
+
_v$83 !== _p$.l && className(_el$128, _p$.l = _v$83);
|
|
14813
|
+
_v$84 !== _p$.u && ((_p$.u = _v$84) != null ? _el$129.style.setProperty("padding", _v$84) : _el$129.style.removeProperty("padding"));
|
|
14756
14814
|
return _p$;
|
|
14757
14815
|
}, {
|
|
14758
14816
|
e: void 0,
|
|
@@ -15157,6 +15215,15 @@ var init_Devtools = __esm({
|
|
|
15157
15215
|
&:hover {
|
|
15158
15216
|
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
15159
15217
|
}
|
|
15218
|
+
&:focus {
|
|
15219
|
+
outline: none;
|
|
15220
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
15221
|
+
}
|
|
15222
|
+
&:focus-visible {
|
|
15223
|
+
outline: 2px solid ${colors.blue[800]};
|
|
15224
|
+
outline-offset: -2px;
|
|
15225
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
15226
|
+
}
|
|
15160
15227
|
z-index: 4;
|
|
15161
15228
|
`,
|
|
15162
15229
|
"dragHandle-position-top": css`
|
|
@@ -15776,15 +15843,15 @@ var init_Devtools = __esm({
|
|
|
15776
15843
|
outline-offset: 2px;
|
|
15777
15844
|
outline: 2px solid ${colors.blue[800]};
|
|
15778
15845
|
}
|
|
15779
|
-
|
|
15780
|
-
themeSelectedButton: css`
|
|
15781
|
-
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
15782
|
-
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
15783
|
-
& svg {
|
|
15784
|
-
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
15785
|
-
}
|
|
15786
|
-
&:hover {
|
|
15846
|
+
&[data-checked] {
|
|
15787
15847
|
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
15848
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
15849
|
+
& svg {
|
|
15850
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
15851
|
+
}
|
|
15852
|
+
&:hover {
|
|
15853
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
15854
|
+
}
|
|
15788
15855
|
}
|
|
15789
15856
|
`,
|
|
15790
15857
|
viewToggle: css`
|
|
@@ -15909,7 +15976,7 @@ var init_Devtools = __esm({
|
|
|
15909
15976
|
};
|
|
15910
15977
|
lightStyles2 = (css) => stylesFactory2("light", css);
|
|
15911
15978
|
darkStyles2 = (css) => stylesFactory2("dark", css);
|
|
15912
|
-
delegateEvents(["click", "mousedown", "input"]);
|
|
15979
|
+
delegateEvents(["click", "mousedown", "keydown", "input"]);
|
|
15913
15980
|
}
|
|
15914
15981
|
});
|
|
15915
15982
|
|