@pinia/colada-devtools 0.1.5 → 0.1.7

package/dist-panel/_queryId_-Belc_zp1.js

@@ -0,0 +1,701 @@
+import { _ as W } from "./mouse-pointer-click-Ckyof3Oo.js";
+import { isPlainObject as H, getValueTypeClass as D, formatValue as L } from "@pinia/colada-devtools/shared";
+import { m as g, c as i, o as l, a as e, d as z, x as Y, b as j, r as G, n as C, H as X, h as M, g as b, t as u, i as a, F as q, j as V, Q as K, l as Z, p as ee, R as te, C as T, P as h, S as oe, _ as ne, M as se, T as le, O, y as ie, k as d, w as p, U as E, V as ae, W as re, X as I, Y as de } from "./index-LWD0-6oX.js";
+import { _ as ue, a as ce } from "./loader-D4fVpj_e.js";
+const pe = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function me(s, n) {
+  return l(), i("svg", pe, [...n[0] || (n[0] = [
+    e("path", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "m9 18l6-6l-6-6"
+    }, null, -1)
+  ])]);
+}
+const ve = g({ name: "lucide-chevron-right", render: me }), he = ["title"], fe = /* @__PURE__ */ z({
+  __name: "JsonItem",
+  props: {
+    itemKey: {},
+    value: { type: [String, Number, Boolean, null, Array, Object, Map, Set] },
+    depth: {}
+  },
+  setup(s) {
+    const n = s, m = Y(!1), o = j(() => {
+      const { value: r } = n;
+      return Array.isArray(r) && r.length > 0 || H(r) && Object.keys(r).length > 0 || r instanceof Map && r.size > 0 || r instanceof Set && r.size > 0;
+    }), y = j(() => {
+      const { value: r } = n;
+      return Array.isArray(r) ? r.map((f, v) => [v, f]) : H(r) ? Object.entries(r) : r instanceof Map ? r.entries() : r instanceof Set ? Array.from(r).map((f, v) => [v, f]) : [];
+    });
+    function x() {
+      o.value && (m.value = !m.value);
+    }
+    return (r, f) => {
+      const v = ve, B = G("JsonItem", !0);
+      return l(), i("div", {
+        style: X({ paddingLeft: `${s.depth * 0.35}em` }),
+        class: C(["ring-(--ui-bg-muted)", {
+          "hover:ring": o.value,
+          "rounded-tl": s.depth > 0
+        }])
+      }, [
+        e("div", {
+          class: C(["flex items-center gap-2 py-0.5 bg-transparent hover:bg-(--ui-bg-muted) duration-200 transition-colors", s.depth > 0 && "rounded-l"])
+        }, [
+          o.value ? (l(), b(v, {
+            key: 0,
+            class: C(["size-3 text-(--ui-text-dimmed) transition-transform duration-200 cursor-pointer", { "rotate-90": m.value }]),
+            onClick: x
+          }, null, 8, ["class"])) : M("", !0),
+          e("span", {
+            class: C(["text-(--devtools-syntax-gray)", !o.value && "ml-5"])
+          }, u(s.itemKey) + ": ", 3),
+          e("span", {
+            class: C([a(D)(s.value), o.value && "cursor-pointer"]),
+            title: o.value ? "Click to expand" : void 0,
+            onClick: x
+          }, u(a(L)(s.value)), 11, he)
+        ], 2),
+        o.value && m.value ? (l(!0), i(q, { key: 0 }, V(y.value, ([S, w]) => (l(), b(B, {
+          key: S,
+          "item-key": String(S),
+          value: w,
+          depth: s.depth + 1
+        }, null, 8, ["item-key", "value", "depth"]))), 128)) : M("", !0)
+      ], 6);
+    };
+  }
+});
+function ge(s) {
+  return !!s && (Array.isArray(s) || H(s) || s instanceof Map || s instanceof Set);
+}
+const _e = /* @__PURE__ */ z({
+  __name: "JsonViewer",
+  props: {
+    data: {}
+  },
+  setup(s) {
+    return (n, m) => ge(s.data) ? (l(!0), i(q, { key: 0 }, V(Object.entries(s.data), ([o, y]) => (l(), b(fe, {
+      key: o,
+      "item-key": o,
+      value: y,
+      depth: 0
+    }, null, 8, ["item-key", "value"]))), 128)) : (l(), i("span", {
+      key: 1,
+      class: C(a(D)(s.data))
+    }, u(a(L)(s.data)), 3));
+  }
+}), ye = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function ke(s, n) {
+  return l(), i("svg", ye, [...n[0] || (n[0] = [
+    e("path", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+    }, null, -1)
+  ])]);
+}
+const xe = g({ name: "lucide-trash", render: ke }), be = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function we(s, n) {
+  return l(), i("svg", be, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("path", { d: "M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+      e("path", { d: "M3 3v5h5" })
+    ], -1)
+  ])]);
+}
+const $e = g({ name: "lucide-rotate-ccw", render: we }), Ce = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function Me(s, n) {
+  return l(), i("svg", Ce, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("path", { d: "M10 2h4m-2 12v-4m-8 3a8 8 0 0 1 8-7a8 8 0 1 1-5.3 14L4 17.6" }),
+      e("path", { d: "M9 17H4v5" })
+    ], -1)
+  ])]);
+}
+const Se = g({ name: "lucide-timer-reset", render: Me }), qe = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function Be(s, n) {
+  return l(), i("svg", qe, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("path", { d: "M3 12a9 9 0 0 1 9-9a9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+      e("path", { d: "M21 3v5h-5m5 4a9 9 0 0 1-9 9a9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+      e("path", { d: "M8 16H3v5" })
+    ], -1)
+  ])]);
+}
+const je = g({ name: "lucide-refresh-cw", render: Be }), ze = { class: "collapse collapse-arrow" }, Te = { class: "collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral" }, Ie = { class: "font-semibold text-sm flex gap-x-1 items-center" }, He = /* @__PURE__ */ z({
+  __name: "UCollapse.ce",
+  props: /* @__PURE__ */ K({
+    title: { type: String },
+    icon: { type: null },
+    noPadding: { type: Boolean }
+  }, {
+    open: { type: Boolean, default: !0 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(s) {
+    const n = Z(s, "open");
+    function m(o) {
+      if (o.target instanceof HTMLElement) {
+        const y = {
+          block: "nearest",
+          inline: "nearest",
+          behavior: "smooth"
+        };
+        o.target.scrollIntoView(y);
+      }
+    }
+    return (o, y) => (l(), i("div", ze, [
+      ee(e("input", {
+        "onUpdate:modelValue": y[0] || (y[0] = (x) => n.value = x),
+        type: "checkbox"
+      }, null, 512), [
+        [te, n.value]
+      ]),
+      e("div", Te, [
+        T(o.$slots, "title", {
+          open: n.value,
+          title: s.title
+        }, () => [
+          e("h3", Ie, [
+            T(o.$slots, "icon", {}, () => [
+              s.icon ? (l(), b(oe(s.icon), {
+                key: 0,
+                class: "size-4"
+              })) : M("", !0)
+            ], !0),
+            h(" " + u(s.title ?? "Group"), 1)
+          ])
+        ], !0)
+      ]),
+      e("div", {
+        class: C([!s.noPadding && "px-2", "collapse-content text-sm overflow-hidden"]),
+        onTransitionend: m
+      }, [
+        T(o.$slots, "default", { open: n.value }, void 0, !0)
+      ], 34)
+    ]));
+  }
+}), Ve = '.collapse[data-v-46c2be51]:not(td,tr,colgroup){visibility:visible}.collapse[data-v-46c2be51]{position:relative;display:grid;overflow:hidden;width:100%;grid-template-rows:max-content 0fr;transition:grid-template-rows .2s;isolation:isolate}.collapse>input[data-v-46c2be51]:is([type=checkbox],[type=radio]){grid-column-start:1;grid-row-start:1;appearance:none;opacity:0}.collapse[data-v-46c2be51]:is([open],:focus),.collapse[data-v-46c2be51]:has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],:focus)>.collapse-content[data-v-46c2be51],.collapse[data-v-46c2be51]:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible;min-height:fit-content}.collapse[data-v-46c2be51]:focus-visible,.collapse[data-v-46c2be51]:has(>input:is([type=checkbox],[type=radio]):focus-visible){outline-color:var(--ui-text);outline-style:solid;outline-width:2px;outline-offset:2px}.collapse:not(.collapse-close)>input[type=checkbox][data-v-46c2be51],.collapse:not(.collapse-close)>input[type=radio][data-v-46c2be51]:not(:checked),.collapse:not(.collapse-close)>.collapse-title[data-v-46c2be51]{cursor:pointer}.collapse:focus:not(.collapse-close,.collapse[open])>.collapse-title[data-v-46c2be51]{cursor:unset}.collapse:is([open]).collapse-arrow>.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow:focus>.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow>input:is([type=checkbox],[type=radio]):checked~.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse>input[data-v-46c2be51]:is([type=checkbox],[type=radio]){z-index:1;width:100%}.collapse-title[data-v-46c2be51],.collapse-content[data-v-46c2be51]{grid-column-start:1;grid-row-start:1}.collapse-content[data-v-46c2be51]{visibility:hidden;grid-column-start:1;grid-row-start:2;min-height:0;cursor:unset;transition:visibility .2s}.collapse-arrow>.collapse-title[data-v-46c2be51]:after{position:absolute;display:block;height:.5rem;width:.5rem;transform:translateY(-100%) rotate(45deg);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;top:50%;right:.8em;inset-inline-end:.75rem;content:"";transform-origin:75% 75%;box-shadow:2px 2px;pointer-events:none}.collapse-title[data-v-46c2be51]{position:relative;width:100%;transition:background-color .2s ease-out}', Ae = /* @__PURE__ */ ne(He, [["styles", [Ve]], ["__scopeId", "data-v-46c2be51"]]);
+function Oe(s) {
+  if (s < 1e3)
+    return `${Math.round(s)} ms`;
+  const n = s / 1e3;
+  if (s < 1e4)
+    return `${n.toFixed(3)} seconds`;
+  if (s < 6e4)
+    return `${Math.floor(n)} seconds`;
+  const m = Math.floor(n / 60);
+  return s < 36e5 ? `${m} minute${m > 1 ? "s" : ""}` : `${Math.floor(m / 60)}h${m % 60}m${n % 60}s`;
+}
+const Ee = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function De(s, n) {
+  return l(), i("svg", Ee, [...n[0] || (n[0] = [
+    e("path", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
+    }, null, -1)
+  ])]);
+}
+const Le = g({ name: "lucide-wrench", render: De }), Re = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function Ne(s, n) {
+  return l(), i("svg", Re, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }),
+      e("path", { d: "M12 16v-4m0-4h.01" })
+    ], -1)
+  ])]);
+}
+const Ue = g({ name: "lucide-info", render: Ne }), Fe = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function Je(s, n) {
+  return l(), i("svg", Fe, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+      e("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M10 9H8m8 4H8m8 4H8" })
+    ], -1)
+  ])]);
+}
+const Pe = g({ name: "lucide-file-text", render: Je }), Qe = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function We(s, n) {
+  return l(), i("svg", Qe, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }),
+      e("path", { d: "m15 9l-6 6m0-6l6 6" })
+    ], -1)
+  ])]);
+}
+const Ye = g({ name: "lucide-circle-x", render: We }), Ge = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function Xe(s, n) {
+  return l(), i("svg", Ge, [...n[0] || (n[0] = [
+    e("path", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"
+    }, null, -1)
+  ])]);
+}
+const Ke = g({ name: "lucide-braces", render: Xe }), Ze = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function et(s, n) {
+  return l(), i("svg", Ze, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("path", { d: "M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+      e("path", { d: "M3 3v5h5m4-1v5l4 2" })
+    ], -1)
+  ])]);
+}
+const tt = g({ name: "lucide-history", render: et }), ot = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function nt(s, n) {
+  return l(), i("svg", ot, [...n[0] || (n[0] = [
+    e("g", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2"
+    }, [
+      e("rect", {
+        width: "18",
+        height: "18",
+        x: "3",
+        y: "3",
+        rx: "2"
+      }),
+      e("path", { d: "M16 8.9V7H8l4 5l-4 5h8v-1.9" })
+    ], -1)
+  ])]);
+}
+const st = g({ name: "lucide-sigma-square", render: nt }), lt = { class: "flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)" }, it = { class: "py-1 text-sm" }, at = { class: "grid grid-cols-[auto_1fr] gap-1" }, rt = { class: "rounded bg-neutral-500/20 p-0.5" }, dt = {
+  class: "grid grid-cols-[auto_1fr] gap-x-2",
+  title: "When was the query entry last updated"
+}, ut = { class: "font-bold" }, ct = {
+  key: 0,
+  class: "grid grid-cols-[auto_1fr] gap-x-2",
+  title: "When was the last time the query was fetched"
+}, pt = { class: "font-bold" }, mt = {
+  key: 1,
+  class: "grid grid-cols-[auto_1fr] gap-x-2",
+  title: "How long did the last query take to fetch"
+}, vt = { class: "font-bold" }, ht = {
+  class: "grid grid-cols-[auto_1fr] gap-x-2",
+  title: "How many components and effects are using this query"
+}, ft = { class: "font-bold" }, gt = {
+  key: 2,
+  class: "grid grid-cols-[auto_1fr] gap-x-2",
+  title: "When is this query entry garbace collected"
+}, _t = { class: "font-bold" }, yt = { class: "py-2 gap-2 flex flex-wrap items-center justify-items-start" }, kt = { class: "py-1" }, xt = {
+  key: 0,
+  class: "rounded p-1 overflow-auto max-h-[1200px]"
+}, bt = {
+  key: 1,
+  class: "text-neutral-500/50"
+}, wt = { class: "py-1" }, $t = { class: "grid grid-cols-[auto_1fr] gap-1" }, Ct = { class: "font-bold" }, Mt = { class: "font-bold" }, St = { class: "font-bold" }, qt = { class: "font-bold" }, Bt = { class: "py-1" }, jt = { class: "rounded p-1 overflow-auto max-h-[1200px]" }, zt = { class: "py-1" }, Tt = {
+  key: 0,
+  class: "rounded bg-neutral-500/20 p-1 overflow-auto max-h-[1200px]"
+}, It = { key: 1 }, Ht = {
+  key: 1,
+  class: "py-6 mx-auto"
+}, Vt = { class: "flex flex-col text-center items-center gap-2 text-lg px-2" }, Lt = /* @__PURE__ */ z({
+  __name: "[queryId]",
+  setup(s) {
+    const n = ae(), m = se(), o = j(() => m.value.find((_) => _.keyHash === n.params.queryId) ?? null), y = j(() => o.value?.devtools.history.map((_) => {
+      let t;
+      try {
+        t = JSON.stringify(_, null, 2);
+      } catch (k) {
+        t = `Error serializing entry: ${String(k)}`;
+      }
+      return {
+        ..._,
+        data: t
+      };
+    }) ?? []), x = {
+      showSecond: !0,
+      rounding: "floor",
+      max: 1e3 * 60 * 5
+      // 5 minutes
+    }, r = re(() => o.value?.devtools.updatedAt ?? 0, {
+      ...x,
+      updateInterval: 3e3
+    }), f = le(), v = O("pc:query:details:data:open", !1, {});
+    let B = v.value, S = null;
+    const w = O("pc:query:details:error:open", !1, {});
+    return ie(
+      () => o.value?.state,
+      (_) => {
+        !_ || S === _.status || (S = _.status, _.status === "error" ? (w.value = !0, B = v.value, v.value = !1) : _.status === "success" && (v.value = B, w.value = !1));
+      }
+    ), (_, t) => {
+      const k = Ae, R = je, $ = de, N = Se, A = ue, U = ce, F = $e, J = xe, P = _e, Q = W;
+      return l(), i("div", lt, [
+        o.value ? (l(), i(q, { key: 0 }, [
+          d(k, {
+            title: "Details",
+            icon: a(Ue)
+          }, {
+            default: p(() => [
+              e("div", it, [
+                e("p", at, [
+                  t[9] || (t[9] = e("span", null, "key:", -1)),
+                  e("span", null, [
+                    e("code", rt, u(o.value.key), 1)
+                  ])
+                ]),
+                e("p", dt, [
+                  t[10] || (t[10] = e("span", null, "Last update:", -1)),
+                  e("span", ut, u(a(r)), 1)
+                ]),
+                o.value.devtools.history.at(0)?.fetchTime ? (l(), i("p", ct, [
+                  t[11] || (t[11] = e("span", null, "Last fetch:", -1)),
+                  e("span", pt, u(a(I)(new Date(o.value.devtools.history.at(0).fetchTime.start), {
+                    ...x,
+                    max: void 0
+                  })), 1)
+                ])) : M("", !0),
+                o.value.devtools.history.at(0)?.fetchTime?.end ? (l(), i("p", mt, [
+                  t[12] || (t[12] = e("span", null, "Fetch duration:", -1)),
+                  e("span", vt, u(a(Oe)(
+                    o.value.devtools.history.at(0).fetchTime.end - o.value.devtools.history.at(0).fetchTime.start
+                  )), 1)
+                ])) : M("", !0),
+                e("p", ht, [
+                  e("span", null, [
+                    t[13] || (t[13] = h("Observers: ", -1)),
+                    e("span", ft, u(o.value.deps.length), 1)
+                  ])
+                ]),
+                !o.value.active && o.value.options ? (l(), i("p", gt, [
+                  typeof o.value.options.gcTime == "number" && Number.isFinite(o.value.options.gcTime) ? (l(), i(q, { key: 0 }, [
+                    t[14] || (t[14] = e("span", null, [
+                      h("Will be "),
+                      e("i", null, "gced")
+                    ], -1)),
+                    e("span", _t, u(a(I)(
+                      new Date(o.value.devtools.inactiveAt + o.value.options.gcTime),
+                      {
+                        ...x,
+                        max: void 0
+                      }
+                    )), 1)
+                  ], 64)) : M("", !0)
+                ])) : M("", !0)
+              ])
+            ]),
+            _: 1
+          }, 8, ["icon"]),
+          d(k, {
+            title: "Actions",
+            icon: a(Le)
+          }, {
+            default: p(() => [
+              e("div", yt, [
+                d($, {
+                  class: "theme-info",
+                  size: "sm",
+                  title: "Refetch this query",
+                  disabled: o.value.options?.enabled === !1,
+                  onClick: t[0] || (t[0] = (c) => a(f).emit("queries:refetch", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(R, { class: "size-3.5" }),
+                    t[15] || (t[15] = h(" Refetch ", -1))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"]),
+                d($, {
+                  class: "theme-neutral",
+                  size: "sm",
+                  title: "Invalidate this query",
+                  onClick: t[1] || (t[1] = (c) => a(f).emit("queries:invalidate", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(N),
+                    t[16] || (t[16] = h(" Invalidate ", -1))
+                  ]),
+                  _: 1
+                }),
+                o.value.devtools.simulate !== "loading" ? (l(), b($, {
+                  key: 0,
+                  class: "theme-purple",
+                  size: "sm",
+                  title: "Restore the previous state",
+                  onClick: t[2] || (t[2] = (c) => a(f).emit("queries:simulate:loading", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(A),
+                    t[17] || (t[17] = h(" Simulate loading ", -1))
+                  ]),
+                  _: 1
+                })) : (l(), b($, {
+                  key: 1,
+                  class: "theme-purple",
+                  size: "sm",
+                  title: "Simulate a loading state",
+                  onClick: t[3] || (t[3] = (c) => a(f).emit("queries:simulate:loading:stop", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(A, { class: "animate-spin" }),
+                    t[18] || (t[18] = h(" Stop loading ", -1))
+                  ]),
+                  _: 1
+                })),
+                o.value.devtools.simulate !== "error" ? (l(), b($, {
+                  key: 2,
+                  class: "theme-error",
+                  size: "sm",
+                  title: "Simulate an Error state",
+                  onClick: t[4] || (t[4] = (c) => a(f).emit("queries:simulate:error", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(U),
+                    t[19] || (t[19] = h(" Simulate error ", -1))
+                  ]),
+                  _: 1
+                })) : (l(), b($, {
+                  key: 3,
+                  class: "theme-error",
+                  size: "sm",
+                  title: "Restore the previous state",
+                  onClick: t[5] || (t[5] = (c) => a(f).emit("queries:simulate:error:stop", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(F),
+                    t[20] || (t[20] = h(" Remove error ", -1))
+                  ]),
+                  _: 1
+                })),
+                d($, {
+                  class: "theme-warning",
+                  size: "sm",
+                  title: "Reset this query to its initial (pending) state",
+                  onClick: t[6] || (t[6] = (c) => a(f).emit("queries:reset", o.value.key))
+                }, {
+                  default: p(() => [
+                    d(J),
+                    t[21] || (t[21] = h(" Reset ", -1))
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["icon"]),
+          d(k, {
+            open: a(v),
+            "onUpdate:open": t[7] || (t[7] = (c) => E(v) ? v.value = c : null),
+            title: "Data",
+            icon: a(Pe),
+            class: "font-mono",
+            "no-padding": ""
+          }, {
+            default: p(() => [
+              d(P, {
+                data: o.value.state.data
+              }, null, 8, ["data"])
+            ]),
+            _: 1
+          }, 8, ["open", "icon"]),
+          d(k, {
+            open: a(w),
+            "onUpdate:open": t[8] || (t[8] = (c) => E(w) ? w.value = c : null),
+            title: `Error${o.value.state.status === "error" ? " (!)" : ""}`,
+            icon: a(Ye)
+          }, {
+            default: p(() => [
+              e("div", kt, [
+                o.value.state.error ? (l(), i("pre", xt, u(o.value.state.error), 1)) : (l(), i("p", bt, "No error"))
+              ])
+            ]),
+            _: 1
+          }, 8, ["open", "title", "icon"]),
+          d(k, {
+            title: "Call count",
+            icon: a(st),
+            open: !1
+          }, {
+            default: p(() => [
+              e("div", wt, [
+                e("p", $t, [
+                  t[22] || (t[22] = e("span", null, "Calls:", -1)),
+                  e("span", null, [
+                    e("code", Ct, u(o.value.devtools.count.total), 1)
+                  ]),
+                  t[23] || (t[23] = e("span", null, "Success:", -1)),
+                  e("span", null, [
+                    e("code", Mt, u(o.value.devtools.count.succeed), 1)
+                  ]),
+                  t[24] || (t[24] = e("span", null, "Errors:", -1)),
+                  e("span", null, [
+                    e("code", St, u(o.value.devtools.count.errored), 1)
+                  ]),
+                  t[25] || (t[25] = e("span", null, "Cancelled:", -1)),
+                  e("span", null, [
+                    e("code", qt, u(o.value.devtools.count.cancelled), 1)
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["icon"]),
+          d(k, {
+            title: `History (${o.value.devtools.history.length})`,
+            icon: a(tt),
+            open: !1
+          }, {
+            default: p(() => [
+              e("div", Bt, [
+                (l(!0), i(q, null, V(y.value, (c) => (l(), b(k, {
+                  key: c.updatedAt,
+                  title: `Entry nº${c.id} (${a(I)(new Date(c.updatedAt), x)})`,
+                  open: !1
+                }, {
+                  default: p(() => [
+                    e("pre", jt, u(c.data), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["title"]))), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["title", "icon"]),
+          d(k, {
+            title: "Options",
+            open: !1,
+            icon: a(Ke)
+          }, {
+            default: p(() => [
+              e("div", zt, [
+                o.value.options ? (l(), i("pre", Tt, u(o.value.options), 1)) : (l(), i("p", It, [...t[26] || (t[26] = [
+                  h(" This Query entry has no options. It might have been created from the server or manually set with ", -1),
+                  e("code", null, "queryCache.setQueryData()", -1),
+                  h(" for prefetching. ", -1)
+                ])]))
+              ])
+            ]),
+            _: 1
+          }, 8, ["icon"])
+        ], 64)) : (l(), i("div", Ht, [
+          e("p", Vt, [
+            t[27] || (t[27] = h(" Select a Query to inspect ", -1)),
+            d(Q)
+          ])
+        ]))
+      ]);
+    };
+  }
+});
+export {
+  Lt as default
+};
+//# sourceMappingURL=_queryId_-Belc_zp1.js.map