@tanstack/query-devtools 5.0.5 → 5.4.2

package/src/Explorer.tsx

@@ -517,8 +517,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     expanderButtonContainer: css`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size[4]};
+      min-height: ${size[4]};
       gap: ${size[2]};
     `,
     expanderButton: css`
@@ -526,7 +526,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -568,8 +568,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: inline-flex;
       gap: ${size[2]};
       width: 100%;
-      margin-bottom: ${size[0.5]};
-      line-height: 1.125rem;
+      margin: ${size[0.25]} 0px;
+      line-height: ${size[4.5]};
       align-items: center;
     `,
     editableInput: css`

package/src/icons/index.tsx

@@ -389,6 +389,95 @@ export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
   )
 }
 
+export function CheckCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function LoadingCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0"
+        to="360"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+    </svg>
+  )
+}
+
+export function XCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function PauseCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
 export function TanstackLogo() {
   const id = createUniqueId()
   return (

package/src/theme.ts

@@ -96,17 +96,17 @@ export const tokens = {
       900: '#054F31',
     },
     red: {
-      25: '#FFFBFA',
-      50: '#FEF3F2',
-      100: '#FEE4E2',
-      200: '#FECDCA',
-      300: '#FDA29B',
-      400: '#F97066',
-      500: '#F04438',
-      600: '#D92D20',
-      700: '#B42318',
-      800: '#912018',
-      900: '#7A271A',
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
     },
     yellow: {
       25: '#FFFCF5',
@@ -189,35 +189,35 @@ export const tokens = {
   },
   font: {
     size: {
-      '2xs': '0.625rem',
-      xs: '0.75rem',
-      sm: '0.875rem',
-      md: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '3.75rem',
-      '7xl': '4.5rem',
-      '8xl': '6rem',
-      '9xl': '8rem',
+      '2xs': 'calc(var(--tsqd-font-size) * 0.625)',
+      xs: 'calc(var(--tsqd-font-size) * 0.75)',
+      sm: 'calc(var(--tsqd-font-size) * 0.875)',
+      md: 'var(--tsqd-font-size)',
+      lg: 'calc(var(--tsqd-font-size) * 1.125)',
+      xl: 'calc(var(--tsqd-font-size) * 1.25)',
+      '2xl': 'calc(var(--tsqd-font-size) * 1.5)',
+      '3xl': 'calc(var(--tsqd-font-size) * 1.875)',
+      '4xl': 'calc(var(--tsqd-font-size) * 2.25)',
+      '5xl': 'calc(var(--tsqd-font-size) * 3)',
+      '6xl': 'calc(var(--tsqd-font-size) * 3.75)',
+      '7xl': 'calc(var(--tsqd-font-size) * 4.5)',
+      '8xl': 'calc(var(--tsqd-font-size) * 6)',
+      '9xl': 'calc(var(--tsqd-font-size) * 8)',
     },
     lineHeight: {
-      xs: '1rem',
-      sm: '1.25rem',
-      md: '1.5rem',
-      lg: '1.75rem',
-      xl: '1.75rem',
-      '2xl': '2rem',
-      '3xl': '2.25rem',
-      '4xl': '2.5rem',
-      '5xl': '1',
-      '6xl': '1',
-      '7xl': '1',
-      '8xl': '1',
-      '9xl': '1',
+      xs: 'calc(var(--tsqd-font-size) * 1)',
+      sm: 'calc(var(--tsqd-font-size) * 1.25)',
+      md: 'calc(var(--tsqd-font-size) * 1.5)',
+      lg: 'calc(var(--tsqd-font-size) * 1.75)',
+      xl: 'calc(var(--tsqd-font-size) * 2)',
+      '2xl': 'calc(var(--tsqd-font-size) * 2.25)',
+      '3xl': 'calc(var(--tsqd-font-size) * 2.5)',
+      '4xl': 'calc(var(--tsqd-font-size) * 2.75)',
+      '5xl': 'calc(var(--tsqd-font-size) * 3)',
+      '6xl': 'calc(var(--tsqd-font-size) * 3.25)',
+      '7xl': 'calc(var(--tsqd-font-size) * 3.5)',
+      '8xl': 'calc(var(--tsqd-font-size) * 3.75)',
+      '9xl': 'calc(var(--tsqd-font-size) * 4)',
     },
     weight: {
       thin: '100',
@@ -242,55 +242,55 @@ export const tokens = {
   border: {
     radius: {
       none: '0px',
-      xs: '0.125rem',
-      sm: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      '2xl': '1rem',
-      '3xl': '1.5rem',
+      xs: 'calc(var(--tsqd-font-size) * 0.125)',
+      sm: 'calc(var(--tsqd-font-size) * 0.25)',
+      md: 'calc(var(--tsqd-font-size) * 0.375)',
+      lg: 'calc(var(--tsqd-font-size) * 0.5)',
+      xl: 'calc(var(--tsqd-font-size) * 0.75)',
+      '2xl': 'calc(var(--tsqd-font-size) * 1)',
+      '3xl': 'calc(var(--tsqd-font-size) * 1.5)',
       full: '9999px',
     },
   },
   size: {
     0: '0px',
-    0.25: '0.0625rem',
-    0.5: '0.125rem',
-    1: '0.25rem',
-    1.5: '0.375rem',
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    4: '1rem',
-    4.5: '1.125rem',
-    5: '1.25rem',
-    5.5: '1.375rem',
-    6: '1.5rem',
-    6.5: '1.625rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    11: '2.75rem',
-    12: '3rem',
-    14: '3.5rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
+    0.25: 'calc(var(--tsqd-font-size) * 0.0625)',
+    0.5: 'calc(var(--tsqd-font-size) * 0.125)',
+    1: 'calc(var(--tsqd-font-size) * 0.25)',
+    1.5: 'calc(var(--tsqd-font-size) * 0.375)',
+    2: 'calc(var(--tsqd-font-size) * 0.5)',
+    2.5: 'calc(var(--tsqd-font-size) * 0.625)',
+    3: 'calc(var(--tsqd-font-size) * 0.75)',
+    3.5: 'calc(var(--tsqd-font-size) * 0.875)',
+    4: 'calc(var(--tsqd-font-size) * 1)',
+    4.5: 'calc(var(--tsqd-font-size) * 1.125)',
+    5: 'calc(var(--tsqd-font-size) * 1.25)',
+    5.5: 'calc(var(--tsqd-font-size) * 1.375)',
+    6: 'calc(var(--tsqd-font-size) * 1.5)',
+    6.5: 'calc(var(--tsqd-font-size) * 1.625)',
+    7: 'calc(var(--tsqd-font-size) * 1.75)',
+    8: 'calc(var(--tsqd-font-size) * 2)',
+    9: 'calc(var(--tsqd-font-size) * 2.25)',
+    10: 'calc(var(--tsqd-font-size) * 2.5)',
+    11: 'calc(var(--tsqd-font-size) * 2.75)',
+    12: 'calc(var(--tsqd-font-size) * 3)',
+    14: 'calc(var(--tsqd-font-size) * 3.5)',
+    16: 'calc(var(--tsqd-font-size) * 4)',
+    20: 'calc(var(--tsqd-font-size) * 5)',
+    24: 'calc(var(--tsqd-font-size) * 6)',
+    28: 'calc(var(--tsqd-font-size) * 7)',
+    32: 'calc(var(--tsqd-font-size) * 8)',
+    36: 'calc(var(--tsqd-font-size) * 9)',
+    40: 'calc(var(--tsqd-font-size) * 10)',
+    44: 'calc(var(--tsqd-font-size) * 11)',
+    48: 'calc(var(--tsqd-font-size) * 12)',
+    52: 'calc(var(--tsqd-font-size) * 13)',
+    56: 'calc(var(--tsqd-font-size) * 14)',
+    60: 'calc(var(--tsqd-font-size) * 15)',
+    64: 'calc(var(--tsqd-font-size) * 16)',
+    72: 'calc(var(--tsqd-font-size) * 18)',
+    80: 'calc(var(--tsqd-font-size) * 20)',
+    96: 'calc(var(--tsqd-font-size) * 24)',
   },
   shadow: Shadow,
   zIndices: {

package/src/utils.tsx

@@ -1,6 +1,6 @@
 import { serialize } from 'superjson'
 import { createSignal, onCleanup, onMount } from 'solid-js'
-import type { Query } from '@tanstack/query-core'
+import type { Mutation, Query } from '@tanstack/query-core'
 import type { DevtoolsPosition } from './Context'
 
 export function getQueryStatusLabel(query: Query) {
@@ -53,6 +53,24 @@ export function getQueryStatusColor({
     : 'green'
 }
 
+export function getMutationStatusColor({
+  status,
+  isPaused,
+}: {
+  status: Mutation['state']['status']
+  isPaused: boolean
+}) {
+  return isPaused
+    ? 'purple'
+    : status === 'error'
+    ? 'red'
+    : status === 'pending'
+    ? 'yellow'
+    : status === 'success'
+    ? 'green'
+    : 'gray'
+}
+
 export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
   return label === 'fresh'
     ? 'green'
@@ -107,6 +125,33 @@ export const sortFns: Record<string, SortFn> = {
   'last updated': dateSort,
 }
 
+type MutationSortFn = (a: Mutation, b: Mutation) => number
+
+const getMutationStatusRank = (m: Mutation) =>
+  m.state.isPaused
+    ? 0
+    : m.state.status === 'error'
+    ? 2
+    : m.state.status === 'pending'
+    ? 1
+    : 3
+
+const mutationDateSort: MutationSortFn = (a, b) =>
+  a.state.submittedAt < b.state.submittedAt ? 1 : -1
+
+const mutationStatusSort: MutationSortFn = (a, b) => {
+  if (getMutationStatusRank(a) === getMutationStatusRank(b)) {
+    return mutationDateSort(a, b)
+  }
+
+  return getMutationStatusRank(a) > getMutationStatusRank(b) ? 1 : -1
+}
+
+export const mutationSortFns: Record<string, MutationSortFn> = {
+  status: mutationStatusSort,
+  'last updated': mutationDateSort,
+}
+
 export const convertRemToPixels = (rem: number) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
 }