@tanstack/query-devtools 5.0.0-rc.1 → 5.0.0-rc.13
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/Devtools/{ALVY75L5.jsx → 3BAJISSX.jsx} +789 -258
- package/build/Devtools/{66PXWIOF.js → 4TNE5QTO.js} +961 -417
- package/build/Devtools/{H2EROWFU.jsx → OWSLDUSP.jsx} +789 -258
- package/build/Devtools/{HTDVDYMT.js → YSRICXZI.js} +961 -417
- package/build/dev.cjs +975 -427
- package/build/dev.js +1 -1
- package/build/dev.jsx +1 -1
- package/build/index.cjs +975 -427
- package/build/index.js +1 -1
- package/build/index.jsx +1 -1
- package/package.json +4 -4
- package/src/Context.ts +9 -0
- package/src/Devtools.tsx +424 -207
- package/src/Explorer.tsx +272 -39
- package/src/__tests__/utils.test.ts +725 -0
- package/src/icons/index.tsx +136 -18
- package/src/utils.tsx +154 -0
|
@@ -9478,6 +9478,99 @@ var sortFns = {
|
|
|
9478
9478
|
var convertRemToPixels = (rem) => {
|
|
9479
9479
|
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
9480
9480
|
};
|
|
9481
|
+
var getPreferredColorScheme = () => {
|
|
9482
|
+
const [colorScheme, setColorScheme] = createSignal("dark");
|
|
9483
|
+
onMount(() => {
|
|
9484
|
+
const query = window.matchMedia("(prefers-color-scheme: dark)");
|
|
9485
|
+
setColorScheme(query.matches ? "dark" : "light");
|
|
9486
|
+
const listener = (e2) => {
|
|
9487
|
+
setColorScheme(e2.matches ? "dark" : "light");
|
|
9488
|
+
};
|
|
9489
|
+
query.addEventListener("change", listener);
|
|
9490
|
+
onCleanup(() => query.removeEventListener("change", listener));
|
|
9491
|
+
});
|
|
9492
|
+
return colorScheme;
|
|
9493
|
+
};
|
|
9494
|
+
var updateNestedDataByPath = (oldData, updatePath2, value) => {
|
|
9495
|
+
if (updatePath2.length === 0) {
|
|
9496
|
+
return value;
|
|
9497
|
+
}
|
|
9498
|
+
if (oldData instanceof Map) {
|
|
9499
|
+
const newData = new Map(oldData);
|
|
9500
|
+
if (updatePath2.length === 1) {
|
|
9501
|
+
newData.set(updatePath2[0], value);
|
|
9502
|
+
return newData;
|
|
9503
|
+
}
|
|
9504
|
+
const [head, ...tail] = updatePath2;
|
|
9505
|
+
newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
|
|
9506
|
+
return newData;
|
|
9507
|
+
}
|
|
9508
|
+
if (oldData instanceof Set) {
|
|
9509
|
+
const setAsArray = updateNestedDataByPath(
|
|
9510
|
+
Array.from(oldData),
|
|
9511
|
+
updatePath2,
|
|
9512
|
+
value
|
|
9513
|
+
);
|
|
9514
|
+
return new Set(setAsArray);
|
|
9515
|
+
}
|
|
9516
|
+
if (Array.isArray(oldData)) {
|
|
9517
|
+
const newData = [...oldData];
|
|
9518
|
+
if (updatePath2.length === 1) {
|
|
9519
|
+
newData[updatePath2[0]] = value;
|
|
9520
|
+
return newData;
|
|
9521
|
+
}
|
|
9522
|
+
const [head, ...tail] = updatePath2;
|
|
9523
|
+
newData[head] = updateNestedDataByPath(newData[head], tail, value);
|
|
9524
|
+
return newData;
|
|
9525
|
+
}
|
|
9526
|
+
if (oldData instanceof Object) {
|
|
9527
|
+
const newData = { ...oldData };
|
|
9528
|
+
if (updatePath2.length === 1) {
|
|
9529
|
+
newData[updatePath2[0]] = value;
|
|
9530
|
+
return newData;
|
|
9531
|
+
}
|
|
9532
|
+
const [head, ...tail] = updatePath2;
|
|
9533
|
+
newData[head] = updateNestedDataByPath(newData[head], tail, value);
|
|
9534
|
+
return newData;
|
|
9535
|
+
}
|
|
9536
|
+
return oldData;
|
|
9537
|
+
};
|
|
9538
|
+
var deleteNestedDataByPath = (oldData, deletePath) => {
|
|
9539
|
+
if (oldData instanceof Map) {
|
|
9540
|
+
const newData = new Map(oldData);
|
|
9541
|
+
if (deletePath.length === 1) {
|
|
9542
|
+
newData.delete(deletePath[0]);
|
|
9543
|
+
return newData;
|
|
9544
|
+
}
|
|
9545
|
+
const [head, ...tail] = deletePath;
|
|
9546
|
+
newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
|
|
9547
|
+
return newData;
|
|
9548
|
+
}
|
|
9549
|
+
if (oldData instanceof Set) {
|
|
9550
|
+
const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
|
|
9551
|
+
return new Set(setAsArray);
|
|
9552
|
+
}
|
|
9553
|
+
if (Array.isArray(oldData)) {
|
|
9554
|
+
const newData = [...oldData];
|
|
9555
|
+
if (deletePath.length === 1) {
|
|
9556
|
+
return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
|
|
9557
|
+
}
|
|
9558
|
+
const [head, ...tail] = deletePath;
|
|
9559
|
+
newData[head] = deleteNestedDataByPath(newData[head], tail);
|
|
9560
|
+
return newData;
|
|
9561
|
+
}
|
|
9562
|
+
if (oldData instanceof Object) {
|
|
9563
|
+
const newData = { ...oldData };
|
|
9564
|
+
if (deletePath.length === 1) {
|
|
9565
|
+
delete newData[deletePath[0]];
|
|
9566
|
+
return newData;
|
|
9567
|
+
}
|
|
9568
|
+
const [head, ...tail] = deletePath;
|
|
9569
|
+
newData[head] = deleteNestedDataByPath(newData[head], tail);
|
|
9570
|
+
return newData;
|
|
9571
|
+
}
|
|
9572
|
+
return oldData;
|
|
9573
|
+
};
|
|
9481
9574
|
|
|
9482
9575
|
// src/icons/index.tsx
|
|
9483
9576
|
function Search() {
|
|
@@ -9489,7 +9582,7 @@ function Search() {
|
|
|
9489
9582
|
xmlns="http://www.w3.org/2000/svg"
|
|
9490
9583
|
><path
|
|
9491
9584
|
d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z"
|
|
9492
|
-
stroke="
|
|
9585
|
+
stroke="currentColor"
|
|
9493
9586
|
stroke-width="1.66667"
|
|
9494
9587
|
stroke-linecap="round"
|
|
9495
9588
|
stroke-linejoin="round"
|
|
@@ -9504,8 +9597,8 @@ function Trash() {
|
|
|
9504
9597
|
xmlns="http://www.w3.org/2000/svg"
|
|
9505
9598
|
><path
|
|
9506
9599
|
d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5"
|
|
9507
|
-
stroke="
|
|
9508
|
-
stroke-width="
|
|
9600
|
+
stroke="currentColor"
|
|
9601
|
+
stroke-width="2"
|
|
9509
9602
|
stroke-linecap="round"
|
|
9510
9603
|
stroke-linejoin="round"
|
|
9511
9604
|
/></svg>;
|
|
@@ -9519,7 +9612,7 @@ function ChevronDown() {
|
|
|
9519
9612
|
xmlns="http://www.w3.org/2000/svg"
|
|
9520
9613
|
><path
|
|
9521
9614
|
d="M1 1L5 5L9 1"
|
|
9522
|
-
stroke="
|
|
9615
|
+
stroke="currentColor"
|
|
9523
9616
|
stroke-width="1.66667"
|
|
9524
9617
|
stroke-linecap="round"
|
|
9525
9618
|
stroke-linejoin="round"
|
|
@@ -9534,7 +9627,7 @@ function ArrowUp() {
|
|
|
9534
9627
|
xmlns="http://www.w3.org/2000/svg"
|
|
9535
9628
|
><path
|
|
9536
9629
|
d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667"
|
|
9537
|
-
stroke="
|
|
9630
|
+
stroke="currentColor"
|
|
9538
9631
|
stroke-width="1.66667"
|
|
9539
9632
|
stroke-linecap="round"
|
|
9540
9633
|
stroke-linejoin="round"
|
|
@@ -9549,7 +9642,7 @@ function ArrowDown() {
|
|
|
9549
9642
|
xmlns="http://www.w3.org/2000/svg"
|
|
9550
9643
|
><path
|
|
9551
9644
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9552
|
-
stroke="
|
|
9645
|
+
stroke="currentColor"
|
|
9553
9646
|
stroke-width="1.66667"
|
|
9554
9647
|
stroke-linecap="round"
|
|
9555
9648
|
stroke-linejoin="round"
|
|
@@ -9567,7 +9660,7 @@ function ArrowLeft() {
|
|
|
9567
9660
|
}}
|
|
9568
9661
|
><path
|
|
9569
9662
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9570
|
-
stroke="
|
|
9663
|
+
stroke="currentColor"
|
|
9571
9664
|
stroke-width="1.66667"
|
|
9572
9665
|
stroke-linecap="round"
|
|
9573
9666
|
stroke-linejoin="round"
|
|
@@ -9585,16 +9678,61 @@ function ArrowRight() {
|
|
|
9585
9678
|
}}
|
|
9586
9679
|
><path
|
|
9587
9680
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9588
|
-
stroke="
|
|
9681
|
+
stroke="currentColor"
|
|
9589
9682
|
stroke-width="1.66667"
|
|
9590
9683
|
stroke-linecap="round"
|
|
9591
9684
|
stroke-linejoin="round"
|
|
9592
9685
|
/></svg>;
|
|
9593
9686
|
}
|
|
9687
|
+
function Sun() {
|
|
9688
|
+
return <svg
|
|
9689
|
+
viewBox="0 0 24 24"
|
|
9690
|
+
height="12"
|
|
9691
|
+
width="12"
|
|
9692
|
+
fill="none"
|
|
9693
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9694
|
+
><path
|
|
9695
|
+
d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"
|
|
9696
|
+
stroke="currentColor"
|
|
9697
|
+
stroke-width="2"
|
|
9698
|
+
stroke-linecap="round"
|
|
9699
|
+
stroke-linejoin="round"
|
|
9700
|
+
/></svg>;
|
|
9701
|
+
}
|
|
9702
|
+
function Moon() {
|
|
9703
|
+
return <svg
|
|
9704
|
+
viewBox="0 0 24 24"
|
|
9705
|
+
height="12"
|
|
9706
|
+
width="12"
|
|
9707
|
+
fill="none"
|
|
9708
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9709
|
+
><path
|
|
9710
|
+
d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z"
|
|
9711
|
+
stroke="currentColor"
|
|
9712
|
+
stroke-width="2"
|
|
9713
|
+
stroke-linecap="round"
|
|
9714
|
+
stroke-linejoin="round"
|
|
9715
|
+
/></svg>;
|
|
9716
|
+
}
|
|
9717
|
+
function Monitor() {
|
|
9718
|
+
return <svg
|
|
9719
|
+
viewBox="0 0 24 24"
|
|
9720
|
+
height="12"
|
|
9721
|
+
width="12"
|
|
9722
|
+
fill="none"
|
|
9723
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9724
|
+
><path
|
|
9725
|
+
d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z"
|
|
9726
|
+
stroke="currentColor"
|
|
9727
|
+
stroke-width="2"
|
|
9728
|
+
stroke-linecap="round"
|
|
9729
|
+
stroke-linejoin="round"
|
|
9730
|
+
/></svg>;
|
|
9731
|
+
}
|
|
9594
9732
|
function Wifi() {
|
|
9595
9733
|
return <svg
|
|
9596
|
-
stroke="
|
|
9597
|
-
fill="
|
|
9734
|
+
stroke="currentColor"
|
|
9735
|
+
fill="currentColor"
|
|
9598
9736
|
stroke-width="0"
|
|
9599
9737
|
viewBox="0 0 24 24"
|
|
9600
9738
|
height="1em"
|
|
@@ -9607,8 +9745,6 @@ function Wifi() {
|
|
|
9607
9745
|
}
|
|
9608
9746
|
function Offline() {
|
|
9609
9747
|
return <svg
|
|
9610
|
-
stroke={tokens.colors.yellow[500]}
|
|
9611
|
-
fill={tokens.colors.yellow[500]}
|
|
9612
9748
|
stroke-width="0"
|
|
9613
9749
|
viewBox="0 0 24 24"
|
|
9614
9750
|
height="1em"
|
|
@@ -9632,14 +9768,14 @@ function Settings() {
|
|
|
9632
9768
|
>
|
|
9633
9769
|
<path
|
|
9634
9770
|
d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z"
|
|
9635
|
-
stroke="
|
|
9771
|
+
stroke="currentColor"
|
|
9636
9772
|
stroke-width="2"
|
|
9637
9773
|
stroke-linecap="round"
|
|
9638
9774
|
stroke-linejoin="round"
|
|
9639
9775
|
/>
|
|
9640
9776
|
<path
|
|
9641
9777
|
d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z"
|
|
9642
|
-
stroke="
|
|
9778
|
+
stroke="currentColor"
|
|
9643
9779
|
stroke-width="2"
|
|
9644
9780
|
stroke-linecap="round"
|
|
9645
9781
|
stroke-linejoin="round"
|
|
@@ -9659,10 +9795,10 @@ function Copier() {
|
|
|
9659
9795
|
stroke-width="2"
|
|
9660
9796
|
stroke-linecap="round"
|
|
9661
9797
|
stroke-linejoin="round"
|
|
9662
|
-
stroke="
|
|
9798
|
+
stroke="currentColor"
|
|
9663
9799
|
/></svg>;
|
|
9664
9800
|
}
|
|
9665
|
-
function CopiedCopier() {
|
|
9801
|
+
function CopiedCopier(props) {
|
|
9666
9802
|
return <svg
|
|
9667
9803
|
width="24"
|
|
9668
9804
|
height="24"
|
|
@@ -9671,7 +9807,7 @@ function CopiedCopier() {
|
|
|
9671
9807
|
xmlns="http://www.w3.org/2000/svg"
|
|
9672
9808
|
><path
|
|
9673
9809
|
d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
|
|
9674
|
-
stroke="#12B76A"
|
|
9810
|
+
stroke={props.theme === "dark" ? "#12B76A" : "#027A48"}
|
|
9675
9811
|
stroke-width="2"
|
|
9676
9812
|
stroke-linecap="round"
|
|
9677
9813
|
stroke-linejoin="round"
|
|
@@ -9692,6 +9828,52 @@ function ErrorCopier() {
|
|
|
9692
9828
|
stroke-linejoin="round"
|
|
9693
9829
|
/></svg>;
|
|
9694
9830
|
}
|
|
9831
|
+
function List() {
|
|
9832
|
+
return <svg
|
|
9833
|
+
width="24"
|
|
9834
|
+
height="24"
|
|
9835
|
+
viewBox="0 0 24 24"
|
|
9836
|
+
fill="none"
|
|
9837
|
+
stroke="currentColor"
|
|
9838
|
+
stroke-width="2"
|
|
9839
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9840
|
+
>
|
|
9841
|
+
<rect class="list" width="20" height="20" y="2" x="2" rx="2" />
|
|
9842
|
+
<line class="list-item" y1="7" y2="7" x1="6" x2="18" />
|
|
9843
|
+
<line class="list-item" y2="12" y1="12" x1="6" x2="18" />
|
|
9844
|
+
<line class="list-item" y1="17" y2="17" x1="6" x2="18" />
|
|
9845
|
+
</svg>;
|
|
9846
|
+
}
|
|
9847
|
+
function Check(props) {
|
|
9848
|
+
return <>
|
|
9849
|
+
<Show when={props.checked}><svg
|
|
9850
|
+
width="24"
|
|
9851
|
+
height="24"
|
|
9852
|
+
viewBox="0 0 24 24"
|
|
9853
|
+
fill="none"
|
|
9854
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9855
|
+
><path
|
|
9856
|
+
d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
|
|
9857
|
+
stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
|
|
9858
|
+
stroke-width="2"
|
|
9859
|
+
stroke-linecap="round"
|
|
9860
|
+
stroke-linejoin="round"
|
|
9861
|
+
/></svg></Show>
|
|
9862
|
+
<Show when={!props.checked}><svg
|
|
9863
|
+
viewBox="0 0 24 24"
|
|
9864
|
+
height="20"
|
|
9865
|
+
width="20"
|
|
9866
|
+
fill="none"
|
|
9867
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9868
|
+
><path
|
|
9869
|
+
d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z"
|
|
9870
|
+
stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
|
|
9871
|
+
stroke-width="2"
|
|
9872
|
+
stroke-linecap="round"
|
|
9873
|
+
stroke-linejoin="round"
|
|
9874
|
+
/></svg></Show>
|
|
9875
|
+
</>;
|
|
9876
|
+
}
|
|
9695
9877
|
function TanstackLogo() {
|
|
9696
9878
|
return <svg version="1.0" viewBox="0 0 633 633">
|
|
9697
9879
|
<linearGradient
|
|
@@ -10408,6 +10590,23 @@ function TanstackLogo() {
|
|
|
10408
10590
|
</svg>;
|
|
10409
10591
|
}
|
|
10410
10592
|
|
|
10593
|
+
// src/Context.ts
|
|
10594
|
+
var QueryDevtoolsContext = createContext({
|
|
10595
|
+
client: void 0,
|
|
10596
|
+
onlineManager: void 0,
|
|
10597
|
+
queryFlavor: "",
|
|
10598
|
+
version: ""
|
|
10599
|
+
});
|
|
10600
|
+
function useQueryDevtoolsContext() {
|
|
10601
|
+
return useContext(QueryDevtoolsContext);
|
|
10602
|
+
}
|
|
10603
|
+
var ThemeContext = createContext(
|
|
10604
|
+
() => "dark"
|
|
10605
|
+
);
|
|
10606
|
+
function useTheme() {
|
|
10607
|
+
return useContext(ThemeContext);
|
|
10608
|
+
}
|
|
10609
|
+
|
|
10411
10610
|
// src/Explorer.tsx
|
|
10412
10611
|
function chunkArray(array, size2) {
|
|
10413
10612
|
if (size2 < 1)
|
|
@@ -10421,10 +10620,13 @@ function chunkArray(array, size2) {
|
|
|
10421
10620
|
return result;
|
|
10422
10621
|
}
|
|
10423
10622
|
var Expander = (props) => {
|
|
10424
|
-
const
|
|
10623
|
+
const theme = useTheme();
|
|
10624
|
+
const styles = createMemo(() => {
|
|
10625
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10626
|
+
});
|
|
10425
10627
|
return <span
|
|
10426
10628
|
class={clsx(
|
|
10427
|
-
styles.expander,
|
|
10629
|
+
styles().expander,
|
|
10428
10630
|
u`
|
|
10429
10631
|
transform: rotate(${props.expanded ? 90 : 0}deg);
|
|
10430
10632
|
`,
|
|
@@ -10448,10 +10650,14 @@ var Expander = (props) => {
|
|
|
10448
10650
|
/></svg></span>;
|
|
10449
10651
|
};
|
|
10450
10652
|
var CopyButton = (props) => {
|
|
10451
|
-
const
|
|
10653
|
+
const theme = useTheme();
|
|
10654
|
+
const styles = createMemo(() => {
|
|
10655
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10656
|
+
});
|
|
10452
10657
|
const [copyState, setCopyState] = createSignal("NoCopy");
|
|
10453
10658
|
return <button
|
|
10454
|
-
class={styles.
|
|
10659
|
+
class={styles().actionButton}
|
|
10660
|
+
title="Copy object to clipboard"
|
|
10455
10661
|
aria-label={`${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`}
|
|
10456
10662
|
onClick={copyState() === "NoCopy" ? () => {
|
|
10457
10663
|
navigator.clipboard.writeText(stringify(props.value)).then(
|
|
@@ -10472,15 +10678,80 @@ var CopyButton = (props) => {
|
|
|
10472
10678
|
} : void 0}
|
|
10473
10679
|
><Switch>
|
|
10474
10680
|
<Match when={copyState() === "NoCopy"}><Copier /></Match>
|
|
10475
|
-
<Match when={copyState() === "SuccessCopy"}><CopiedCopier /></Match>
|
|
10681
|
+
<Match when={copyState() === "SuccessCopy"}><CopiedCopier theme={theme()} /></Match>
|
|
10476
10682
|
<Match when={copyState() === "ErrorCopy"}><ErrorCopier /></Match>
|
|
10477
10683
|
</Switch></button>;
|
|
10478
10684
|
};
|
|
10685
|
+
var ClearArrayButton = (props) => {
|
|
10686
|
+
const theme = useTheme();
|
|
10687
|
+
const styles = createMemo(() => {
|
|
10688
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10689
|
+
});
|
|
10690
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10691
|
+
return <button
|
|
10692
|
+
class={styles().actionButton}
|
|
10693
|
+
title="Remove all items"
|
|
10694
|
+
aria-label="Remove all items"
|
|
10695
|
+
onClick={() => {
|
|
10696
|
+
const oldData = props.activeQuery.state.data;
|
|
10697
|
+
const newData = updateNestedDataByPath(oldData, props.dataPath, []);
|
|
10698
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10699
|
+
}}
|
|
10700
|
+
><List /></button>;
|
|
10701
|
+
};
|
|
10702
|
+
var DeleteItemButton = (props) => {
|
|
10703
|
+
const theme = useTheme();
|
|
10704
|
+
const styles = createMemo(() => {
|
|
10705
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10706
|
+
});
|
|
10707
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10708
|
+
return <button
|
|
10709
|
+
class={clsx(styles().actionButton)}
|
|
10710
|
+
title="Delete item"
|
|
10711
|
+
aria-label="Delete item"
|
|
10712
|
+
onClick={() => {
|
|
10713
|
+
const oldData = props.activeQuery.state.data;
|
|
10714
|
+
const newData = deleteNestedDataByPath(oldData, props.dataPath);
|
|
10715
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10716
|
+
}}
|
|
10717
|
+
><Trash /></button>;
|
|
10718
|
+
};
|
|
10719
|
+
var ToggleValueButton = (props) => {
|
|
10720
|
+
const theme = useTheme();
|
|
10721
|
+
const styles = createMemo(() => {
|
|
10722
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10723
|
+
});
|
|
10724
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10725
|
+
return <button
|
|
10726
|
+
class={clsx(
|
|
10727
|
+
styles().actionButton,
|
|
10728
|
+
u`
|
|
10729
|
+
width: ${tokens.size[3.5]};
|
|
10730
|
+
height: ${tokens.size[3.5]};
|
|
10731
|
+
`
|
|
10732
|
+
)}
|
|
10733
|
+
title="Toggle value"
|
|
10734
|
+
aria-label="Toggle value"
|
|
10735
|
+
onClick={() => {
|
|
10736
|
+
const oldData = props.activeQuery.state.data;
|
|
10737
|
+
const newData = updateNestedDataByPath(
|
|
10738
|
+
oldData,
|
|
10739
|
+
props.dataPath,
|
|
10740
|
+
!props.value
|
|
10741
|
+
);
|
|
10742
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10743
|
+
}}
|
|
10744
|
+
><Check theme={theme()} checked={props.value} /></button>;
|
|
10745
|
+
};
|
|
10479
10746
|
function isIterable(x) {
|
|
10480
10747
|
return Symbol.iterator in x;
|
|
10481
10748
|
}
|
|
10482
10749
|
function Explorer(props) {
|
|
10483
|
-
const
|
|
10750
|
+
const theme = useTheme();
|
|
10751
|
+
const styles = createMemo(() => {
|
|
10752
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10753
|
+
});
|
|
10754
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10484
10755
|
const [expanded, setExpanded] = createSignal(
|
|
10485
10756
|
(props.defaultExpanded || []).includes(props.label)
|
|
10486
10757
|
);
|
|
@@ -10522,41 +10793,59 @@ function Explorer(props) {
|
|
|
10522
10793
|
return typeof props.value;
|
|
10523
10794
|
});
|
|
10524
10795
|
const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
|
|
10525
|
-
|
|
10796
|
+
const currentDataPath = props.dataPath ?? [];
|
|
10797
|
+
return <div class={styles().entry}>
|
|
10526
10798
|
<Show when={subEntryPages().length}>
|
|
10527
|
-
<div class={styles.expanderButtonContainer}>
|
|
10799
|
+
<div class={styles().expanderButtonContainer}>
|
|
10528
10800
|
<button
|
|
10529
|
-
class={styles.expanderButton}
|
|
10801
|
+
class={styles().expanderButton}
|
|
10530
10802
|
onClick={() => toggleExpanded()}
|
|
10531
10803
|
>
|
|
10532
10804
|
<Expander expanded={expanded()} />
|
|
10533
10805
|
{" "}
|
|
10534
10806
|
<span>{props.label}</span>
|
|
10535
10807
|
{" "}
|
|
10536
|
-
<span class={styles.info}>
|
|
10808
|
+
<span class={styles().info}>
|
|
10537
10809
|
{String(type()).toLowerCase() === "iterable" ? "(Iterable) " : ""}
|
|
10538
10810
|
{subEntries().length}
|
|
10539
10811
|
{" "}
|
|
10540
10812
|
{subEntries().length > 1 ? `items` : `item`}
|
|
10541
10813
|
</span>
|
|
10542
10814
|
</button>
|
|
10543
|
-
<Show when={props.
|
|
10815
|
+
<Show when={props.editable}><div class={styles().actions}>
|
|
10816
|
+
<CopyButton value={props.value} />
|
|
10817
|
+
<Show
|
|
10818
|
+
when={props.itemsDeletable && props.activeQuery !== void 0}
|
|
10819
|
+
><DeleteItemButton
|
|
10820
|
+
activeQuery={props.activeQuery}
|
|
10821
|
+
dataPath={currentDataPath}
|
|
10822
|
+
/></Show>
|
|
10823
|
+
<Show
|
|
10824
|
+
when={type() === "array" && props.activeQuery !== void 0}
|
|
10825
|
+
><ClearArrayButton
|
|
10826
|
+
activeQuery={props.activeQuery}
|
|
10827
|
+
dataPath={currentDataPath}
|
|
10828
|
+
/></Show>
|
|
10829
|
+
</div></Show>
|
|
10544
10830
|
</div>
|
|
10545
10831
|
<Show when={expanded()}>
|
|
10546
|
-
<Show when={subEntryPages().length === 1}><div class={styles.subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
|
|
10832
|
+
<Show when={subEntryPages().length === 1}><div class={styles().subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
|
|
10547
10833
|
return <Explorer
|
|
10548
10834
|
defaultExpanded={props.defaultExpanded}
|
|
10549
10835
|
label={entry().label}
|
|
10550
10836
|
value={entry().value}
|
|
10551
|
-
|
|
10837
|
+
editable={props.editable}
|
|
10838
|
+
dataPath={[...currentDataPath, entry().label]}
|
|
10839
|
+
activeQuery={props.activeQuery}
|
|
10840
|
+
itemsDeletable={type() === "array" || type() === "Iterable" || type() === "object"}
|
|
10552
10841
|
/>;
|
|
10553
10842
|
}}</Key></div></Show>
|
|
10554
|
-
<Show when={subEntryPages().length > 1}><div class={styles.subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles.entry}>
|
|
10843
|
+
<Show when={subEntryPages().length > 1}><div class={styles().subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles().entry}>
|
|
10555
10844
|
<button
|
|
10556
10845
|
onClick={() => setExpandedPages(
|
|
10557
10846
|
(old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
|
|
10558
10847
|
)}
|
|
10559
|
-
class={styles.expanderButton}
|
|
10848
|
+
class={styles().expanderButton}
|
|
10560
10849
|
>
|
|
10561
10850
|
<Expander expanded={expandedPages().includes(index)} />
|
|
10562
10851
|
{" "}
|
|
@@ -10566,31 +10855,69 @@ function Explorer(props) {
|
|
|
10566
10855
|
{index * 100 + 100 - 1}
|
|
10567
10856
|
{"]"}
|
|
10568
10857
|
</button>
|
|
10569
|
-
<Show when={expandedPages().includes(index)}><div class={styles.subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
|
|
10858
|
+
<Show when={expandedPages().includes(index)}><div class={styles().subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
|
|
10570
10859
|
defaultExpanded={props.defaultExpanded}
|
|
10571
10860
|
label={entry().label}
|
|
10572
10861
|
value={entry().value}
|
|
10573
|
-
|
|
10862
|
+
editable={props.editable}
|
|
10863
|
+
dataPath={[...currentDataPath, entry().label]}
|
|
10864
|
+
activeQuery={props.activeQuery}
|
|
10574
10865
|
/>}</Key></div></Show>
|
|
10575
10866
|
</div></div>}</Index></div></Show>
|
|
10576
10867
|
</Show>
|
|
10577
10868
|
</Show>
|
|
10578
|
-
<Show when={subEntryPages().length === 0}><div
|
|
10579
|
-
|
|
10580
|
-
"line-height": "1.125rem"
|
|
10581
|
-
}}
|
|
10582
|
-
>
|
|
10583
|
-
<span class={styles.label}>
|
|
10869
|
+
<Show when={subEntryPages().length === 0}><div class={styles().row}>
|
|
10870
|
+
<span class={styles().label}>
|
|
10584
10871
|
{props.label}
|
|
10585
10872
|
{":"}
|
|
10586
10873
|
</span>
|
|
10587
|
-
|
|
10588
|
-
|
|
10874
|
+
<Show
|
|
10875
|
+
when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number" || type() === "boolean")}
|
|
10876
|
+
fallback={<span class={styles().value}>{displayValue(props.value)}</span>}
|
|
10877
|
+
>
|
|
10878
|
+
<Show
|
|
10879
|
+
when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number")}
|
|
10880
|
+
><input
|
|
10881
|
+
type={type() === "number" ? "number" : "text"}
|
|
10882
|
+
class={clsx(styles().value, styles().editableInput)}
|
|
10883
|
+
value={props.value}
|
|
10884
|
+
onChange={(changeEvent) => {
|
|
10885
|
+
const oldData = props.activeQuery.state.data;
|
|
10886
|
+
const newData = updateNestedDataByPath(
|
|
10887
|
+
oldData,
|
|
10888
|
+
currentDataPath,
|
|
10889
|
+
type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value
|
|
10890
|
+
);
|
|
10891
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10892
|
+
}}
|
|
10893
|
+
/></Show>
|
|
10894
|
+
<Show when={type() === "boolean"}><span
|
|
10895
|
+
class={clsx(
|
|
10896
|
+
styles().value,
|
|
10897
|
+
styles().actions,
|
|
10898
|
+
styles().editableInput
|
|
10899
|
+
)}
|
|
10900
|
+
>
|
|
10901
|
+
<ToggleValueButton
|
|
10902
|
+
activeQuery={props.activeQuery}
|
|
10903
|
+
dataPath={currentDataPath}
|
|
10904
|
+
value={props.value}
|
|
10905
|
+
/>
|
|
10906
|
+
{displayValue(props.value)}
|
|
10907
|
+
</span></Show>
|
|
10908
|
+
</Show>
|
|
10909
|
+
<Show
|
|
10910
|
+
when={props.editable && props.itemsDeletable && props.activeQuery !== void 0}
|
|
10911
|
+
><DeleteItemButton
|
|
10912
|
+
activeQuery={props.activeQuery}
|
|
10913
|
+
dataPath={currentDataPath}
|
|
10914
|
+
/></Show>
|
|
10589
10915
|
</div></Show>
|
|
10590
10916
|
</div>;
|
|
10591
10917
|
}
|
|
10592
|
-
var
|
|
10918
|
+
var stylesFactory = (theme) => {
|
|
10593
10919
|
const { colors, font, size: size2, border } = tokens;
|
|
10920
|
+
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
10594
10921
|
return {
|
|
10595
10922
|
entry: u`
|
|
10596
10923
|
& * {
|
|
@@ -10604,7 +10931,7 @@ var getStyles = () => {
|
|
|
10604
10931
|
subEntry: u`
|
|
10605
10932
|
margin: 0 0 0 0.5em;
|
|
10606
10933
|
padding-left: 0.75em;
|
|
10607
|
-
border-left: 2px solid ${colors.darkGray[400]};
|
|
10934
|
+
border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
10608
10935
|
/* outline: 1px solid ${colors.teal[400]}; */
|
|
10609
10936
|
`,
|
|
10610
10937
|
expander: u`
|
|
@@ -10625,6 +10952,7 @@ var getStyles = () => {
|
|
|
10625
10952
|
align-items: center;
|
|
10626
10953
|
line-height: 1.125rem;
|
|
10627
10954
|
min-height: 1.125rem;
|
|
10955
|
+
gap: ${size2[2]};
|
|
10628
10956
|
`,
|
|
10629
10957
|
expanderButton: u`
|
|
10630
10958
|
cursor: pointer;
|
|
@@ -10652,19 +10980,45 @@ var getStyles = () => {
|
|
|
10652
10980
|
}
|
|
10653
10981
|
`,
|
|
10654
10982
|
info: u`
|
|
10655
|
-
color: ${colors.gray[500]};
|
|
10983
|
+
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10656
10984
|
font-size: ${font.size.xs};
|
|
10657
10985
|
margin-left: ${size2[1]};
|
|
10658
10986
|
/* outline: 1px solid ${colors.yellow[400]}; */
|
|
10659
10987
|
`,
|
|
10660
10988
|
label: u`
|
|
10661
|
-
color: ${colors.gray[300]};
|
|
10989
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
10662
10990
|
`,
|
|
10663
10991
|
value: u`
|
|
10664
|
-
color: ${colors.purple[400]};
|
|
10992
|
+
color: ${t2(colors.purple[600], colors.purple[400])};
|
|
10993
|
+
flex-grow: 1;
|
|
10994
|
+
`,
|
|
10995
|
+
actions: u`
|
|
10996
|
+
display: inline-flex;
|
|
10997
|
+
gap: ${size2[2]};
|
|
10998
|
+
align-items: center;
|
|
10999
|
+
`,
|
|
11000
|
+
row: u`
|
|
11001
|
+
display: inline-flex;
|
|
11002
|
+
gap: ${size2[2]};
|
|
11003
|
+
width: 100%;
|
|
11004
|
+
margin-bottom: ${size2[0.5]};
|
|
11005
|
+
line-height: 1.125rem;
|
|
11006
|
+
align-items: center;
|
|
10665
11007
|
`,
|
|
10666
|
-
|
|
11008
|
+
editableInput: u`
|
|
11009
|
+
border: none;
|
|
11010
|
+
padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
|
|
11011
|
+
flex-grow: 1;
|
|
11012
|
+
border-radius: ${border.radius.xs};
|
|
11013
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
11014
|
+
|
|
11015
|
+
&:hover {
|
|
11016
|
+
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
11017
|
+
}
|
|
11018
|
+
`,
|
|
11019
|
+
actionButton: u`
|
|
10667
11020
|
background-color: transparent;
|
|
11021
|
+
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10668
11022
|
border: none;
|
|
10669
11023
|
display: inline-flex;
|
|
10670
11024
|
padding: 0px;
|
|
@@ -10674,11 +11028,10 @@ var getStyles = () => {
|
|
|
10674
11028
|
width: ${size2[3]};
|
|
10675
11029
|
height: ${size2[3]};
|
|
10676
11030
|
position: relative;
|
|
10677
|
-
left: ${size2[2]};
|
|
10678
11031
|
z-index: 1;
|
|
10679
11032
|
|
|
10680
|
-
&:hover svg
|
|
10681
|
-
|
|
11033
|
+
&:hover svg {
|
|
11034
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
10682
11035
|
}
|
|
10683
11036
|
|
|
10684
11037
|
&:focus-visible {
|
|
@@ -10689,17 +11042,8 @@ var getStyles = () => {
|
|
|
10689
11042
|
`
|
|
10690
11043
|
};
|
|
10691
11044
|
};
|
|
10692
|
-
|
|
10693
|
-
|
|
10694
|
-
var QueryDevtoolsContext = createContext({
|
|
10695
|
-
client: void 0,
|
|
10696
|
-
onlineManager: void 0,
|
|
10697
|
-
queryFlavor: "",
|
|
10698
|
-
version: ""
|
|
10699
|
-
});
|
|
10700
|
-
function useQueryDevtoolsContext() {
|
|
10701
|
-
return useContext(QueryDevtoolsContext);
|
|
10702
|
-
}
|
|
11045
|
+
var lightStyles = stylesFactory("light");
|
|
11046
|
+
var darkStyles = stylesFactory("dark");
|
|
10703
11047
|
|
|
10704
11048
|
// src/fonts.ts
|
|
10705
11049
|
var loadFonts = () => {
|
|
@@ -10715,6 +11059,7 @@ var secondBreakpoint = 796;
|
|
|
10715
11059
|
var thirdBreakpoint = 700;
|
|
10716
11060
|
var BUTTON_POSITION = "bottom-right";
|
|
10717
11061
|
var POSITION = "bottom";
|
|
11062
|
+
var THEME_PREFERENCE = "system";
|
|
10718
11063
|
var INITIAL_IS_OPEN = false;
|
|
10719
11064
|
var DEFAULT_HEIGHT = 500;
|
|
10720
11065
|
var DEFAULT_WIDTH = 500;
|
|
@@ -10725,28 +11070,38 @@ var [selectedQueryHash, setSelectedQueryHash] = createSignal(
|
|
|
10725
11070
|
);
|
|
10726
11071
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
10727
11072
|
var DevtoolsComponent = (props) => {
|
|
10728
|
-
|
|
11073
|
+
const [localStore, setLocalStore] = createLocalStorage({
|
|
11074
|
+
prefix: "TanstackQueryDevtools"
|
|
11075
|
+
});
|
|
11076
|
+
const colorScheme = getPreferredColorScheme();
|
|
11077
|
+
const theme = createMemo(() => {
|
|
11078
|
+
const preference = localStore.theme_preference || THEME_PREFERENCE;
|
|
11079
|
+
if (preference !== "system")
|
|
11080
|
+
return preference;
|
|
11081
|
+
return colorScheme();
|
|
11082
|
+
});
|
|
11083
|
+
return <QueryDevtoolsContext.Provider value={props}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></QueryDevtoolsContext.Provider>;
|
|
10729
11084
|
};
|
|
10730
11085
|
var Devtools_default = DevtoolsComponent;
|
|
10731
|
-
var Devtools = () => {
|
|
11086
|
+
var Devtools = (props) => {
|
|
10732
11087
|
loadFonts();
|
|
10733
|
-
const
|
|
10734
|
-
const
|
|
10735
|
-
|
|
11088
|
+
const theme = useTheme();
|
|
11089
|
+
const styles = createMemo(() => {
|
|
11090
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
10736
11091
|
});
|
|
10737
11092
|
const buttonPosition = createMemo(() => {
|
|
10738
11093
|
return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
|
|
10739
11094
|
});
|
|
10740
11095
|
const isOpen = createMemo(() => {
|
|
10741
|
-
return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
|
|
11096
|
+
return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
|
|
10742
11097
|
});
|
|
10743
11098
|
const position = createMemo(() => {
|
|
10744
|
-
return localStore.position || useQueryDevtoolsContext().position || POSITION;
|
|
11099
|
+
return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
|
|
10745
11100
|
});
|
|
10746
11101
|
createEffect(() => {
|
|
10747
11102
|
const root = document.querySelector(".tsqd-parent-container");
|
|
10748
|
-
const height = localStore.height || DEFAULT_HEIGHT;
|
|
10749
|
-
const width = localStore.width || DEFAULT_WIDTH;
|
|
11103
|
+
const height = props.localStore.height || DEFAULT_HEIGHT;
|
|
11104
|
+
const width = props.localStore.width || DEFAULT_WIDTH;
|
|
10750
11105
|
const panelPosition = position();
|
|
10751
11106
|
root.style.setProperty(
|
|
10752
11107
|
"--tsqd-panel-height",
|
|
@@ -10784,25 +11139,28 @@ var Devtools = () => {
|
|
|
10784
11139
|
)}
|
|
10785
11140
|
>
|
|
10786
11141
|
<TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
|
|
10787
|
-
localStore={localStore}
|
|
10788
|
-
setLocalStore={setLocalStore}
|
|
11142
|
+
localStore={props.localStore}
|
|
11143
|
+
setLocalStore={props.setLocalStore}
|
|
10789
11144
|
/></Show></TransitionGroup>
|
|
10790
11145
|
<TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
|
|
10791
11146
|
class={clsx(
|
|
10792
|
-
styles.devtoolsBtn,
|
|
10793
|
-
styles[`devtoolsBtn-position-${buttonPosition()}`]
|
|
11147
|
+
styles().devtoolsBtn,
|
|
11148
|
+
styles()[`devtoolsBtn-position-${buttonPosition()}`]
|
|
10794
11149
|
)}
|
|
10795
11150
|
>
|
|
10796
11151
|
<div aria-hidden="true"><TanstackLogo /></div>
|
|
10797
11152
|
<button
|
|
10798
11153
|
aria-label="Open Tanstack query devtools"
|
|
10799
|
-
onClick={() => setLocalStore("open", "true")}
|
|
11154
|
+
onClick={() => props.setLocalStore("open", "true")}
|
|
10800
11155
|
><TanstackLogo /></button>
|
|
10801
11156
|
</div></Show></TransitionGroup>
|
|
10802
11157
|
</div>;
|
|
10803
11158
|
};
|
|
10804
11159
|
var DevtoolsPanel = (props) => {
|
|
10805
|
-
const
|
|
11160
|
+
const theme = useTheme();
|
|
11161
|
+
const styles = createMemo(() => {
|
|
11162
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11163
|
+
});
|
|
10806
11164
|
const [isResizing, setIsResizing] = createSignal(false);
|
|
10807
11165
|
const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
|
|
10808
11166
|
const sortOrder = createMemo(
|
|
@@ -10919,14 +11277,25 @@ var DevtoolsPanel = (props) => {
|
|
|
10919
11277
|
});
|
|
10920
11278
|
});
|
|
10921
11279
|
});
|
|
11280
|
+
const getPanelDynamicStyles = () => {
|
|
11281
|
+
const { colors } = tokens;
|
|
11282
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11283
|
+
if (panelWidth() < secondBreakpoint) {
|
|
11284
|
+
return u`
|
|
11285
|
+
flex-direction: column;
|
|
11286
|
+
background-color: ${t2(colors.gray[300], colors.gray[600])};
|
|
11287
|
+
`;
|
|
11288
|
+
}
|
|
11289
|
+
return u`
|
|
11290
|
+
flex-direction: row;
|
|
11291
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[900])};
|
|
11292
|
+
`;
|
|
11293
|
+
};
|
|
10922
11294
|
return <aside
|
|
10923
11295
|
class={clsx(
|
|
10924
|
-
styles.panel,
|
|
10925
|
-
styles[`panel-position-${position()}`],
|
|
10926
|
-
|
|
10927
|
-
flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
|
|
10928
|
-
background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
|
|
10929
|
-
`,
|
|
11296
|
+
styles().panel,
|
|
11297
|
+
styles()[`panel-position-${position()}`],
|
|
11298
|
+
getPanelDynamicStyles(),
|
|
10930
11299
|
{
|
|
10931
11300
|
[u`
|
|
10932
11301
|
min-width: min-content;
|
|
@@ -10943,8 +11312,8 @@ var DevtoolsPanel = (props) => {
|
|
|
10943
11312
|
>
|
|
10944
11313
|
<div
|
|
10945
11314
|
class={clsx(
|
|
10946
|
-
styles.dragHandle,
|
|
10947
|
-
styles[`dragHandle-position-${position()}`],
|
|
11315
|
+
styles().dragHandle,
|
|
11316
|
+
styles()[`dragHandle-position-${position()}`],
|
|
10948
11317
|
"tsqd-drag-handle"
|
|
10949
11318
|
)}
|
|
10950
11319
|
onMouseDown={handleDragStart}
|
|
@@ -10952,8 +11321,8 @@ var DevtoolsPanel = (props) => {
|
|
|
10952
11321
|
<button
|
|
10953
11322
|
aria-label="Close tanstack query devtools"
|
|
10954
11323
|
class={clsx(
|
|
10955
|
-
styles.closeBtn,
|
|
10956
|
-
styles[`closeBtn-position-${position()}`],
|
|
11324
|
+
styles().closeBtn,
|
|
11325
|
+
styles()[`closeBtn-position-${position()}`],
|
|
10957
11326
|
"tsqd-minimize-btn"
|
|
10958
11327
|
)}
|
|
10959
11328
|
onClick={() => props.setLocalStore("open", "false")}
|
|
@@ -10961,7 +11330,7 @@ var DevtoolsPanel = (props) => {
|
|
|
10961
11330
|
<div
|
|
10962
11331
|
ref={queriesContainerRef}
|
|
10963
11332
|
class={clsx(
|
|
10964
|
-
styles.queriesContainer,
|
|
11333
|
+
styles().queriesContainer,
|
|
10965
11334
|
panelWidth() < secondBreakpoint && selectedQueryHash() && u`
|
|
10966
11335
|
height: 50%;
|
|
10967
11336
|
max-height: 50%;
|
|
@@ -10969,15 +11338,18 @@ var DevtoolsPanel = (props) => {
|
|
|
10969
11338
|
"tsqd-queries-container"
|
|
10970
11339
|
)}
|
|
10971
11340
|
>
|
|
10972
|
-
<div class={clsx(styles.row, "tsqd-header")}>
|
|
11341
|
+
<div class={clsx(styles().row, "tsqd-header")}>
|
|
10973
11342
|
<button
|
|
10974
|
-
class={clsx(styles.logo, "tsqd-text-logo-container")}
|
|
11343
|
+
class={clsx(styles().logo, "tsqd-text-logo-container")}
|
|
10975
11344
|
onClick={() => props.setLocalStore("open", "false")}
|
|
10976
11345
|
aria-label="Close Tanstack query devtools"
|
|
10977
11346
|
>
|
|
10978
|
-
<span class={clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
|
|
11347
|
+
<span class={clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
|
|
10979
11348
|
<span
|
|
10980
|
-
class={clsx(
|
|
11349
|
+
class={clsx(
|
|
11350
|
+
styles().queryFlavorLogo,
|
|
11351
|
+
"tsqd-text-logo-query-flavor"
|
|
11352
|
+
)}
|
|
10981
11353
|
>
|
|
10982
11354
|
{useQueryDevtoolsContext().queryFlavor}
|
|
10983
11355
|
{" v"}
|
|
@@ -10988,17 +11360,17 @@ var DevtoolsPanel = (props) => {
|
|
|
10988
11360
|
</div>
|
|
10989
11361
|
<div
|
|
10990
11362
|
class={clsx(
|
|
10991
|
-
styles.row,
|
|
11363
|
+
styles().row,
|
|
10992
11364
|
u`
|
|
10993
11365
|
gap: ${tokens.size[2.5]};
|
|
10994
11366
|
`,
|
|
10995
11367
|
"tsqd-filters-actions-container"
|
|
10996
11368
|
)}
|
|
10997
11369
|
>
|
|
10998
|
-
<div class={clsx(styles.filtersContainer, "tsqd-filters-container")}>
|
|
11370
|
+
<div class={clsx(styles().filtersContainer, "tsqd-filters-container")}>
|
|
10999
11371
|
<div
|
|
11000
11372
|
class={clsx(
|
|
11001
|
-
styles.filterInput,
|
|
11373
|
+
styles().filterInput,
|
|
11002
11374
|
"tsqd-query-filter-textfield-container"
|
|
11003
11375
|
)}
|
|
11004
11376
|
>
|
|
@@ -11014,7 +11386,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11014
11386
|
</div>
|
|
11015
11387
|
<div
|
|
11016
11388
|
class={clsx(
|
|
11017
|
-
styles.filterSelect,
|
|
11389
|
+
styles().filterSelect,
|
|
11018
11390
|
"tsqd-query-filter-sort-container"
|
|
11019
11391
|
)}
|
|
11020
11392
|
>
|
|
@@ -11045,13 +11417,13 @@ var DevtoolsPanel = (props) => {
|
|
|
11045
11417
|
</Show>
|
|
11046
11418
|
</button>
|
|
11047
11419
|
</div>
|
|
11048
|
-
<div class={clsx(styles.actionsContainer, "tsqd-actions-container")}>
|
|
11420
|
+
<div class={clsx(styles().actionsContainer, "tsqd-actions-container")}>
|
|
11049
11421
|
<button
|
|
11050
11422
|
onClick={() => {
|
|
11051
11423
|
cache().clear();
|
|
11052
11424
|
}}
|
|
11053
11425
|
class={clsx(
|
|
11054
|
-
styles.actionsBtn,
|
|
11426
|
+
styles().actionsBtn,
|
|
11055
11427
|
"tsqd-actions-btn",
|
|
11056
11428
|
"tsqd-action-clear-cache"
|
|
11057
11429
|
)}
|
|
@@ -11069,7 +11441,8 @@ var DevtoolsPanel = (props) => {
|
|
|
11069
11441
|
}
|
|
11070
11442
|
}}
|
|
11071
11443
|
class={clsx(
|
|
11072
|
-
styles.actionsBtn,
|
|
11444
|
+
styles().actionsBtn,
|
|
11445
|
+
offline() && styles().actionsBtnOffline,
|
|
11073
11446
|
"tsqd-actions-btn",
|
|
11074
11447
|
"tsqd-action-mock-offline-behavior"
|
|
11075
11448
|
)}
|
|
@@ -11080,24 +11453,24 @@ var DevtoolsPanel = (props) => {
|
|
|
11080
11453
|
<index$d.Root gutter={4}>
|
|
11081
11454
|
<index$d.Trigger
|
|
11082
11455
|
class={clsx(
|
|
11083
|
-
styles.actionsBtn,
|
|
11456
|
+
styles().actionsBtn,
|
|
11084
11457
|
"tsqd-actions-btn",
|
|
11085
11458
|
"tsqd-action-settings"
|
|
11086
11459
|
)}
|
|
11087
11460
|
><Settings /></index$d.Trigger>
|
|
11088
11461
|
<index$d.Portal><index$d.Content
|
|
11089
|
-
class={clsx(styles.settingsMenu, "tsqd-settings-menu")}
|
|
11462
|
+
class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
|
|
11090
11463
|
>
|
|
11091
11464
|
<div
|
|
11092
11465
|
class={clsx(
|
|
11093
|
-
styles.settingsMenuHeader,
|
|
11466
|
+
styles().settingsMenuHeader,
|
|
11094
11467
|
"tsqd-settings-menu-header"
|
|
11095
11468
|
)}
|
|
11096
11469
|
>Settings</div>
|
|
11097
11470
|
<index$d.Sub overlap gutter={8} shift={-4}>
|
|
11098
11471
|
<index$d.SubTrigger
|
|
11099
11472
|
class={clsx(
|
|
11100
|
-
styles.settingsSubTrigger,
|
|
11473
|
+
styles().settingsSubTrigger,
|
|
11101
11474
|
"tsqd-settings-menu-sub-trigger",
|
|
11102
11475
|
"tsqd-settings-menu-sub-trigger-position"
|
|
11103
11476
|
)}
|
|
@@ -11106,7 +11479,10 @@ var DevtoolsPanel = (props) => {
|
|
|
11106
11479
|
<ChevronDown />
|
|
11107
11480
|
</index$d.SubTrigger>
|
|
11108
11481
|
<index$d.Portal><index$d.SubContent
|
|
11109
|
-
class={clsx(
|
|
11482
|
+
class={clsx(
|
|
11483
|
+
styles().settingsMenu,
|
|
11484
|
+
"tsqd-settings-submenu"
|
|
11485
|
+
)}
|
|
11110
11486
|
>
|
|
11111
11487
|
<index$d.Item
|
|
11112
11488
|
onSelect={() => {
|
|
@@ -11114,7 +11490,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11114
11490
|
}}
|
|
11115
11491
|
as="button"
|
|
11116
11492
|
class={clsx(
|
|
11117
|
-
styles.settingsSubButton,
|
|
11493
|
+
styles().settingsSubButton,
|
|
11118
11494
|
"tsqd-settings-menu-position-btn",
|
|
11119
11495
|
"tsqd-settings-menu-position-btn-top"
|
|
11120
11496
|
)}
|
|
@@ -11128,7 +11504,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11128
11504
|
}}
|
|
11129
11505
|
as="button"
|
|
11130
11506
|
class={clsx(
|
|
11131
|
-
styles.settingsSubButton,
|
|
11507
|
+
styles().settingsSubButton,
|
|
11132
11508
|
"tsqd-settings-menu-position-btn",
|
|
11133
11509
|
"tsqd-settings-menu-position-btn-bottom"
|
|
11134
11510
|
)}
|
|
@@ -11142,7 +11518,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11142
11518
|
}}
|
|
11143
11519
|
as="button"
|
|
11144
11520
|
class={clsx(
|
|
11145
|
-
styles.settingsSubButton,
|
|
11521
|
+
styles().settingsSubButton,
|
|
11146
11522
|
"tsqd-settings-menu-position-btn",
|
|
11147
11523
|
"tsqd-settings-menu-position-btn-left"
|
|
11148
11524
|
)}
|
|
@@ -11156,7 +11532,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11156
11532
|
}}
|
|
11157
11533
|
as="button"
|
|
11158
11534
|
class={clsx(
|
|
11159
|
-
styles.settingsSubButton,
|
|
11535
|
+
styles().settingsSubButton,
|
|
11160
11536
|
"tsqd-settings-menu-position-btn",
|
|
11161
11537
|
"tsqd-settings-menu-position-btn-right"
|
|
11162
11538
|
)}
|
|
@@ -11166,13 +11542,77 @@ var DevtoolsPanel = (props) => {
|
|
|
11166
11542
|
</index$d.Item>
|
|
11167
11543
|
</index$d.SubContent></index$d.Portal>
|
|
11168
11544
|
</index$d.Sub>
|
|
11545
|
+
<index$d.Sub overlap gutter={8} shift={-4}>
|
|
11546
|
+
<index$d.SubTrigger
|
|
11547
|
+
class={clsx(
|
|
11548
|
+
styles().settingsSubTrigger,
|
|
11549
|
+
"tsqd-settings-menu-sub-trigger",
|
|
11550
|
+
"tsqd-settings-menu-sub-trigger-position"
|
|
11551
|
+
)}
|
|
11552
|
+
>
|
|
11553
|
+
<span>Theme</span>
|
|
11554
|
+
<ChevronDown />
|
|
11555
|
+
</index$d.SubTrigger>
|
|
11556
|
+
<index$d.Portal><index$d.SubContent
|
|
11557
|
+
class={clsx(
|
|
11558
|
+
styles().settingsMenu,
|
|
11559
|
+
"tsqd-settings-submenu"
|
|
11560
|
+
)}
|
|
11561
|
+
>
|
|
11562
|
+
<index$d.Item
|
|
11563
|
+
onSelect={() => {
|
|
11564
|
+
props.setLocalStore("theme_preference", "light");
|
|
11565
|
+
}}
|
|
11566
|
+
as="button"
|
|
11567
|
+
class={clsx(
|
|
11568
|
+
styles().settingsSubButton,
|
|
11569
|
+
props.localStore.theme_preference === "light" && styles().themeSelectedButton,
|
|
11570
|
+
"tsqd-settings-menu-position-btn",
|
|
11571
|
+
"tsqd-settings-menu-position-btn-top"
|
|
11572
|
+
)}
|
|
11573
|
+
>
|
|
11574
|
+
<span>Light</span>
|
|
11575
|
+
<Sun />
|
|
11576
|
+
</index$d.Item>
|
|
11577
|
+
<index$d.Item
|
|
11578
|
+
onSelect={() => {
|
|
11579
|
+
props.setLocalStore("theme_preference", "dark");
|
|
11580
|
+
}}
|
|
11581
|
+
as="button"
|
|
11582
|
+
class={clsx(
|
|
11583
|
+
styles().settingsSubButton,
|
|
11584
|
+
props.localStore.theme_preference === "dark" && styles().themeSelectedButton,
|
|
11585
|
+
"tsqd-settings-menu-position-btn",
|
|
11586
|
+
"tsqd-settings-menu-position-btn-bottom"
|
|
11587
|
+
)}
|
|
11588
|
+
>
|
|
11589
|
+
<span>Dark</span>
|
|
11590
|
+
<Moon />
|
|
11591
|
+
</index$d.Item>
|
|
11592
|
+
<index$d.Item
|
|
11593
|
+
onSelect={() => {
|
|
11594
|
+
props.setLocalStore("theme_preference", "system");
|
|
11595
|
+
}}
|
|
11596
|
+
as="button"
|
|
11597
|
+
class={clsx(
|
|
11598
|
+
styles().settingsSubButton,
|
|
11599
|
+
props.localStore.theme_preference === "system" && styles().themeSelectedButton,
|
|
11600
|
+
"tsqd-settings-menu-position-btn",
|
|
11601
|
+
"tsqd-settings-menu-position-btn-left"
|
|
11602
|
+
)}
|
|
11603
|
+
>
|
|
11604
|
+
<span>System</span>
|
|
11605
|
+
<Monitor />
|
|
11606
|
+
</index$d.Item>
|
|
11607
|
+
</index$d.SubContent></index$d.Portal>
|
|
11608
|
+
</index$d.Sub>
|
|
11169
11609
|
</index$d.Content></index$d.Portal>
|
|
11170
11610
|
</index$d.Root>
|
|
11171
11611
|
</div>
|
|
11172
11612
|
</div>
|
|
11173
11613
|
<div
|
|
11174
11614
|
class={clsx(
|
|
11175
|
-
styles.overflowQueryContainer,
|
|
11615
|
+
styles().overflowQueryContainer,
|
|
11176
11616
|
"tsqd-queries-overflow-container"
|
|
11177
11617
|
)}
|
|
11178
11618
|
><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
|
|
@@ -11181,7 +11621,12 @@ var DevtoolsPanel = (props) => {
|
|
|
11181
11621
|
</aside>;
|
|
11182
11622
|
};
|
|
11183
11623
|
var QueryRow = (props) => {
|
|
11184
|
-
const
|
|
11624
|
+
const theme = useTheme();
|
|
11625
|
+
const styles = createMemo(() => {
|
|
11626
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11627
|
+
});
|
|
11628
|
+
const { colors, alpha } = tokens;
|
|
11629
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11185
11630
|
const queryState = createSubscribeToQueryCacheBatcher(
|
|
11186
11631
|
(queryCache) => queryCache().find({
|
|
11187
11632
|
queryKey: props.query.queryKey
|
|
@@ -11209,28 +11654,34 @@ var QueryRow = (props) => {
|
|
|
11209
11654
|
isStale: isStale()
|
|
11210
11655
|
})
|
|
11211
11656
|
);
|
|
11657
|
+
const getObserverCountColorStyles = () => {
|
|
11658
|
+
if (color() === "gray") {
|
|
11659
|
+
return u`
|
|
11660
|
+
background-color: ${t2(colors[color()][200], colors[color()][700])};
|
|
11661
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11662
|
+
`;
|
|
11663
|
+
}
|
|
11664
|
+
return u`
|
|
11665
|
+
background-color: ${t2(
|
|
11666
|
+
colors[color()][200] + alpha[80],
|
|
11667
|
+
colors[color()][900]
|
|
11668
|
+
)};
|
|
11669
|
+
color: ${t2(colors[color()][800], colors[color()][300])};
|
|
11670
|
+
`;
|
|
11671
|
+
};
|
|
11212
11672
|
return <Show when={queryState()}><button
|
|
11213
11673
|
onClick={() => setSelectedQueryHash(
|
|
11214
11674
|
props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash
|
|
11215
11675
|
)}
|
|
11216
11676
|
class={clsx(
|
|
11217
|
-
styles.queryRow,
|
|
11218
|
-
selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow,
|
|
11677
|
+
styles().queryRow,
|
|
11678
|
+
selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow,
|
|
11219
11679
|
"tsqd-query-row"
|
|
11220
11680
|
)}
|
|
11221
11681
|
aria-label={`Query key ${props.query.queryHash}`}
|
|
11222
11682
|
>
|
|
11223
11683
|
<div
|
|
11224
|
-
class={clsx(
|
|
11225
|
-
color() === "gray" ? u`
|
|
11226
|
-
background-color: ${tokens.colors[color()][700]};
|
|
11227
|
-
color: ${tokens.colors[color()][300]};
|
|
11228
|
-
` : u`
|
|
11229
|
-
background-color: ${tokens.colors[color()][900]};
|
|
11230
|
-
color: ${tokens.colors[color()][300]};
|
|
11231
|
-
`,
|
|
11232
|
-
"tsqd-query-observer-count"
|
|
11233
|
-
)}
|
|
11684
|
+
class={clsx(getObserverCountColorStyles(), "tsqd-query-observer-count")}
|
|
11234
11685
|
>{observers()}</div>
|
|
11235
11686
|
<code class="tsqd-query-hash">{props.query.queryHash}</code>
|
|
11236
11687
|
<Show when={isDisabled()}><div class="tsqd-query-disabled-indicator">disabled</div></Show>
|
|
@@ -11252,8 +11703,13 @@ var QueryStatusCount = () => {
|
|
|
11252
11703
|
const inactive = createSubscribeToQueryCacheBatcher(
|
|
11253
11704
|
(queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length
|
|
11254
11705
|
);
|
|
11255
|
-
const
|
|
11256
|
-
|
|
11706
|
+
const theme = useTheme();
|
|
11707
|
+
const styles = createMemo(() => {
|
|
11708
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11709
|
+
});
|
|
11710
|
+
return <div
|
|
11711
|
+
class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
|
|
11712
|
+
>
|
|
11257
11713
|
<QueryStatus label="Fresh" color="green" count={fresh()} />
|
|
11258
11714
|
<QueryStatus label="Fetching" color="blue" count={fetching()} />
|
|
11259
11715
|
<QueryStatus label="Paused" color="purple" count={paused()} />
|
|
@@ -11262,7 +11718,12 @@ var QueryStatusCount = () => {
|
|
|
11262
11718
|
</div>;
|
|
11263
11719
|
};
|
|
11264
11720
|
var QueryStatus = (props) => {
|
|
11265
|
-
const
|
|
11721
|
+
const theme = useTheme();
|
|
11722
|
+
const styles = createMemo(() => {
|
|
11723
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11724
|
+
});
|
|
11725
|
+
const { colors, alpha } = tokens;
|
|
11726
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11266
11727
|
let tagRef;
|
|
11267
11728
|
const [mouseOver, setMouseOver] = createSignal(false);
|
|
11268
11729
|
const [focused, setFocused] = createSignal(false);
|
|
@@ -11288,11 +11749,11 @@ var QueryStatus = (props) => {
|
|
|
11288
11749
|
disabled={showLabel()}
|
|
11289
11750
|
ref={tagRef}
|
|
11290
11751
|
class={clsx(
|
|
11291
|
-
styles.queryStatusTag,
|
|
11752
|
+
styles().queryStatusTag,
|
|
11292
11753
|
!showLabel() && u`
|
|
11293
11754
|
cursor: pointer;
|
|
11294
11755
|
&:hover {
|
|
11295
|
-
background: ${
|
|
11756
|
+
background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
|
|
11296
11757
|
}
|
|
11297
11758
|
`,
|
|
11298
11759
|
"tsqd-query-status-tag",
|
|
@@ -11305,7 +11766,7 @@ var QueryStatus = (props) => {
|
|
|
11305
11766
|
<Show when={!showLabel() && (mouseOver() || focused())}><div
|
|
11306
11767
|
role="tooltip"
|
|
11307
11768
|
id="tsqd-status-tooltip"
|
|
11308
|
-
class={clsx(styles.statusTooltip, "tsqd-query-status-tooltip")}
|
|
11769
|
+
class={clsx(styles().statusTooltip, "tsqd-query-status-tooltip")}
|
|
11309
11770
|
>{props.label}</div></Show>
|
|
11310
11771
|
<span
|
|
11311
11772
|
class={clsx(
|
|
@@ -11319,24 +11780,33 @@ var QueryStatus = (props) => {
|
|
|
11319
11780
|
)}
|
|
11320
11781
|
/>
|
|
11321
11782
|
<Show when={showLabel()}><span
|
|
11322
|
-
class={clsx(
|
|
11783
|
+
class={clsx(
|
|
11784
|
+
styles().queryStatusTagLabel,
|
|
11785
|
+
"tsqd-query-status-tag-label"
|
|
11786
|
+
)}
|
|
11323
11787
|
>{props.label}</span></Show>
|
|
11324
11788
|
<span
|
|
11325
11789
|
class={clsx(
|
|
11326
|
-
styles.queryStatusCount,
|
|
11327
|
-
props.count > 0 && props.color !== "gray"
|
|
11328
|
-
|
|
11329
|
-
|
|
11330
|
-
|
|
11331
|
-
|
|
11332
|
-
|
|
11790
|
+
styles().queryStatusCount,
|
|
11791
|
+
props.count > 0 && props.color !== "gray" && u`
|
|
11792
|
+
background-color: ${t2(
|
|
11793
|
+
colors[props.color][100],
|
|
11794
|
+
colors[props.color][900]
|
|
11795
|
+
)};
|
|
11796
|
+
color: ${t2(colors[props.color][700], colors[props.color][300])};
|
|
11797
|
+
`,
|
|
11333
11798
|
"tsqd-query-status-tag-count"
|
|
11334
11799
|
)}
|
|
11335
11800
|
>{props.count}</span>
|
|
11336
11801
|
</button>;
|
|
11337
11802
|
};
|
|
11338
11803
|
var QueryDetails = () => {
|
|
11339
|
-
const
|
|
11804
|
+
const theme = useTheme();
|
|
11805
|
+
const styles = createMemo(() => {
|
|
11806
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11807
|
+
});
|
|
11808
|
+
const { colors } = tokens;
|
|
11809
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11340
11810
|
const queryClient = useQueryDevtoolsContext().client;
|
|
11341
11811
|
const [restoringLoading, setRestoringLoading] = createSignal(false);
|
|
11342
11812
|
const errorTypes = createMemo(() => {
|
|
@@ -11407,26 +11877,34 @@ var QueryDetails = () => {
|
|
|
11407
11877
|
setRestoringLoading(false);
|
|
11408
11878
|
}
|
|
11409
11879
|
});
|
|
11410
|
-
|
|
11411
|
-
|
|
11880
|
+
const getQueryStatusColors = () => {
|
|
11881
|
+
if (color() === "gray") {
|
|
11882
|
+
return u`
|
|
11883
|
+
background-color: ${t2(colors[color()][200], colors[color()][700])};
|
|
11884
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11885
|
+
border-color: ${t2(colors[color()][400], colors[color()][600])};
|
|
11886
|
+
`;
|
|
11887
|
+
}
|
|
11888
|
+
return u`
|
|
11889
|
+
background-color: ${t2(colors[color()][100], colors[color()][900])};
|
|
11890
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11891
|
+
border-color: ${t2(colors[color()][400], colors[color()][600])};
|
|
11892
|
+
`;
|
|
11893
|
+
};
|
|
11894
|
+
return <Show when={activeQuery() && activeQueryState()}><div
|
|
11895
|
+
class={clsx(styles().detailsContainer, "tsqd-query-details-container")}
|
|
11896
|
+
>
|
|
11897
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Details</div>
|
|
11412
11898
|
<div
|
|
11413
|
-
class={clsx(
|
|
11899
|
+
class={clsx(
|
|
11900
|
+
styles().detailsBody,
|
|
11901
|
+
"tsqd-query-details-summary-container"
|
|
11902
|
+
)}
|
|
11414
11903
|
>
|
|
11415
11904
|
<div class="tsqd-query-details-summary">
|
|
11416
11905
|
<pre><code>{displayValue(activeQuery().queryKey, true)}</code></pre>
|
|
11417
11906
|
<span
|
|
11418
|
-
class={clsx(
|
|
11419
|
-
styles.queryDetailsStatus,
|
|
11420
|
-
color() === "gray" ? u`
|
|
11421
|
-
background-color: ${tokens.colors[color()][700]};
|
|
11422
|
-
color: ${tokens.colors[color()][300]};
|
|
11423
|
-
border-color: ${tokens.colors[color()][600]};
|
|
11424
|
-
` : u`
|
|
11425
|
-
background-color: ${tokens.colors[color()][900]};
|
|
11426
|
-
color: ${tokens.colors[color()][300]};
|
|
11427
|
-
border-color: ${tokens.colors[color()][600]};
|
|
11428
|
-
`
|
|
11429
|
-
)}
|
|
11907
|
+
class={clsx(styles().queryDetailsStatus, getQueryStatusColors())}
|
|
11430
11908
|
>{statusLabel()}</span>
|
|
11431
11909
|
</div>
|
|
11432
11910
|
<div class="tsqd-query-details-observers-count">
|
|
@@ -11438,14 +11916,17 @@ var QueryDetails = () => {
|
|
|
11438
11916
|
<span>{new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString()}</span>
|
|
11439
11917
|
</div>
|
|
11440
11918
|
</div>
|
|
11441
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Actions</div>
|
|
11919
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Actions</div>
|
|
11442
11920
|
<div
|
|
11443
|
-
class={clsx(
|
|
11921
|
+
class={clsx(
|
|
11922
|
+
styles().actionsBody,
|
|
11923
|
+
"tsqd-query-details-actions-container"
|
|
11924
|
+
)}
|
|
11444
11925
|
>
|
|
11445
11926
|
<button
|
|
11446
11927
|
class={clsx(
|
|
11447
11928
|
u`
|
|
11448
|
-
color: ${
|
|
11929
|
+
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11449
11930
|
`,
|
|
11450
11931
|
"tsqd-query-details-actions-btn",
|
|
11451
11932
|
"tsqd-query-details-action-refetch"
|
|
@@ -11455,7 +11936,7 @@ var QueryDetails = () => {
|
|
|
11455
11936
|
>
|
|
11456
11937
|
<span
|
|
11457
11938
|
class={u`
|
|
11458
|
-
background-color: ${
|
|
11939
|
+
background-color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11459
11940
|
`}
|
|
11460
11941
|
/>
|
|
11461
11942
|
{"Refetch"}
|
|
@@ -11463,7 +11944,7 @@ var QueryDetails = () => {
|
|
|
11463
11944
|
<button
|
|
11464
11945
|
class={clsx(
|
|
11465
11946
|
u`
|
|
11466
|
-
color: ${
|
|
11947
|
+
color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11467
11948
|
`,
|
|
11468
11949
|
"tsqd-query-details-actions-btn",
|
|
11469
11950
|
"tsqd-query-details-action-invalidate"
|
|
@@ -11473,7 +11954,7 @@ var QueryDetails = () => {
|
|
|
11473
11954
|
>
|
|
11474
11955
|
<span
|
|
11475
11956
|
class={u`
|
|
11476
|
-
background-color: ${
|
|
11957
|
+
background-color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11477
11958
|
`}
|
|
11478
11959
|
/>
|
|
11479
11960
|
{"Invalidate"}
|
|
@@ -11481,7 +11962,7 @@ var QueryDetails = () => {
|
|
|
11481
11962
|
<button
|
|
11482
11963
|
class={clsx(
|
|
11483
11964
|
u`
|
|
11484
|
-
color: ${
|
|
11965
|
+
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11485
11966
|
`,
|
|
11486
11967
|
"tsqd-query-details-actions-btn",
|
|
11487
11968
|
"tsqd-query-details-action-reset"
|
|
@@ -11491,7 +11972,7 @@ var QueryDetails = () => {
|
|
|
11491
11972
|
>
|
|
11492
11973
|
<span
|
|
11493
11974
|
class={u`
|
|
11494
|
-
background-color: ${
|
|
11975
|
+
background-color: ${t2(colors.gray[600], colors.gray[400])};
|
|
11495
11976
|
`}
|
|
11496
11977
|
/>
|
|
11497
11978
|
{"Reset"}
|
|
@@ -11499,7 +11980,7 @@ var QueryDetails = () => {
|
|
|
11499
11980
|
<button
|
|
11500
11981
|
class={clsx(
|
|
11501
11982
|
u`
|
|
11502
|
-
color: ${
|
|
11983
|
+
color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11503
11984
|
`,
|
|
11504
11985
|
"tsqd-query-details-actions-btn",
|
|
11505
11986
|
"tsqd-query-details-action-remove"
|
|
@@ -11512,7 +11993,7 @@ var QueryDetails = () => {
|
|
|
11512
11993
|
>
|
|
11513
11994
|
<span
|
|
11514
11995
|
class={u`
|
|
11515
|
-
background-color: ${
|
|
11996
|
+
background-color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11516
11997
|
`}
|
|
11517
11998
|
/>
|
|
11518
11999
|
{"Remove"}
|
|
@@ -11520,7 +12001,7 @@ var QueryDetails = () => {
|
|
|
11520
12001
|
<button
|
|
11521
12002
|
class={clsx(
|
|
11522
12003
|
u`
|
|
11523
|
-
color: ${
|
|
12004
|
+
color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11524
12005
|
`,
|
|
11525
12006
|
"tsqd-query-details-actions-btn",
|
|
11526
12007
|
"tsqd-query-details-action-loading"
|
|
@@ -11557,7 +12038,7 @@ var QueryDetails = () => {
|
|
|
11557
12038
|
>
|
|
11558
12039
|
<span
|
|
11559
12040
|
class={u`
|
|
11560
|
-
background-color: ${
|
|
12041
|
+
background-color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11561
12042
|
`}
|
|
11562
12043
|
/>
|
|
11563
12044
|
{queryStatus() === "pending" ? "Restore" : "Trigger"}
|
|
@@ -11566,7 +12047,7 @@ var QueryDetails = () => {
|
|
|
11566
12047
|
<Show when={errorTypes().length === 0 || queryStatus() === "error"}><button
|
|
11567
12048
|
class={clsx(
|
|
11568
12049
|
u`
|
|
11569
|
-
color: ${
|
|
12050
|
+
color: ${t2(colors.red[500], colors.red[400])};
|
|
11570
12051
|
`,
|
|
11571
12052
|
"tsqd-query-details-actions-btn",
|
|
11572
12053
|
"tsqd-query-details-action-error"
|
|
@@ -11582,7 +12063,7 @@ var QueryDetails = () => {
|
|
|
11582
12063
|
>
|
|
11583
12064
|
<span
|
|
11584
12065
|
class={u`
|
|
11585
|
-
background-color: ${
|
|
12066
|
+
background-color: ${t2(colors.red[500], colors.red[400])};
|
|
11586
12067
|
`}
|
|
11587
12068
|
/>
|
|
11588
12069
|
{queryStatus() === "error" ? "Restore" : "Trigger"}
|
|
@@ -11592,7 +12073,7 @@ var QueryDetails = () => {
|
|
|
11592
12073
|
when={!(errorTypes().length === 0 || queryStatus() === "error")}
|
|
11593
12074
|
><div
|
|
11594
12075
|
class={clsx(
|
|
11595
|
-
styles.actionsSelect,
|
|
12076
|
+
styles().actionsSelect,
|
|
11596
12077
|
"tsqd-query-details-actions-btn",
|
|
11597
12078
|
"tsqd-query-details-action-error-multiple"
|
|
11598
12079
|
)}
|
|
@@ -11607,7 +12088,7 @@ var QueryDetails = () => {
|
|
|
11607
12088
|
disabled={queryStatus() === "pending"}
|
|
11608
12089
|
onChange={(e2) => {
|
|
11609
12090
|
const errorType = errorTypes().find(
|
|
11610
|
-
(
|
|
12091
|
+
(et) => et.name === e2.currentTarget.value
|
|
11611
12092
|
);
|
|
11612
12093
|
triggerError(errorType);
|
|
11613
12094
|
}}
|
|
@@ -11618,7 +12099,7 @@ var QueryDetails = () => {
|
|
|
11618
12099
|
<ChevronDown />
|
|
11619
12100
|
</div></Show>
|
|
11620
12101
|
</div>
|
|
11621
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
|
|
12102
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
|
|
11622
12103
|
<div
|
|
11623
12104
|
style={{
|
|
11624
12105
|
padding: "0.5rem"
|
|
@@ -11628,9 +12109,10 @@ var QueryDetails = () => {
|
|
|
11628
12109
|
label="Data"
|
|
11629
12110
|
defaultExpanded={["Data"]}
|
|
11630
12111
|
value={activeQueryStateData()}
|
|
11631
|
-
|
|
12112
|
+
editable={true}
|
|
12113
|
+
activeQuery={activeQuery()}
|
|
11632
12114
|
/></div>
|
|
11633
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
|
|
12115
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
|
|
11634
12116
|
<div
|
|
11635
12117
|
style={{
|
|
11636
12118
|
padding: "0.5rem"
|
|
@@ -11680,8 +12162,9 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
|
|
|
11680
12162
|
});
|
|
11681
12163
|
return value;
|
|
11682
12164
|
};
|
|
11683
|
-
var
|
|
12165
|
+
var stylesFactory2 = (theme) => {
|
|
11684
12166
|
const { colors, font, size: size2, alpha, shadow, border } = tokens;
|
|
12167
|
+
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
11685
12168
|
return {
|
|
11686
12169
|
devtoolsBtn: u`
|
|
11687
12170
|
z-index: 100000;
|
|
@@ -11743,8 +12226,6 @@ var getStyles2 = () => {
|
|
|
11743
12226
|
display: flex;
|
|
11744
12227
|
gap: ${tokens.size[0.5]};
|
|
11745
12228
|
& * {
|
|
11746
|
-
font-family: 'Inter', sans-serif;
|
|
11747
|
-
color: ${colors.gray[300]};
|
|
11748
12229
|
box-sizing: border-box;
|
|
11749
12230
|
text-transform: none;
|
|
11750
12231
|
}
|
|
@@ -11771,7 +12252,7 @@ var getStyles2 = () => {
|
|
|
11771
12252
|
left: 0;
|
|
11772
12253
|
max-height: 90%;
|
|
11773
12254
|
min-height: 3.5rem;
|
|
11774
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12255
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11775
12256
|
`,
|
|
11776
12257
|
"panel-position-bottom": u`
|
|
11777
12258
|
bottom: 0;
|
|
@@ -11779,20 +12260,20 @@ var getStyles2 = () => {
|
|
|
11779
12260
|
left: 0;
|
|
11780
12261
|
max-height: 90%;
|
|
11781
12262
|
min-height: 3.5rem;
|
|
11782
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
12263
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11783
12264
|
`,
|
|
11784
12265
|
"panel-position-right": u`
|
|
11785
12266
|
bottom: 0;
|
|
11786
12267
|
right: 0;
|
|
11787
12268
|
top: 0;
|
|
11788
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
12269
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11789
12270
|
max-width: 90%;
|
|
11790
12271
|
`,
|
|
11791
12272
|
"panel-position-left": u`
|
|
11792
12273
|
bottom: 0;
|
|
11793
12274
|
left: 0;
|
|
11794
12275
|
top: 0;
|
|
11795
|
-
border-right: ${colors.darkGray[300]} 1px solid;
|
|
12276
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11796
12277
|
max-width: 90%;
|
|
11797
12278
|
`,
|
|
11798
12279
|
closeBtn: u`
|
|
@@ -11803,13 +12284,15 @@ var getStyles2 = () => {
|
|
|
11803
12284
|
align-items: center;
|
|
11804
12285
|
justify-content: center;
|
|
11805
12286
|
outline: none;
|
|
12287
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
11806
12288
|
&:hover {
|
|
11807
|
-
background-color: ${colors.darkGray[500]};
|
|
12289
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
11808
12290
|
}
|
|
11809
12291
|
&:focus-visible {
|
|
11810
12292
|
outline: 2px solid ${colors.blue[600]};
|
|
11811
12293
|
}
|
|
11812
12294
|
& svg {
|
|
12295
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
11813
12296
|
width: ${size2[2]};
|
|
11814
12297
|
height: ${size2[2]};
|
|
11815
12298
|
}
|
|
@@ -11818,11 +12301,10 @@ var getStyles2 = () => {
|
|
|
11818
12301
|
bottom: 0;
|
|
11819
12302
|
right: ${size2[2]};
|
|
11820
12303
|
transform: translate(0, 100%);
|
|
11821
|
-
|
|
11822
|
-
border-
|
|
11823
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
12304
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12305
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11824
12306
|
border-top: none;
|
|
11825
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12307
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11826
12308
|
border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
|
|
11827
12309
|
padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
|
|
11828
12310
|
|
|
@@ -11843,10 +12325,9 @@ var getStyles2 = () => {
|
|
|
11843
12325
|
top: 0;
|
|
11844
12326
|
right: ${size2[2]};
|
|
11845
12327
|
transform: translate(0, -100%);
|
|
11846
|
-
|
|
11847
|
-
border-
|
|
11848
|
-
border-
|
|
11849
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
12328
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12329
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12330
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11850
12331
|
border-bottom: none;
|
|
11851
12332
|
border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
|
|
11852
12333
|
padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
|
|
@@ -11864,11 +12345,10 @@ var getStyles2 = () => {
|
|
|
11864
12345
|
bottom: ${size2[2]};
|
|
11865
12346
|
left: 0;
|
|
11866
12347
|
transform: translate(-100%, 0);
|
|
11867
|
-
background-color: ${colors.darkGray[700]};
|
|
11868
12348
|
border-right: none;
|
|
11869
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
11870
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
11871
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12349
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12350
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12351
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11872
12352
|
border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
|
|
11873
12353
|
padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
|
|
11874
12354
|
|
|
@@ -11888,11 +12368,10 @@ var getStyles2 = () => {
|
|
|
11888
12368
|
bottom: ${size2[2]};
|
|
11889
12369
|
right: 0;
|
|
11890
12370
|
transform: translate(100%, 0);
|
|
11891
|
-
background-color: ${colors.darkGray[700]};
|
|
11892
12371
|
border-left: none;
|
|
11893
|
-
border-right: ${colors.darkGray[300]} 1px solid;
|
|
11894
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
11895
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12372
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12373
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12374
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11896
12375
|
border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
|
|
11897
12376
|
padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
|
|
11898
12377
|
|
|
@@ -11910,15 +12389,18 @@ var getStyles2 = () => {
|
|
|
11910
12389
|
`,
|
|
11911
12390
|
queriesContainer: u`
|
|
11912
12391
|
flex: 1 1 700px;
|
|
11913
|
-
background-color: ${colors.darkGray[700]};
|
|
12392
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
11914
12393
|
display: flex;
|
|
11915
12394
|
flex-direction: column;
|
|
12395
|
+
& * {
|
|
12396
|
+
font-family: 'Inter', sans-serif;
|
|
12397
|
+
}
|
|
11916
12398
|
`,
|
|
11917
12399
|
dragHandle: u`
|
|
11918
12400
|
position: absolute;
|
|
11919
12401
|
transition: background-color 0.125s ease;
|
|
11920
12402
|
&:hover {
|
|
11921
|
-
background-color: ${colors.purple[400]}${alpha[90]};
|
|
12403
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
11922
12404
|
}
|
|
11923
12405
|
z-index: 4;
|
|
11924
12406
|
`,
|
|
@@ -11952,7 +12434,7 @@ var getStyles2 = () => {
|
|
|
11952
12434
|
align-items: center;
|
|
11953
12435
|
padding: ${tokens.size[2]} ${tokens.size[2.5]};
|
|
11954
12436
|
gap: ${tokens.size[3]};
|
|
11955
|
-
border-bottom: ${colors.darkGray[500]} 1px solid;
|
|
12437
|
+
border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
|
|
11956
12438
|
align-items: center;
|
|
11957
12439
|
& > button {
|
|
11958
12440
|
padding: 0;
|
|
@@ -11979,11 +12461,15 @@ var getStyles2 = () => {
|
|
|
11979
12461
|
font-weight: ${font.weight.bold};
|
|
11980
12462
|
line-height: ${font.lineHeight.xs};
|
|
11981
12463
|
white-space: nowrap;
|
|
12464
|
+
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11982
12465
|
`,
|
|
11983
12466
|
queryFlavorLogo: u`
|
|
11984
12467
|
font-weight: ${font.weight.semibold};
|
|
11985
12468
|
font-size: ${font.size.xs};
|
|
11986
|
-
background: linear-gradient(
|
|
12469
|
+
background: linear-gradient(
|
|
12470
|
+
to right,
|
|
12471
|
+
${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
|
|
12472
|
+
);
|
|
11987
12473
|
background-clip: text;
|
|
11988
12474
|
-webkit-background-clip: text;
|
|
11989
12475
|
line-height: 1;
|
|
@@ -11998,14 +12484,17 @@ var getStyles2 = () => {
|
|
|
11998
12484
|
queryStatusTag: u`
|
|
11999
12485
|
display: flex;
|
|
12000
12486
|
gap: ${tokens.size[1.5]};
|
|
12001
|
-
|
|
12487
|
+
box-sizing: border-box;
|
|
12488
|
+
height: ${tokens.size[6.5]};
|
|
12489
|
+
background: ${t2(colors.gray[50], colors.darkGray[500])};
|
|
12490
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12002
12491
|
border-radius: ${tokens.border.radius.sm};
|
|
12003
12492
|
font-size: ${font.size.sm};
|
|
12004
12493
|
padding: ${tokens.size[1]};
|
|
12005
|
-
padding-left: ${tokens.size[
|
|
12494
|
+
padding-left: ${tokens.size[1.5]};
|
|
12006
12495
|
align-items: center;
|
|
12007
12496
|
font-weight: ${font.weight.medium};
|
|
12008
|
-
border:
|
|
12497
|
+
border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
|
|
12009
12498
|
user-select: none;
|
|
12010
12499
|
position: relative;
|
|
12011
12500
|
&:focus-visible {
|
|
@@ -12022,8 +12511,8 @@ var getStyles2 = () => {
|
|
|
12022
12511
|
display: flex;
|
|
12023
12512
|
align-items: center;
|
|
12024
12513
|
justify-content: center;
|
|
12025
|
-
color: ${colors.gray[400]};
|
|
12026
|
-
background-color: ${colors.darkGray[300]};
|
|
12514
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12515
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[300])};
|
|
12027
12516
|
border-radius: 2px;
|
|
12028
12517
|
font-variant-numeric: tabular-nums;
|
|
12029
12518
|
height: ${tokens.size[4.5]};
|
|
@@ -12031,15 +12520,15 @@ var getStyles2 = () => {
|
|
|
12031
12520
|
statusTooltip: u`
|
|
12032
12521
|
position: absolute;
|
|
12033
12522
|
z-index: 1;
|
|
12034
|
-
background-color: ${colors.darkGray[500]};
|
|
12523
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[500])};
|
|
12035
12524
|
top: 100%;
|
|
12036
12525
|
left: 50%;
|
|
12037
12526
|
transform: translate(-50%, calc(${tokens.size[2]}));
|
|
12038
12527
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12039
|
-
border-radius: ${tokens.border.radius.
|
|
12528
|
+
border-radius: ${tokens.border.radius.sm};
|
|
12040
12529
|
font-size: ${font.size.xs};
|
|
12041
|
-
border: 1px solid ${colors.gray[600]};
|
|
12042
|
-
color: ${
|
|
12530
|
+
border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
|
|
12531
|
+
color: ${t2(colors["gray"][600], colors["gray"][300])};
|
|
12043
12532
|
|
|
12044
12533
|
&::before {
|
|
12045
12534
|
top: 0px;
|
|
@@ -12048,7 +12537,8 @@ var getStyles2 = () => {
|
|
|
12048
12537
|
left: 50%;
|
|
12049
12538
|
transform: translate(-50%, -100%);
|
|
12050
12539
|
position: absolute;
|
|
12051
|
-
border-color: transparent transparent
|
|
12540
|
+
border-color: transparent transparent
|
|
12541
|
+
${t2(colors.gray[400], colors.gray[600])} transparent;
|
|
12052
12542
|
border-style: solid;
|
|
12053
12543
|
border-width: 7px;
|
|
12054
12544
|
/* transform: rotate(180deg); */
|
|
@@ -12059,17 +12549,14 @@ var getStyles2 = () => {
|
|
|
12059
12549
|
content: ' ';
|
|
12060
12550
|
display: block;
|
|
12061
12551
|
left: 50%;
|
|
12062
|
-
transform: translate(-50%, calc(-100% +
|
|
12552
|
+
transform: translate(-50%, calc(-100% + 2px));
|
|
12063
12553
|
position: absolute;
|
|
12064
|
-
border-color: transparent transparent
|
|
12065
|
-
transparent;
|
|
12554
|
+
border-color: transparent transparent
|
|
12555
|
+
${t2(colors.gray[100], colors.darkGray[500])} transparent;
|
|
12066
12556
|
border-style: solid;
|
|
12067
12557
|
border-width: 7px;
|
|
12068
12558
|
}
|
|
12069
12559
|
`,
|
|
12070
|
-
selectedQueryRow: u`
|
|
12071
|
-
background-color: ${colors.darkGray[500]};
|
|
12072
|
-
`,
|
|
12073
12560
|
filtersContainer: u`
|
|
12074
12561
|
display: flex;
|
|
12075
12562
|
gap: ${tokens.size[2]};
|
|
@@ -12078,47 +12565,52 @@ var getStyles2 = () => {
|
|
|
12078
12565
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12079
12566
|
padding-right: ${tokens.size[1.5]};
|
|
12080
12567
|
border-radius: ${tokens.border.radius.sm};
|
|
12081
|
-
background-color: ${colors.darkGray[400]};
|
|
12568
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12569
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12570
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12082
12571
|
font-size: ${font.size.xs};
|
|
12083
12572
|
display: flex;
|
|
12084
12573
|
align-items: center;
|
|
12085
12574
|
line-height: ${font.lineHeight.sm};
|
|
12086
12575
|
gap: ${tokens.size[1.5]};
|
|
12087
12576
|
max-width: 160px;
|
|
12088
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12089
12577
|
&:focus-visible {
|
|
12090
12578
|
outline-offset: 2px;
|
|
12091
12579
|
border-radius: ${border.radius.xs};
|
|
12092
12580
|
outline: 2px solid ${colors.blue[800]};
|
|
12093
12581
|
}
|
|
12582
|
+
& svg {
|
|
12583
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12584
|
+
}
|
|
12094
12585
|
}
|
|
12095
12586
|
`,
|
|
12096
12587
|
filterInput: u`
|
|
12097
|
-
padding: ${
|
|
12588
|
+
padding: ${size2[0.5]} ${size2[2]};
|
|
12098
12589
|
border-radius: ${tokens.border.radius.sm};
|
|
12099
|
-
background-color: ${colors.darkGray[400]};
|
|
12590
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12100
12591
|
display: flex;
|
|
12101
12592
|
box-sizing: content-box;
|
|
12102
12593
|
align-items: center;
|
|
12103
12594
|
gap: ${tokens.size[1.5]};
|
|
12104
12595
|
max-width: 160px;
|
|
12105
12596
|
min-width: 100px;
|
|
12106
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12597
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12107
12598
|
height: min-content;
|
|
12599
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12108
12600
|
& > svg {
|
|
12109
|
-
width: ${
|
|
12110
|
-
height: ${
|
|
12601
|
+
width: ${size2[3]};
|
|
12602
|
+
height: ${size2[3]};
|
|
12111
12603
|
}
|
|
12112
12604
|
& input {
|
|
12113
12605
|
font-size: ${font.size.xs};
|
|
12114
12606
|
width: 100%;
|
|
12115
|
-
background-color: ${colors.darkGray[400]};
|
|
12607
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12116
12608
|
border: none;
|
|
12117
12609
|
padding: 0;
|
|
12118
12610
|
line-height: ${font.lineHeight.sm};
|
|
12119
|
-
color: ${colors.gray[300]};
|
|
12611
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12120
12612
|
&::placeholder {
|
|
12121
|
-
color: ${colors.gray[300]};
|
|
12613
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12122
12614
|
}
|
|
12123
12615
|
&:focus {
|
|
12124
12616
|
outline: none;
|
|
@@ -12134,24 +12626,26 @@ var getStyles2 = () => {
|
|
|
12134
12626
|
filterSelect: u`
|
|
12135
12627
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12136
12628
|
border-radius: ${tokens.border.radius.sm};
|
|
12137
|
-
background-color: ${colors.darkGray[400]};
|
|
12629
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12138
12630
|
display: flex;
|
|
12139
12631
|
align-items: center;
|
|
12140
12632
|
gap: ${tokens.size[1.5]};
|
|
12141
12633
|
box-sizing: content-box;
|
|
12142
12634
|
max-width: 160px;
|
|
12143
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12635
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12144
12636
|
height: min-content;
|
|
12145
12637
|
& > svg {
|
|
12638
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12146
12639
|
width: ${tokens.size[2]};
|
|
12147
12640
|
height: ${tokens.size[2]};
|
|
12148
12641
|
}
|
|
12149
12642
|
& > select {
|
|
12150
12643
|
appearance: none;
|
|
12644
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12151
12645
|
min-width: 100px;
|
|
12152
12646
|
line-height: ${font.lineHeight.sm};
|
|
12153
12647
|
font-size: ${font.size.xs};
|
|
12154
|
-
background-color: ${colors.darkGray[400]};
|
|
12648
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12155
12649
|
border: none;
|
|
12156
12650
|
&:focus {
|
|
12157
12651
|
outline: none;
|
|
@@ -12169,7 +12663,8 @@ var getStyles2 = () => {
|
|
|
12169
12663
|
`,
|
|
12170
12664
|
actionsBtn: u`
|
|
12171
12665
|
border-radius: ${tokens.border.radius.sm};
|
|
12172
|
-
background-color: ${colors.darkGray[400]};
|
|
12666
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12667
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12173
12668
|
width: 1.625rem;
|
|
12174
12669
|
height: 1.625rem;
|
|
12175
12670
|
justify-content: center;
|
|
@@ -12177,13 +12672,13 @@ var getStyles2 = () => {
|
|
|
12177
12672
|
align-items: center;
|
|
12178
12673
|
gap: ${tokens.size[1.5]};
|
|
12179
12674
|
max-width: 160px;
|
|
12180
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12181
12675
|
cursor: pointer;
|
|
12182
12676
|
padding: 0;
|
|
12183
12677
|
&:hover {
|
|
12184
|
-
background-color: ${colors.darkGray[500]};
|
|
12678
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12185
12679
|
}
|
|
12186
12680
|
& svg {
|
|
12681
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12187
12682
|
width: ${tokens.size[3]};
|
|
12188
12683
|
height: ${tokens.size[3]};
|
|
12189
12684
|
}
|
|
@@ -12193,6 +12688,12 @@ var getStyles2 = () => {
|
|
|
12193
12688
|
outline: 2px solid ${colors.blue[800]};
|
|
12194
12689
|
}
|
|
12195
12690
|
`,
|
|
12691
|
+
actionsBtnOffline: u`
|
|
12692
|
+
& svg {
|
|
12693
|
+
stroke: ${t2(colors.yellow[700], colors.yellow[500])};
|
|
12694
|
+
fill: ${t2(colors.yellow[700], colors.yellow[500])};
|
|
12695
|
+
}
|
|
12696
|
+
`,
|
|
12196
12697
|
overflowQueryContainer: u`
|
|
12197
12698
|
flex: 1;
|
|
12198
12699
|
overflow-y: auto;
|
|
@@ -12205,9 +12706,11 @@ var getStyles2 = () => {
|
|
|
12205
12706
|
display: flex;
|
|
12206
12707
|
align-items: center;
|
|
12207
12708
|
padding: 0;
|
|
12208
|
-
background-color: inherit;
|
|
12209
12709
|
border: none;
|
|
12210
12710
|
cursor: pointer;
|
|
12711
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12712
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
12713
|
+
line-height: 1;
|
|
12211
12714
|
&:focus {
|
|
12212
12715
|
outline: none;
|
|
12213
12716
|
}
|
|
@@ -12217,7 +12720,7 @@ var getStyles2 = () => {
|
|
|
12217
12720
|
outline: 2px solid ${colors.blue[800]};
|
|
12218
12721
|
}
|
|
12219
12722
|
&:hover .tsqd-query-hash {
|
|
12220
|
-
background-color: ${colors.darkGray[600]};
|
|
12723
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[600])};
|
|
12221
12724
|
}
|
|
12222
12725
|
|
|
12223
12726
|
& .tsqd-query-observer-count {
|
|
@@ -12232,7 +12735,7 @@ var getStyles2 = () => {
|
|
|
12232
12735
|
font-weight: ${font.weight.medium};
|
|
12233
12736
|
border-bottom-width: 1px;
|
|
12234
12737
|
border-bottom-style: solid;
|
|
12235
|
-
border-bottom: 1px solid ${colors.darkGray[700]};
|
|
12738
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
|
|
12236
12739
|
}
|
|
12237
12740
|
& .tsqd-query-hash {
|
|
12238
12741
|
user-select: text;
|
|
@@ -12243,7 +12746,7 @@ var getStyles2 = () => {
|
|
|
12243
12746
|
flex: 1;
|
|
12244
12747
|
padding: ${tokens.size[1]} ${tokens.size[2]};
|
|
12245
12748
|
font-family: 'Menlo', 'Fira Code', monospace;
|
|
12246
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12749
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12247
12750
|
text-align: left;
|
|
12248
12751
|
text-overflow: clip;
|
|
12249
12752
|
word-break: break-word;
|
|
@@ -12254,15 +12757,20 @@ var getStyles2 = () => {
|
|
|
12254
12757
|
display: flex;
|
|
12255
12758
|
align-items: center;
|
|
12256
12759
|
padding: 0 ${tokens.size[2]};
|
|
12257
|
-
color: ${colors.gray[300]};
|
|
12258
|
-
background-color: ${colors.darkGray[600]};
|
|
12259
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12760
|
+
color: ${t2(colors.gray[800], colors.gray[300])};
|
|
12761
|
+
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
12762
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12260
12763
|
font-size: ${font.size.xs};
|
|
12261
12764
|
}
|
|
12262
12765
|
`,
|
|
12766
|
+
selectedQueryRow: u`
|
|
12767
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12768
|
+
`,
|
|
12263
12769
|
detailsContainer: u`
|
|
12264
12770
|
flex: 1 1 700px;
|
|
12265
|
-
background-color: ${colors.darkGray[700]};
|
|
12771
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
12772
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12773
|
+
font-family: 'Inter', sans-serif;
|
|
12266
12774
|
display: flex;
|
|
12267
12775
|
flex-direction: column;
|
|
12268
12776
|
overflow-y: auto;
|
|
@@ -12270,10 +12778,11 @@ var getStyles2 = () => {
|
|
|
12270
12778
|
text-align: left;
|
|
12271
12779
|
`,
|
|
12272
12780
|
detailsHeader: u`
|
|
12781
|
+
font-family: 'Inter', sans-serif;
|
|
12273
12782
|
position: sticky;
|
|
12274
12783
|
top: 0;
|
|
12275
12784
|
z-index: 2;
|
|
12276
|
-
background-color: ${colors.darkGray[600]};
|
|
12785
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[600])};
|
|
12277
12786
|
padding: ${tokens.size[1.5]} ${tokens.size[2]};
|
|
12278
12787
|
font-weight: ${font.weight.medium};
|
|
12279
12788
|
font-size: ${font.size.xs};
|
|
@@ -12306,6 +12815,10 @@ var getStyles2 = () => {
|
|
|
12306
12815
|
font-size: ${font.size.xs};
|
|
12307
12816
|
line-height: ${font.lineHeight.xs};
|
|
12308
12817
|
}
|
|
12818
|
+
|
|
12819
|
+
& pre {
|
|
12820
|
+
margin: 0;
|
|
12821
|
+
}
|
|
12309
12822
|
`,
|
|
12310
12823
|
queryDetailsStatus: u`
|
|
12311
12824
|
border: 1px solid ${colors.darkGray[200]};
|
|
@@ -12320,12 +12833,13 @@ var getStyles2 = () => {
|
|
|
12320
12833
|
gap: ${tokens.size[2]};
|
|
12321
12834
|
padding: 0px ${tokens.size[2]};
|
|
12322
12835
|
& > button {
|
|
12836
|
+
font-family: 'Inter', sans-serif;
|
|
12323
12837
|
font-size: ${font.size.xs};
|
|
12324
12838
|
padding: ${tokens.size[1]} ${tokens.size[2]};
|
|
12325
12839
|
display: flex;
|
|
12326
12840
|
border-radius: ${tokens.border.radius.sm};
|
|
12327
|
-
|
|
12328
|
-
|
|
12841
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[600])};
|
|
12842
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12329
12843
|
align-items: center;
|
|
12330
12844
|
gap: ${tokens.size[2]};
|
|
12331
12845
|
font-weight: ${font.weight.medium};
|
|
@@ -12337,7 +12851,7 @@ var getStyles2 = () => {
|
|
|
12337
12851
|
outline: 2px solid ${colors.blue[800]};
|
|
12338
12852
|
}
|
|
12339
12853
|
&:hover {
|
|
12340
|
-
background-color: ${colors.darkGray[500]};
|
|
12854
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12341
12855
|
}
|
|
12342
12856
|
|
|
12343
12857
|
&:disabled {
|
|
@@ -12358,17 +12872,17 @@ var getStyles2 = () => {
|
|
|
12358
12872
|
display: flex;
|
|
12359
12873
|
border-radius: ${tokens.border.radius.sm};
|
|
12360
12874
|
overflow: hidden;
|
|
12361
|
-
|
|
12362
|
-
|
|
12875
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[600])};
|
|
12876
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12363
12877
|
align-items: center;
|
|
12364
12878
|
gap: ${tokens.size[2]};
|
|
12365
12879
|
font-weight: ${font.weight.medium};
|
|
12366
12880
|
line-height: ${font.lineHeight.sm};
|
|
12367
|
-
color: ${
|
|
12881
|
+
color: ${t2(colors.red[500], colors.red[400])};
|
|
12368
12882
|
cursor: pointer;
|
|
12369
12883
|
position: relative;
|
|
12370
12884
|
&:hover {
|
|
12371
|
-
background-color: ${colors.darkGray[500]};
|
|
12885
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12372
12886
|
}
|
|
12373
12887
|
& > span {
|
|
12374
12888
|
width: ${size2[1.5]};
|
|
@@ -12409,10 +12923,10 @@ var getStyles2 = () => {
|
|
|
12409
12923
|
flex-direction: column;
|
|
12410
12924
|
gap: ${size2[0.5]};
|
|
12411
12925
|
border-radius: ${tokens.border.radius.sm};
|
|
12412
|
-
border: 1px solid ${colors.gray[700]};
|
|
12413
|
-
background-color: ${colors.darkGray[600]};
|
|
12926
|
+
border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
|
|
12927
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[600])};
|
|
12414
12928
|
font-size: ${font.size.xs};
|
|
12415
|
-
color: ${colors.gray[300]};
|
|
12929
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12416
12930
|
z-index: 99999;
|
|
12417
12931
|
min-width: 120px;
|
|
12418
12932
|
padding: ${size2[0.5]};
|
|
@@ -12422,17 +12936,19 @@ var getStyles2 = () => {
|
|
|
12422
12936
|
align-items: center;
|
|
12423
12937
|
justify-content: space-between;
|
|
12424
12938
|
border-radius: ${tokens.border.radius.xs};
|
|
12425
|
-
padding: ${tokens.size[
|
|
12939
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12426
12940
|
cursor: pointer;
|
|
12427
12941
|
background-color: transparent;
|
|
12428
12942
|
border: none;
|
|
12943
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12429
12944
|
& svg {
|
|
12945
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12430
12946
|
transform: rotate(-90deg);
|
|
12431
12947
|
width: ${tokens.size[2]};
|
|
12432
12948
|
height: ${tokens.size[2]};
|
|
12433
12949
|
}
|
|
12434
12950
|
&:hover {
|
|
12435
|
-
background-color: ${colors.darkGray[500]};
|
|
12951
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12436
12952
|
}
|
|
12437
12953
|
&:focus-visible {
|
|
12438
12954
|
outline-offset: 2px;
|
|
@@ -12444,33 +12960,48 @@ var getStyles2 = () => {
|
|
|
12444
12960
|
}
|
|
12445
12961
|
`,
|
|
12446
12962
|
settingsMenuHeader: u`
|
|
12447
|
-
padding: ${tokens.size[
|
|
12963
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12448
12964
|
font-weight: ${font.weight.medium};
|
|
12449
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12450
|
-
color: ${colors.gray[400]};
|
|
12965
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12966
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12451
12967
|
font-size: ${font.size["xs"]};
|
|
12452
12968
|
`,
|
|
12453
12969
|
settingsSubButton: u`
|
|
12454
12970
|
display: flex;
|
|
12455
12971
|
align-items: center;
|
|
12456
12972
|
justify-content: space-between;
|
|
12457
|
-
color: ${colors.gray[300]};
|
|
12973
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12458
12974
|
font-size: ${font.size["xs"]};
|
|
12459
12975
|
border-radius: ${tokens.border.radius.xs};
|
|
12460
|
-
padding: ${tokens.size[
|
|
12976
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12461
12977
|
cursor: pointer;
|
|
12462
12978
|
background-color: transparent;
|
|
12463
12979
|
border: none;
|
|
12980
|
+
& svg {
|
|
12981
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12982
|
+
}
|
|
12464
12983
|
&:hover {
|
|
12465
|
-
background-color: ${colors.darkGray[500]};
|
|
12984
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12466
12985
|
}
|
|
12467
12986
|
&:focus-visible {
|
|
12468
12987
|
outline-offset: 2px;
|
|
12469
12988
|
outline: 2px solid ${colors.blue[800]};
|
|
12470
12989
|
}
|
|
12990
|
+
`,
|
|
12991
|
+
themeSelectedButton: u`
|
|
12992
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12993
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12994
|
+
& svg {
|
|
12995
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12996
|
+
}
|
|
12997
|
+
&:hover {
|
|
12998
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12999
|
+
}
|
|
12471
13000
|
`
|
|
12472
13001
|
};
|
|
12473
13002
|
};
|
|
13003
|
+
var lightStyles2 = stylesFactory2("light");
|
|
13004
|
+
var darkStyles2 = stylesFactory2("dark");
|
|
12474
13005
|
export {
|
|
12475
13006
|
Devtools,
|
|
12476
13007
|
DevtoolsComponent,
|