@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
|
@@ -9477,6 +9477,99 @@ var sortFns = {
|
|
|
9477
9477
|
var convertRemToPixels = (rem) => {
|
|
9478
9478
|
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
9479
9479
|
};
|
|
9480
|
+
var getPreferredColorScheme = () => {
|
|
9481
|
+
const [colorScheme, setColorScheme] = createSignal("dark");
|
|
9482
|
+
onMount(() => {
|
|
9483
|
+
const query = window.matchMedia("(prefers-color-scheme: dark)");
|
|
9484
|
+
setColorScheme(query.matches ? "dark" : "light");
|
|
9485
|
+
const listener = (e2) => {
|
|
9486
|
+
setColorScheme(e2.matches ? "dark" : "light");
|
|
9487
|
+
};
|
|
9488
|
+
query.addEventListener("change", listener);
|
|
9489
|
+
onCleanup(() => query.removeEventListener("change", listener));
|
|
9490
|
+
});
|
|
9491
|
+
return colorScheme;
|
|
9492
|
+
};
|
|
9493
|
+
var updateNestedDataByPath = (oldData, updatePath2, value) => {
|
|
9494
|
+
if (updatePath2.length === 0) {
|
|
9495
|
+
return value;
|
|
9496
|
+
}
|
|
9497
|
+
if (oldData instanceof Map) {
|
|
9498
|
+
const newData = new Map(oldData);
|
|
9499
|
+
if (updatePath2.length === 1) {
|
|
9500
|
+
newData.set(updatePath2[0], value);
|
|
9501
|
+
return newData;
|
|
9502
|
+
}
|
|
9503
|
+
const [head, ...tail] = updatePath2;
|
|
9504
|
+
newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
|
|
9505
|
+
return newData;
|
|
9506
|
+
}
|
|
9507
|
+
if (oldData instanceof Set) {
|
|
9508
|
+
const setAsArray = updateNestedDataByPath(
|
|
9509
|
+
Array.from(oldData),
|
|
9510
|
+
updatePath2,
|
|
9511
|
+
value
|
|
9512
|
+
);
|
|
9513
|
+
return new Set(setAsArray);
|
|
9514
|
+
}
|
|
9515
|
+
if (Array.isArray(oldData)) {
|
|
9516
|
+
const newData = [...oldData];
|
|
9517
|
+
if (updatePath2.length === 1) {
|
|
9518
|
+
newData[updatePath2[0]] = value;
|
|
9519
|
+
return newData;
|
|
9520
|
+
}
|
|
9521
|
+
const [head, ...tail] = updatePath2;
|
|
9522
|
+
newData[head] = updateNestedDataByPath(newData[head], tail, value);
|
|
9523
|
+
return newData;
|
|
9524
|
+
}
|
|
9525
|
+
if (oldData instanceof Object) {
|
|
9526
|
+
const newData = { ...oldData };
|
|
9527
|
+
if (updatePath2.length === 1) {
|
|
9528
|
+
newData[updatePath2[0]] = value;
|
|
9529
|
+
return newData;
|
|
9530
|
+
}
|
|
9531
|
+
const [head, ...tail] = updatePath2;
|
|
9532
|
+
newData[head] = updateNestedDataByPath(newData[head], tail, value);
|
|
9533
|
+
return newData;
|
|
9534
|
+
}
|
|
9535
|
+
return oldData;
|
|
9536
|
+
};
|
|
9537
|
+
var deleteNestedDataByPath = (oldData, deletePath) => {
|
|
9538
|
+
if (oldData instanceof Map) {
|
|
9539
|
+
const newData = new Map(oldData);
|
|
9540
|
+
if (deletePath.length === 1) {
|
|
9541
|
+
newData.delete(deletePath[0]);
|
|
9542
|
+
return newData;
|
|
9543
|
+
}
|
|
9544
|
+
const [head, ...tail] = deletePath;
|
|
9545
|
+
newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
|
|
9546
|
+
return newData;
|
|
9547
|
+
}
|
|
9548
|
+
if (oldData instanceof Set) {
|
|
9549
|
+
const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
|
|
9550
|
+
return new Set(setAsArray);
|
|
9551
|
+
}
|
|
9552
|
+
if (Array.isArray(oldData)) {
|
|
9553
|
+
const newData = [...oldData];
|
|
9554
|
+
if (deletePath.length === 1) {
|
|
9555
|
+
return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
|
|
9556
|
+
}
|
|
9557
|
+
const [head, ...tail] = deletePath;
|
|
9558
|
+
newData[head] = deleteNestedDataByPath(newData[head], tail);
|
|
9559
|
+
return newData;
|
|
9560
|
+
}
|
|
9561
|
+
if (oldData instanceof Object) {
|
|
9562
|
+
const newData = { ...oldData };
|
|
9563
|
+
if (deletePath.length === 1) {
|
|
9564
|
+
delete newData[deletePath[0]];
|
|
9565
|
+
return newData;
|
|
9566
|
+
}
|
|
9567
|
+
const [head, ...tail] = deletePath;
|
|
9568
|
+
newData[head] = deleteNestedDataByPath(newData[head], tail);
|
|
9569
|
+
return newData;
|
|
9570
|
+
}
|
|
9571
|
+
return oldData;
|
|
9572
|
+
};
|
|
9480
9573
|
|
|
9481
9574
|
// src/icons/index.tsx
|
|
9482
9575
|
function Search() {
|
|
@@ -9488,7 +9581,7 @@ function Search() {
|
|
|
9488
9581
|
xmlns="http://www.w3.org/2000/svg"
|
|
9489
9582
|
><path
|
|
9490
9583
|
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"
|
|
9491
|
-
stroke="
|
|
9584
|
+
stroke="currentColor"
|
|
9492
9585
|
stroke-width="1.66667"
|
|
9493
9586
|
stroke-linecap="round"
|
|
9494
9587
|
stroke-linejoin="round"
|
|
@@ -9503,8 +9596,8 @@ function Trash() {
|
|
|
9503
9596
|
xmlns="http://www.w3.org/2000/svg"
|
|
9504
9597
|
><path
|
|
9505
9598
|
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"
|
|
9506
|
-
stroke="
|
|
9507
|
-
stroke-width="
|
|
9599
|
+
stroke="currentColor"
|
|
9600
|
+
stroke-width="2"
|
|
9508
9601
|
stroke-linecap="round"
|
|
9509
9602
|
stroke-linejoin="round"
|
|
9510
9603
|
/></svg>;
|
|
@@ -9518,7 +9611,7 @@ function ChevronDown() {
|
|
|
9518
9611
|
xmlns="http://www.w3.org/2000/svg"
|
|
9519
9612
|
><path
|
|
9520
9613
|
d="M1 1L5 5L9 1"
|
|
9521
|
-
stroke="
|
|
9614
|
+
stroke="currentColor"
|
|
9522
9615
|
stroke-width="1.66667"
|
|
9523
9616
|
stroke-linecap="round"
|
|
9524
9617
|
stroke-linejoin="round"
|
|
@@ -9533,7 +9626,7 @@ function ArrowUp() {
|
|
|
9533
9626
|
xmlns="http://www.w3.org/2000/svg"
|
|
9534
9627
|
><path
|
|
9535
9628
|
d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667"
|
|
9536
|
-
stroke="
|
|
9629
|
+
stroke="currentColor"
|
|
9537
9630
|
stroke-width="1.66667"
|
|
9538
9631
|
stroke-linecap="round"
|
|
9539
9632
|
stroke-linejoin="round"
|
|
@@ -9548,7 +9641,7 @@ function ArrowDown() {
|
|
|
9548
9641
|
xmlns="http://www.w3.org/2000/svg"
|
|
9549
9642
|
><path
|
|
9550
9643
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9551
|
-
stroke="
|
|
9644
|
+
stroke="currentColor"
|
|
9552
9645
|
stroke-width="1.66667"
|
|
9553
9646
|
stroke-linecap="round"
|
|
9554
9647
|
stroke-linejoin="round"
|
|
@@ -9566,7 +9659,7 @@ function ArrowLeft() {
|
|
|
9566
9659
|
}}
|
|
9567
9660
|
><path
|
|
9568
9661
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9569
|
-
stroke="
|
|
9662
|
+
stroke="currentColor"
|
|
9570
9663
|
stroke-width="1.66667"
|
|
9571
9664
|
stroke-linecap="round"
|
|
9572
9665
|
stroke-linejoin="round"
|
|
@@ -9584,16 +9677,61 @@ function ArrowRight() {
|
|
|
9584
9677
|
}}
|
|
9585
9678
|
><path
|
|
9586
9679
|
d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
|
|
9587
|
-
stroke="
|
|
9680
|
+
stroke="currentColor"
|
|
9588
9681
|
stroke-width="1.66667"
|
|
9589
9682
|
stroke-linecap="round"
|
|
9590
9683
|
stroke-linejoin="round"
|
|
9591
9684
|
/></svg>;
|
|
9592
9685
|
}
|
|
9686
|
+
function Sun() {
|
|
9687
|
+
return <svg
|
|
9688
|
+
viewBox="0 0 24 24"
|
|
9689
|
+
height="12"
|
|
9690
|
+
width="12"
|
|
9691
|
+
fill="none"
|
|
9692
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9693
|
+
><path
|
|
9694
|
+
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"
|
|
9695
|
+
stroke="currentColor"
|
|
9696
|
+
stroke-width="2"
|
|
9697
|
+
stroke-linecap="round"
|
|
9698
|
+
stroke-linejoin="round"
|
|
9699
|
+
/></svg>;
|
|
9700
|
+
}
|
|
9701
|
+
function Moon() {
|
|
9702
|
+
return <svg
|
|
9703
|
+
viewBox="0 0 24 24"
|
|
9704
|
+
height="12"
|
|
9705
|
+
width="12"
|
|
9706
|
+
fill="none"
|
|
9707
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9708
|
+
><path
|
|
9709
|
+
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"
|
|
9710
|
+
stroke="currentColor"
|
|
9711
|
+
stroke-width="2"
|
|
9712
|
+
stroke-linecap="round"
|
|
9713
|
+
stroke-linejoin="round"
|
|
9714
|
+
/></svg>;
|
|
9715
|
+
}
|
|
9716
|
+
function Monitor() {
|
|
9717
|
+
return <svg
|
|
9718
|
+
viewBox="0 0 24 24"
|
|
9719
|
+
height="12"
|
|
9720
|
+
width="12"
|
|
9721
|
+
fill="none"
|
|
9722
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9723
|
+
><path
|
|
9724
|
+
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"
|
|
9725
|
+
stroke="currentColor"
|
|
9726
|
+
stroke-width="2"
|
|
9727
|
+
stroke-linecap="round"
|
|
9728
|
+
stroke-linejoin="round"
|
|
9729
|
+
/></svg>;
|
|
9730
|
+
}
|
|
9593
9731
|
function Wifi() {
|
|
9594
9732
|
return <svg
|
|
9595
|
-
stroke="
|
|
9596
|
-
fill="
|
|
9733
|
+
stroke="currentColor"
|
|
9734
|
+
fill="currentColor"
|
|
9597
9735
|
stroke-width="0"
|
|
9598
9736
|
viewBox="0 0 24 24"
|
|
9599
9737
|
height="1em"
|
|
@@ -9606,8 +9744,6 @@ function Wifi() {
|
|
|
9606
9744
|
}
|
|
9607
9745
|
function Offline() {
|
|
9608
9746
|
return <svg
|
|
9609
|
-
stroke={tokens.colors.yellow[500]}
|
|
9610
|
-
fill={tokens.colors.yellow[500]}
|
|
9611
9747
|
stroke-width="0"
|
|
9612
9748
|
viewBox="0 0 24 24"
|
|
9613
9749
|
height="1em"
|
|
@@ -9631,14 +9767,14 @@ function Settings() {
|
|
|
9631
9767
|
>
|
|
9632
9768
|
<path
|
|
9633
9769
|
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"
|
|
9634
|
-
stroke="
|
|
9770
|
+
stroke="currentColor"
|
|
9635
9771
|
stroke-width="2"
|
|
9636
9772
|
stroke-linecap="round"
|
|
9637
9773
|
stroke-linejoin="round"
|
|
9638
9774
|
/>
|
|
9639
9775
|
<path
|
|
9640
9776
|
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"
|
|
9641
|
-
stroke="
|
|
9777
|
+
stroke="currentColor"
|
|
9642
9778
|
stroke-width="2"
|
|
9643
9779
|
stroke-linecap="round"
|
|
9644
9780
|
stroke-linejoin="round"
|
|
@@ -9658,10 +9794,10 @@ function Copier() {
|
|
|
9658
9794
|
stroke-width="2"
|
|
9659
9795
|
stroke-linecap="round"
|
|
9660
9796
|
stroke-linejoin="round"
|
|
9661
|
-
stroke="
|
|
9797
|
+
stroke="currentColor"
|
|
9662
9798
|
/></svg>;
|
|
9663
9799
|
}
|
|
9664
|
-
function CopiedCopier() {
|
|
9800
|
+
function CopiedCopier(props) {
|
|
9665
9801
|
return <svg
|
|
9666
9802
|
width="24"
|
|
9667
9803
|
height="24"
|
|
@@ -9670,7 +9806,7 @@ function CopiedCopier() {
|
|
|
9670
9806
|
xmlns="http://www.w3.org/2000/svg"
|
|
9671
9807
|
><path
|
|
9672
9808
|
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"
|
|
9673
|
-
stroke="#12B76A"
|
|
9809
|
+
stroke={props.theme === "dark" ? "#12B76A" : "#027A48"}
|
|
9674
9810
|
stroke-width="2"
|
|
9675
9811
|
stroke-linecap="round"
|
|
9676
9812
|
stroke-linejoin="round"
|
|
@@ -9691,6 +9827,52 @@ function ErrorCopier() {
|
|
|
9691
9827
|
stroke-linejoin="round"
|
|
9692
9828
|
/></svg>;
|
|
9693
9829
|
}
|
|
9830
|
+
function List() {
|
|
9831
|
+
return <svg
|
|
9832
|
+
width="24"
|
|
9833
|
+
height="24"
|
|
9834
|
+
viewBox="0 0 24 24"
|
|
9835
|
+
fill="none"
|
|
9836
|
+
stroke="currentColor"
|
|
9837
|
+
stroke-width="2"
|
|
9838
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9839
|
+
>
|
|
9840
|
+
<rect class="list" width="20" height="20" y="2" x="2" rx="2" />
|
|
9841
|
+
<line class="list-item" y1="7" y2="7" x1="6" x2="18" />
|
|
9842
|
+
<line class="list-item" y2="12" y1="12" x1="6" x2="18" />
|
|
9843
|
+
<line class="list-item" y1="17" y2="17" x1="6" x2="18" />
|
|
9844
|
+
</svg>;
|
|
9845
|
+
}
|
|
9846
|
+
function Check(props) {
|
|
9847
|
+
return <>
|
|
9848
|
+
<Show when={props.checked}><svg
|
|
9849
|
+
width="24"
|
|
9850
|
+
height="24"
|
|
9851
|
+
viewBox="0 0 24 24"
|
|
9852
|
+
fill="none"
|
|
9853
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9854
|
+
><path
|
|
9855
|
+
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"
|
|
9856
|
+
stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
|
|
9857
|
+
stroke-width="2"
|
|
9858
|
+
stroke-linecap="round"
|
|
9859
|
+
stroke-linejoin="round"
|
|
9860
|
+
/></svg></Show>
|
|
9861
|
+
<Show when={!props.checked}><svg
|
|
9862
|
+
viewBox="0 0 24 24"
|
|
9863
|
+
height="20"
|
|
9864
|
+
width="20"
|
|
9865
|
+
fill="none"
|
|
9866
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9867
|
+
><path
|
|
9868
|
+
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"
|
|
9869
|
+
stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
|
|
9870
|
+
stroke-width="2"
|
|
9871
|
+
stroke-linecap="round"
|
|
9872
|
+
stroke-linejoin="round"
|
|
9873
|
+
/></svg></Show>
|
|
9874
|
+
</>;
|
|
9875
|
+
}
|
|
9694
9876
|
function TanstackLogo() {
|
|
9695
9877
|
return <svg version="1.0" viewBox="0 0 633 633">
|
|
9696
9878
|
<linearGradient
|
|
@@ -10407,6 +10589,23 @@ function TanstackLogo() {
|
|
|
10407
10589
|
</svg>;
|
|
10408
10590
|
}
|
|
10409
10591
|
|
|
10592
|
+
// src/Context.ts
|
|
10593
|
+
var QueryDevtoolsContext = createContext({
|
|
10594
|
+
client: void 0,
|
|
10595
|
+
onlineManager: void 0,
|
|
10596
|
+
queryFlavor: "",
|
|
10597
|
+
version: ""
|
|
10598
|
+
});
|
|
10599
|
+
function useQueryDevtoolsContext() {
|
|
10600
|
+
return useContext(QueryDevtoolsContext);
|
|
10601
|
+
}
|
|
10602
|
+
var ThemeContext = createContext(
|
|
10603
|
+
() => "dark"
|
|
10604
|
+
);
|
|
10605
|
+
function useTheme() {
|
|
10606
|
+
return useContext(ThemeContext);
|
|
10607
|
+
}
|
|
10608
|
+
|
|
10410
10609
|
// src/Explorer.tsx
|
|
10411
10610
|
function chunkArray(array, size2) {
|
|
10412
10611
|
if (size2 < 1)
|
|
@@ -10420,10 +10619,13 @@ function chunkArray(array, size2) {
|
|
|
10420
10619
|
return result;
|
|
10421
10620
|
}
|
|
10422
10621
|
var Expander = (props) => {
|
|
10423
|
-
const
|
|
10622
|
+
const theme = useTheme();
|
|
10623
|
+
const styles = createMemo(() => {
|
|
10624
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10625
|
+
});
|
|
10424
10626
|
return <span
|
|
10425
10627
|
class={clsx(
|
|
10426
|
-
styles.expander,
|
|
10628
|
+
styles().expander,
|
|
10427
10629
|
u`
|
|
10428
10630
|
transform: rotate(${props.expanded ? 90 : 0}deg);
|
|
10429
10631
|
`,
|
|
@@ -10447,10 +10649,14 @@ var Expander = (props) => {
|
|
|
10447
10649
|
/></svg></span>;
|
|
10448
10650
|
};
|
|
10449
10651
|
var CopyButton = (props) => {
|
|
10450
|
-
const
|
|
10652
|
+
const theme = useTheme();
|
|
10653
|
+
const styles = createMemo(() => {
|
|
10654
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10655
|
+
});
|
|
10451
10656
|
const [copyState, setCopyState] = createSignal("NoCopy");
|
|
10452
10657
|
return <button
|
|
10453
|
-
class={styles.
|
|
10658
|
+
class={styles().actionButton}
|
|
10659
|
+
title="Copy object to clipboard"
|
|
10454
10660
|
aria-label={`${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`}
|
|
10455
10661
|
onClick={copyState() === "NoCopy" ? () => {
|
|
10456
10662
|
navigator.clipboard.writeText(stringify(props.value)).then(
|
|
@@ -10470,15 +10676,80 @@ var CopyButton = (props) => {
|
|
|
10470
10676
|
} : void 0}
|
|
10471
10677
|
><Switch>
|
|
10472
10678
|
<Match when={copyState() === "NoCopy"}><Copier /></Match>
|
|
10473
|
-
<Match when={copyState() === "SuccessCopy"}><CopiedCopier /></Match>
|
|
10679
|
+
<Match when={copyState() === "SuccessCopy"}><CopiedCopier theme={theme()} /></Match>
|
|
10474
10680
|
<Match when={copyState() === "ErrorCopy"}><ErrorCopier /></Match>
|
|
10475
10681
|
</Switch></button>;
|
|
10476
10682
|
};
|
|
10683
|
+
var ClearArrayButton = (props) => {
|
|
10684
|
+
const theme = useTheme();
|
|
10685
|
+
const styles = createMemo(() => {
|
|
10686
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10687
|
+
});
|
|
10688
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10689
|
+
return <button
|
|
10690
|
+
class={styles().actionButton}
|
|
10691
|
+
title="Remove all items"
|
|
10692
|
+
aria-label="Remove all items"
|
|
10693
|
+
onClick={() => {
|
|
10694
|
+
const oldData = props.activeQuery.state.data;
|
|
10695
|
+
const newData = updateNestedDataByPath(oldData, props.dataPath, []);
|
|
10696
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10697
|
+
}}
|
|
10698
|
+
><List /></button>;
|
|
10699
|
+
};
|
|
10700
|
+
var DeleteItemButton = (props) => {
|
|
10701
|
+
const theme = useTheme();
|
|
10702
|
+
const styles = createMemo(() => {
|
|
10703
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10704
|
+
});
|
|
10705
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10706
|
+
return <button
|
|
10707
|
+
class={clsx(styles().actionButton)}
|
|
10708
|
+
title="Delete item"
|
|
10709
|
+
aria-label="Delete item"
|
|
10710
|
+
onClick={() => {
|
|
10711
|
+
const oldData = props.activeQuery.state.data;
|
|
10712
|
+
const newData = deleteNestedDataByPath(oldData, props.dataPath);
|
|
10713
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10714
|
+
}}
|
|
10715
|
+
><Trash /></button>;
|
|
10716
|
+
};
|
|
10717
|
+
var ToggleValueButton = (props) => {
|
|
10718
|
+
const theme = useTheme();
|
|
10719
|
+
const styles = createMemo(() => {
|
|
10720
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10721
|
+
});
|
|
10722
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10723
|
+
return <button
|
|
10724
|
+
class={clsx(
|
|
10725
|
+
styles().actionButton,
|
|
10726
|
+
u`
|
|
10727
|
+
width: ${tokens.size[3.5]};
|
|
10728
|
+
height: ${tokens.size[3.5]};
|
|
10729
|
+
`
|
|
10730
|
+
)}
|
|
10731
|
+
title="Toggle value"
|
|
10732
|
+
aria-label="Toggle value"
|
|
10733
|
+
onClick={() => {
|
|
10734
|
+
const oldData = props.activeQuery.state.data;
|
|
10735
|
+
const newData = updateNestedDataByPath(
|
|
10736
|
+
oldData,
|
|
10737
|
+
props.dataPath,
|
|
10738
|
+
!props.value
|
|
10739
|
+
);
|
|
10740
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10741
|
+
}}
|
|
10742
|
+
><Check theme={theme()} checked={props.value} /></button>;
|
|
10743
|
+
};
|
|
10477
10744
|
function isIterable(x) {
|
|
10478
10745
|
return Symbol.iterator in x;
|
|
10479
10746
|
}
|
|
10480
10747
|
function Explorer(props) {
|
|
10481
|
-
const
|
|
10748
|
+
const theme = useTheme();
|
|
10749
|
+
const styles = createMemo(() => {
|
|
10750
|
+
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10751
|
+
});
|
|
10752
|
+
const queryClient = useQueryDevtoolsContext().client;
|
|
10482
10753
|
const [expanded, setExpanded] = createSignal(
|
|
10483
10754
|
(props.defaultExpanded || []).includes(props.label)
|
|
10484
10755
|
);
|
|
@@ -10520,41 +10791,59 @@ function Explorer(props) {
|
|
|
10520
10791
|
return typeof props.value;
|
|
10521
10792
|
});
|
|
10522
10793
|
const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
|
|
10523
|
-
|
|
10794
|
+
const currentDataPath = props.dataPath ?? [];
|
|
10795
|
+
return <div class={styles().entry}>
|
|
10524
10796
|
<Show when={subEntryPages().length}>
|
|
10525
|
-
<div class={styles.expanderButtonContainer}>
|
|
10797
|
+
<div class={styles().expanderButtonContainer}>
|
|
10526
10798
|
<button
|
|
10527
|
-
class={styles.expanderButton}
|
|
10799
|
+
class={styles().expanderButton}
|
|
10528
10800
|
onClick={() => toggleExpanded()}
|
|
10529
10801
|
>
|
|
10530
10802
|
<Expander expanded={expanded()} />
|
|
10531
10803
|
{" "}
|
|
10532
10804
|
<span>{props.label}</span>
|
|
10533
10805
|
{" "}
|
|
10534
|
-
<span class={styles.info}>
|
|
10806
|
+
<span class={styles().info}>
|
|
10535
10807
|
{String(type()).toLowerCase() === "iterable" ? "(Iterable) " : ""}
|
|
10536
10808
|
{subEntries().length}
|
|
10537
10809
|
{" "}
|
|
10538
10810
|
{subEntries().length > 1 ? `items` : `item`}
|
|
10539
10811
|
</span>
|
|
10540
10812
|
</button>
|
|
10541
|
-
<Show when={props.
|
|
10813
|
+
<Show when={props.editable}><div class={styles().actions}>
|
|
10814
|
+
<CopyButton value={props.value} />
|
|
10815
|
+
<Show
|
|
10816
|
+
when={props.itemsDeletable && props.activeQuery !== void 0}
|
|
10817
|
+
><DeleteItemButton
|
|
10818
|
+
activeQuery={props.activeQuery}
|
|
10819
|
+
dataPath={currentDataPath}
|
|
10820
|
+
/></Show>
|
|
10821
|
+
<Show
|
|
10822
|
+
when={type() === "array" && props.activeQuery !== void 0}
|
|
10823
|
+
><ClearArrayButton
|
|
10824
|
+
activeQuery={props.activeQuery}
|
|
10825
|
+
dataPath={currentDataPath}
|
|
10826
|
+
/></Show>
|
|
10827
|
+
</div></Show>
|
|
10542
10828
|
</div>
|
|
10543
10829
|
<Show when={expanded()}>
|
|
10544
|
-
<Show when={subEntryPages().length === 1}><div class={styles.subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
|
|
10830
|
+
<Show when={subEntryPages().length === 1}><div class={styles().subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
|
|
10545
10831
|
return <Explorer
|
|
10546
10832
|
defaultExpanded={props.defaultExpanded}
|
|
10547
10833
|
label={entry().label}
|
|
10548
10834
|
value={entry().value}
|
|
10549
|
-
|
|
10835
|
+
editable={props.editable}
|
|
10836
|
+
dataPath={[...currentDataPath, entry().label]}
|
|
10837
|
+
activeQuery={props.activeQuery}
|
|
10838
|
+
itemsDeletable={type() === "array" || type() === "Iterable" || type() === "object"}
|
|
10550
10839
|
/>;
|
|
10551
10840
|
}}</Key></div></Show>
|
|
10552
|
-
<Show when={subEntryPages().length > 1}><div class={styles.subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles.entry}>
|
|
10841
|
+
<Show when={subEntryPages().length > 1}><div class={styles().subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles().entry}>
|
|
10553
10842
|
<button
|
|
10554
10843
|
onClick={() => setExpandedPages(
|
|
10555
10844
|
(old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
|
|
10556
10845
|
)}
|
|
10557
|
-
class={styles.expanderButton}
|
|
10846
|
+
class={styles().expanderButton}
|
|
10558
10847
|
>
|
|
10559
10848
|
<Expander expanded={expandedPages().includes(index)} />
|
|
10560
10849
|
{" "}
|
|
@@ -10564,31 +10853,69 @@ function Explorer(props) {
|
|
|
10564
10853
|
{index * 100 + 100 - 1}
|
|
10565
10854
|
{"]"}
|
|
10566
10855
|
</button>
|
|
10567
|
-
<Show when={expandedPages().includes(index)}><div class={styles.subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
|
|
10856
|
+
<Show when={expandedPages().includes(index)}><div class={styles().subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
|
|
10568
10857
|
defaultExpanded={props.defaultExpanded}
|
|
10569
10858
|
label={entry().label}
|
|
10570
10859
|
value={entry().value}
|
|
10571
|
-
|
|
10860
|
+
editable={props.editable}
|
|
10861
|
+
dataPath={[...currentDataPath, entry().label]}
|
|
10862
|
+
activeQuery={props.activeQuery}
|
|
10572
10863
|
/>}</Key></div></Show>
|
|
10573
10864
|
</div></div>}</Index></div></Show>
|
|
10574
10865
|
</Show>
|
|
10575
10866
|
</Show>
|
|
10576
|
-
<Show when={subEntryPages().length === 0}><div
|
|
10577
|
-
|
|
10578
|
-
"line-height": "1.125rem"
|
|
10579
|
-
}}
|
|
10580
|
-
>
|
|
10581
|
-
<span class={styles.label}>
|
|
10867
|
+
<Show when={subEntryPages().length === 0}><div class={styles().row}>
|
|
10868
|
+
<span class={styles().label}>
|
|
10582
10869
|
{props.label}
|
|
10583
10870
|
{":"}
|
|
10584
10871
|
</span>
|
|
10585
|
-
|
|
10586
|
-
|
|
10872
|
+
<Show
|
|
10873
|
+
when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number" || type() === "boolean")}
|
|
10874
|
+
fallback={<span class={styles().value}>{displayValue(props.value)}</span>}
|
|
10875
|
+
>
|
|
10876
|
+
<Show
|
|
10877
|
+
when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number")}
|
|
10878
|
+
><input
|
|
10879
|
+
type={type() === "number" ? "number" : "text"}
|
|
10880
|
+
class={clsx(styles().value, styles().editableInput)}
|
|
10881
|
+
value={props.value}
|
|
10882
|
+
onChange={(changeEvent) => {
|
|
10883
|
+
const oldData = props.activeQuery.state.data;
|
|
10884
|
+
const newData = updateNestedDataByPath(
|
|
10885
|
+
oldData,
|
|
10886
|
+
currentDataPath,
|
|
10887
|
+
type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value
|
|
10888
|
+
);
|
|
10889
|
+
queryClient.setQueryData(props.activeQuery.queryKey, newData);
|
|
10890
|
+
}}
|
|
10891
|
+
/></Show>
|
|
10892
|
+
<Show when={type() === "boolean"}><span
|
|
10893
|
+
class={clsx(
|
|
10894
|
+
styles().value,
|
|
10895
|
+
styles().actions,
|
|
10896
|
+
styles().editableInput
|
|
10897
|
+
)}
|
|
10898
|
+
>
|
|
10899
|
+
<ToggleValueButton
|
|
10900
|
+
activeQuery={props.activeQuery}
|
|
10901
|
+
dataPath={currentDataPath}
|
|
10902
|
+
value={props.value}
|
|
10903
|
+
/>
|
|
10904
|
+
{displayValue(props.value)}
|
|
10905
|
+
</span></Show>
|
|
10906
|
+
</Show>
|
|
10907
|
+
<Show
|
|
10908
|
+
when={props.editable && props.itemsDeletable && props.activeQuery !== void 0}
|
|
10909
|
+
><DeleteItemButton
|
|
10910
|
+
activeQuery={props.activeQuery}
|
|
10911
|
+
dataPath={currentDataPath}
|
|
10912
|
+
/></Show>
|
|
10587
10913
|
</div></Show>
|
|
10588
10914
|
</div>;
|
|
10589
10915
|
}
|
|
10590
|
-
var
|
|
10916
|
+
var stylesFactory = (theme) => {
|
|
10591
10917
|
const { colors, font, size: size2, border } = tokens;
|
|
10918
|
+
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
10592
10919
|
return {
|
|
10593
10920
|
entry: u`
|
|
10594
10921
|
& * {
|
|
@@ -10602,7 +10929,7 @@ var getStyles = () => {
|
|
|
10602
10929
|
subEntry: u`
|
|
10603
10930
|
margin: 0 0 0 0.5em;
|
|
10604
10931
|
padding-left: 0.75em;
|
|
10605
|
-
border-left: 2px solid ${colors.darkGray[400]};
|
|
10932
|
+
border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
10606
10933
|
/* outline: 1px solid ${colors.teal[400]}; */
|
|
10607
10934
|
`,
|
|
10608
10935
|
expander: u`
|
|
@@ -10623,6 +10950,7 @@ var getStyles = () => {
|
|
|
10623
10950
|
align-items: center;
|
|
10624
10951
|
line-height: 1.125rem;
|
|
10625
10952
|
min-height: 1.125rem;
|
|
10953
|
+
gap: ${size2[2]};
|
|
10626
10954
|
`,
|
|
10627
10955
|
expanderButton: u`
|
|
10628
10956
|
cursor: pointer;
|
|
@@ -10650,19 +10978,45 @@ var getStyles = () => {
|
|
|
10650
10978
|
}
|
|
10651
10979
|
`,
|
|
10652
10980
|
info: u`
|
|
10653
|
-
color: ${colors.gray[500]};
|
|
10981
|
+
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10654
10982
|
font-size: ${font.size.xs};
|
|
10655
10983
|
margin-left: ${size2[1]};
|
|
10656
10984
|
/* outline: 1px solid ${colors.yellow[400]}; */
|
|
10657
10985
|
`,
|
|
10658
10986
|
label: u`
|
|
10659
|
-
color: ${colors.gray[300]};
|
|
10987
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
10660
10988
|
`,
|
|
10661
10989
|
value: u`
|
|
10662
|
-
color: ${colors.purple[400]};
|
|
10990
|
+
color: ${t2(colors.purple[600], colors.purple[400])};
|
|
10991
|
+
flex-grow: 1;
|
|
10992
|
+
`,
|
|
10993
|
+
actions: u`
|
|
10994
|
+
display: inline-flex;
|
|
10995
|
+
gap: ${size2[2]};
|
|
10996
|
+
align-items: center;
|
|
10997
|
+
`,
|
|
10998
|
+
row: u`
|
|
10999
|
+
display: inline-flex;
|
|
11000
|
+
gap: ${size2[2]};
|
|
11001
|
+
width: 100%;
|
|
11002
|
+
margin-bottom: ${size2[0.5]};
|
|
11003
|
+
line-height: 1.125rem;
|
|
11004
|
+
align-items: center;
|
|
10663
11005
|
`,
|
|
10664
|
-
|
|
11006
|
+
editableInput: u`
|
|
11007
|
+
border: none;
|
|
11008
|
+
padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
|
|
11009
|
+
flex-grow: 1;
|
|
11010
|
+
border-radius: ${border.radius.xs};
|
|
11011
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
11012
|
+
|
|
11013
|
+
&:hover {
|
|
11014
|
+
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
11015
|
+
}
|
|
11016
|
+
`,
|
|
11017
|
+
actionButton: u`
|
|
10665
11018
|
background-color: transparent;
|
|
11019
|
+
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10666
11020
|
border: none;
|
|
10667
11021
|
display: inline-flex;
|
|
10668
11022
|
padding: 0px;
|
|
@@ -10672,11 +11026,10 @@ var getStyles = () => {
|
|
|
10672
11026
|
width: ${size2[3]};
|
|
10673
11027
|
height: ${size2[3]};
|
|
10674
11028
|
position: relative;
|
|
10675
|
-
left: ${size2[2]};
|
|
10676
11029
|
z-index: 1;
|
|
10677
11030
|
|
|
10678
|
-
&:hover svg
|
|
10679
|
-
|
|
11031
|
+
&:hover svg {
|
|
11032
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
10680
11033
|
}
|
|
10681
11034
|
|
|
10682
11035
|
&:focus-visible {
|
|
@@ -10687,17 +11040,8 @@ var getStyles = () => {
|
|
|
10687
11040
|
`
|
|
10688
11041
|
};
|
|
10689
11042
|
};
|
|
10690
|
-
|
|
10691
|
-
|
|
10692
|
-
var QueryDevtoolsContext = createContext({
|
|
10693
|
-
client: void 0,
|
|
10694
|
-
onlineManager: void 0,
|
|
10695
|
-
queryFlavor: "",
|
|
10696
|
-
version: ""
|
|
10697
|
-
});
|
|
10698
|
-
function useQueryDevtoolsContext() {
|
|
10699
|
-
return useContext(QueryDevtoolsContext);
|
|
10700
|
-
}
|
|
11043
|
+
var lightStyles = stylesFactory("light");
|
|
11044
|
+
var darkStyles = stylesFactory("dark");
|
|
10701
11045
|
|
|
10702
11046
|
// src/fonts.ts
|
|
10703
11047
|
var loadFonts = () => {
|
|
@@ -10713,6 +11057,7 @@ var secondBreakpoint = 796;
|
|
|
10713
11057
|
var thirdBreakpoint = 700;
|
|
10714
11058
|
var BUTTON_POSITION = "bottom-right";
|
|
10715
11059
|
var POSITION = "bottom";
|
|
11060
|
+
var THEME_PREFERENCE = "system";
|
|
10716
11061
|
var INITIAL_IS_OPEN = false;
|
|
10717
11062
|
var DEFAULT_HEIGHT = 500;
|
|
10718
11063
|
var DEFAULT_WIDTH = 500;
|
|
@@ -10723,28 +11068,38 @@ var [selectedQueryHash, setSelectedQueryHash] = createSignal(
|
|
|
10723
11068
|
);
|
|
10724
11069
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
10725
11070
|
var DevtoolsComponent = (props) => {
|
|
10726
|
-
|
|
11071
|
+
const [localStore, setLocalStore] = createLocalStorage({
|
|
11072
|
+
prefix: "TanstackQueryDevtools"
|
|
11073
|
+
});
|
|
11074
|
+
const colorScheme = getPreferredColorScheme();
|
|
11075
|
+
const theme = createMemo(() => {
|
|
11076
|
+
const preference = localStore.theme_preference || THEME_PREFERENCE;
|
|
11077
|
+
if (preference !== "system")
|
|
11078
|
+
return preference;
|
|
11079
|
+
return colorScheme();
|
|
11080
|
+
});
|
|
11081
|
+
return <QueryDevtoolsContext.Provider value={props}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></QueryDevtoolsContext.Provider>;
|
|
10727
11082
|
};
|
|
10728
11083
|
var Devtools_default = DevtoolsComponent;
|
|
10729
|
-
var Devtools = () => {
|
|
11084
|
+
var Devtools = (props) => {
|
|
10730
11085
|
loadFonts();
|
|
10731
|
-
const
|
|
10732
|
-
const
|
|
10733
|
-
|
|
11086
|
+
const theme = useTheme();
|
|
11087
|
+
const styles = createMemo(() => {
|
|
11088
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
10734
11089
|
});
|
|
10735
11090
|
const buttonPosition = createMemo(() => {
|
|
10736
11091
|
return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
|
|
10737
11092
|
});
|
|
10738
11093
|
const isOpen = createMemo(() => {
|
|
10739
|
-
return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
|
|
11094
|
+
return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
|
|
10740
11095
|
});
|
|
10741
11096
|
const position = createMemo(() => {
|
|
10742
|
-
return localStore.position || useQueryDevtoolsContext().position || POSITION;
|
|
11097
|
+
return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
|
|
10743
11098
|
});
|
|
10744
11099
|
createEffect(() => {
|
|
10745
11100
|
const root = document.querySelector(".tsqd-parent-container");
|
|
10746
|
-
const height = localStore.height || DEFAULT_HEIGHT;
|
|
10747
|
-
const width = localStore.width || DEFAULT_WIDTH;
|
|
11101
|
+
const height = props.localStore.height || DEFAULT_HEIGHT;
|
|
11102
|
+
const width = props.localStore.width || DEFAULT_WIDTH;
|
|
10748
11103
|
const panelPosition = position();
|
|
10749
11104
|
root.style.setProperty(
|
|
10750
11105
|
"--tsqd-panel-height",
|
|
@@ -10782,25 +11137,28 @@ var Devtools = () => {
|
|
|
10782
11137
|
)}
|
|
10783
11138
|
>
|
|
10784
11139
|
<TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
|
|
10785
|
-
localStore={localStore}
|
|
10786
|
-
setLocalStore={setLocalStore}
|
|
11140
|
+
localStore={props.localStore}
|
|
11141
|
+
setLocalStore={props.setLocalStore}
|
|
10787
11142
|
/></Show></TransitionGroup>
|
|
10788
11143
|
<TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
|
|
10789
11144
|
class={clsx(
|
|
10790
|
-
styles.devtoolsBtn,
|
|
10791
|
-
styles[`devtoolsBtn-position-${buttonPosition()}`]
|
|
11145
|
+
styles().devtoolsBtn,
|
|
11146
|
+
styles()[`devtoolsBtn-position-${buttonPosition()}`]
|
|
10792
11147
|
)}
|
|
10793
11148
|
>
|
|
10794
11149
|
<div aria-hidden="true"><TanstackLogo /></div>
|
|
10795
11150
|
<button
|
|
10796
11151
|
aria-label="Open Tanstack query devtools"
|
|
10797
|
-
onClick={() => setLocalStore("open", "true")}
|
|
11152
|
+
onClick={() => props.setLocalStore("open", "true")}
|
|
10798
11153
|
><TanstackLogo /></button>
|
|
10799
11154
|
</div></Show></TransitionGroup>
|
|
10800
11155
|
</div>;
|
|
10801
11156
|
};
|
|
10802
11157
|
var DevtoolsPanel = (props) => {
|
|
10803
|
-
const
|
|
11158
|
+
const theme = useTheme();
|
|
11159
|
+
const styles = createMemo(() => {
|
|
11160
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11161
|
+
});
|
|
10804
11162
|
const [isResizing, setIsResizing] = createSignal(false);
|
|
10805
11163
|
const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
|
|
10806
11164
|
const sortOrder = createMemo(
|
|
@@ -10917,14 +11275,25 @@ var DevtoolsPanel = (props) => {
|
|
|
10917
11275
|
});
|
|
10918
11276
|
});
|
|
10919
11277
|
});
|
|
11278
|
+
const getPanelDynamicStyles = () => {
|
|
11279
|
+
const { colors } = tokens;
|
|
11280
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11281
|
+
if (panelWidth() < secondBreakpoint) {
|
|
11282
|
+
return u`
|
|
11283
|
+
flex-direction: column;
|
|
11284
|
+
background-color: ${t2(colors.gray[300], colors.gray[600])};
|
|
11285
|
+
`;
|
|
11286
|
+
}
|
|
11287
|
+
return u`
|
|
11288
|
+
flex-direction: row;
|
|
11289
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[900])};
|
|
11290
|
+
`;
|
|
11291
|
+
};
|
|
10920
11292
|
return <aside
|
|
10921
11293
|
class={clsx(
|
|
10922
|
-
styles.panel,
|
|
10923
|
-
styles[`panel-position-${position()}`],
|
|
10924
|
-
|
|
10925
|
-
flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
|
|
10926
|
-
background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
|
|
10927
|
-
`,
|
|
11294
|
+
styles().panel,
|
|
11295
|
+
styles()[`panel-position-${position()}`],
|
|
11296
|
+
getPanelDynamicStyles(),
|
|
10928
11297
|
{
|
|
10929
11298
|
[u`
|
|
10930
11299
|
min-width: min-content;
|
|
@@ -10941,8 +11310,8 @@ var DevtoolsPanel = (props) => {
|
|
|
10941
11310
|
>
|
|
10942
11311
|
<div
|
|
10943
11312
|
class={clsx(
|
|
10944
|
-
styles.dragHandle,
|
|
10945
|
-
styles[`dragHandle-position-${position()}`],
|
|
11313
|
+
styles().dragHandle,
|
|
11314
|
+
styles()[`dragHandle-position-${position()}`],
|
|
10946
11315
|
"tsqd-drag-handle"
|
|
10947
11316
|
)}
|
|
10948
11317
|
onMouseDown={handleDragStart}
|
|
@@ -10950,8 +11319,8 @@ var DevtoolsPanel = (props) => {
|
|
|
10950
11319
|
<button
|
|
10951
11320
|
aria-label="Close tanstack query devtools"
|
|
10952
11321
|
class={clsx(
|
|
10953
|
-
styles.closeBtn,
|
|
10954
|
-
styles[`closeBtn-position-${position()}`],
|
|
11322
|
+
styles().closeBtn,
|
|
11323
|
+
styles()[`closeBtn-position-${position()}`],
|
|
10955
11324
|
"tsqd-minimize-btn"
|
|
10956
11325
|
)}
|
|
10957
11326
|
onClick={() => props.setLocalStore("open", "false")}
|
|
@@ -10959,7 +11328,7 @@ var DevtoolsPanel = (props) => {
|
|
|
10959
11328
|
<div
|
|
10960
11329
|
ref={queriesContainerRef}
|
|
10961
11330
|
class={clsx(
|
|
10962
|
-
styles.queriesContainer,
|
|
11331
|
+
styles().queriesContainer,
|
|
10963
11332
|
panelWidth() < secondBreakpoint && selectedQueryHash() && u`
|
|
10964
11333
|
height: 50%;
|
|
10965
11334
|
max-height: 50%;
|
|
@@ -10967,15 +11336,18 @@ var DevtoolsPanel = (props) => {
|
|
|
10967
11336
|
"tsqd-queries-container"
|
|
10968
11337
|
)}
|
|
10969
11338
|
>
|
|
10970
|
-
<div class={clsx(styles.row, "tsqd-header")}>
|
|
11339
|
+
<div class={clsx(styles().row, "tsqd-header")}>
|
|
10971
11340
|
<button
|
|
10972
|
-
class={clsx(styles.logo, "tsqd-text-logo-container")}
|
|
11341
|
+
class={clsx(styles().logo, "tsqd-text-logo-container")}
|
|
10973
11342
|
onClick={() => props.setLocalStore("open", "false")}
|
|
10974
11343
|
aria-label="Close Tanstack query devtools"
|
|
10975
11344
|
>
|
|
10976
|
-
<span class={clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
|
|
11345
|
+
<span class={clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
|
|
10977
11346
|
<span
|
|
10978
|
-
class={clsx(
|
|
11347
|
+
class={clsx(
|
|
11348
|
+
styles().queryFlavorLogo,
|
|
11349
|
+
"tsqd-text-logo-query-flavor"
|
|
11350
|
+
)}
|
|
10979
11351
|
>
|
|
10980
11352
|
{useQueryDevtoolsContext().queryFlavor}
|
|
10981
11353
|
{" v"}
|
|
@@ -10986,17 +11358,17 @@ var DevtoolsPanel = (props) => {
|
|
|
10986
11358
|
</div>
|
|
10987
11359
|
<div
|
|
10988
11360
|
class={clsx(
|
|
10989
|
-
styles.row,
|
|
11361
|
+
styles().row,
|
|
10990
11362
|
u`
|
|
10991
11363
|
gap: ${tokens.size[2.5]};
|
|
10992
11364
|
`,
|
|
10993
11365
|
"tsqd-filters-actions-container"
|
|
10994
11366
|
)}
|
|
10995
11367
|
>
|
|
10996
|
-
<div class={clsx(styles.filtersContainer, "tsqd-filters-container")}>
|
|
11368
|
+
<div class={clsx(styles().filtersContainer, "tsqd-filters-container")}>
|
|
10997
11369
|
<div
|
|
10998
11370
|
class={clsx(
|
|
10999
|
-
styles.filterInput,
|
|
11371
|
+
styles().filterInput,
|
|
11000
11372
|
"tsqd-query-filter-textfield-container"
|
|
11001
11373
|
)}
|
|
11002
11374
|
>
|
|
@@ -11012,7 +11384,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11012
11384
|
</div>
|
|
11013
11385
|
<div
|
|
11014
11386
|
class={clsx(
|
|
11015
|
-
styles.filterSelect,
|
|
11387
|
+
styles().filterSelect,
|
|
11016
11388
|
"tsqd-query-filter-sort-container"
|
|
11017
11389
|
)}
|
|
11018
11390
|
>
|
|
@@ -11043,13 +11415,13 @@ var DevtoolsPanel = (props) => {
|
|
|
11043
11415
|
</Show>
|
|
11044
11416
|
</button>
|
|
11045
11417
|
</div>
|
|
11046
|
-
<div class={clsx(styles.actionsContainer, "tsqd-actions-container")}>
|
|
11418
|
+
<div class={clsx(styles().actionsContainer, "tsqd-actions-container")}>
|
|
11047
11419
|
<button
|
|
11048
11420
|
onClick={() => {
|
|
11049
11421
|
cache().clear();
|
|
11050
11422
|
}}
|
|
11051
11423
|
class={clsx(
|
|
11052
|
-
styles.actionsBtn,
|
|
11424
|
+
styles().actionsBtn,
|
|
11053
11425
|
"tsqd-actions-btn",
|
|
11054
11426
|
"tsqd-action-clear-cache"
|
|
11055
11427
|
)}
|
|
@@ -11067,7 +11439,8 @@ var DevtoolsPanel = (props) => {
|
|
|
11067
11439
|
}
|
|
11068
11440
|
}}
|
|
11069
11441
|
class={clsx(
|
|
11070
|
-
styles.actionsBtn,
|
|
11442
|
+
styles().actionsBtn,
|
|
11443
|
+
offline() && styles().actionsBtnOffline,
|
|
11071
11444
|
"tsqd-actions-btn",
|
|
11072
11445
|
"tsqd-action-mock-offline-behavior"
|
|
11073
11446
|
)}
|
|
@@ -11078,24 +11451,24 @@ var DevtoolsPanel = (props) => {
|
|
|
11078
11451
|
<index$d.Root gutter={4}>
|
|
11079
11452
|
<index$d.Trigger
|
|
11080
11453
|
class={clsx(
|
|
11081
|
-
styles.actionsBtn,
|
|
11454
|
+
styles().actionsBtn,
|
|
11082
11455
|
"tsqd-actions-btn",
|
|
11083
11456
|
"tsqd-action-settings"
|
|
11084
11457
|
)}
|
|
11085
11458
|
><Settings /></index$d.Trigger>
|
|
11086
11459
|
<index$d.Portal><index$d.Content
|
|
11087
|
-
class={clsx(styles.settingsMenu, "tsqd-settings-menu")}
|
|
11460
|
+
class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
|
|
11088
11461
|
>
|
|
11089
11462
|
<div
|
|
11090
11463
|
class={clsx(
|
|
11091
|
-
styles.settingsMenuHeader,
|
|
11464
|
+
styles().settingsMenuHeader,
|
|
11092
11465
|
"tsqd-settings-menu-header"
|
|
11093
11466
|
)}
|
|
11094
11467
|
>Settings</div>
|
|
11095
11468
|
<index$d.Sub overlap gutter={8} shift={-4}>
|
|
11096
11469
|
<index$d.SubTrigger
|
|
11097
11470
|
class={clsx(
|
|
11098
|
-
styles.settingsSubTrigger,
|
|
11471
|
+
styles().settingsSubTrigger,
|
|
11099
11472
|
"tsqd-settings-menu-sub-trigger",
|
|
11100
11473
|
"tsqd-settings-menu-sub-trigger-position"
|
|
11101
11474
|
)}
|
|
@@ -11104,7 +11477,10 @@ var DevtoolsPanel = (props) => {
|
|
|
11104
11477
|
<ChevronDown />
|
|
11105
11478
|
</index$d.SubTrigger>
|
|
11106
11479
|
<index$d.Portal><index$d.SubContent
|
|
11107
|
-
class={clsx(
|
|
11480
|
+
class={clsx(
|
|
11481
|
+
styles().settingsMenu,
|
|
11482
|
+
"tsqd-settings-submenu"
|
|
11483
|
+
)}
|
|
11108
11484
|
>
|
|
11109
11485
|
<index$d.Item
|
|
11110
11486
|
onSelect={() => {
|
|
@@ -11112,7 +11488,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11112
11488
|
}}
|
|
11113
11489
|
as="button"
|
|
11114
11490
|
class={clsx(
|
|
11115
|
-
styles.settingsSubButton,
|
|
11491
|
+
styles().settingsSubButton,
|
|
11116
11492
|
"tsqd-settings-menu-position-btn",
|
|
11117
11493
|
"tsqd-settings-menu-position-btn-top"
|
|
11118
11494
|
)}
|
|
@@ -11126,7 +11502,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11126
11502
|
}}
|
|
11127
11503
|
as="button"
|
|
11128
11504
|
class={clsx(
|
|
11129
|
-
styles.settingsSubButton,
|
|
11505
|
+
styles().settingsSubButton,
|
|
11130
11506
|
"tsqd-settings-menu-position-btn",
|
|
11131
11507
|
"tsqd-settings-menu-position-btn-bottom"
|
|
11132
11508
|
)}
|
|
@@ -11140,7 +11516,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11140
11516
|
}}
|
|
11141
11517
|
as="button"
|
|
11142
11518
|
class={clsx(
|
|
11143
|
-
styles.settingsSubButton,
|
|
11519
|
+
styles().settingsSubButton,
|
|
11144
11520
|
"tsqd-settings-menu-position-btn",
|
|
11145
11521
|
"tsqd-settings-menu-position-btn-left"
|
|
11146
11522
|
)}
|
|
@@ -11154,7 +11530,7 @@ var DevtoolsPanel = (props) => {
|
|
|
11154
11530
|
}}
|
|
11155
11531
|
as="button"
|
|
11156
11532
|
class={clsx(
|
|
11157
|
-
styles.settingsSubButton,
|
|
11533
|
+
styles().settingsSubButton,
|
|
11158
11534
|
"tsqd-settings-menu-position-btn",
|
|
11159
11535
|
"tsqd-settings-menu-position-btn-right"
|
|
11160
11536
|
)}
|
|
@@ -11164,13 +11540,77 @@ var DevtoolsPanel = (props) => {
|
|
|
11164
11540
|
</index$d.Item>
|
|
11165
11541
|
</index$d.SubContent></index$d.Portal>
|
|
11166
11542
|
</index$d.Sub>
|
|
11543
|
+
<index$d.Sub overlap gutter={8} shift={-4}>
|
|
11544
|
+
<index$d.SubTrigger
|
|
11545
|
+
class={clsx(
|
|
11546
|
+
styles().settingsSubTrigger,
|
|
11547
|
+
"tsqd-settings-menu-sub-trigger",
|
|
11548
|
+
"tsqd-settings-menu-sub-trigger-position"
|
|
11549
|
+
)}
|
|
11550
|
+
>
|
|
11551
|
+
<span>Theme</span>
|
|
11552
|
+
<ChevronDown />
|
|
11553
|
+
</index$d.SubTrigger>
|
|
11554
|
+
<index$d.Portal><index$d.SubContent
|
|
11555
|
+
class={clsx(
|
|
11556
|
+
styles().settingsMenu,
|
|
11557
|
+
"tsqd-settings-submenu"
|
|
11558
|
+
)}
|
|
11559
|
+
>
|
|
11560
|
+
<index$d.Item
|
|
11561
|
+
onSelect={() => {
|
|
11562
|
+
props.setLocalStore("theme_preference", "light");
|
|
11563
|
+
}}
|
|
11564
|
+
as="button"
|
|
11565
|
+
class={clsx(
|
|
11566
|
+
styles().settingsSubButton,
|
|
11567
|
+
props.localStore.theme_preference === "light" && styles().themeSelectedButton,
|
|
11568
|
+
"tsqd-settings-menu-position-btn",
|
|
11569
|
+
"tsqd-settings-menu-position-btn-top"
|
|
11570
|
+
)}
|
|
11571
|
+
>
|
|
11572
|
+
<span>Light</span>
|
|
11573
|
+
<Sun />
|
|
11574
|
+
</index$d.Item>
|
|
11575
|
+
<index$d.Item
|
|
11576
|
+
onSelect={() => {
|
|
11577
|
+
props.setLocalStore("theme_preference", "dark");
|
|
11578
|
+
}}
|
|
11579
|
+
as="button"
|
|
11580
|
+
class={clsx(
|
|
11581
|
+
styles().settingsSubButton,
|
|
11582
|
+
props.localStore.theme_preference === "dark" && styles().themeSelectedButton,
|
|
11583
|
+
"tsqd-settings-menu-position-btn",
|
|
11584
|
+
"tsqd-settings-menu-position-btn-bottom"
|
|
11585
|
+
)}
|
|
11586
|
+
>
|
|
11587
|
+
<span>Dark</span>
|
|
11588
|
+
<Moon />
|
|
11589
|
+
</index$d.Item>
|
|
11590
|
+
<index$d.Item
|
|
11591
|
+
onSelect={() => {
|
|
11592
|
+
props.setLocalStore("theme_preference", "system");
|
|
11593
|
+
}}
|
|
11594
|
+
as="button"
|
|
11595
|
+
class={clsx(
|
|
11596
|
+
styles().settingsSubButton,
|
|
11597
|
+
props.localStore.theme_preference === "system" && styles().themeSelectedButton,
|
|
11598
|
+
"tsqd-settings-menu-position-btn",
|
|
11599
|
+
"tsqd-settings-menu-position-btn-left"
|
|
11600
|
+
)}
|
|
11601
|
+
>
|
|
11602
|
+
<span>System</span>
|
|
11603
|
+
<Monitor />
|
|
11604
|
+
</index$d.Item>
|
|
11605
|
+
</index$d.SubContent></index$d.Portal>
|
|
11606
|
+
</index$d.Sub>
|
|
11167
11607
|
</index$d.Content></index$d.Portal>
|
|
11168
11608
|
</index$d.Root>
|
|
11169
11609
|
</div>
|
|
11170
11610
|
</div>
|
|
11171
11611
|
<div
|
|
11172
11612
|
class={clsx(
|
|
11173
|
-
styles.overflowQueryContainer,
|
|
11613
|
+
styles().overflowQueryContainer,
|
|
11174
11614
|
"tsqd-queries-overflow-container"
|
|
11175
11615
|
)}
|
|
11176
11616
|
><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
|
|
@@ -11179,7 +11619,12 @@ var DevtoolsPanel = (props) => {
|
|
|
11179
11619
|
</aside>;
|
|
11180
11620
|
};
|
|
11181
11621
|
var QueryRow = (props) => {
|
|
11182
|
-
const
|
|
11622
|
+
const theme = useTheme();
|
|
11623
|
+
const styles = createMemo(() => {
|
|
11624
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11625
|
+
});
|
|
11626
|
+
const { colors, alpha } = tokens;
|
|
11627
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11183
11628
|
const queryState = createSubscribeToQueryCacheBatcher(
|
|
11184
11629
|
(queryCache) => queryCache().find({
|
|
11185
11630
|
queryKey: props.query.queryKey
|
|
@@ -11207,28 +11652,34 @@ var QueryRow = (props) => {
|
|
|
11207
11652
|
isStale: isStale()
|
|
11208
11653
|
})
|
|
11209
11654
|
);
|
|
11655
|
+
const getObserverCountColorStyles = () => {
|
|
11656
|
+
if (color() === "gray") {
|
|
11657
|
+
return u`
|
|
11658
|
+
background-color: ${t2(colors[color()][200], colors[color()][700])};
|
|
11659
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11660
|
+
`;
|
|
11661
|
+
}
|
|
11662
|
+
return u`
|
|
11663
|
+
background-color: ${t2(
|
|
11664
|
+
colors[color()][200] + alpha[80],
|
|
11665
|
+
colors[color()][900]
|
|
11666
|
+
)};
|
|
11667
|
+
color: ${t2(colors[color()][800], colors[color()][300])};
|
|
11668
|
+
`;
|
|
11669
|
+
};
|
|
11210
11670
|
return <Show when={queryState()}><button
|
|
11211
11671
|
onClick={() => setSelectedQueryHash(
|
|
11212
11672
|
props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash
|
|
11213
11673
|
)}
|
|
11214
11674
|
class={clsx(
|
|
11215
|
-
styles.queryRow,
|
|
11216
|
-
selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow,
|
|
11675
|
+
styles().queryRow,
|
|
11676
|
+
selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow,
|
|
11217
11677
|
"tsqd-query-row"
|
|
11218
11678
|
)}
|
|
11219
11679
|
aria-label={`Query key ${props.query.queryHash}`}
|
|
11220
11680
|
>
|
|
11221
11681
|
<div
|
|
11222
|
-
class={clsx(
|
|
11223
|
-
color() === "gray" ? u`
|
|
11224
|
-
background-color: ${tokens.colors[color()][700]};
|
|
11225
|
-
color: ${tokens.colors[color()][300]};
|
|
11226
|
-
` : u`
|
|
11227
|
-
background-color: ${tokens.colors[color()][900]};
|
|
11228
|
-
color: ${tokens.colors[color()][300]};
|
|
11229
|
-
`,
|
|
11230
|
-
"tsqd-query-observer-count"
|
|
11231
|
-
)}
|
|
11682
|
+
class={clsx(getObserverCountColorStyles(), "tsqd-query-observer-count")}
|
|
11232
11683
|
>{observers()}</div>
|
|
11233
11684
|
<code class="tsqd-query-hash">{props.query.queryHash}</code>
|
|
11234
11685
|
<Show when={isDisabled()}><div class="tsqd-query-disabled-indicator">disabled</div></Show>
|
|
@@ -11250,8 +11701,13 @@ var QueryStatusCount = () => {
|
|
|
11250
11701
|
const inactive = createSubscribeToQueryCacheBatcher(
|
|
11251
11702
|
(queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length
|
|
11252
11703
|
);
|
|
11253
|
-
const
|
|
11254
|
-
|
|
11704
|
+
const theme = useTheme();
|
|
11705
|
+
const styles = createMemo(() => {
|
|
11706
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11707
|
+
});
|
|
11708
|
+
return <div
|
|
11709
|
+
class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
|
|
11710
|
+
>
|
|
11255
11711
|
<QueryStatus label="Fresh" color="green" count={fresh()} />
|
|
11256
11712
|
<QueryStatus label="Fetching" color="blue" count={fetching()} />
|
|
11257
11713
|
<QueryStatus label="Paused" color="purple" count={paused()} />
|
|
@@ -11260,7 +11716,12 @@ var QueryStatusCount = () => {
|
|
|
11260
11716
|
</div>;
|
|
11261
11717
|
};
|
|
11262
11718
|
var QueryStatus = (props) => {
|
|
11263
|
-
const
|
|
11719
|
+
const theme = useTheme();
|
|
11720
|
+
const styles = createMemo(() => {
|
|
11721
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11722
|
+
});
|
|
11723
|
+
const { colors, alpha } = tokens;
|
|
11724
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11264
11725
|
let tagRef;
|
|
11265
11726
|
const [mouseOver, setMouseOver] = createSignal(false);
|
|
11266
11727
|
const [focused, setFocused] = createSignal(false);
|
|
@@ -11286,11 +11747,11 @@ var QueryStatus = (props) => {
|
|
|
11286
11747
|
disabled={showLabel()}
|
|
11287
11748
|
ref={tagRef}
|
|
11288
11749
|
class={clsx(
|
|
11289
|
-
styles.queryStatusTag,
|
|
11750
|
+
styles().queryStatusTag,
|
|
11290
11751
|
!showLabel() && u`
|
|
11291
11752
|
cursor: pointer;
|
|
11292
11753
|
&:hover {
|
|
11293
|
-
background: ${
|
|
11754
|
+
background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
|
|
11294
11755
|
}
|
|
11295
11756
|
`,
|
|
11296
11757
|
"tsqd-query-status-tag",
|
|
@@ -11303,7 +11764,7 @@ var QueryStatus = (props) => {
|
|
|
11303
11764
|
<Show when={!showLabel() && (mouseOver() || focused())}><div
|
|
11304
11765
|
role="tooltip"
|
|
11305
11766
|
id="tsqd-status-tooltip"
|
|
11306
|
-
class={clsx(styles.statusTooltip, "tsqd-query-status-tooltip")}
|
|
11767
|
+
class={clsx(styles().statusTooltip, "tsqd-query-status-tooltip")}
|
|
11307
11768
|
>{props.label}</div></Show>
|
|
11308
11769
|
<span
|
|
11309
11770
|
class={clsx(
|
|
@@ -11317,24 +11778,33 @@ var QueryStatus = (props) => {
|
|
|
11317
11778
|
)}
|
|
11318
11779
|
/>
|
|
11319
11780
|
<Show when={showLabel()}><span
|
|
11320
|
-
class={clsx(
|
|
11781
|
+
class={clsx(
|
|
11782
|
+
styles().queryStatusTagLabel,
|
|
11783
|
+
"tsqd-query-status-tag-label"
|
|
11784
|
+
)}
|
|
11321
11785
|
>{props.label}</span></Show>
|
|
11322
11786
|
<span
|
|
11323
11787
|
class={clsx(
|
|
11324
|
-
styles.queryStatusCount,
|
|
11325
|
-
props.count > 0 && props.color !== "gray"
|
|
11326
|
-
|
|
11327
|
-
|
|
11328
|
-
|
|
11329
|
-
|
|
11330
|
-
|
|
11788
|
+
styles().queryStatusCount,
|
|
11789
|
+
props.count > 0 && props.color !== "gray" && u`
|
|
11790
|
+
background-color: ${t2(
|
|
11791
|
+
colors[props.color][100],
|
|
11792
|
+
colors[props.color][900]
|
|
11793
|
+
)};
|
|
11794
|
+
color: ${t2(colors[props.color][700], colors[props.color][300])};
|
|
11795
|
+
`,
|
|
11331
11796
|
"tsqd-query-status-tag-count"
|
|
11332
11797
|
)}
|
|
11333
11798
|
>{props.count}</span>
|
|
11334
11799
|
</button>;
|
|
11335
11800
|
};
|
|
11336
11801
|
var QueryDetails = () => {
|
|
11337
|
-
const
|
|
11802
|
+
const theme = useTheme();
|
|
11803
|
+
const styles = createMemo(() => {
|
|
11804
|
+
return theme() === "dark" ? darkStyles2 : lightStyles2;
|
|
11805
|
+
});
|
|
11806
|
+
const { colors } = tokens;
|
|
11807
|
+
const t2 = (light, dark) => theme() === "dark" ? dark : light;
|
|
11338
11808
|
const queryClient = useQueryDevtoolsContext().client;
|
|
11339
11809
|
const [restoringLoading, setRestoringLoading] = createSignal(false);
|
|
11340
11810
|
const errorTypes = createMemo(() => {
|
|
@@ -11405,26 +11875,34 @@ var QueryDetails = () => {
|
|
|
11405
11875
|
setRestoringLoading(false);
|
|
11406
11876
|
}
|
|
11407
11877
|
});
|
|
11408
|
-
|
|
11409
|
-
|
|
11878
|
+
const getQueryStatusColors = () => {
|
|
11879
|
+
if (color() === "gray") {
|
|
11880
|
+
return u`
|
|
11881
|
+
background-color: ${t2(colors[color()][200], colors[color()][700])};
|
|
11882
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11883
|
+
border-color: ${t2(colors[color()][400], colors[color()][600])};
|
|
11884
|
+
`;
|
|
11885
|
+
}
|
|
11886
|
+
return u`
|
|
11887
|
+
background-color: ${t2(colors[color()][100], colors[color()][900])};
|
|
11888
|
+
color: ${t2(colors[color()][700], colors[color()][300])};
|
|
11889
|
+
border-color: ${t2(colors[color()][400], colors[color()][600])};
|
|
11890
|
+
`;
|
|
11891
|
+
};
|
|
11892
|
+
return <Show when={activeQuery() && activeQueryState()}><div
|
|
11893
|
+
class={clsx(styles().detailsContainer, "tsqd-query-details-container")}
|
|
11894
|
+
>
|
|
11895
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Details</div>
|
|
11410
11896
|
<div
|
|
11411
|
-
class={clsx(
|
|
11897
|
+
class={clsx(
|
|
11898
|
+
styles().detailsBody,
|
|
11899
|
+
"tsqd-query-details-summary-container"
|
|
11900
|
+
)}
|
|
11412
11901
|
>
|
|
11413
11902
|
<div class="tsqd-query-details-summary">
|
|
11414
11903
|
<pre><code>{displayValue(activeQuery().queryKey, true)}</code></pre>
|
|
11415
11904
|
<span
|
|
11416
|
-
class={clsx(
|
|
11417
|
-
styles.queryDetailsStatus,
|
|
11418
|
-
color() === "gray" ? u`
|
|
11419
|
-
background-color: ${tokens.colors[color()][700]};
|
|
11420
|
-
color: ${tokens.colors[color()][300]};
|
|
11421
|
-
border-color: ${tokens.colors[color()][600]};
|
|
11422
|
-
` : u`
|
|
11423
|
-
background-color: ${tokens.colors[color()][900]};
|
|
11424
|
-
color: ${tokens.colors[color()][300]};
|
|
11425
|
-
border-color: ${tokens.colors[color()][600]};
|
|
11426
|
-
`
|
|
11427
|
-
)}
|
|
11905
|
+
class={clsx(styles().queryDetailsStatus, getQueryStatusColors())}
|
|
11428
11906
|
>{statusLabel()}</span>
|
|
11429
11907
|
</div>
|
|
11430
11908
|
<div class="tsqd-query-details-observers-count">
|
|
@@ -11436,14 +11914,17 @@ var QueryDetails = () => {
|
|
|
11436
11914
|
<span>{new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString()}</span>
|
|
11437
11915
|
</div>
|
|
11438
11916
|
</div>
|
|
11439
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Actions</div>
|
|
11917
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Actions</div>
|
|
11440
11918
|
<div
|
|
11441
|
-
class={clsx(
|
|
11919
|
+
class={clsx(
|
|
11920
|
+
styles().actionsBody,
|
|
11921
|
+
"tsqd-query-details-actions-container"
|
|
11922
|
+
)}
|
|
11442
11923
|
>
|
|
11443
11924
|
<button
|
|
11444
11925
|
class={clsx(
|
|
11445
11926
|
u`
|
|
11446
|
-
color: ${
|
|
11927
|
+
color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11447
11928
|
`,
|
|
11448
11929
|
"tsqd-query-details-actions-btn",
|
|
11449
11930
|
"tsqd-query-details-action-refetch"
|
|
@@ -11453,7 +11934,7 @@ var QueryDetails = () => {
|
|
|
11453
11934
|
>
|
|
11454
11935
|
<span
|
|
11455
11936
|
class={u`
|
|
11456
|
-
background-color: ${
|
|
11937
|
+
background-color: ${t2(colors.blue[600], colors.blue[400])};
|
|
11457
11938
|
`}
|
|
11458
11939
|
/>
|
|
11459
11940
|
{"Refetch"}
|
|
@@ -11461,7 +11942,7 @@ var QueryDetails = () => {
|
|
|
11461
11942
|
<button
|
|
11462
11943
|
class={clsx(
|
|
11463
11944
|
u`
|
|
11464
|
-
color: ${
|
|
11945
|
+
color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11465
11946
|
`,
|
|
11466
11947
|
"tsqd-query-details-actions-btn",
|
|
11467
11948
|
"tsqd-query-details-action-invalidate"
|
|
@@ -11471,7 +11952,7 @@ var QueryDetails = () => {
|
|
|
11471
11952
|
>
|
|
11472
11953
|
<span
|
|
11473
11954
|
class={u`
|
|
11474
|
-
background-color: ${
|
|
11955
|
+
background-color: ${t2(colors.yellow[600], colors.yellow[400])};
|
|
11475
11956
|
`}
|
|
11476
11957
|
/>
|
|
11477
11958
|
{"Invalidate"}
|
|
@@ -11479,7 +11960,7 @@ var QueryDetails = () => {
|
|
|
11479
11960
|
<button
|
|
11480
11961
|
class={clsx(
|
|
11481
11962
|
u`
|
|
11482
|
-
color: ${
|
|
11963
|
+
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11483
11964
|
`,
|
|
11484
11965
|
"tsqd-query-details-actions-btn",
|
|
11485
11966
|
"tsqd-query-details-action-reset"
|
|
@@ -11489,7 +11970,7 @@ var QueryDetails = () => {
|
|
|
11489
11970
|
>
|
|
11490
11971
|
<span
|
|
11491
11972
|
class={u`
|
|
11492
|
-
background-color: ${
|
|
11973
|
+
background-color: ${t2(colors.gray[600], colors.gray[400])};
|
|
11493
11974
|
`}
|
|
11494
11975
|
/>
|
|
11495
11976
|
{"Reset"}
|
|
@@ -11497,7 +11978,7 @@ var QueryDetails = () => {
|
|
|
11497
11978
|
<button
|
|
11498
11979
|
class={clsx(
|
|
11499
11980
|
u`
|
|
11500
|
-
color: ${
|
|
11981
|
+
color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11501
11982
|
`,
|
|
11502
11983
|
"tsqd-query-details-actions-btn",
|
|
11503
11984
|
"tsqd-query-details-action-remove"
|
|
@@ -11510,7 +11991,7 @@ var QueryDetails = () => {
|
|
|
11510
11991
|
>
|
|
11511
11992
|
<span
|
|
11512
11993
|
class={u`
|
|
11513
|
-
background-color: ${
|
|
11994
|
+
background-color: ${t2(colors.pink[500], colors.pink[400])};
|
|
11514
11995
|
`}
|
|
11515
11996
|
/>
|
|
11516
11997
|
{"Remove"}
|
|
@@ -11518,7 +11999,7 @@ var QueryDetails = () => {
|
|
|
11518
11999
|
<button
|
|
11519
12000
|
class={clsx(
|
|
11520
12001
|
u`
|
|
11521
|
-
color: ${
|
|
12002
|
+
color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11522
12003
|
`,
|
|
11523
12004
|
"tsqd-query-details-actions-btn",
|
|
11524
12005
|
"tsqd-query-details-action-loading"
|
|
@@ -11555,7 +12036,7 @@ var QueryDetails = () => {
|
|
|
11555
12036
|
>
|
|
11556
12037
|
<span
|
|
11557
12038
|
class={u`
|
|
11558
|
-
background-color: ${
|
|
12039
|
+
background-color: ${t2(colors.cyan[500], colors.cyan[400])};
|
|
11559
12040
|
`}
|
|
11560
12041
|
/>
|
|
11561
12042
|
{queryStatus() === "pending" ? "Restore" : "Trigger"}
|
|
@@ -11564,7 +12045,7 @@ var QueryDetails = () => {
|
|
|
11564
12045
|
<Show when={errorTypes().length === 0 || queryStatus() === "error"}><button
|
|
11565
12046
|
class={clsx(
|
|
11566
12047
|
u`
|
|
11567
|
-
color: ${
|
|
12048
|
+
color: ${t2(colors.red[500], colors.red[400])};
|
|
11568
12049
|
`,
|
|
11569
12050
|
"tsqd-query-details-actions-btn",
|
|
11570
12051
|
"tsqd-query-details-action-error"
|
|
@@ -11580,7 +12061,7 @@ var QueryDetails = () => {
|
|
|
11580
12061
|
>
|
|
11581
12062
|
<span
|
|
11582
12063
|
class={u`
|
|
11583
|
-
background-color: ${
|
|
12064
|
+
background-color: ${t2(colors.red[500], colors.red[400])};
|
|
11584
12065
|
`}
|
|
11585
12066
|
/>
|
|
11586
12067
|
{queryStatus() === "error" ? "Restore" : "Trigger"}
|
|
@@ -11590,7 +12071,7 @@ var QueryDetails = () => {
|
|
|
11590
12071
|
when={!(errorTypes().length === 0 || queryStatus() === "error")}
|
|
11591
12072
|
><div
|
|
11592
12073
|
class={clsx(
|
|
11593
|
-
styles.actionsSelect,
|
|
12074
|
+
styles().actionsSelect,
|
|
11594
12075
|
"tsqd-query-details-actions-btn",
|
|
11595
12076
|
"tsqd-query-details-action-error-multiple"
|
|
11596
12077
|
)}
|
|
@@ -11605,7 +12086,7 @@ var QueryDetails = () => {
|
|
|
11605
12086
|
disabled={queryStatus() === "pending"}
|
|
11606
12087
|
onChange={(e2) => {
|
|
11607
12088
|
const errorType = errorTypes().find(
|
|
11608
|
-
(
|
|
12089
|
+
(et) => et.name === e2.currentTarget.value
|
|
11609
12090
|
);
|
|
11610
12091
|
triggerError(errorType);
|
|
11611
12092
|
}}
|
|
@@ -11616,7 +12097,7 @@ var QueryDetails = () => {
|
|
|
11616
12097
|
<ChevronDown />
|
|
11617
12098
|
</div></Show>
|
|
11618
12099
|
</div>
|
|
11619
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
|
|
12100
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
|
|
11620
12101
|
<div
|
|
11621
12102
|
style={{
|
|
11622
12103
|
padding: "0.5rem"
|
|
@@ -11626,9 +12107,10 @@ var QueryDetails = () => {
|
|
|
11626
12107
|
label="Data"
|
|
11627
12108
|
defaultExpanded={["Data"]}
|
|
11628
12109
|
value={activeQueryStateData()}
|
|
11629
|
-
|
|
12110
|
+
editable={true}
|
|
12111
|
+
activeQuery={activeQuery()}
|
|
11630
12112
|
/></div>
|
|
11631
|
-
<div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
|
|
12113
|
+
<div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
|
|
11632
12114
|
<div
|
|
11633
12115
|
style={{
|
|
11634
12116
|
padding: "0.5rem"
|
|
@@ -11678,8 +12160,9 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
|
|
|
11678
12160
|
});
|
|
11679
12161
|
return value;
|
|
11680
12162
|
};
|
|
11681
|
-
var
|
|
12163
|
+
var stylesFactory2 = (theme) => {
|
|
11682
12164
|
const { colors, font, size: size2, alpha, shadow, border } = tokens;
|
|
12165
|
+
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
11683
12166
|
return {
|
|
11684
12167
|
devtoolsBtn: u`
|
|
11685
12168
|
z-index: 100000;
|
|
@@ -11741,8 +12224,6 @@ var getStyles2 = () => {
|
|
|
11741
12224
|
display: flex;
|
|
11742
12225
|
gap: ${tokens.size[0.5]};
|
|
11743
12226
|
& * {
|
|
11744
|
-
font-family: 'Inter', sans-serif;
|
|
11745
|
-
color: ${colors.gray[300]};
|
|
11746
12227
|
box-sizing: border-box;
|
|
11747
12228
|
text-transform: none;
|
|
11748
12229
|
}
|
|
@@ -11769,7 +12250,7 @@ var getStyles2 = () => {
|
|
|
11769
12250
|
left: 0;
|
|
11770
12251
|
max-height: 90%;
|
|
11771
12252
|
min-height: 3.5rem;
|
|
11772
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12253
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11773
12254
|
`,
|
|
11774
12255
|
"panel-position-bottom": u`
|
|
11775
12256
|
bottom: 0;
|
|
@@ -11777,20 +12258,20 @@ var getStyles2 = () => {
|
|
|
11777
12258
|
left: 0;
|
|
11778
12259
|
max-height: 90%;
|
|
11779
12260
|
min-height: 3.5rem;
|
|
11780
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
12261
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11781
12262
|
`,
|
|
11782
12263
|
"panel-position-right": u`
|
|
11783
12264
|
bottom: 0;
|
|
11784
12265
|
right: 0;
|
|
11785
12266
|
top: 0;
|
|
11786
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
12267
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11787
12268
|
max-width: 90%;
|
|
11788
12269
|
`,
|
|
11789
12270
|
"panel-position-left": u`
|
|
11790
12271
|
bottom: 0;
|
|
11791
12272
|
left: 0;
|
|
11792
12273
|
top: 0;
|
|
11793
|
-
border-right: ${colors.darkGray[300]} 1px solid;
|
|
12274
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11794
12275
|
max-width: 90%;
|
|
11795
12276
|
`,
|
|
11796
12277
|
closeBtn: u`
|
|
@@ -11801,13 +12282,15 @@ var getStyles2 = () => {
|
|
|
11801
12282
|
align-items: center;
|
|
11802
12283
|
justify-content: center;
|
|
11803
12284
|
outline: none;
|
|
12285
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
11804
12286
|
&:hover {
|
|
11805
|
-
background-color: ${colors.darkGray[500]};
|
|
12287
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
11806
12288
|
}
|
|
11807
12289
|
&:focus-visible {
|
|
11808
12290
|
outline: 2px solid ${colors.blue[600]};
|
|
11809
12291
|
}
|
|
11810
12292
|
& svg {
|
|
12293
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
11811
12294
|
width: ${size2[2]};
|
|
11812
12295
|
height: ${size2[2]};
|
|
11813
12296
|
}
|
|
@@ -11816,11 +12299,10 @@ var getStyles2 = () => {
|
|
|
11816
12299
|
bottom: 0;
|
|
11817
12300
|
right: ${size2[2]};
|
|
11818
12301
|
transform: translate(0, 100%);
|
|
11819
|
-
|
|
11820
|
-
border-
|
|
11821
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
12302
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12303
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11822
12304
|
border-top: none;
|
|
11823
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12305
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11824
12306
|
border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
|
|
11825
12307
|
padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
|
|
11826
12308
|
|
|
@@ -11841,10 +12323,9 @@ var getStyles2 = () => {
|
|
|
11841
12323
|
top: 0;
|
|
11842
12324
|
right: ${size2[2]};
|
|
11843
12325
|
transform: translate(0, -100%);
|
|
11844
|
-
|
|
11845
|
-
border-
|
|
11846
|
-
border-
|
|
11847
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
12326
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12327
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12328
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11848
12329
|
border-bottom: none;
|
|
11849
12330
|
border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
|
|
11850
12331
|
padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
|
|
@@ -11862,11 +12343,10 @@ var getStyles2 = () => {
|
|
|
11862
12343
|
bottom: ${size2[2]};
|
|
11863
12344
|
left: 0;
|
|
11864
12345
|
transform: translate(-100%, 0);
|
|
11865
|
-
background-color: ${colors.darkGray[700]};
|
|
11866
12346
|
border-right: none;
|
|
11867
|
-
border-left: ${colors.darkGray[300]} 1px solid;
|
|
11868
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
11869
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12347
|
+
border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12348
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12349
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11870
12350
|
border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
|
|
11871
12351
|
padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
|
|
11872
12352
|
|
|
@@ -11886,11 +12366,10 @@ var getStyles2 = () => {
|
|
|
11886
12366
|
bottom: ${size2[2]};
|
|
11887
12367
|
right: 0;
|
|
11888
12368
|
transform: translate(100%, 0);
|
|
11889
|
-
background-color: ${colors.darkGray[700]};
|
|
11890
12369
|
border-left: none;
|
|
11891
|
-
border-right: ${colors.darkGray[300]} 1px solid;
|
|
11892
|
-
border-top: ${colors.darkGray[300]} 1px solid;
|
|
11893
|
-
border-bottom: ${colors.darkGray[300]} 1px solid;
|
|
12370
|
+
border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12371
|
+
border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
12372
|
+
border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
|
|
11894
12373
|
border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
|
|
11895
12374
|
padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
|
|
11896
12375
|
|
|
@@ -11908,15 +12387,18 @@ var getStyles2 = () => {
|
|
|
11908
12387
|
`,
|
|
11909
12388
|
queriesContainer: u`
|
|
11910
12389
|
flex: 1 1 700px;
|
|
11911
|
-
background-color: ${colors.darkGray[700]};
|
|
12390
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
11912
12391
|
display: flex;
|
|
11913
12392
|
flex-direction: column;
|
|
12393
|
+
& * {
|
|
12394
|
+
font-family: 'Inter', sans-serif;
|
|
12395
|
+
}
|
|
11914
12396
|
`,
|
|
11915
12397
|
dragHandle: u`
|
|
11916
12398
|
position: absolute;
|
|
11917
12399
|
transition: background-color 0.125s ease;
|
|
11918
12400
|
&:hover {
|
|
11919
|
-
background-color: ${colors.purple[400]}${alpha[90]};
|
|
12401
|
+
background-color: ${colors.purple[400]}${t2("", alpha[90])};
|
|
11920
12402
|
}
|
|
11921
12403
|
z-index: 4;
|
|
11922
12404
|
`,
|
|
@@ -11950,7 +12432,7 @@ var getStyles2 = () => {
|
|
|
11950
12432
|
align-items: center;
|
|
11951
12433
|
padding: ${tokens.size[2]} ${tokens.size[2.5]};
|
|
11952
12434
|
gap: ${tokens.size[3]};
|
|
11953
|
-
border-bottom: ${colors.darkGray[500]} 1px solid;
|
|
12435
|
+
border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
|
|
11954
12436
|
align-items: center;
|
|
11955
12437
|
& > button {
|
|
11956
12438
|
padding: 0;
|
|
@@ -11977,11 +12459,15 @@ var getStyles2 = () => {
|
|
|
11977
12459
|
font-weight: ${font.weight.bold};
|
|
11978
12460
|
line-height: ${font.lineHeight.xs};
|
|
11979
12461
|
white-space: nowrap;
|
|
12462
|
+
color: ${t2(colors.gray[600], colors.gray[300])};
|
|
11980
12463
|
`,
|
|
11981
12464
|
queryFlavorLogo: u`
|
|
11982
12465
|
font-weight: ${font.weight.semibold};
|
|
11983
12466
|
font-size: ${font.size.xs};
|
|
11984
|
-
background: linear-gradient(
|
|
12467
|
+
background: linear-gradient(
|
|
12468
|
+
to right,
|
|
12469
|
+
${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
|
|
12470
|
+
);
|
|
11985
12471
|
background-clip: text;
|
|
11986
12472
|
-webkit-background-clip: text;
|
|
11987
12473
|
line-height: 1;
|
|
@@ -11996,14 +12482,17 @@ var getStyles2 = () => {
|
|
|
11996
12482
|
queryStatusTag: u`
|
|
11997
12483
|
display: flex;
|
|
11998
12484
|
gap: ${tokens.size[1.5]};
|
|
11999
|
-
|
|
12485
|
+
box-sizing: border-box;
|
|
12486
|
+
height: ${tokens.size[6.5]};
|
|
12487
|
+
background: ${t2(colors.gray[50], colors.darkGray[500])};
|
|
12488
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12000
12489
|
border-radius: ${tokens.border.radius.sm};
|
|
12001
12490
|
font-size: ${font.size.sm};
|
|
12002
12491
|
padding: ${tokens.size[1]};
|
|
12003
|
-
padding-left: ${tokens.size[
|
|
12492
|
+
padding-left: ${tokens.size[1.5]};
|
|
12004
12493
|
align-items: center;
|
|
12005
12494
|
font-weight: ${font.weight.medium};
|
|
12006
|
-
border:
|
|
12495
|
+
border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
|
|
12007
12496
|
user-select: none;
|
|
12008
12497
|
position: relative;
|
|
12009
12498
|
&:focus-visible {
|
|
@@ -12020,8 +12509,8 @@ var getStyles2 = () => {
|
|
|
12020
12509
|
display: flex;
|
|
12021
12510
|
align-items: center;
|
|
12022
12511
|
justify-content: center;
|
|
12023
|
-
color: ${colors.gray[400]};
|
|
12024
|
-
background-color: ${colors.darkGray[300]};
|
|
12512
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12513
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[300])};
|
|
12025
12514
|
border-radius: 2px;
|
|
12026
12515
|
font-variant-numeric: tabular-nums;
|
|
12027
12516
|
height: ${tokens.size[4.5]};
|
|
@@ -12029,15 +12518,15 @@ var getStyles2 = () => {
|
|
|
12029
12518
|
statusTooltip: u`
|
|
12030
12519
|
position: absolute;
|
|
12031
12520
|
z-index: 1;
|
|
12032
|
-
background-color: ${colors.darkGray[500]};
|
|
12521
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[500])};
|
|
12033
12522
|
top: 100%;
|
|
12034
12523
|
left: 50%;
|
|
12035
12524
|
transform: translate(-50%, calc(${tokens.size[2]}));
|
|
12036
12525
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12037
|
-
border-radius: ${tokens.border.radius.
|
|
12526
|
+
border-radius: ${tokens.border.radius.sm};
|
|
12038
12527
|
font-size: ${font.size.xs};
|
|
12039
|
-
border: 1px solid ${colors.gray[600]};
|
|
12040
|
-
color: ${
|
|
12528
|
+
border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
|
|
12529
|
+
color: ${t2(colors["gray"][600], colors["gray"][300])};
|
|
12041
12530
|
|
|
12042
12531
|
&::before {
|
|
12043
12532
|
top: 0px;
|
|
@@ -12046,7 +12535,8 @@ var getStyles2 = () => {
|
|
|
12046
12535
|
left: 50%;
|
|
12047
12536
|
transform: translate(-50%, -100%);
|
|
12048
12537
|
position: absolute;
|
|
12049
|
-
border-color: transparent transparent
|
|
12538
|
+
border-color: transparent transparent
|
|
12539
|
+
${t2(colors.gray[400], colors.gray[600])} transparent;
|
|
12050
12540
|
border-style: solid;
|
|
12051
12541
|
border-width: 7px;
|
|
12052
12542
|
/* transform: rotate(180deg); */
|
|
@@ -12057,17 +12547,14 @@ var getStyles2 = () => {
|
|
|
12057
12547
|
content: ' ';
|
|
12058
12548
|
display: block;
|
|
12059
12549
|
left: 50%;
|
|
12060
|
-
transform: translate(-50%, calc(-100% +
|
|
12550
|
+
transform: translate(-50%, calc(-100% + 2px));
|
|
12061
12551
|
position: absolute;
|
|
12062
|
-
border-color: transparent transparent
|
|
12063
|
-
transparent;
|
|
12552
|
+
border-color: transparent transparent
|
|
12553
|
+
${t2(colors.gray[100], colors.darkGray[500])} transparent;
|
|
12064
12554
|
border-style: solid;
|
|
12065
12555
|
border-width: 7px;
|
|
12066
12556
|
}
|
|
12067
12557
|
`,
|
|
12068
|
-
selectedQueryRow: u`
|
|
12069
|
-
background-color: ${colors.darkGray[500]};
|
|
12070
|
-
`,
|
|
12071
12558
|
filtersContainer: u`
|
|
12072
12559
|
display: flex;
|
|
12073
12560
|
gap: ${tokens.size[2]};
|
|
@@ -12076,47 +12563,52 @@ var getStyles2 = () => {
|
|
|
12076
12563
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12077
12564
|
padding-right: ${tokens.size[1.5]};
|
|
12078
12565
|
border-radius: ${tokens.border.radius.sm};
|
|
12079
|
-
background-color: ${colors.darkGray[400]};
|
|
12566
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12567
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12568
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12080
12569
|
font-size: ${font.size.xs};
|
|
12081
12570
|
display: flex;
|
|
12082
12571
|
align-items: center;
|
|
12083
12572
|
line-height: ${font.lineHeight.sm};
|
|
12084
12573
|
gap: ${tokens.size[1.5]};
|
|
12085
12574
|
max-width: 160px;
|
|
12086
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12087
12575
|
&:focus-visible {
|
|
12088
12576
|
outline-offset: 2px;
|
|
12089
12577
|
border-radius: ${border.radius.xs};
|
|
12090
12578
|
outline: 2px solid ${colors.blue[800]};
|
|
12091
12579
|
}
|
|
12580
|
+
& svg {
|
|
12581
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12582
|
+
}
|
|
12092
12583
|
}
|
|
12093
12584
|
`,
|
|
12094
12585
|
filterInput: u`
|
|
12095
|
-
padding: ${
|
|
12586
|
+
padding: ${size2[0.5]} ${size2[2]};
|
|
12096
12587
|
border-radius: ${tokens.border.radius.sm};
|
|
12097
|
-
background-color: ${colors.darkGray[400]};
|
|
12588
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12098
12589
|
display: flex;
|
|
12099
12590
|
box-sizing: content-box;
|
|
12100
12591
|
align-items: center;
|
|
12101
12592
|
gap: ${tokens.size[1.5]};
|
|
12102
12593
|
max-width: 160px;
|
|
12103
12594
|
min-width: 100px;
|
|
12104
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12595
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12105
12596
|
height: min-content;
|
|
12597
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12106
12598
|
& > svg {
|
|
12107
|
-
width: ${
|
|
12108
|
-
height: ${
|
|
12599
|
+
width: ${size2[3]};
|
|
12600
|
+
height: ${size2[3]};
|
|
12109
12601
|
}
|
|
12110
12602
|
& input {
|
|
12111
12603
|
font-size: ${font.size.xs};
|
|
12112
12604
|
width: 100%;
|
|
12113
|
-
background-color: ${colors.darkGray[400]};
|
|
12605
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12114
12606
|
border: none;
|
|
12115
12607
|
padding: 0;
|
|
12116
12608
|
line-height: ${font.lineHeight.sm};
|
|
12117
|
-
color: ${colors.gray[300]};
|
|
12609
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12118
12610
|
&::placeholder {
|
|
12119
|
-
color: ${colors.gray[300]};
|
|
12611
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12120
12612
|
}
|
|
12121
12613
|
&:focus {
|
|
12122
12614
|
outline: none;
|
|
@@ -12132,24 +12624,26 @@ var getStyles2 = () => {
|
|
|
12132
12624
|
filterSelect: u`
|
|
12133
12625
|
padding: ${tokens.size[0.5]} ${tokens.size[2]};
|
|
12134
12626
|
border-radius: ${tokens.border.radius.sm};
|
|
12135
|
-
background-color: ${colors.darkGray[400]};
|
|
12627
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12136
12628
|
display: flex;
|
|
12137
12629
|
align-items: center;
|
|
12138
12630
|
gap: ${tokens.size[1.5]};
|
|
12139
12631
|
box-sizing: content-box;
|
|
12140
12632
|
max-width: 160px;
|
|
12141
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12633
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12142
12634
|
height: min-content;
|
|
12143
12635
|
& > svg {
|
|
12636
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12144
12637
|
width: ${tokens.size[2]};
|
|
12145
12638
|
height: ${tokens.size[2]};
|
|
12146
12639
|
}
|
|
12147
12640
|
& > select {
|
|
12148
12641
|
appearance: none;
|
|
12642
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12149
12643
|
min-width: 100px;
|
|
12150
12644
|
line-height: ${font.lineHeight.sm};
|
|
12151
12645
|
font-size: ${font.size.xs};
|
|
12152
|
-
background-color: ${colors.darkGray[400]};
|
|
12646
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12153
12647
|
border: none;
|
|
12154
12648
|
&:focus {
|
|
12155
12649
|
outline: none;
|
|
@@ -12167,7 +12661,8 @@ var getStyles2 = () => {
|
|
|
12167
12661
|
`,
|
|
12168
12662
|
actionsBtn: u`
|
|
12169
12663
|
border-radius: ${tokens.border.radius.sm};
|
|
12170
|
-
background-color: ${colors.darkGray[400]};
|
|
12664
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[400])};
|
|
12665
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
|
|
12171
12666
|
width: 1.625rem;
|
|
12172
12667
|
height: 1.625rem;
|
|
12173
12668
|
justify-content: center;
|
|
@@ -12175,13 +12670,13 @@ var getStyles2 = () => {
|
|
|
12175
12670
|
align-items: center;
|
|
12176
12671
|
gap: ${tokens.size[1.5]};
|
|
12177
12672
|
max-width: 160px;
|
|
12178
|
-
border: 1px solid ${colors.darkGray[200]};
|
|
12179
12673
|
cursor: pointer;
|
|
12180
12674
|
padding: 0;
|
|
12181
12675
|
&:hover {
|
|
12182
|
-
background-color: ${colors.darkGray[500]};
|
|
12676
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12183
12677
|
}
|
|
12184
12678
|
& svg {
|
|
12679
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12185
12680
|
width: ${tokens.size[3]};
|
|
12186
12681
|
height: ${tokens.size[3]};
|
|
12187
12682
|
}
|
|
@@ -12191,6 +12686,12 @@ var getStyles2 = () => {
|
|
|
12191
12686
|
outline: 2px solid ${colors.blue[800]};
|
|
12192
12687
|
}
|
|
12193
12688
|
`,
|
|
12689
|
+
actionsBtnOffline: u`
|
|
12690
|
+
& svg {
|
|
12691
|
+
stroke: ${t2(colors.yellow[700], colors.yellow[500])};
|
|
12692
|
+
fill: ${t2(colors.yellow[700], colors.yellow[500])};
|
|
12693
|
+
}
|
|
12694
|
+
`,
|
|
12194
12695
|
overflowQueryContainer: u`
|
|
12195
12696
|
flex: 1;
|
|
12196
12697
|
overflow-y: auto;
|
|
@@ -12203,9 +12704,11 @@ var getStyles2 = () => {
|
|
|
12203
12704
|
display: flex;
|
|
12204
12705
|
align-items: center;
|
|
12205
12706
|
padding: 0;
|
|
12206
|
-
background-color: inherit;
|
|
12207
12707
|
border: none;
|
|
12208
12708
|
cursor: pointer;
|
|
12709
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12710
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
12711
|
+
line-height: 1;
|
|
12209
12712
|
&:focus {
|
|
12210
12713
|
outline: none;
|
|
12211
12714
|
}
|
|
@@ -12215,7 +12718,7 @@ var getStyles2 = () => {
|
|
|
12215
12718
|
outline: 2px solid ${colors.blue[800]};
|
|
12216
12719
|
}
|
|
12217
12720
|
&:hover .tsqd-query-hash {
|
|
12218
|
-
background-color: ${colors.darkGray[600]};
|
|
12721
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[600])};
|
|
12219
12722
|
}
|
|
12220
12723
|
|
|
12221
12724
|
& .tsqd-query-observer-count {
|
|
@@ -12230,7 +12733,7 @@ var getStyles2 = () => {
|
|
|
12230
12733
|
font-weight: ${font.weight.medium};
|
|
12231
12734
|
border-bottom-width: 1px;
|
|
12232
12735
|
border-bottom-style: solid;
|
|
12233
|
-
border-bottom: 1px solid ${colors.darkGray[700]};
|
|
12736
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
|
|
12234
12737
|
}
|
|
12235
12738
|
& .tsqd-query-hash {
|
|
12236
12739
|
user-select: text;
|
|
@@ -12241,7 +12744,7 @@ var getStyles2 = () => {
|
|
|
12241
12744
|
flex: 1;
|
|
12242
12745
|
padding: ${tokens.size[1]} ${tokens.size[2]};
|
|
12243
12746
|
font-family: 'Menlo', 'Fira Code', monospace;
|
|
12244
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12747
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12245
12748
|
text-align: left;
|
|
12246
12749
|
text-overflow: clip;
|
|
12247
12750
|
word-break: break-word;
|
|
@@ -12252,15 +12755,20 @@ var getStyles2 = () => {
|
|
|
12252
12755
|
display: flex;
|
|
12253
12756
|
align-items: center;
|
|
12254
12757
|
padding: 0 ${tokens.size[2]};
|
|
12255
|
-
color: ${colors.gray[300]};
|
|
12256
|
-
background-color: ${colors.darkGray[600]};
|
|
12257
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12758
|
+
color: ${t2(colors.gray[800], colors.gray[300])};
|
|
12759
|
+
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
12760
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12258
12761
|
font-size: ${font.size.xs};
|
|
12259
12762
|
}
|
|
12260
12763
|
`,
|
|
12764
|
+
selectedQueryRow: u`
|
|
12765
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12766
|
+
`,
|
|
12261
12767
|
detailsContainer: u`
|
|
12262
12768
|
flex: 1 1 700px;
|
|
12263
|
-
background-color: ${colors.darkGray[700]};
|
|
12769
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[700])};
|
|
12770
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12771
|
+
font-family: 'Inter', sans-serif;
|
|
12264
12772
|
display: flex;
|
|
12265
12773
|
flex-direction: column;
|
|
12266
12774
|
overflow-y: auto;
|
|
@@ -12268,10 +12776,11 @@ var getStyles2 = () => {
|
|
|
12268
12776
|
text-align: left;
|
|
12269
12777
|
`,
|
|
12270
12778
|
detailsHeader: u`
|
|
12779
|
+
font-family: 'Inter', sans-serif;
|
|
12271
12780
|
position: sticky;
|
|
12272
12781
|
top: 0;
|
|
12273
12782
|
z-index: 2;
|
|
12274
|
-
background-color: ${colors.darkGray[600]};
|
|
12783
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[600])};
|
|
12275
12784
|
padding: ${tokens.size[1.5]} ${tokens.size[2]};
|
|
12276
12785
|
font-weight: ${font.weight.medium};
|
|
12277
12786
|
font-size: ${font.size.xs};
|
|
@@ -12304,6 +12813,10 @@ var getStyles2 = () => {
|
|
|
12304
12813
|
font-size: ${font.size.xs};
|
|
12305
12814
|
line-height: ${font.lineHeight.xs};
|
|
12306
12815
|
}
|
|
12816
|
+
|
|
12817
|
+
& pre {
|
|
12818
|
+
margin: 0;
|
|
12819
|
+
}
|
|
12307
12820
|
`,
|
|
12308
12821
|
queryDetailsStatus: u`
|
|
12309
12822
|
border: 1px solid ${colors.darkGray[200]};
|
|
@@ -12318,12 +12831,13 @@ var getStyles2 = () => {
|
|
|
12318
12831
|
gap: ${tokens.size[2]};
|
|
12319
12832
|
padding: 0px ${tokens.size[2]};
|
|
12320
12833
|
& > button {
|
|
12834
|
+
font-family: 'Inter', sans-serif;
|
|
12321
12835
|
font-size: ${font.size.xs};
|
|
12322
12836
|
padding: ${tokens.size[1]} ${tokens.size[2]};
|
|
12323
12837
|
display: flex;
|
|
12324
12838
|
border-radius: ${tokens.border.radius.sm};
|
|
12325
|
-
|
|
12326
|
-
|
|
12839
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[600])};
|
|
12840
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12327
12841
|
align-items: center;
|
|
12328
12842
|
gap: ${tokens.size[2]};
|
|
12329
12843
|
font-weight: ${font.weight.medium};
|
|
@@ -12335,7 +12849,7 @@ var getStyles2 = () => {
|
|
|
12335
12849
|
outline: 2px solid ${colors.blue[800]};
|
|
12336
12850
|
}
|
|
12337
12851
|
&:hover {
|
|
12338
|
-
background-color: ${colors.darkGray[500]};
|
|
12852
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12339
12853
|
}
|
|
12340
12854
|
|
|
12341
12855
|
&:disabled {
|
|
@@ -12356,17 +12870,17 @@ var getStyles2 = () => {
|
|
|
12356
12870
|
display: flex;
|
|
12357
12871
|
border-radius: ${tokens.border.radius.sm};
|
|
12358
12872
|
overflow: hidden;
|
|
12359
|
-
|
|
12360
|
-
|
|
12873
|
+
background-color: ${t2(colors.gray[100], colors.darkGray[600])};
|
|
12874
|
+
border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12361
12875
|
align-items: center;
|
|
12362
12876
|
gap: ${tokens.size[2]};
|
|
12363
12877
|
font-weight: ${font.weight.medium};
|
|
12364
12878
|
line-height: ${font.lineHeight.sm};
|
|
12365
|
-
color: ${
|
|
12879
|
+
color: ${t2(colors.red[500], colors.red[400])};
|
|
12366
12880
|
cursor: pointer;
|
|
12367
12881
|
position: relative;
|
|
12368
12882
|
&:hover {
|
|
12369
|
-
background-color: ${colors.darkGray[500]};
|
|
12883
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12370
12884
|
}
|
|
12371
12885
|
& > span {
|
|
12372
12886
|
width: ${size2[1.5]};
|
|
@@ -12407,10 +12921,10 @@ var getStyles2 = () => {
|
|
|
12407
12921
|
flex-direction: column;
|
|
12408
12922
|
gap: ${size2[0.5]};
|
|
12409
12923
|
border-radius: ${tokens.border.radius.sm};
|
|
12410
|
-
border: 1px solid ${colors.gray[700]};
|
|
12411
|
-
background-color: ${colors.darkGray[600]};
|
|
12924
|
+
border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
|
|
12925
|
+
background-color: ${t2(colors.gray[50], colors.darkGray[600])};
|
|
12412
12926
|
font-size: ${font.size.xs};
|
|
12413
|
-
color: ${colors.gray[300]};
|
|
12927
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12414
12928
|
z-index: 99999;
|
|
12415
12929
|
min-width: 120px;
|
|
12416
12930
|
padding: ${size2[0.5]};
|
|
@@ -12420,17 +12934,19 @@ var getStyles2 = () => {
|
|
|
12420
12934
|
align-items: center;
|
|
12421
12935
|
justify-content: space-between;
|
|
12422
12936
|
border-radius: ${tokens.border.radius.xs};
|
|
12423
|
-
padding: ${tokens.size[
|
|
12937
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12424
12938
|
cursor: pointer;
|
|
12425
12939
|
background-color: transparent;
|
|
12426
12940
|
border: none;
|
|
12941
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12427
12942
|
& svg {
|
|
12943
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12428
12944
|
transform: rotate(-90deg);
|
|
12429
12945
|
width: ${tokens.size[2]};
|
|
12430
12946
|
height: ${tokens.size[2]};
|
|
12431
12947
|
}
|
|
12432
12948
|
&:hover {
|
|
12433
|
-
background-color: ${colors.darkGray[500]};
|
|
12949
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12434
12950
|
}
|
|
12435
12951
|
&:focus-visible {
|
|
12436
12952
|
outline-offset: 2px;
|
|
@@ -12442,33 +12958,48 @@ var getStyles2 = () => {
|
|
|
12442
12958
|
}
|
|
12443
12959
|
`,
|
|
12444
12960
|
settingsMenuHeader: u`
|
|
12445
|
-
padding: ${tokens.size[
|
|
12961
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12446
12962
|
font-weight: ${font.weight.medium};
|
|
12447
|
-
border-bottom: 1px solid ${colors.darkGray[400]};
|
|
12448
|
-
color: ${colors.gray[400]};
|
|
12963
|
+
border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
12964
|
+
color: ${t2(colors.gray[500], colors.gray[400])};
|
|
12449
12965
|
font-size: ${font.size["xs"]};
|
|
12450
12966
|
`,
|
|
12451
12967
|
settingsSubButton: u`
|
|
12452
12968
|
display: flex;
|
|
12453
12969
|
align-items: center;
|
|
12454
12970
|
justify-content: space-between;
|
|
12455
|
-
color: ${colors.gray[300]};
|
|
12971
|
+
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
12456
12972
|
font-size: ${font.size["xs"]};
|
|
12457
12973
|
border-radius: ${tokens.border.radius.xs};
|
|
12458
|
-
padding: ${tokens.size[
|
|
12974
|
+
padding: ${tokens.size[1]} ${tokens.size[1]};
|
|
12459
12975
|
cursor: pointer;
|
|
12460
12976
|
background-color: transparent;
|
|
12461
12977
|
border: none;
|
|
12978
|
+
& svg {
|
|
12979
|
+
color: ${t2(colors.gray[600], colors.gray[400])};
|
|
12980
|
+
}
|
|
12462
12981
|
&:hover {
|
|
12463
|
-
background-color: ${colors.darkGray[500]};
|
|
12982
|
+
background-color: ${t2(colors.gray[200], colors.darkGray[500])};
|
|
12464
12983
|
}
|
|
12465
12984
|
&:focus-visible {
|
|
12466
12985
|
outline-offset: 2px;
|
|
12467
12986
|
outline: 2px solid ${colors.blue[800]};
|
|
12468
12987
|
}
|
|
12988
|
+
`,
|
|
12989
|
+
themeSelectedButton: u`
|
|
12990
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12991
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12992
|
+
& svg {
|
|
12993
|
+
color: ${t2(colors.purple[700], colors.purple[300])};
|
|
12994
|
+
}
|
|
12995
|
+
&:hover {
|
|
12996
|
+
background-color: ${t2(colors.purple[100], colors.purple[900])};
|
|
12997
|
+
}
|
|
12469
12998
|
`
|
|
12470
12999
|
};
|
|
12471
13000
|
};
|
|
13001
|
+
var lightStyles2 = stylesFactory2("light");
|
|
13002
|
+
var darkStyles2 = stylesFactory2("dark");
|
|
12472
13003
|
export {
|
|
12473
13004
|
Devtools,
|
|
12474
13005
|
DevtoolsComponent,
|