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