@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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { sortFns, mutationSortFns, createContext, splitProps, createMemo, createComponent, mergeProps, createUniqueId, createSignal, createEffect, onCleanup, Show, on, delegateEvents, Dynamic, useContext, template, createRenderEffect, setAttribute, memo, Portal, untrack, isServer, onMount, createComputed, getOwner, use, insert, className, getSidedProp, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, getQueryStatusColorByLabel, displayValue, For, batch, clearDelegatedEvents,
|
|
1
|
+
import { sortFns, mutationSortFns, createContext, splitProps, createMemo, createComponent, mergeProps, createUniqueId, createSignal, createEffect, onCleanup, Show, on, delegateEvents, Dynamic, useContext, template, createRenderEffect, setAttribute, memo, Portal, untrack, isServer, onMount, createComputed, getOwner, use, insert, className, getSidedProp, convertRemToPixels, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, getQueryStatusColorByLabel, displayValue, For, batch, clearDelegatedEvents, serialize, Index, updateNestedDataByPath, $TRACK, createRoot, DEV, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, useTransition } from './EIDV623S.js';
|
|
2
2
|
|
|
3
3
|
// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.9.7/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
|
|
4
4
|
var isClient = !isServer;
|
|
@@ -297,6 +297,8 @@ function useQueryDevtoolsContext() {
|
|
|
297
297
|
}
|
|
298
298
|
|
|
299
299
|
// src/contexts/PiPContext.tsx
|
|
300
|
+
var PipOpenError = class extends Error {
|
|
301
|
+
};
|
|
300
302
|
var PiPContext = createContext(void 0);
|
|
301
303
|
var PiPProvider = (props) => {
|
|
302
304
|
const [pipWindow, setPipWindow] = createSignal(null);
|
|
@@ -313,7 +315,7 @@ var PiPProvider = (props) => {
|
|
|
313
315
|
}
|
|
314
316
|
const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
|
|
315
317
|
if (!pip) {
|
|
316
|
-
throw new
|
|
318
|
+
throw new PipOpenError("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
|
|
317
319
|
}
|
|
318
320
|
pip.document.head.innerHTML = "";
|
|
319
321
|
pip.document.body.innerHTML = "";
|
|
@@ -357,7 +359,16 @@ var PiPProvider = (props) => {
|
|
|
357
359
|
createEffect(() => {
|
|
358
360
|
const pip_open = props.localStore.pip_open ?? "false";
|
|
359
361
|
if (pip_open === "true" && !props.disabled) {
|
|
360
|
-
|
|
362
|
+
try {
|
|
363
|
+
requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
|
|
364
|
+
} catch (error) {
|
|
365
|
+
if (error instanceof PipOpenError) {
|
|
366
|
+
props.setLocalStore("pip_open", "false");
|
|
367
|
+
props.setLocalStore("open", "false");
|
|
368
|
+
return;
|
|
369
|
+
}
|
|
370
|
+
throw error;
|
|
371
|
+
}
|
|
361
372
|
}
|
|
362
373
|
});
|
|
363
374
|
createEffect(() => {
|
|
@@ -8785,7 +8796,7 @@ var _tmpl$72 = /* @__PURE__ */ template(`<div>`);
|
|
|
8785
8796
|
var _tmpl$82 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
|
|
8786
8797
|
var _tmpl$92 = /* @__PURE__ */ template(`<input>`);
|
|
8787
8798
|
var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
|
|
8788
|
-
var _tmpl$110 = /* @__PURE__ */ template(`<div><
|
|
8799
|
+
var _tmpl$110 = /* @__PURE__ */ template(`<div><label>:`);
|
|
8789
8800
|
var _tmpl$102 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
|
|
8790
8801
|
function chunkArray(array, size3) {
|
|
8791
8802
|
let i2 = 0;
|
|
@@ -9007,6 +9018,7 @@ function Explorer(props) {
|
|
|
9007
9018
|
});
|
|
9008
9019
|
const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
|
|
9009
9020
|
const currentDataPath = props.dataPath ?? [];
|
|
9021
|
+
const inputId = createUniqueId();
|
|
9010
9022
|
return (() => {
|
|
9011
9023
|
var _el$6 = _tmpl$72();
|
|
9012
9024
|
insert(_el$6, createComponent(Show, {
|
|
@@ -9082,15 +9094,17 @@ function Explorer(props) {
|
|
|
9082
9094
|
}
|
|
9083
9095
|
}), null);
|
|
9084
9096
|
createRenderEffect((_p$) => {
|
|
9085
|
-
var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
|
|
9097
|
+
var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = expanded() ? "true" : "false", _v$6 = styles().info;
|
|
9086
9098
|
_v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
|
|
9087
9099
|
_v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
|
|
9088
|
-
_v$5 !== _p$.a &&
|
|
9100
|
+
_v$5 !== _p$.a && setAttribute(_el$8, "aria-expanded", _p$.a = _v$5);
|
|
9101
|
+
_v$6 !== _p$.o && className(_el$10, _p$.o = _v$6);
|
|
9089
9102
|
return _p$;
|
|
9090
9103
|
}, {
|
|
9091
9104
|
e: void 0,
|
|
9092
9105
|
t: void 0,
|
|
9093
|
-
a: void 0
|
|
9106
|
+
a: void 0,
|
|
9107
|
+
o: void 0
|
|
9094
9108
|
});
|
|
9095
9109
|
return _el$7;
|
|
9096
9110
|
})(), createComponent(Show, {
|
|
@@ -9195,9 +9209,9 @@ function Explorer(props) {
|
|
|
9195
9209
|
}
|
|
9196
9210
|
}), null);
|
|
9197
9211
|
createRenderEffect((_p$) => {
|
|
9198
|
-
var _v$
|
|
9199
|
-
_v$
|
|
9200
|
-
_v$
|
|
9212
|
+
var _v$1 = styles().entry, _v$10 = styles().expanderButton;
|
|
9213
|
+
_v$1 !== _p$.e && className(_el$22, _p$.e = _v$1);
|
|
9214
|
+
_v$10 !== _p$.t && className(_el$23, _p$.t = _v$10);
|
|
9201
9215
|
return _p$;
|
|
9202
9216
|
}, {
|
|
9203
9217
|
e: void 0,
|
|
@@ -9220,6 +9234,7 @@ function Explorer(props) {
|
|
|
9220
9234
|
},
|
|
9221
9235
|
get children() {
|
|
9222
9236
|
var _el$16 = _tmpl$110(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
|
|
9237
|
+
setAttribute(_el$17, "for", inputId);
|
|
9223
9238
|
insert(_el$17, () => props.label, _el$18);
|
|
9224
9239
|
insert(_el$16, createComponent(Show, {
|
|
9225
9240
|
get when() {
|
|
@@ -9245,10 +9260,11 @@ function Explorer(props) {
|
|
|
9245
9260
|
const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
|
|
9246
9261
|
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
9247
9262
|
});
|
|
9263
|
+
setAttribute(_el$19, "id", inputId);
|
|
9248
9264
|
createRenderEffect((_p$) => {
|
|
9249
|
-
var _v$
|
|
9250
|
-
_v$
|
|
9251
|
-
_v$
|
|
9265
|
+
var _v$7 = type() === "number" ? "number" : "text", _v$8 = clsx(styles().value, styles().editableInput);
|
|
9266
|
+
_v$7 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$7);
|
|
9267
|
+
_v$8 !== _p$.t && className(_el$19, _p$.t = _v$8);
|
|
9252
9268
|
return _p$;
|
|
9253
9269
|
}, {
|
|
9254
9270
|
e: void 0,
|
|
@@ -9293,9 +9309,9 @@ function Explorer(props) {
|
|
|
9293
9309
|
}
|
|
9294
9310
|
}), null);
|
|
9295
9311
|
createRenderEffect((_p$) => {
|
|
9296
|
-
var _v$
|
|
9297
|
-
_v$
|
|
9298
|
-
_v$
|
|
9312
|
+
var _v$9 = styles().row, _v$0 = styles().label;
|
|
9313
|
+
_v$9 !== _p$.e && className(_el$16, _p$.e = _v$9);
|
|
9314
|
+
_v$0 !== _p$.t && className(_el$17, _p$.t = _v$0);
|
|
9299
9315
|
return _p$;
|
|
9300
9316
|
}, {
|
|
9301
9317
|
e: void 0,
|
|
@@ -9450,9 +9466,9 @@ delegateEvents(["click"]);
|
|
|
9450
9466
|
// src/Devtools.tsx
|
|
9451
9467
|
var _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
|
|
9452
9468
|
var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
|
|
9453
|
-
var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
|
|
9454
|
-
var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
|
|
9455
|
-
var _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
|
|
9469
|
+
var _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">`);
|
|
9470
|
+
var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort aria-label="Sort queries by">`);
|
|
9471
|
+
var _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort aria-label="Sort mutations by">`);
|
|
9456
9472
|
var _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
|
|
9457
9473
|
var _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
|
|
9458
9474
|
var _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
|
|
@@ -9473,19 +9489,19 @@ var _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container
|
|
|
9473
9489
|
var _tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
|
|
9474
9490
|
var _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>`);
|
|
9475
9491
|
var _tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
|
|
9476
|
-
var _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
|
|
9477
|
-
var _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
|
|
9492
|
+
var _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator aria-hidden=true>disabled`);
|
|
9493
|
+
var _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator aria-hidden=true>static`);
|
|
9478
9494
|
var _tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
|
|
9479
9495
|
var _tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
|
|
9480
9496
|
var _tmpl$28 = /* @__PURE__ */ template(`<span>`);
|
|
9481
|
-
var _tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
|
|
9482
|
-
var _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
|
|
9483
|
-
var _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
|
|
9497
|
+
var _tmpl$29 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span><span>`);
|
|
9498
|
+
var _tmpl$30 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span> Error`);
|
|
9499
|
+
var _tmpl$31 = /* @__PURE__ */ template(`<div><span aria-hidden=true></span>Trigger Error<select aria-label="Select error type to trigger"><option value=""disabled selected>`);
|
|
9484
9500
|
var _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
|
|
9485
|
-
var _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
|
|
9486
|
-
var _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">`);
|
|
9501
|
+
var _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`);
|
|
9502
|
+
var _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">`);
|
|
9487
9503
|
var _tmpl$35 = /* @__PURE__ */ template(`<option>`);
|
|
9488
|
-
var _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">`);
|
|
9504
|
+
var _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">`);
|
|
9489
9505
|
var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
|
|
9490
9506
|
var [selectedMutationId, setSelectedMutationId] = createSignal(null);
|
|
9491
9507
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
@@ -9741,6 +9757,10 @@ var DraggablePanel = (props) => {
|
|
|
9741
9757
|
const styles = createMemo(() => {
|
|
9742
9758
|
return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
|
|
9743
9759
|
});
|
|
9760
|
+
let closeBtnRef;
|
|
9761
|
+
onMount(() => {
|
|
9762
|
+
closeBtnRef.focus();
|
|
9763
|
+
});
|
|
9744
9764
|
const [isResizing, setIsResizing] = createSignal(false);
|
|
9745
9765
|
const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
|
|
9746
9766
|
const handleDragStart = (event) => {
|
|
@@ -9784,7 +9804,7 @@ var DraggablePanel = (props) => {
|
|
|
9784
9804
|
setIsResizing(false);
|
|
9785
9805
|
}
|
|
9786
9806
|
document.removeEventListener("mousemove", runDrag, false);
|
|
9787
|
-
document.removeEventListener("
|
|
9807
|
+
document.removeEventListener("mouseup", unsubscribe, false);
|
|
9788
9808
|
};
|
|
9789
9809
|
document.addEventListener("mousemove", runDrag, false);
|
|
9790
9810
|
document.addEventListener("mouseup", unsubscribe, false);
|
|
@@ -9845,8 +9865,32 @@ var DraggablePanel = (props) => {
|
|
|
9845
9865
|
var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
|
|
9846
9866
|
var _ref$3 = panelRef;
|
|
9847
9867
|
typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
|
|
9868
|
+
_el$8.$$keydown = (e2) => {
|
|
9869
|
+
const step = 10;
|
|
9870
|
+
const minHeight = convertRemToPixels(3.5);
|
|
9871
|
+
const minWidth = convertRemToPixels(12);
|
|
9872
|
+
if (position() === "top" || position() === "bottom") {
|
|
9873
|
+
if (e2.key === "ArrowUp" || e2.key === "ArrowDown") {
|
|
9874
|
+
e2.preventDefault();
|
|
9875
|
+
const currentHeight = Number(props.localStore.height || DEFAULT_HEIGHT);
|
|
9876
|
+
const delta = position() === "bottom" ? e2.key === "ArrowUp" ? step : -10 : e2.key === "ArrowDown" ? step : -10;
|
|
9877
|
+
const newHeight = Math.max(minHeight, currentHeight + delta);
|
|
9878
|
+
props.setLocalStore("height", String(newHeight));
|
|
9879
|
+
}
|
|
9880
|
+
} else {
|
|
9881
|
+
if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
|
|
9882
|
+
e2.preventDefault();
|
|
9883
|
+
const currentWidth = Number(props.localStore.width || DEFAULT_WIDTH);
|
|
9884
|
+
const delta = position() === "right" ? e2.key === "ArrowLeft" ? step : -10 : e2.key === "ArrowRight" ? step : -10;
|
|
9885
|
+
const newWidth = Math.max(minWidth, currentWidth + delta);
|
|
9886
|
+
props.setLocalStore("width", String(newWidth));
|
|
9887
|
+
}
|
|
9888
|
+
}
|
|
9889
|
+
};
|
|
9848
9890
|
_el$8.$$mousedown = handleDragStart;
|
|
9849
9891
|
_el$9.$$click = () => props.setLocalStore("open", "false");
|
|
9892
|
+
var _ref$4 = closeBtnRef;
|
|
9893
|
+
typeof _ref$4 === "function" ? use(_ref$4, _el$9) : closeBtnRef = _el$9;
|
|
9850
9894
|
insert(_el$9, createComponent(ChevronDown, {}));
|
|
9851
9895
|
insert(_el$7, createComponent(ContentView, props), null);
|
|
9852
9896
|
createRenderEffect((_p$) => {
|
|
@@ -9854,19 +9898,25 @@ var DraggablePanel = (props) => {
|
|
|
9854
9898
|
[css`
|
|
9855
9899
|
min-width: min-content;
|
|
9856
9900
|
`]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
|
|
9857
|
-
}, "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$
|
|
9901
|
+
}, "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");
|
|
9858
9902
|
_v$ !== _p$.e && className(_el$7, _p$.e = _v$);
|
|
9859
9903
|
_v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
|
|
9860
9904
|
_v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
|
|
9861
|
-
_v$4 !== _p$.o &&
|
|
9862
|
-
_v$5 !== _p$.i &&
|
|
9905
|
+
_v$4 !== _p$.o && setAttribute(_el$8, "aria-orientation", _p$.o = _v$4);
|
|
9906
|
+
_v$5 !== _p$.i && setAttribute(_el$8, "aria-valuemin", _p$.i = _v$5);
|
|
9907
|
+
_v$6 !== _p$.n && setAttribute(_el$8, "aria-valuenow", _p$.n = _v$6);
|
|
9908
|
+
_v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
|
|
9909
|
+
_v$8 !== _p$.h && className(_el$9, _p$.h = _v$8);
|
|
9863
9910
|
return _p$;
|
|
9864
9911
|
}, {
|
|
9865
9912
|
e: void 0,
|
|
9866
9913
|
t: void 0,
|
|
9867
9914
|
a: void 0,
|
|
9868
9915
|
o: void 0,
|
|
9869
|
-
i: void 0
|
|
9916
|
+
i: void 0,
|
|
9917
|
+
n: void 0,
|
|
9918
|
+
s: void 0,
|
|
9919
|
+
h: void 0
|
|
9870
9920
|
});
|
|
9871
9921
|
return _el$7;
|
|
9872
9922
|
})();
|
|
@@ -9931,8 +9981,8 @@ var ContentView = (props) => {
|
|
|
9931
9981
|
};
|
|
9932
9982
|
return [(() => {
|
|
9933
9983
|
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;
|
|
9934
|
-
var _ref$
|
|
9935
|
-
typeof _ref$
|
|
9984
|
+
var _ref$5 = containerRef;
|
|
9985
|
+
typeof _ref$5 === "function" ? use(_ref$5, _el$0) : containerRef = _el$0;
|
|
9936
9986
|
_el$11.$$click = () => {
|
|
9937
9987
|
if (!pip().pipWindow && !props.showPanelViewOnly) {
|
|
9938
9988
|
props.setLocalStore("open", "false");
|
|
@@ -9951,6 +10001,7 @@ var ContentView = (props) => {
|
|
|
9951
10001
|
get value() {
|
|
9952
10002
|
return selectedView();
|
|
9953
10003
|
},
|
|
10004
|
+
"aria-label": "Toggle between queries and mutations view",
|
|
9954
10005
|
onChange: (value) => {
|
|
9955
10006
|
setSelectedView(value);
|
|
9956
10007
|
setSelectedQueryHash(null);
|
|
@@ -10114,6 +10165,8 @@ var ContentView = (props) => {
|
|
|
10114
10165
|
get ["class"]() {
|
|
10115
10166
|
return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
|
|
10116
10167
|
},
|
|
10168
|
+
"aria-label": "Open settings menu",
|
|
10169
|
+
title: "Open settings menu",
|
|
10117
10170
|
get children() {
|
|
10118
10171
|
return createComponent(Settings, {});
|
|
10119
10172
|
}
|
|
@@ -10160,51 +10213,48 @@ var ContentView = (props) => {
|
|
|
10160
10213
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
10161
10214
|
},
|
|
10162
10215
|
get children() {
|
|
10163
|
-
return
|
|
10164
|
-
|
|
10165
|
-
|
|
10166
|
-
|
|
10167
|
-
as: "button",
|
|
10168
|
-
get ["class"]() {
|
|
10169
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
10216
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
10217
|
+
"aria-label": "Position settings",
|
|
10218
|
+
get value() {
|
|
10219
|
+
return props.localStore.position;
|
|
10170
10220
|
},
|
|
10221
|
+
onChange: (value) => setDevtoolsPosition(value),
|
|
10171
10222
|
get children() {
|
|
10172
|
-
return [
|
|
10223
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
10224
|
+
value: "top",
|
|
10225
|
+
get ["class"]() {
|
|
10226
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
10227
|
+
},
|
|
10228
|
+
get children() {
|
|
10229
|
+
return [_tmpl$111(), createComponent(ArrowUp, {})];
|
|
10230
|
+
}
|
|
10231
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10232
|
+
value: "bottom",
|
|
10233
|
+
get ["class"]() {
|
|
10234
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
10235
|
+
},
|
|
10236
|
+
get children() {
|
|
10237
|
+
return [_tmpl$103(), createComponent(ArrowDown, {})];
|
|
10238
|
+
}
|
|
10239
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10240
|
+
value: "left",
|
|
10241
|
+
get ["class"]() {
|
|
10242
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
10243
|
+
},
|
|
10244
|
+
get children() {
|
|
10245
|
+
return [_tmpl$112(), createComponent(ArrowLeft, {})];
|
|
10246
|
+
}
|
|
10247
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10248
|
+
value: "right",
|
|
10249
|
+
get ["class"]() {
|
|
10250
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
|
|
10251
|
+
},
|
|
10252
|
+
get children() {
|
|
10253
|
+
return [_tmpl$122(), createComponent(ArrowRight, {})];
|
|
10254
|
+
}
|
|
10255
|
+
})];
|
|
10173
10256
|
}
|
|
10174
|
-
})
|
|
10175
|
-
onSelect: () => {
|
|
10176
|
-
setDevtoolsPosition("bottom");
|
|
10177
|
-
},
|
|
10178
|
-
as: "button",
|
|
10179
|
-
get ["class"]() {
|
|
10180
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
10181
|
-
},
|
|
10182
|
-
get children() {
|
|
10183
|
-
return [_tmpl$103(), createComponent(ArrowDown, {})];
|
|
10184
|
-
}
|
|
10185
|
-
}), createComponent(dropdown_menu_exports.Item, {
|
|
10186
|
-
onSelect: () => {
|
|
10187
|
-
setDevtoolsPosition("left");
|
|
10188
|
-
},
|
|
10189
|
-
as: "button",
|
|
10190
|
-
get ["class"]() {
|
|
10191
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
10192
|
-
},
|
|
10193
|
-
get children() {
|
|
10194
|
-
return [_tmpl$112(), createComponent(ArrowLeft, {})];
|
|
10195
|
-
}
|
|
10196
|
-
}), createComponent(dropdown_menu_exports.Item, {
|
|
10197
|
-
onSelect: () => {
|
|
10198
|
-
setDevtoolsPosition("right");
|
|
10199
|
-
},
|
|
10200
|
-
as: "button",
|
|
10201
|
-
get ["class"]() {
|
|
10202
|
-
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
|
|
10203
|
-
},
|
|
10204
|
-
get children() {
|
|
10205
|
-
return [_tmpl$122(), createComponent(ArrowRight, {})];
|
|
10206
|
-
}
|
|
10207
|
-
})];
|
|
10257
|
+
});
|
|
10208
10258
|
}
|
|
10209
10259
|
});
|
|
10210
10260
|
}
|
|
@@ -10235,40 +10285,42 @@ var ContentView = (props) => {
|
|
|
10235
10285
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
10236
10286
|
},
|
|
10237
10287
|
get children() {
|
|
10238
|
-
return
|
|
10239
|
-
|
|
10240
|
-
props.
|
|
10241
|
-
},
|
|
10242
|
-
as: "button",
|
|
10243
|
-
get ["class"]() {
|
|
10244
|
-
return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
10288
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
10289
|
+
get value() {
|
|
10290
|
+
return props.localStore.theme_preference;
|
|
10245
10291
|
},
|
|
10246
|
-
|
|
10247
|
-
|
|
10248
|
-
}
|
|
10249
|
-
}), createComponent(dropdown_menu_exports.Item, {
|
|
10250
|
-
onSelect: () => {
|
|
10251
|
-
props.setLocalStore("theme_preference", "dark");
|
|
10252
|
-
},
|
|
10253
|
-
as: "button",
|
|
10254
|
-
get ["class"]() {
|
|
10255
|
-
return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
10292
|
+
onChange: (value) => {
|
|
10293
|
+
props.setLocalStore("theme_preference", value);
|
|
10256
10294
|
},
|
|
10295
|
+
"aria-label": "Theme preference",
|
|
10257
10296
|
get children() {
|
|
10258
|
-
return [
|
|
10259
|
-
|
|
10260
|
-
|
|
10261
|
-
|
|
10262
|
-
|
|
10263
|
-
|
|
10264
|
-
|
|
10265
|
-
|
|
10266
|
-
|
|
10267
|
-
|
|
10268
|
-
|
|
10269
|
-
|
|
10297
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
10298
|
+
value: "light",
|
|
10299
|
+
get ["class"]() {
|
|
10300
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
|
|
10301
|
+
},
|
|
10302
|
+
get children() {
|
|
10303
|
+
return [_tmpl$142(), createComponent(Sun, {})];
|
|
10304
|
+
}
|
|
10305
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10306
|
+
value: "dark",
|
|
10307
|
+
get ["class"]() {
|
|
10308
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
|
|
10309
|
+
},
|
|
10310
|
+
get children() {
|
|
10311
|
+
return [_tmpl$152(), createComponent(Moon, {})];
|
|
10312
|
+
}
|
|
10313
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10314
|
+
value: "system",
|
|
10315
|
+
get ["class"]() {
|
|
10316
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
|
|
10317
|
+
},
|
|
10318
|
+
get children() {
|
|
10319
|
+
return [_tmpl$162(), createComponent(Monitor, {})];
|
|
10320
|
+
}
|
|
10321
|
+
})];
|
|
10270
10322
|
}
|
|
10271
|
-
})
|
|
10323
|
+
});
|
|
10272
10324
|
}
|
|
10273
10325
|
});
|
|
10274
10326
|
}
|
|
@@ -10297,43 +10349,46 @@ var ContentView = (props) => {
|
|
|
10297
10349
|
return clsx(styles().settingsMenu, "tsqd-settings-submenu");
|
|
10298
10350
|
},
|
|
10299
10351
|
get children() {
|
|
10300
|
-
return
|
|
10301
|
-
|
|
10302
|
-
props.
|
|
10303
|
-
},
|
|
10304
|
-
as: "button",
|
|
10305
|
-
get ["class"]() {
|
|
10306
|
-
return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
|
|
10352
|
+
return createComponent(dropdown_menu_exports.RadioGroup, {
|
|
10353
|
+
get value() {
|
|
10354
|
+
return props.localStore.hideDisabledQueries;
|
|
10307
10355
|
},
|
|
10356
|
+
"aria-label": "Hide disabled queries setting",
|
|
10357
|
+
onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
|
|
10308
10358
|
get children() {
|
|
10309
|
-
return [
|
|
10310
|
-
|
|
10311
|
-
|
|
10359
|
+
return [createComponent(dropdown_menu_exports.RadioItem, {
|
|
10360
|
+
value: "false",
|
|
10361
|
+
get ["class"]() {
|
|
10362
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
|
|
10312
10363
|
},
|
|
10313
10364
|
get children() {
|
|
10314
|
-
return createComponent(
|
|
10365
|
+
return [_tmpl$182(), createComponent(Show, {
|
|
10366
|
+
get when() {
|
|
10367
|
+
return props.localStore.hideDisabledQueries !== "true";
|
|
10368
|
+
},
|
|
10369
|
+
get children() {
|
|
10370
|
+
return createComponent(CheckCircle, {});
|
|
10371
|
+
}
|
|
10372
|
+
})];
|
|
10315
10373
|
}
|
|
10316
|
-
})
|
|
10317
|
-
|
|
10318
|
-
|
|
10319
|
-
|
|
10320
|
-
props.setLocalStore("hideDisabledQueries", "true");
|
|
10321
|
-
},
|
|
10322
|
-
as: "button",
|
|
10323
|
-
get ["class"]() {
|
|
10324
|
-
return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
|
|
10325
|
-
},
|
|
10326
|
-
get children() {
|
|
10327
|
-
return [_tmpl$192(), createComponent(Show, {
|
|
10328
|
-
get when() {
|
|
10329
|
-
return props.localStore.hideDisabledQueries === "true";
|
|
10374
|
+
}), createComponent(dropdown_menu_exports.RadioItem, {
|
|
10375
|
+
value: "true",
|
|
10376
|
+
get ["class"]() {
|
|
10377
|
+
return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
|
|
10330
10378
|
},
|
|
10331
10379
|
get children() {
|
|
10332
|
-
return createComponent(
|
|
10380
|
+
return [_tmpl$192(), createComponent(Show, {
|
|
10381
|
+
get when() {
|
|
10382
|
+
return props.localStore.hideDisabledQueries === "true";
|
|
10383
|
+
},
|
|
10384
|
+
get children() {
|
|
10385
|
+
return createComponent(CheckCircle, {});
|
|
10386
|
+
}
|
|
10387
|
+
})];
|
|
10333
10388
|
}
|
|
10334
10389
|
})];
|
|
10335
10390
|
}
|
|
10336
|
-
})
|
|
10391
|
+
});
|
|
10337
10392
|
}
|
|
10338
10393
|
});
|
|
10339
10394
|
}
|
|
@@ -10389,33 +10444,33 @@ var ContentView = (props) => {
|
|
|
10389
10444
|
}
|
|
10390
10445
|
}), null);
|
|
10391
10446
|
createRenderEffect((_p$) => {
|
|
10392
|
-
var _v$
|
|
10447
|
+
var _v$9 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
|
|
10393
10448
|
height: 50%;
|
|
10394
10449
|
max-height: 50%;
|
|
10395
10450
|
`, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
|
|
10396
10451
|
height: 100%;
|
|
10397
10452
|
max-height: 100%;
|
|
10398
|
-
`, "tsqd-queries-container"), _v$
|
|
10399
|
-
_v$
|
|
10400
|
-
_v$
|
|
10401
|
-
_v$
|
|
10402
|
-
_v$
|
|
10403
|
-
_v$
|
|
10404
|
-
_v$
|
|
10405
|
-
_v$
|
|
10406
|
-
_v$
|
|
10407
|
-
_v$
|
|
10408
|
-
_v$
|
|
10409
|
-
_v$
|
|
10410
|
-
_v$
|
|
10411
|
-
_v$
|
|
10412
|
-
_v$
|
|
10413
|
-
_v$
|
|
10414
|
-
_v$
|
|
10415
|
-
_v$
|
|
10416
|
-
_v$
|
|
10417
|
-
_v$
|
|
10418
|
-
_v$
|
|
10453
|
+
`, "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"}`;
|
|
10454
|
+
_v$9 !== _p$.e && className(_el$0, _p$.e = _v$9);
|
|
10455
|
+
_v$0 !== _p$.t && className(_el$1, _p$.t = _v$0);
|
|
10456
|
+
_v$1 !== _p$.a && className(_el$10, _p$.a = _v$1);
|
|
10457
|
+
_v$10 !== _p$.o && className(_el$11, _p$.o = _v$10);
|
|
10458
|
+
_v$11 !== _p$.i && className(_el$12, _p$.i = _v$11);
|
|
10459
|
+
_v$12 !== _p$.n && className(_el$13, _p$.n = _v$12);
|
|
10460
|
+
_v$13 !== _p$.s && className(_el$15, _p$.s = _v$13);
|
|
10461
|
+
_v$14 !== _p$.h && className(_el$16, _p$.h = _v$14);
|
|
10462
|
+
_v$15 !== _p$.r && className(_el$17, _p$.r = _v$15);
|
|
10463
|
+
_v$16 !== _p$.d && className(_el$18, _p$.d = _v$16);
|
|
10464
|
+
_v$17 !== _p$.l && className(_el$19, _p$.l = _v$17);
|
|
10465
|
+
_v$18 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$18);
|
|
10466
|
+
_v$19 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$19);
|
|
10467
|
+
_v$20 !== _p$.w && className(_el$25, _p$.w = _v$20);
|
|
10468
|
+
_v$21 !== _p$.m && className(_el$26, _p$.m = _v$21);
|
|
10469
|
+
_v$22 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$22);
|
|
10470
|
+
_v$23 !== _p$.y && className(_el$27, _p$.y = _v$23);
|
|
10471
|
+
_v$24 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$24);
|
|
10472
|
+
_v$25 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$25);
|
|
10473
|
+
_v$26 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$26);
|
|
10419
10474
|
return _p$;
|
|
10420
10475
|
}, {
|
|
10421
10476
|
e: void 0,
|
|
@@ -10528,10 +10583,10 @@ var QueryRow = (props) => {
|
|
|
10528
10583
|
}
|
|
10529
10584
|
}), null);
|
|
10530
10585
|
createRenderEffect((_p$) => {
|
|
10531
|
-
var _v$
|
|
10532
|
-
_v$
|
|
10533
|
-
_v$
|
|
10534
|
-
_v$
|
|
10586
|
+
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");
|
|
10587
|
+
_v$27 !== _p$.e && className(_el$50, _p$.e = _v$27);
|
|
10588
|
+
_v$28 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$28);
|
|
10589
|
+
_v$29 !== _p$.a && className(_el$51, _p$.a = _v$29);
|
|
10535
10590
|
return _p$;
|
|
10536
10591
|
}, {
|
|
10537
10592
|
e: void 0,
|
|
@@ -10639,10 +10694,10 @@ var MutationRow = (props) => {
|
|
|
10639
10694
|
}), null);
|
|
10640
10695
|
insert(_el$57, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
|
|
10641
10696
|
createRenderEffect((_p$) => {
|
|
10642
|
-
var _v$
|
|
10643
|
-
_v$
|
|
10644
|
-
_v$
|
|
10645
|
-
_v$
|
|
10697
|
+
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");
|
|
10698
|
+
_v$30 !== _p$.e && className(_el$55, _p$.e = _v$30);
|
|
10699
|
+
_v$31 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$31);
|
|
10700
|
+
_v$32 !== _p$.a && className(_el$56, _p$.a = _v$32);
|
|
10646
10701
|
return _p$;
|
|
10647
10702
|
}, {
|
|
10648
10703
|
e: void 0,
|
|
@@ -10794,8 +10849,8 @@ var QueryStatus = (props) => {
|
|
|
10794
10849
|
});
|
|
10795
10850
|
return (() => {
|
|
10796
10851
|
var _el$60 = _tmpl$29(), _el$62 = _el$60.firstChild, _el$64 = _el$62.nextSibling;
|
|
10797
|
-
var _ref$
|
|
10798
|
-
typeof _ref$
|
|
10852
|
+
var _ref$6 = tagRef;
|
|
10853
|
+
typeof _ref$6 === "function" ? use(_ref$6, _el$60) : tagRef = _el$60;
|
|
10799
10854
|
_el$60.addEventListener("mouseleave", () => {
|
|
10800
10855
|
setMouseOver(false);
|
|
10801
10856
|
setFocused(false);
|
|
@@ -10807,6 +10862,9 @@ var QueryStatus = (props) => {
|
|
|
10807
10862
|
get disabled() {
|
|
10808
10863
|
return showLabel();
|
|
10809
10864
|
},
|
|
10865
|
+
get ["aria-label"]() {
|
|
10866
|
+
return `${props.label}: ${props.count}`;
|
|
10867
|
+
},
|
|
10810
10868
|
get ["class"]() {
|
|
10811
10869
|
return clsx(styles().queryStatusTag, !showLabel() && css`
|
|
10812
10870
|
cursor: pointer;
|
|
@@ -10842,17 +10900,17 @@ var QueryStatus = (props) => {
|
|
|
10842
10900
|
}), _el$64);
|
|
10843
10901
|
insert(_el$64, () => props.count);
|
|
10844
10902
|
createRenderEffect((_p$) => {
|
|
10845
|
-
var _v$
|
|
10903
|
+
var _v$33 = clsx(css`
|
|
10846
10904
|
width: ${tokens.size[1.5]};
|
|
10847
10905
|
height: ${tokens.size[1.5]};
|
|
10848
10906
|
border-radius: ${tokens.border.radius.full};
|
|
10849
10907
|
background-color: ${tokens.colors[props.color][500]};
|
|
10850
|
-
`, "tsqd-query-status-tag-dot"), _v$
|
|
10908
|
+
`, "tsqd-query-status-tag-dot"), _v$34 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
|
|
10851
10909
|
background-color: ${t2(colors[props.color][100], colors[props.color][900])};
|
|
10852
10910
|
color: ${t2(colors[props.color][700], colors[props.color][300])};
|
|
10853
10911
|
`, "tsqd-query-status-tag-count");
|
|
10854
|
-
_v$
|
|
10855
|
-
_v$
|
|
10912
|
+
_v$33 !== _p$.e && className(_el$62, _p$.e = _v$33);
|
|
10913
|
+
_v$34 !== _p$.t && className(_el$64, _p$.t = _v$34);
|
|
10856
10914
|
return _p$;
|
|
10857
10915
|
}, {
|
|
10858
10916
|
e: void 0,
|
|
@@ -11053,14 +11111,14 @@ var QueryDetails = () => {
|
|
|
11053
11111
|
};
|
|
11054
11112
|
insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
|
|
11055
11113
|
createRenderEffect((_p$) => {
|
|
11056
|
-
var _v$
|
|
11114
|
+
var _v$35 = clsx(css`
|
|
11057
11115
|
color: ${t2(colors.red[500], colors.red[400])};
|
|
11058
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$
|
|
11116
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$36 = queryStatus() === "pending", _v$37 = css`
|
|
11059
11117
|
background-color: ${t2(colors.red[500], colors.red[400])};
|
|
11060
11118
|
`;
|
|
11061
|
-
_v$
|
|
11062
|
-
_v$
|
|
11063
|
-
_v$
|
|
11119
|
+
_v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
|
|
11120
|
+
_v$36 !== _p$.t && (_el$91.disabled = _p$.t = _v$36);
|
|
11121
|
+
_v$37 !== _p$.a && className(_el$92, _p$.a = _v$37);
|
|
11064
11122
|
return _p$;
|
|
11065
11123
|
}, {
|
|
11066
11124
|
e: void 0,
|
|
@@ -11093,12 +11151,12 @@ var QueryDetails = () => {
|
|
|
11093
11151
|
}), null);
|
|
11094
11152
|
insert(_el$94, createComponent(ChevronDown, {}), null);
|
|
11095
11153
|
createRenderEffect((_p$) => {
|
|
11096
|
-
var _v$
|
|
11154
|
+
var _v$38 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$39 = css`
|
|
11097
11155
|
background-color: ${tokens.colors.red[400]};
|
|
11098
|
-
`, _v$
|
|
11099
|
-
_v$
|
|
11100
|
-
_v$
|
|
11101
|
-
_v$
|
|
11156
|
+
`, _v$40 = queryStatus() === "pending";
|
|
11157
|
+
_v$38 !== _p$.e && className(_el$94, _p$.e = _v$38);
|
|
11158
|
+
_v$39 !== _p$.t && className(_el$95, _p$.t = _v$39);
|
|
11159
|
+
_v$40 !== _p$.a && (_el$97.disabled = _p$.a = _v$40);
|
|
11102
11160
|
return _p$;
|
|
11103
11161
|
}, {
|
|
11104
11162
|
e: void 0,
|
|
@@ -11156,19 +11214,19 @@ var QueryDetails = () => {
|
|
|
11156
11214
|
insert(_el$105, () => dataEditError() ? "Invalid Value" : "");
|
|
11157
11215
|
_el$107.$$click = () => setDataMode("view");
|
|
11158
11216
|
createRenderEffect((_p$) => {
|
|
11159
|
-
var _v$
|
|
11217
|
+
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`
|
|
11160
11218
|
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11161
|
-
`), _v$
|
|
11219
|
+
`), _v$48 = clsx(styles().devtoolsEditFormAction, css`
|
|
11162
11220
|
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11163
11221
|
`);
|
|
11164
|
-
_v$
|
|
11165
|
-
_v$
|
|
11166
|
-
_v$
|
|
11167
|
-
_v$
|
|
11168
|
-
_v$
|
|
11169
|
-
_v$
|
|
11170
|
-
_v$
|
|
11171
|
-
_v$
|
|
11222
|
+
_v$41 !== _p$.e && className(_el$102, _p$.e = _v$41);
|
|
11223
|
+
_v$42 !== _p$.t && className(_el$103, _p$.t = _v$42);
|
|
11224
|
+
_v$43 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$43);
|
|
11225
|
+
_v$44 !== _p$.o && className(_el$104, _p$.o = _v$44);
|
|
11226
|
+
_v$45 !== _p$.i && className(_el$105, _p$.i = _v$45);
|
|
11227
|
+
_v$46 !== _p$.n && className(_el$106, _p$.n = _v$46);
|
|
11228
|
+
_v$47 !== _p$.s && className(_el$107, _p$.s = _v$47);
|
|
11229
|
+
_v$48 !== _p$.h && className(_el$108, _p$.h = _v$48);
|
|
11172
11230
|
return _p$;
|
|
11173
11231
|
}, {
|
|
11174
11232
|
e: void 0,
|
|
@@ -11192,51 +11250,51 @@ var QueryDetails = () => {
|
|
|
11192
11250
|
}
|
|
11193
11251
|
}));
|
|
11194
11252
|
createRenderEffect((_p$) => {
|
|
11195
|
-
var _v$
|
|
11253
|
+
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`
|
|
11196
11254
|
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11197
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$
|
|
11255
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$56 = statusLabel() === "fetching", _v$57 = css`
|
|
11198
11256
|
background-color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11199
|
-
`, _v$
|
|
11257
|
+
`, _v$58 = clsx(css`
|
|
11200
11258
|
color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11201
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$
|
|
11259
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$59 = queryStatus() === "pending", _v$60 = css`
|
|
11202
11260
|
background-color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11203
|
-
`, _v$
|
|
11261
|
+
`, _v$61 = clsx(css`
|
|
11204
11262
|
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11205
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$
|
|
11263
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$62 = queryStatus() === "pending", _v$63 = css`
|
|
11206
11264
|
background-color: ${t2(colors.gray[600], colors.gray[400])};
|
|
11207
|
-
`, _v$
|
|
11265
|
+
`, _v$64 = clsx(css`
|
|
11208
11266
|
color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11209
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$
|
|
11267
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$65 = statusLabel() === "fetching", _v$66 = css`
|
|
11210
11268
|
background-color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11211
|
-
`, _v$
|
|
11269
|
+
`, _v$67 = clsx(css`
|
|
11212
11270
|
color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11213
|
-
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$
|
|
11271
|
+
`, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$68 = restoringLoading(), _v$69 = css`
|
|
11214
11272
|
background-color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11215
|
-
`, _v$
|
|
11216
|
-
_v$
|
|
11217
|
-
_v$
|
|
11218
|
-
_v$
|
|
11219
|
-
_v$
|
|
11220
|
-
_v$
|
|
11221
|
-
_v$
|
|
11222
|
-
_v$
|
|
11223
|
-
_v$
|
|
11224
|
-
_v$
|
|
11225
|
-
_v$
|
|
11226
|
-
_v$
|
|
11227
|
-
_v$
|
|
11228
|
-
_v$
|
|
11229
|
-
_v$
|
|
11230
|
-
_v$
|
|
11231
|
-
_v$
|
|
11232
|
-
_v$
|
|
11233
|
-
_v$
|
|
11234
|
-
_v$
|
|
11235
|
-
_v$
|
|
11236
|
-
_v$
|
|
11237
|
-
_v$
|
|
11238
|
-
_v$
|
|
11239
|
-
_v$
|
|
11273
|
+
`, _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2];
|
|
11274
|
+
_v$49 !== _p$.e && className(_el$65, _p$.e = _v$49);
|
|
11275
|
+
_v$50 !== _p$.t && className(_el$66, _p$.t = _v$50);
|
|
11276
|
+
_v$51 !== _p$.a && className(_el$67, _p$.a = _v$51);
|
|
11277
|
+
_v$52 !== _p$.o && className(_el$71, _p$.o = _v$52);
|
|
11278
|
+
_v$53 !== _p$.i && className(_el$78, _p$.i = _v$53);
|
|
11279
|
+
_v$54 !== _p$.n && className(_el$79, _p$.n = _v$54);
|
|
11280
|
+
_v$55 !== _p$.s && className(_el$80, _p$.s = _v$55);
|
|
11281
|
+
_v$56 !== _p$.h && (_el$80.disabled = _p$.h = _v$56);
|
|
11282
|
+
_v$57 !== _p$.r && className(_el$81, _p$.r = _v$57);
|
|
11283
|
+
_v$58 !== _p$.d && className(_el$82, _p$.d = _v$58);
|
|
11284
|
+
_v$59 !== _p$.l && (_el$82.disabled = _p$.l = _v$59);
|
|
11285
|
+
_v$60 !== _p$.u && className(_el$83, _p$.u = _v$60);
|
|
11286
|
+
_v$61 !== _p$.c && className(_el$84, _p$.c = _v$61);
|
|
11287
|
+
_v$62 !== _p$.w && (_el$84.disabled = _p$.w = _v$62);
|
|
11288
|
+
_v$63 !== _p$.m && className(_el$85, _p$.m = _v$63);
|
|
11289
|
+
_v$64 !== _p$.f && className(_el$86, _p$.f = _v$64);
|
|
11290
|
+
_v$65 !== _p$.y && (_el$86.disabled = _p$.y = _v$65);
|
|
11291
|
+
_v$66 !== _p$.g && className(_el$87, _p$.g = _v$66);
|
|
11292
|
+
_v$67 !== _p$.p && className(_el$88, _p$.p = _v$67);
|
|
11293
|
+
_v$68 !== _p$.b && (_el$88.disabled = _p$.b = _v$68);
|
|
11294
|
+
_v$69 !== _p$.T && className(_el$89, _p$.T = _v$69);
|
|
11295
|
+
_v$70 !== _p$.A && className(_el$99, _p$.A = _v$70);
|
|
11296
|
+
_v$71 !== _p$.O && className(_el$109, _p$.O = _v$71);
|
|
11297
|
+
_v$72 !== _p$.I && ((_p$.I = _v$72) != null ? _el$110.style.setProperty("padding", _v$72) : _el$110.style.removeProperty("padding"));
|
|
11240
11298
|
return _p$;
|
|
11241
11299
|
}, {
|
|
11242
11300
|
e: void 0,
|
|
@@ -11370,19 +11428,19 @@ var MutationDetails = () => {
|
|
|
11370
11428
|
}
|
|
11371
11429
|
}));
|
|
11372
11430
|
createRenderEffect((_p$) => {
|
|
11373
|
-
var _v$
|
|
11374
|
-
_v$
|
|
11375
|
-
_v$
|
|
11376
|
-
_v$
|
|
11377
|
-
_v$
|
|
11378
|
-
_v$
|
|
11379
|
-
_v$
|
|
11380
|
-
_v$
|
|
11381
|
-
_v$
|
|
11382
|
-
_v$
|
|
11383
|
-
_v$
|
|
11384
|
-
_v$
|
|
11385
|
-
_v$
|
|
11431
|
+
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];
|
|
11432
|
+
_v$73 !== _p$.e && className(_el$112, _p$.e = _v$73);
|
|
11433
|
+
_v$74 !== _p$.t && className(_el$113, _p$.t = _v$74);
|
|
11434
|
+
_v$75 !== _p$.a && className(_el$114, _p$.a = _v$75);
|
|
11435
|
+
_v$76 !== _p$.o && className(_el$118, _p$.o = _v$76);
|
|
11436
|
+
_v$77 !== _p$.i && className(_el$122, _p$.i = _v$77);
|
|
11437
|
+
_v$78 !== _p$.n && ((_p$.n = _v$78) != null ? _el$123.style.setProperty("padding", _v$78) : _el$123.style.removeProperty("padding"));
|
|
11438
|
+
_v$79 !== _p$.s && className(_el$124, _p$.s = _v$79);
|
|
11439
|
+
_v$80 !== _p$.h && ((_p$.h = _v$80) != null ? _el$125.style.setProperty("padding", _v$80) : _el$125.style.removeProperty("padding"));
|
|
11440
|
+
_v$81 !== _p$.r && className(_el$126, _p$.r = _v$81);
|
|
11441
|
+
_v$82 !== _p$.d && ((_p$.d = _v$82) != null ? _el$127.style.setProperty("padding", _v$82) : _el$127.style.removeProperty("padding"));
|
|
11442
|
+
_v$83 !== _p$.l && className(_el$128, _p$.l = _v$83);
|
|
11443
|
+
_v$84 !== _p$.u && ((_p$.u = _v$84) != null ? _el$129.style.setProperty("padding", _v$84) : _el$129.style.removeProperty("padding"));
|
|
11386
11444
|
return _p$;
|
|
11387
11445
|
}, {
|
|
11388
11446
|
e: void 0,
|
|
@@ -11787,6 +11845,15 @@ var stylesFactory2 = (theme, css) => {
|
|
|
11787
11845
|
&:hover {
|
|
11788
11846
|
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
11789
11847
|
}
|
|
11848
|
+
&:focus {
|
|
11849
|
+
outline: none;
|
|
11850
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
11851
|
+
}
|
|
11852
|
+
&:focus-visible {
|
|
11853
|
+
outline: 2px solid ${colors.blue[800]};
|
|
11854
|
+
outline-offset: -2px;
|
|
11855
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
11856
|
+
}
|
|
11790
11857
|
z-index: 4;
|
|
11791
11858
|
`,
|
|
11792
11859
|
"dragHandle-position-top": css`
|
|
@@ -12406,15 +12473,15 @@ var stylesFactory2 = (theme, css) => {
|
|
|
12406
12473
|
outline-offset: 2px;
|
|
12407
12474
|
outline: 2px solid ${colors.blue[800]};
|
|
12408
12475
|
}
|
|
12409
|
-
|
|
12410
|
-
themeSelectedButton: css`
|
|
12411
|
-
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12412
|
-
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12413
|
-
& svg {
|
|
12414
|
-
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12415
|
-
}
|
|
12416
|
-
&:hover {
|
|
12476
|
+
&[data-checked] {
|
|
12417
12477
|
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12478
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12479
|
+
& svg {
|
|
12480
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12481
|
+
}
|
|
12482
|
+
&:hover {
|
|
12483
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12484
|
+
}
|
|
12418
12485
|
}
|
|
12419
12486
|
`,
|
|
12420
12487
|
viewToggle: css`
|
|
@@ -12539,7 +12606,7 @@ var stylesFactory2 = (theme, css) => {
|
|
|
12539
12606
|
};
|
|
12540
12607
|
var lightStyles2 = (css) => stylesFactory2("light", css);
|
|
12541
12608
|
var darkStyles2 = (css) => stylesFactory2("dark", css);
|
|
12542
|
-
delegateEvents(["click", "mousedown", "input"]);
|
|
12609
|
+
delegateEvents(["click", "mousedown", "keydown", "input"]);
|
|
12543
12610
|
/*! Bundled license information:
|
|
12544
12611
|
|
|
12545
12612
|
@tanstack/match-sorter-utils/build/lib/index.mjs:
|