npm - @pinia/colada-devtools - Versions diffs - 0.0.4 → 0.0.5 - Mend

@pinia/colada-devtools 0.0.4 → 0.0.5

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.

Files changed (30) hide show

package/dist-panel/{_queryId_-SBAeSmfh.js → _queryId_-BGMH9Qyr.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { _ as N } from "./mouse-pointer-click-BHnWXkC_.js";
-import { m, c as l, o as n, a as e, d as j, P as A, l as U, p as F, Q, C as M, O as v, g as w, h as b, R as W, t as u, _ as Y, S as G, M as P, b as X, T as Z, U as J, y as I, z as K, F as q, k as r, w as d, i as a, V as B, W as ee, j as te } from "./index-BdIpA-g4.js";
-import { _ as oe, a as se } from "./loader-DHLcbUhz.js";
+import { _ as O } from "./mouse-pointer-click-BVbSKgPQ.js";
+import { m, c as l, o as n, a as e, d as j, Q as A, l as U, p as F, R as Q, C as M, P as v, g as w, h as b, S as W, t as u, _ as Y, T as G, M as P, b as X, U as Z, V as J, y as I, z as K, F as q, k as r, w as d, i, W as B, X as ee, j as te } from "./index-hPJdBAcc.js";
+import { _ as oe, a as se } from "./loader-HsZ_tw6Q.js";
 const ne = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function le(i, s) {
+function le(a, s) {
   return n(), l("svg", ne, s[0] || (s[0] = [
     e("path", {
       fill: "none",
@@ -18,13 +18,13 @@ function le(i, s) {
     }, null, -1)
   ]));
 }
-const ie = m({ name: "lucide-trash", render: le }), ae = {
+const ae = m({ name: "lucide-trash", render: le }), ie = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function re(i, s) {
-  return n(), l("svg", ae, s[0] || (s[0] = [
+function re(a, s) {
+  return n(), l("svg", ie, s[0] || (s[0] = [
     e("g", {
       fill: "none",
       stroke: "currentColor",
@@ -42,7 +42,7 @@ const de = m({ name: "lucide-rotate-ccw", render: re }), ue = {
   width: "1.2em",
   height: "1.2em"
 };
-function ce(i, s) {
+function ce(a, s) {
   return n(), l("svg", ue, s[0] || (s[0] = [
     e("g", {
       fill: "none",
@@ -61,7 +61,7 @@ const pe = m({ name: "lucide-timer-reset", render: ce }), ve = {
   width: "1.2em",
   height: "1.2em"
 };
-function me(i, s) {
+function me(a, s) {
   return n(), l("svg", ve, s[0] || (s[0] = [
     e("g", {
       fill: "none",
@@ -86,8 +86,8 @@ const he = m({ name: "lucide-refresh-cw", render: me }), fe = { class: "collapse
     openModifiers: {}
   }),
   emits: ["update:open"],
-  setup(i) {
-    const s = U(i, "open");
+  setup(a) {
+    const s = U(a, "open");
     function _(o) {
       if (o.target instanceof HTMLElement) {
         const h = {
@@ -130,23 +130,23 @@ const he = m({ name: "lucide-refresh-cw", render: me }), fe = { class: "collapse
     ]));
   }
 }), ye = '.collapse[data-v-a5be0055]:not(td,tr,colgroup){visibility:visible}.collapse[data-v-a5be0055]{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-a5be0055]:is([type=checkbox],[type=radio]){grid-column-start:1;grid-row-start:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.collapse[data-v-a5be0055]:is([open],:focus),.collapse[data-v-a5be0055]:has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],:focus)>.collapse-content[data-v-a5be0055],.collapse[data-v-a5be0055]:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible;min-height:fit-content}.collapse[data-v-a5be0055]:focus-visible,.collapse[data-v-a5be0055]: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-a5be0055],.collapse:not(.collapse-close)>input[type=radio][data-v-a5be0055]:not(:checked),.collapse:not(.collapse-close)>.collapse-title[data-v-a5be0055]{cursor:pointer}.collapse:focus:not(.collapse-close,.collapse[open])>.collapse-title[data-v-a5be0055]{cursor:unset}.collapse:is([open]).collapse-arrow>.collapse-title[data-v-a5be0055]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow:focus>.collapse-title[data-v-a5be0055]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow>input:is([type=checkbox],[type=radio]):checked~.collapse-title[data-v-a5be0055]:after{transform:translateY(-50%) rotate(225deg)}.collapse>input[data-v-a5be0055]:is([type=checkbox],[type=radio]){z-index:1;width:100%}.collapse-title[data-v-a5be0055],.collapse-content[data-v-a5be0055]{grid-column-start:1;grid-row-start:1}.collapse-content[data-v-a5be0055]{visibility:hidden;grid-column-start:1;grid-row-start:2;min-height:0;cursor:unset;transition:visibility .2s}.collapse-arrow>.collapse-title[data-v-a5be0055]: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-a5be0055]{position:relative;width:100%;transition:background-color .2s ease-out}', xe = /* @__PURE__ */ Y(ke, [["styles", [ye]], ["__scopeId", "data-v-a5be0055"]]);
-function we(i) {
-  if (i < 1e3)
-    return `${Math.round(i)} ms`;
-  const s = i / 1e3;
-  if (i < 1e4)
+function we(a) {
+  if (a < 1e3)
+    return `${Math.round(a)} ms`;
+  const s = a / 1e3;
+  if (a < 1e4)
     return `${s.toFixed(3)} seconds`;
-  if (i < 6e4)
+  if (a < 6e4)
     return `${Math.floor(s)} seconds`;
   const _ = Math.floor(s / 60);
-  return i < 36e5 ? `${_} minute${_ > 1 ? "s" : ""}` : `${Math.floor(_ / 60)}h${_ % 60}m${s % 60}s`;
+  return a < 36e5 ? `${_} minute${_ > 1 ? "s" : ""}` : `${Math.floor(_ / 60)}h${_ % 60}m${s % 60}s`;
 }
 const be = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function $e(i, s) {
+function $e(a, s) {
   return n(), l("svg", be, s[0] || (s[0] = [
     e("path", {
       fill: "none",
@@ -163,7 +163,7 @@ const Ce = m({ name: "lucide-wrench", render: $e }), Me = {
   width: "1.2em",
   height: "1.2em"
 };
-function qe(i, s) {
+function qe(a, s) {
   return n(), l("svg", Me, s[0] || (s[0] = [
     e("g", {
       fill: "none",
@@ -186,7 +186,7 @@ const Be = m({ name: "lucide-info", render: qe }), Te = {
   width: "1.2em",
   height: "1.2em"
 };
-function Se(i, s) {
+function Se(a, s) {
   return n(), l("svg", Te, s[0] || (s[0] = [
     e("g", {
       fill: "none",
@@ -200,13 +200,13 @@ function Se(i, s) {
     ], -1)
   ]));
 }
-const ze = m({ name: "lucide-file-text", render: Se }), He = {
+const He = m({ name: "lucide-file-text", render: Se }), ze = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function Ie(i, s) {
-  return n(), l("svg", He, s[0] || (s[0] = [
+function Ie(a, s) {
+  return n(), l("svg", ze, s[0] || (s[0] = [
     e("g", {
       fill: "none",
       stroke: "currentColor",
@@ -228,7 +228,7 @@ const je = m({ name: "lucide-circle-x", render: Ie }), De = {
   width: "1.2em",
   height: "1.2em"
 };
-function Ve(i, s) {
+function Ve(a, s) {
   return n(), l("svg", De, s[0] || (s[0] = [
     e("path", {
       fill: "none",
@@ -240,13 +240,13 @@ function Ve(i, s) {
     }, null, -1)
   ]));
 }
-const Oe = m({ name: "lucide-braces", render: Ve }), Re = {
+const Re = m({ name: "lucide-braces", render: Ve }), Ee = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function Ee(i, s) {
-  return n(), l("svg", Re, s[0] || (s[0] = [
+function Le(a, s) {
+  return n(), l("svg", Ee, s[0] || (s[0] = [
     e("g", {
       fill: "none",
       stroke: "currentColor",
@@ -259,13 +259,13 @@ function Ee(i, s) {
     ], -1)
   ]));
 }
-const Le = m({ name: "lucide-history", render: Ee }), Ne = {
+const Ne = m({ name: "lucide-history", render: Le }), Oe = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function Ae(i, s) {
-  return n(), l("svg", Ne, s[0] || (s[0] = [
+function Ae(a, s) {
+  return n(), l("svg", Oe, s[0] || (s[0] = [
     e("g", {
       fill: "none",
       stroke: "currentColor",
@@ -302,10 +302,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
   key: 2,
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "When is this query entry garbace collected"
-}, st = { class: "font-bold" }, nt = { class: "py-2 gap-2 flex flex-wrap items-center justify-items-start" }, lt = { class: "py-1" }, it = {
+}, st = { class: "font-bold" }, nt = { class: "py-2 gap-2 flex flex-wrap items-center justify-items-start" }, lt = { class: "py-1" }, at = {
   key: 0,
   class: "rounded p-1 overflow-auto max-h-[1200px]"
-}, at = {
+}, it = {
   key: 1,
   class: "text-neutral-500/50"
 }, rt = { class: "py-1" }, dt = {
@@ -322,8 +322,8 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
   class: "py-6 mx-auto"
 }, bt = { class: "flex flex-col text-center items-center gap-2 text-lg px-2" }, qt = /* @__PURE__ */ j({
   __name: "[queryId]",
-  setup(i) {
-    const s = G(), _ = P(), o = X(() => _.value.find((c) => c.id === s.params.queryId) ?? null), h = {
+  setup(a) {
+    const s = G(), _ = P(), o = X(() => _.value.find((c) => c.keyHash === s.params.queryId) ?? null), h = {
       showSecond: !0,
       rounding: "floor",
       max: 1e3 * 60 * 5
@@ -346,15 +346,15 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
         !c || S === c.status || (S = c.status, c.status === "error" ? ($.value = !0, T = x.value, x.value = !1) : c.status === "success" && (x.value = T, $.value = !1));
       }
     ), (c, t) => {
-      const g = xe, D = he, y = ee, V = pe, z = oe, O = se, R = de, E = ie, L = N;
+      const g = xe, D = he, y = ee, V = pe, H = oe, R = se, E = de, L = ae, N = O;
       return n(), l("div", Fe, [
         o.value ? (n(), l(q, { key: 0 }, [
           r(g, {
             title: "Details",
-            icon: a(Be)
+            icon: i(Be)
           }, {
             default: d(() => {
-              var p, f, H;
+              var p, f, z;
               return [
                 e("div", Qe, [
                   e("p", We, [
@@ -365,18 +365,18 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                   ]),
                   e("p", Ge, [
                     t[10] || (t[10] = e("span", null, "Last update:", -1)),
-                    e("span", Pe, u(a(C)), 1)
+                    e("span", Pe, u(i(C)), 1)
                   ]),
                   (p = o.value.devtools.history.at(0)) != null && p.fetchTime ? (n(), l("p", Xe, [
                     t[11] || (t[11] = e("span", null, "Last fetch:", -1)),
-                    e("span", Ze, u(a(B)(new Date(o.value.devtools.history.at(0).fetchTime.start), {
+                    e("span", Ze, u(i(B)(new Date(o.value.devtools.history.at(0).fetchTime.start), {
                       ...h,
                       max: void 0
                     })), 1)
                   ])) : b("", !0),
-                  (H = (f = o.value.devtools.history.at(0)) == null ? void 0 : f.fetchTime) != null && H.end ? (n(), l("p", Je, [
+                  (z = (f = o.value.devtools.history.at(0)) == null ? void 0 : f.fetchTime) != null && z.end ? (n(), l("p", Je, [
                     t[12] || (t[12] = e("span", null, "Fetch duration:", -1)),
-                    e("span", Ke, u(a(we)(
+                    e("span", Ke, u(i(we)(
                       o.value.devtools.history.at(0).fetchTime.end - o.value.devtools.history.at(0).fetchTime.start
                     )), 1)
                   ])) : b("", !0),
@@ -392,7 +392,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                         v("Will be "),
                         e("i", null, "gced")
                       ], -1)),
-                      e("span", st, u(a(B)(
+                      e("span", st, u(i(B)(
                         new Date(o.value.devtools.inactiveAt + o.value.options.gcTime),
                         {
                           ...h,
@@ -408,7 +408,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
           }, 8, ["icon"]),
           r(g, {
             title: "Actions",
-            icon: a(Ce)
+            icon: i(Ce)
           }, {
             default: d(() => {
               var p;
@@ -419,7 +419,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     size: "sm",
                     title: "Refetch this query",
                     disabled: ((p = o.value.options) == null ? void 0 : p.enabled) === !1,
-                    onClick: t[0] || (t[0] = (f) => a(k).emit("queries:refetch", o.value.key))
+                    onClick: t[0] || (t[0] = (f) => i(k).emit("queries:refetch", o.value.key))
                   }, {
                     default: d(() => [
                       r(D, { class: "size-3.5" }),
@@ -431,7 +431,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-neutral",
                     size: "sm",
                     title: "Invalidate this query",
-                    onClick: t[1] || (t[1] = (f) => a(k).emit("queries:invalidate", o.value.key))
+                    onClick: t[1] || (t[1] = (f) => i(k).emit("queries:invalidate", o.value.key))
                   }, {
                     default: d(() => [
                       r(V),
@@ -444,10 +444,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-purple",
                     size: "sm",
                     title: "Restore the previous state",
-                    onClick: t[2] || (t[2] = (f) => a(k).emit("queries:simulate:loading", o.value.key))
+                    onClick: t[2] || (t[2] = (f) => i(k).emit("queries:simulate:loading", o.value.key))
                   }, {
                     default: d(() => [
-                      r(z),
+                      r(H),
                       t[17] || (t[17] = v(" Simulate loading "))
                     ]),
                     _: 1
@@ -456,10 +456,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-purple",
                     size: "sm",
                     title: "Simulate a loading state",
-                    onClick: t[3] || (t[3] = (f) => a(k).emit("queries:simulate:loading:stop", o.value.key))
+                    onClick: t[3] || (t[3] = (f) => i(k).emit("queries:simulate:loading:stop", o.value.key))
                   }, {
                     default: d(() => [
-                      r(z, { class: "animate-spin" }),
+                      r(H, { class: "animate-spin" }),
                       t[18] || (t[18] = v(" Stop loading "))
                     ]),
                     _: 1
@@ -469,10 +469,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-error",
                     size: "sm",
                     title: "Simulate an Error state",
-                    onClick: t[4] || (t[4] = (f) => a(k).emit("queries:simulate:error", o.value.key))
+                    onClick: t[4] || (t[4] = (f) => i(k).emit("queries:simulate:error", o.value.key))
                   }, {
                     default: d(() => [
-                      r(O),
+                      r(R),
                       t[19] || (t[19] = v(" Simulate error "))
                     ]),
                     _: 1
@@ -481,10 +481,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-error",
                     size: "sm",
                     title: "Restore the previous state",
-                    onClick: t[5] || (t[5] = (f) => a(k).emit("queries:simulate:error:stop", o.value.key))
+                    onClick: t[5] || (t[5] = (f) => i(k).emit("queries:simulate:error:stop", o.value.key))
                   }, {
                     default: d(() => [
-                      r(R),
+                      r(E),
                       t[20] || (t[20] = v(" Remove error "))
                     ]),
                     _: 1
@@ -493,10 +493,10 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
                     class: "theme-warning",
                     size: "sm",
                     title: "Reset this query to its initial (pending) state",
-                    onClick: t[6] || (t[6] = (f) => a(k).emit("queries:reset", o.value.key))
+                    onClick: t[6] || (t[6] = (f) => i(k).emit("queries:reset", o.value.key))
                   }, {
                     default: d(() => [
-                      r(E),
+                      r(L),
                       t[21] || (t[21] = v(" Reset "))
                     ]),
                     _: 1
@@ -510,11 +510,11 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
             open: x.value,
             "onUpdate:open": t[7] || (t[7] = (p) => x.value = p),
             title: "Data",
-            icon: a(ze)
+            icon: i(He)
           }, {
             default: d(() => [
               e("div", lt, [
-                o.value.state.data !== void 0 ? (n(), l("pre", it, u(o.value.state.data), 1)) : (n(), l("p", at, " No data "))
+                o.value.state.data !== void 0 ? (n(), l("pre", at, u(o.value.state.data), 1)) : (n(), l("p", it, " No data "))
               ])
             ]),
             _: 1
@@ -523,7 +523,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
             open: $.value,
             "onUpdate:open": t[8] || (t[8] = (p) => $.value = p),
             title: `Error${o.value.state.status === "error" ? " (!)" : ""}`,
-            icon: a(je)
+            icon: i(je)
           }, {
             default: d(() => [
               e("div", rt, [
@@ -534,7 +534,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
           }, 8, ["open", "title", "icon"]),
           r(g, {
             title: "Call count",
-            icon: a(Ue),
+            icon: i(Ue),
             open: !1
           }, {
             default: d(() => [
@@ -563,14 +563,14 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
           }, 8, ["icon"]),
           r(g, {
             title: `History (${o.value.devtools.history.length})`,
-            icon: a(Le),
+            icon: i(Ne),
             open: !1
           }, {
             default: d(() => [
               e("div", _t, [
                 (n(!0), l(q, null, te(o.value.devtools.history, (p) => (n(), w(g, {
                   key: p.updatedAt,
-                  title: `Entry nº${p.id} (${a(B)(new Date(p.updatedAt), h)})`,
+                  title: `Entry nº${p.id} (${i(B)(new Date(p.updatedAt), h)})`,
                   open: !1
                 }, {
                   default: d(() => [
@@ -585,7 +585,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
           r(g, {
             title: "Options",
             open: !1,
-            icon: a(Oe)
+            icon: i(Re)
           }, {
             default: d(() => [
               e("div", kt, [
@@ -601,7 +601,7 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
         ], 64)) : (n(), l("div", wt, [
           e("p", bt, [
             t[27] || (t[27] = v(" Select a Query to inspect ")),
-            r(L)
+            r(N)
           ])
         ]))
       ]);
@@ -611,4 +611,4 @@ const Ue = m({ name: "lucide-sigma-square", render: Ae }), Fe = { class: "flex f
 export {
   qt as default
 };
-//# sourceMappingURL=_queryId_-SBAeSmfh.js.map
+//# sourceMappingURL=_queryId_-BGMH9Qyr.js.map

package/dist-panel/_queryId_-BGMH9Qyr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"_queryId_-BGMH9Qyr.js","sources":["../src/panel/components/UCollapse.ce.vue","../src/panel/utils/time.ts","../src/panel/pages/queries/[queryId].vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from 'vue'\n\ndefineProps<{\n title?: string\n icon?: Component\n}>()\n\nconst open = defineModel<boolean>('open', {\n default: true,\n})\n\nfunction scrollIfNeeded(event: TransitionEvent) {\n if (event.target instanceof HTMLElement) {\n const scrollOptions: ScrollIntoViewOptions = {\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n }\n event.target.scrollIntoView(scrollOptions)\n }\n}\n</script>\n\n<template>\n <div class=\"collapse collapse-arrow\">\n <input v-model=\"open\" type=\"checkbox\">\n <div class=\"collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral\">\n <slot name=\"title\" :open :title>\n <h3 class=\"font-semibold text-sm flex gap-x-1 items-center\">\n <slot name=\"icon\">\n <component :is=\"icon\" v-if=\"icon\" class=\"size-4\" />\n </slot>\n {{ title ?? 'Group' }}\n </h3>\n </slot>\n </div>\n <div class=\"collapse-content px-2 text-sm overflow-hidden\" @transitionend=\"scrollIfNeeded\">\n <slot :open />\n </div>\n </div>\n</template>\n\n<style scoped>\n.collapse:not(td, tr, colgroup) {\n visibility: visible;\n}\n\n.collapse {\n position: relative;\n display: grid;\n overflow: hidden;\n width: 100%;\n grid-template-rows: max-content 0fr;\n transition: grid-template-rows 0.2s;\n isolation: isolate;\n\n > input:is([type='checkbox'], [type='radio']) {\n grid-column-start: 1;\n grid-row-start: 1;\n appearance: none;\n opacity: 0;\n }\n\n &:is([open], :focus),\n &:has(> input:is([type='checkbox'], [type='radio']):checked) {\n grid-template-rows: max-content 1fr;\n }\n\n &:is([open], :focus) > .collapse-content,\n &:not(.collapse-close)\n > :where(input:is([type='checkbox'], [type='radio']):checked ~ .collapse-content) {\n visibility: visible;\n min-height: fit-content;\n }\n &:focus-visible,\n &:has(> input:is([type='checkbox'], [type='radio']):focus-visible) {\n outline-color: var(--ui-text);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n\n &:not(.collapse-close) {\n > input[type='checkbox'],\n > input[type='radio']:not(:checked),\n > .collapse-title {\n cursor: pointer;\n }\n }\n\n &:focus:not(.collapse-close, .collapse[open]) > .collapse-title {\n cursor: unset;\n }\n\n &:is([open]) {\n &.collapse-arrow {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n }\n\n &.collapse-arrow:focus {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n &.collapse-arrow {\n > input:is([type='checkbox'], [type='radio']):checked ~ .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n > input:is([type='checkbox'], [type='radio']) {\n z-index: 1;\n width: 100%;\n }\n}\n\n.collapse-title,\n.collapse-content {\n grid-column-start: 1;\n grid-row-start: 1;\n}\n\n.collapse-content {\n visibility: hidden;\n grid-column-start: 1;\n grid-row-start: 2;\n min-height: 0;\n cursor: unset;\n transition: visibility 0.2s;\n}\n\n.collapse-arrow {\n > .collapse-title:after {\n position: absolute;\n display: block;\n height: 0.5rem;\n width: 0.5rem;\n transform: translateY(-100%) rotate(45deg);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.2s;\n top: 50%;\n right: 0.8em;\n inset-inline-end: 0.75rem;\n content: '';\n transform-origin: 75% 75%;\n box-shadow: 2px 2px;\n pointer-events: none;\n }\n}\n\n.collapse-title {\n position: relative;\n width: 100%;\n transition: background-color 0.2s ease-out;\n}\n</style>\n","export function formatDuration(timeInMs: number): string {\n if (timeInMs < 1000) {\n return `${Math.round(timeInMs)} ms`\n }\n\n const seconds = timeInMs / 1000\n if (timeInMs < 10_000) {\n return `${seconds.toFixed(3)} seconds`\n }\n\n if (timeInMs < 60_000) {\n return `${Math.floor(seconds)} seconds`\n }\n\n const minutes = Math.floor(seconds / 60)\n\n if (timeInMs < 3_600_000) {\n return `${minutes} minute${minutes > 1 ? 's' : ''}`\n }\n\n const hours = Math.floor(minutes / 60)\n\n return `${hours}h${minutes % 60}m${seconds % 60}s`\n}\n","<script setup lang=\"ts\">\nimport type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\nimport { computed, ref, watch } from 'vue'\nimport { useDuplexChannel, useQueryEntries } from '../../composables/duplex-channel'\nimport { formatDuration } from '../../utils/time'\nimport { useRoute } from 'vue-router'\nimport type { DataStateStatus } from '@pinia/colada'\n\nimport IWrench from '~icons/lucide/wrench'\nimport IInfoCircle from '~icons/lucide/info'\nimport IFileText from '~icons/lucide/file-text'\nimport ICircleX from '~icons/lucide/circle-x'\nimport IBraces from '~icons/lucide/braces'\nimport IHistory from '~icons/lucide/history'\nimport ISigmaSquare from '~icons/lucide/sigma-square'\nimport { useTimeAgo, formatTimeAgo } from '@vueuse/core'\nimport type { FormatTimeAgoOptions } from '@vueuse/core'\n\nconst route = useRoute('/queries/[queryId]')\nconst queries = useQueryEntries()\n\nconst selectedQuery = computed<UseQueryEntryPayload | null>(() => {\n return queries.value.find((entry) => entry.keyHash === route.params.queryId) ?? null\n})\n\nconst TIME_AGO_OPTIONS: FormatTimeAgoOptions = {\n showSecond: true,\n rounding: 'floor',\n max: 1000 * 60 * 5, // 5 minutes\n}\n\nconst lastUpdate = useTimeAgo(() => selectedQuery.value?.devtools.updatedAt ?? 0, {\n ...TIME_AGO_OPTIONS,\n updateInterval: 3_000,\n})\n\n// TODO: we should be able to highlight components using this query\n// const el = useTemplateRef('me')\n// TODO: add ref=\"me\" to the div\n// watch(\n// // also trigger if the selectedQuery changes\n// () => [el.value, selectedQuery.value?.id] as const,\n// ([el]) => {\n// if (!el || !selectedQuery.value) return\n//\n// const observingComponents = findVueComponents(\n// el,\n// selectedQuery.value.deps.filter((c) => c.type === 'component').map((c) => c.uid) ?? [],\n// )\n//\n// console.log('elements', observingComponents)\n// },\n// )\n\nconst channel = useDuplexChannel()\n\nconst isDataOpen = ref(false)\nlet wasDataOpen = isDataOpen.value\nlet lastStatus: DataStateStatus | null = null\nconst isErrorOpen = ref(false)\nwatch(\n () => selectedQuery.value?.state,\n (state) => {\n if (!state || lastStatus === state.status) return\n lastStatus = state.status\n if (state.status === 'error') {\n isErrorOpen.value = true\n // preserve it for later\n wasDataOpen = isDataOpen.value\n isDataOpen.value = false\n } else if (state.status === 'success') {\n isDataOpen.value = wasDataOpen\n isErrorOpen.value = false\n }\n },\n)\n</script>\n\n<template>\n <div class=\"flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)\">\n <template v-if=\"selectedQuery\">\n <UCollapse title=\"Details\" :icon=\"IInfoCircle\">\n <div class=\"py-1 text-sm\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>key:</span>\n <span>\n <code class=\"rounded bg-neutral-500/20 p-0.5\">{{ selectedQuery.key }}</code>\n </span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the query entry last updated\"\n >\n <span>Last update:</span>\n <span class=\"font-bold\">{{ lastUpdate }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When was the last time the query was fetched\"\n >\n <span>Last fetch:</span>\n <span class=\"font-bold\">{{\n formatTimeAgo(new Date(selectedQuery.devtools.history.at(0)!.fetchTime!.start), {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n })\n }}</span>\n </p>\n\n <p\n v-if=\"selectedQuery.devtools.history.at(0)?.fetchTime?.end\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How long did the last query take to fetch\"\n >\n <span>Fetch duration:</span>\n <span class=\"font-bold\">{{\n formatDuration(\n selectedQuery.devtools.history.at(0)!.fetchTime!.end!\n - selectedQuery.devtools.history.at(0)!.fetchTime!.start,\n )\n }}</span>\n </p>\n\n <p\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"How many components and effects are using this query\"\n >\n <span>Observers: <span class=\"font-bold\">{{ selectedQuery.deps.length }}</span></span>\n </p>\n\n <p\n v-if=\"!selectedQuery.active && selectedQuery.options\"\n class=\"grid grid-cols-[auto_1fr] gap-x-2\"\n title=\"When is this query entry garbace collected\"\n >\n <template\n v-if=\"\n typeof selectedQuery.options.gcTime === 'number'\n && Number.isFinite(selectedQuery.options.gcTime)\n \"\n >\n <span>Will be <i>gced</i></span>\n <span class=\"font-bold\">{{\n formatTimeAgo(\n new Date(selectedQuery.devtools.inactiveAt + selectedQuery.options.gcTime),\n {\n ...TIME_AGO_OPTIONS,\n max: undefined,\n },\n )\n }}</span>\n </template>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Actions\" :icon=\"IWrench\">\n <div class=\"py-2 gap-2 flex flex-wrap items-center justify-items-start\">\n <UButton\n class=\"theme-info\"\n size=\"sm\"\n title=\"Refetch this query\"\n :disabled=\"selectedQuery.options?.enabled === false\"\n @click=\"channel.emit('queries:refetch', selectedQuery.key)\"\n >\n <i-lucide-refresh-cw class=\"size-3.5\" /> Refetch\n </UButton>\n\n <UButton\n class=\"theme-neutral\"\n size=\"sm\"\n title=\"Invalidate this query\"\n @click=\"channel.emit('queries:invalidate', selectedQuery.key)\"\n >\n <i-lucide-timer-reset /> Invalidate\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'loading'\"\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:loading', selectedQuery.key)\"\n >\n <i-lucide-loader />\n Simulate loading\n </UButton>\n <UButton\n v-else\n class=\"theme-purple\"\n size=\"sm\"\n title=\"Simulate a loading state\"\n @click=\"channel.emit('queries:simulate:loading:stop', selectedQuery.key)\"\n >\n <i-lucide-loader class=\"animate-spin\" />\n Stop loading\n </UButton>\n\n <UButton\n v-if=\"selectedQuery.devtools.simulate !== 'error'\"\n class=\"theme-error\"\n size=\"sm\"\n title=\"Simulate an Error state\"\n @click=\"channel.emit('queries:simulate:error', selectedQuery.key)\"\n >\n <i-lucide-x-octagon /> Simulate error\n </UButton>\n <UButton\n v-else\n class=\"theme-error\"\n size=\"sm\"\n title=\"Restore the previous state\"\n @click=\"channel.emit('queries:simulate:error:stop', selectedQuery.key)\"\n >\n <i-lucide-rotate-ccw /> Remove error\n </UButton>\n\n <UButton\n class=\"theme-warning\"\n size=\"sm\"\n title=\"Reset this query to its initial (pending) state\"\n @click=\"channel.emit('queries:reset', selectedQuery.key)\"\n >\n <i-lucide-trash /> Reset\n </UButton>\n </div>\n </UCollapse>\n\n <UCollapse v-model:open=\"isDataOpen\" title=\"Data\" :icon=\"IFileText\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.state.data !== undefined\"\n class=\"rounded p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.state.data }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No data\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n v-model:open=\"isErrorOpen\"\n :title=\"`Error${selectedQuery.state.status === 'error' ? ' (!)' : ''}`\"\n :icon=\"ICircleX\"\n >\n <div class=\"py-1\">\n <pre v-if=\"selectedQuery.state.error\" class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{\n selectedQuery.state.error\n }}</pre>\n <p v-else class=\"text-neutral-500/50\">\n No error\n </p>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Call count\" :icon=\"ISigmaSquare\" :open=\"false\">\n <div class=\"py-1\">\n <p class=\"grid grid-cols-[auto_1fr] gap-1\">\n <span>Calls:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.total }}</code>\n </span>\n <span>Success:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.succeed }}</code>\n </span>\n <span>Errors:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.errored }}</code>\n </span>\n <span>Cancelled:</span>\n <span>\n <code class=\"font-bold\">{{ selectedQuery.devtools.count.cancelled }}</code>\n </span>\n </p>\n </div>\n </UCollapse>\n\n <UCollapse\n :title=\"`History (${selectedQuery.devtools.history.length})`\"\n :icon=\"IHistory\"\n :open=\"false\"\n >\n <div class=\"py-1\">\n <UCollapse\n v-for=\"entry of selectedQuery.devtools.history\"\n :key=\"entry.updatedAt\"\n :title=\"`Entry nº${entry.id} (${formatTimeAgo(new Date(entry.updatedAt), TIME_AGO_OPTIONS)})`\"\n :open=\"false\"\n >\n <pre class=\"rounded p-1 overflow-auto max-h-[1200px]\">{{ entry }}</pre>\n </UCollapse>\n </div>\n </UCollapse>\n\n <UCollapse title=\"Options\" :open=\"false\" :icon=\"IBraces\">\n <div class=\"py-1\">\n <pre\n v-if=\"selectedQuery.options\"\n class=\"rounded bg-neutral-500/20 p-1 overflow-auto max-h-[1200px]\"\n >{{ selectedQuery.options }}</pre>\n <p v-else>\n This Query entry has no options. It might have been created from the server or manually\n set with\n <code>queryCache.setQueryData()</code> for prefetching.\n </p>\n </div>\n </UCollapse>\n </template>\n\n <template v-else>\n <div class=\"py-6 mx-auto\">\n <p class=\"flex flex-col text-center items-center gap-2 text-lg px-2\">\n Select a Query to inspect\n <i-lucide-mouse-pointer-click />\n </p>\n </div>\n </template>\n </div>\n</template>\n"],"names":["open","_useModel","__props","scrollIfNeeded","event","scrollOptions","formatDuration","timeInMs","seconds","minutes","route","useRoute","queries","useQueryEntries","selectedQuery","computed","entry","TIME_AGO_OPTIONS","lastUpdate","useTimeAgo","_a","channel","useDuplexChannel","isDataOpen","ref","wasDataOpen","lastStatus","isErrorOpen","watch","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQM,UAAAA,IAAOC,EAAqBC,GAAA,MAEjC;AAED,aAASC,EAAeC,GAAwB;AAC1C,UAAAA,EAAM,kBAAkB,aAAa;AACvC,cAAMC,IAAuC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,QACZ;AACM,QAAAD,EAAA,OAAO,eAAeC,CAAa;AAAA,MAAA;AAAA,IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpBK,SAASC,GAAeC,GAA0B;AACvD,MAAIA,IAAW;AACb,WAAO,GAAG,KAAK,MAAMA,CAAQ,CAAC;AAGhC,QAAMC,IAAUD,IAAW;AAC3B,MAAIA,IAAW;AACb,WAAO,GAAGC,EAAQ,QAAQ,CAAC,CAAC;AAG9B,MAAID,IAAW;AACb,WAAO,GAAG,KAAK,MAAMC,CAAO,CAAC;AAG/B,QAAMC,IAAU,KAAK,MAAMD,IAAU,EAAE;AAEvC,SAAID,IAAW,OACN,GAAGE,CAAO,UAAUA,IAAU,IAAI,MAAM,EAAE,KAK5C,GAFO,KAAK,MAAMA,IAAU,EAAE,CAEtB,IAAIA,IAAU,EAAE,IAAID,IAAU,EAAE;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACLM,UAAAE,IAAQC,EAA6B,GACrCC,IAAUC,EAAgB,GAE1BC,IAAgBC,EAAsC,MACnDH,EAAQ,MAAM,KAAK,CAACI,MAAUA,EAAM,YAAYN,EAAM,OAAO,OAAO,KAAK,IACjF,GAEKO,IAAyC;AAAA,MAC7C,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,MAAO,KAAK;AAAA;AAAA,IACnB,GAEMC,IAAaC,EAAW,MAAM;;AAAA,eAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,SAAS,cAAa;AAAA,OAAG;AAAA,MAChF,GAAGH;AAAA,MACH,gBAAgB;AAAA,IAAA,CACjB,GAoBKI,IAAUC,EAAiB,GAE3BC,IAAaC,EAAI,EAAK;AAC5B,QAAIC,IAAcF,EAAW,OACzBG,IAAqC;AACnC,UAAAC,IAAcH,EAAI,EAAK;AAC7B,WAAAI;AAAA,MACE,MAAM;;AAAA,gBAAAR,IAAAN,EAAc,UAAd,gBAAAM,EAAqB;AAAA;AAAA,MAC3B,CAACS,MAAU;AACT,QAAI,CAACA,KAASH,MAAeG,EAAM,WACnCH,IAAaG,EAAM,QACfA,EAAM,WAAW,WACnBF,EAAY,QAAQ,IAEpBF,IAAcF,EAAW,OACzBA,EAAW,QAAQ,MACVM,EAAM,WAAW,cAC1BN,EAAW,QAAQE,GACnBE,EAAY,QAAQ;AAAA,MACtB;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-panel/{index-CAv-3vCR.js → index-BqoCeMqo.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { _ as e, c, o as n } from "./index-BdIpA-g4.js";
+import { _ as e, c, o as n } from "./index-hPJdBAcc.js";
 const o = {};
 function r(t, a) {
   return n(), c("h1", null, "Homepage");
@@ -7,4 +7,4 @@ const _ = /* @__PURE__ */ e(o, [["render", r]]);
 export {
   _ as default
 };
-//# sourceMappingURL=index-CAv-3vCR.js.map
+//# sourceMappingURL=index-BqoCeMqo.js.map

package/dist-panel/{index-CAv-3vCR.js.map → index-BqoCeMqo.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index-~~CAv-3vCR~~.js","sources":["../src/panel/pages/index.vue"],"sourcesContent":["<script setup lang=\"ts\"></script>\n\n<template>\n <h1>Homepage</h1>\n</template>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;AAGE,SAAAA,EAAA,GAAAC,EAAiB,YAAb,UAAQ;;;"}
1	+ {"version":3,"file":"index-BqoCeMqo.js","sources":["../src/panel/pages/index.vue"],"sourcesContent":["<script setup lang=\"ts\"></script>\n\n<template>\n <h1>Homepage</h1>\n</template>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;AAGE,SAAAA,EAAA,GAAAC,EAAiB,YAAb,UAAQ;;;"}

package/dist-panel/{index-DZwqU9e-.js → index-D9g_5JvD.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { _ as o } from "./mouse-pointer-click-BHnWXkC_.js";
-import { _ as c, c as s, o as n, a as _, O as a, k as r } from "./index-BdIpA-g4.js";
+import { _ as o } from "./mouse-pointer-click-BVbSKgPQ.js";
+import { _ as c, c as s, o as n, a as _, P as a, k as r } from "./index-hPJdBAcc.js";
 const i = {}, l = { class: "py-6 mx-auto" }, p = { class: "flex flex-col text-center items-center gap-2 text-lg px-2" };
 function d(m, e) {
   const t = o;
@@ -14,4 +14,4 @@ const u = /* @__PURE__ */ c(i, [["render", d]]);
 export {
   u as default
 };
-//# sourceMappingURL=index-DZwqU9e-.js.map
+//# sourceMappingURL=index-D9g_5JvD.js.map

package/dist-panel/{index-DZwqU9e-.js.map → index-D9g_5JvD.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index-~~DZwqU9e-.~~js","sources":["../src/panel/pages/queries/index.vue"],"sourcesContent":["<script setup lang=\"ts\"></script>\n\n<template>\n <div class=\"py-6 mx-auto\">\n <p class=\"flex flex-col text-center items-center gap-2 text-lg px-2\">\n Select a Query to inspect\n <i-lucide-mouse-pointer-click />\n </p>\n </div>\n</template>\n"],"names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_cache","_createTextVNode","_createVNode","_component_i_lucide_mouse_pointer_click"],"mappings":";;cAGOA,IAAA,EAAA,OAAM,eAAc,GACpBC,IAAA,EAAA,OAAM,4DAA2D;;;AADtE,SAAAC,EAAA,GAAAC,EAKM,OALNH,GAKM;AAAA,IAJJI,EAGI,KAHJH,GAGI;AAAA,MAPRI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAIyE,6BAEnE;AAAA,MAAAC,EAAgCC,CAAA;AAAA;;;;"}
1	+ {"version":3,"file":"index-D9g_5JvD.js","sources":["../src/panel/pages/queries/index.vue"],"sourcesContent":["<script setup lang=\"ts\"></script>\n\n<template>\n <div class=\"py-6 mx-auto\">\n <p class=\"flex flex-col text-center items-center gap-2 text-lg px-2\">\n Select a Query to inspect\n <i-lucide-mouse-pointer-click />\n </p>\n </div>\n</template>\n"],"names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_cache","_createTextVNode","_createVNode","_component_i_lucide_mouse_pointer_click"],"mappings":";;cAGOA,IAAA,EAAA,OAAM,eAAc,GACpBC,IAAA,EAAA,OAAM,4DAA2D;;;AADtE,SAAAC,EAAA,GAAAC,EAKM,OALNH,GAKM;AAAA,IAJJI,EAGI,KAHJH,GAGI;AAAA,MAPRI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAIyE,6BAEnE;AAAA,MAAAC,EAAgCC,CAAA;AAAA;;;;"}