@pinia/colada-devtools 0.4.1 → 0.4.3

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 (41) hide show
  1. package/dist/index.js +131 -131
  2. package/dist/index.js.map +1 -1
  3. package/dist-panel/{(unselected)-1XtzP47s.js → (unselected)-BQ3qDKQ9.js} +4 -4
  4. package/dist-panel/{(unselected)-1XtzP47s.js.map → (unselected)-BQ3qDKQ9.js.map} +1 -1
  5. package/dist-panel/(unselected)-DAm41Y3x.js +17 -0
  6. package/dist-panel/{(unselected)-CF4tcOEp.js.map → (unselected)-DAm41Y3x.js.map} +1 -1
  7. package/dist-panel/{_mutationId_-DmzWbpVT.js → _mutationId_int_-erdQKyLR.js} +39 -39
  8. package/dist-panel/_mutationId_int_-erdQKyLR.js.map +1 -0
  9. package/dist-panel/{_queryId_-5tGPPWCM.js → _queryId_-B4Df55YE.js} +51 -51
  10. package/dist-panel/{_queryId_-5tGPPWCM.js.map → _queryId_-B4Df55YE.js.map} +1 -1
  11. package/dist-panel/{circle-x-eNhJ6QJ3.js → circle-x-InxlHvaS.js} +35 -35
  12. package/dist-panel/{circle-x-eNhJ6QJ3.js.map → circle-x-InxlHvaS.js.map} +1 -1
  13. package/dist-panel/index-CYb5D1Be.js +6270 -0
  14. package/dist-panel/index-CYb5D1Be.js.map +1 -0
  15. package/dist-panel/index-DLKyTdsm.js +10 -0
  16. package/dist-panel/{index-C5FekW9K.js.map → index-DLKyTdsm.js.map} +1 -1
  17. package/dist-panel/index.js +1 -1
  18. package/dist-panel/{loader-DjhAUFXk.js → loader-Ca7c0zg-.js} +4 -4
  19. package/dist-panel/loader-Ca7c0zg-.js.map +1 -0
  20. package/dist-panel/{mouse-pointer-click-BwcHzNw_.js → mouse-pointer-click-ClYfwImy.js} +3 -3
  21. package/dist-panel/mouse-pointer-click-ClYfwImy.js.map +1 -0
  22. package/dist-panel/{mutations-Fiuj8fCV.js → mutations-pMmse5fr.js} +15 -15
  23. package/dist-panel/mutations-pMmse5fr.js.map +1 -0
  24. package/dist-panel/queries-BM6WYBXZ.js +312 -0
  25. package/dist-panel/queries-BM6WYBXZ.js.map +1 -0
  26. package/dist-panel/settings-C2hLj-3B.js +10 -0
  27. package/dist-panel/{settings-BHmLo73t.js.map → settings-C2hLj-3B.js.map} +1 -1
  28. package/dist-panel/{use-container-media-query-DHWhgIKV.js → use-container-media-query-CrxtYrv0.js} +43 -43
  29. package/dist-panel/{use-container-media-query-DHWhgIKV.js.map → use-container-media-query-CrxtYrv0.js.map} +1 -1
  30. package/package.json +11 -12
  31. package/dist-panel/(unselected)-CF4tcOEp.js +0 -17
  32. package/dist-panel/_mutationId_-DmzWbpVT.js.map +0 -1
  33. package/dist-panel/index-C5FekW9K.js +0 -10
  34. package/dist-panel/index-D0GQZaew.js +0 -6438
  35. package/dist-panel/index-D0GQZaew.js.map +0 -1
  36. package/dist-panel/loader-DjhAUFXk.js.map +0 -1
  37. package/dist-panel/mouse-pointer-click-BwcHzNw_.js.map +0 -1
  38. package/dist-panel/mutations-Fiuj8fCV.js.map +0 -1
  39. package/dist-panel/queries-Czfs9c3l.js +0 -286
  40. package/dist-panel/queries-Czfs9c3l.js.map +0 -1
  41. package/dist-panel/settings-BHmLo73t.js +0 -10
@@ -1 +0,0 @@
1
- {"version":3,"file":"loader-DjhAUFXk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"mouse-pointer-click-BwcHzNw_.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"mutations-Fiuj8fCV.js","sources":["../src/panel/utils/mutation-state.ts","../src/panel/components/ListMutationEntry.vue","../src/panel/pages/mutations.vue"],"sourcesContent":["import type { UseMutationEntryPayload } from '@pinia/colada-devtools/shared'\n\nexport type UseMutationEntryPayloadStatus =\n | 'loading'\n | 'success'\n | 'error'\n | 'pending'\n | 'idle'\n | 'inactive'\n\nexport function getMutationStatus(entry: UseMutationEntryPayload): UseMutationEntryPayloadStatus {\n if (entry.asyncStatus === 'loading') {\n return 'loading'\n }\n if (entry.state.status === 'error') {\n return 'error'\n }\n if (entry.state.status === 'success') {\n return 'success'\n }\n if (entry.state.status === 'pending') {\n return 'pending'\n }\n\n return 'idle'\n}\n\nexport const STATUS_COLOR_CLASSES: Record<\n UseMutationEntryPayloadStatus,\n {\n base: string\n clear: string\n text: string\n }\n> = {\n loading: {\n base: 'bg-purple-400',\n clear: 'bg-purple-200',\n text: 'text-purple-100',\n },\n success: {\n base: 'bg-success-500',\n clear: 'bg-success-200',\n text: 'text-success-100',\n },\n error: {\n base: 'bg-error-500',\n clear: 'bg-error-200',\n text: 'text-error-100',\n },\n pending: {\n base: 'bg-warning-500',\n clear: 'bg-warning-200',\n text: 'text-warning-100',\n },\n idle: {\n base: 'bg-neutral-400',\n clear: 'bg-neutral-200',\n text: 'text-neutral-100',\n },\n inactive: {\n base: 'bg-neutral-400',\n clear: 'bg-neutral-200',\n text: 'text-neutral-100',\n },\n}\n","<script setup lang=\"ts\">\nimport type { UseMutationEntryPayload } from '@pinia/colada-devtools/shared'\nimport { computed } from 'vue'\nimport { getMutationStatus, STATUS_COLOR_CLASSES } from '../utils/mutation-state'\nimport { useRouter } from 'vue-router'\nimport { usePerformanceNow } from '../composables/performance-now'\nimport { useFormattedKey } from '../composables/entries'\n\nconst { entry } = defineProps<{\n entry: UseMutationEntryPayload\n}>()\nconst router = useRouter()\nconst now = usePerformanceNow()\n\nfunction unselect(event: MouseEvent) {\n event.preventDefault()\n event.stopPropagation()\n router.push('/mutations')\n}\n\nconst formattedKey = useFormattedKey(() => entry.key)\nconst isAnonymous = computed(() => !entry.key)\nconst status = computed(() => getMutationStatus(entry))\n</script>\n\n<template>\n <RouterLink\n v-slot=\"{ isActive, navigate, href }\"\n :to=\"{ name: '/mutations/[mutationId]', params: { mutationId: entry.id } }\"\n custom\n >\n <div\n class=\"grid grid-cols-[minmax(0,auto)_1fr] grid-flow-col items-center gap-x-2 p-1 relative text-sm @container\"\n :class=\"[\n isActive ? 'bg-neutral-200 dark:bg-neutral-700' : 'hover:bg-(--ui-bg-elevated)',\n entry.active ? '' : 'text-(--ui-text)/50',\n ]\"\n >\n <div class=\"h-full w-6 relative\">\n <div\n class=\"absolute -inset-1 right-0 flex items-center justify-center\"\n :class=\"STATUS_COLOR_CLASSES[status].base\"\n :title=\"status\"\n >\n <i-lucide-loader v-if=\"status === 'loading'\" title=\"Loading\" aria-label=\"Loading icon\" />\n <i-lucide-check\n v-else-if=\"status === 'success'\"\n title=\"Success\"\n aria-label=\"Success icon\"\n />\n <i-lucide-x-octagon\n v-else-if=\"status === 'error'\"\n title=\"Error\"\n aria-label=\"Error icon\"\n />\n <i-lucide-pause\n v-else-if=\"status === 'pending'\"\n title=\"Pending\"\n aria-label=\"Pending icon\"\n />\n <i-lucide-circle v-else-if=\"status === 'idle'\" title=\"Idle\" aria-label=\"Idle icon\" />\n <i-lucide-circle\n v-else-if=\"status === 'inactive'\"\n title=\"Inactive\"\n aria-label=\"Inactive icon\"\n />\n </div>\n </div>\n\n <a\n :href\n class=\"hover:cursor-pointer block overflow-hidden\"\n :title=\"`${isAnonymous ? 'Anonymous' : 'Mutation'} execution ${entry.id}`\"\n @click=\"isActive ? unselect($event) : navigate($event)\"\n >\n <div class=\"flex items-center gap-1.5\">\n <ol class=\"flex font-mono grow gap-0.5 overflow-auto items-center\" v-if=\"formattedKey\">\n <template v-for=\"(key, i) in formattedKey\" :key=\"i\">\n <li class=\"text-wrap wrap-break-word rounded px-0.5 bg-(--ui-text)/5\">\n {{ key }}\n </li>\n <li v-if=\"i < formattedKey.length - 1\" aria-hidden=\"true\">/</li>\n </template>\n <li class=\"text-xs text-(--ui-text-muted)\">({{ entry.id }})</li>\n </ol>\n <div\n v-if=\"isAnonymous\"\n class=\"grid grid-cols-[auto_auto_1fr] gap-1.5 items-center w-full\"\n >\n <i-lucide-file-question class=\"text-(--ui-text-muted) grow\" />\n <span class=\"text-xs\">{{ entry.id }}</span>\n <span>\n <span class=\"font-mono rounded px-0.5 bg-(--ui-text)/8\">{{\n new Date(entry.when).toISOString()\n }}</span>\n </span>\n </div>\n </div>\n </a>\n\n <div\n v-if=\"\n !entry.active &&\n entry.gcTimeout &&\n entry.devtools.inactiveAt &&\n typeof entry.options?.gcTime === 'number' &&\n Number.isFinite(entry.options.gcTime) &&\n entry.options.gcTime <= 30_000\n \"\n title=\"This mutation will be garbage collected\"\n >\n <UCircleProgress\n class=\"size-[1em] dark:text-neutral-500 text-neutral-400\"\n :max=\"entry.options.gcTime\"\n :value=\"entry.devtools.inactiveAt + entry.options.gcTime - now\"\n />\n </div>\n </div>\n </RouterLink>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { Pane, Splitpanes } from '@posva/splitpanes'\nimport { useMutationEntries } from '../composables/duplex-channel'\nimport { getMutationStatus, STATUS_COLOR_CLASSES } from '../utils/mutation-state'\nimport type { UseMutationEntryPayloadStatus } from '../utils/mutation-state'\nimport type { UseMutationEntryPayload } from '@pinia/colada-devtools/shared'\nimport { useContainerMediaQuery } from '../composables/use-container-media-query'\nimport { useLocalStorage } from '@vueuse/core'\n\nconst searchQuery = ref('')\n\nconst mutations = useMutationEntries()\n\nconst filteredItems = computed(() => {\n let items = mutations.value\n\n if (searchQuery.value) {\n const query = searchQuery.value.toLowerCase()\n items = items.filter((item) => {\n if (!item.key) return false\n return item.key.some((v) => String(v).toLowerCase().includes(query))\n })\n }\n\n // Sort by most recent first\n return items.toSorted((a, b) => {\n return b.devtools.updatedAt - a.devtools.updatedAt\n })\n})\n\nconst mutationsGrouped = computed<Record<UseMutationEntryPayloadStatus, UseMutationEntryPayload[]>>(\n () => {\n return {\n loading: [],\n success: [],\n error: [],\n pending: [],\n idle: [],\n inactive: filteredItems.value.filter((item) => !item.active),\n ...Object.groupBy(filteredItems.value, (item) => getMutationStatus(item)),\n }\n },\n)\n\nconst container = useTemplateRef('split-panes-container')\nconst isNarrow = useContainerMediaQuery('(width < 768px)', () => container.value?.$el)\n\nconst mutationListPanelSize = useLocalStorage<number[]>(\n 'pc-devtools-mutation-list-panel-size',\n [30, 70],\n)\n\nfunction updatePanesSize({ panes }: { panes: { size: number }[] }) {\n mutationListPanelSize.value = panes.map((pane) => pane.size)\n}\n</script>\n\n<template>\n <section class=\"grid grid-rows-[auto_1fr] overflow-hidden @container\">\n <!-- Search & Actions Bar -->\n <div class=\"flex items-center p-2 border-b border-(--ui-border) gap-2\">\n <div class=\"relative grow\">\n <i-lucide-search\n class=\"absolute left-2 top-1/2 -translate-y-1/2 text-ui-text-muted size-4\"\n />\n <UInput v-model=\"searchQuery\" type=\"search\" class=\"w-full\" placeholder=\"Search Mutations\" />\n </div>\n\n <div class=\"flex gap-x-1\">\n <div\n v-for=\"(mutationGroup, status) in mutationsGrouped\"\n :key=\"status\"\n class=\"theme-neutral bg-(--ui-bg-muted) rounded p-1 text-xs font-semibold flex items-center gap-x-1\"\n :class=\"(mutationGroup?.length ?? 0) === 0 ? 'text-(--ui-text-muted)' : ''\"\n :title=\"`${mutationGroup?.length ?? 0} ${status} mutations (after filtering)`\"\n >\n <div class=\"rounded-full size-2\" :class=\"STATUS_COLOR_CLASSES[status].base\" />\n <span class=\"@max-[750px]:hidden\">{{ status }}</span>\n <div\n class=\"px-1.5 py-0.5 rounded min-w-[1.65em] flex justify-center\"\n :class=\"\n (mutationGroup?.length ?? 0) === 0\n ? 'bg-(--ui-bg-accented)'\n : [STATUS_COLOR_CLASSES[status].base, STATUS_COLOR_CLASSES[status].text]\n \"\n >\n <span>{{ mutationGroup?.length ?? 0 }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <Splitpanes\n ref=\"split-panes-container\"\n class=\"overflow-hidden\"\n :horizontal=\"isNarrow\"\n @resized=\"updatePanesSize\"\n >\n <!-- List Panel -->\n <Pane min-size=\"15\" :size=\"mutationListPanelSize[0]\" class=\"flex flex-col\">\n <ol role=\"list\" class=\"divide-y divide-(--ui-border)\" v-if=\"filteredItems.length > 0\">\n <li v-for=\"entry of filteredItems\" :key=\"entry.id\">\n <ListMutationEntry :entry />\n </li>\n </ol>\n <div\n v-else\n class=\"flex flex-col items-center p-4 text-(--ui-text-muted) text-sm text-center gap-2\"\n >\n <i-lucide-inbox class=\"size-8\" />\n <h3 class=\"text-lg\">No mutations found</h3>\n <p>Try adjusting your search or perform some mutations in your app.</p>\n </div>\n </Pane>\n\n <!-- Details Panel -->\n <Pane min-size=\"30\" :size=\"mutationListPanelSize[1]\" class=\"flex flex-col\">\n <RouterView />\n </Pane>\n </Splitpanes>\n </section>\n</template>\n"],"names":["getMutationStatus","entry","STATUS_COLOR_CLASSES","router","useRouter","now","usePerformanceNow","unselect","event","formattedKey","useFormattedKey","__props","isAnonymous","computed","status","_createBlock","_component_RouterLink","_withCtx","isActive","navigate","href","_createElementVNode","_hoisted_1","_unref","_component_i_lucide_loader","_component_i_lucide_check","_component_i_lucide_x_octagon","_component_i_lucide_pause","_component_i_lucide_circle","$event","_hoisted_4","_openBlock","_createElementBlock","_hoisted_5","_Fragment","_renderList","key","i","_hoisted_6","_toDisplayString","_hoisted_7","_hoisted_8","_hoisted_9","_createVNode","_component_i_lucide_file_question","_hoisted_10","_hoisted_11","_hoisted_12","_component_UCircleProgress","searchQuery","ref","mutations","useMutationEntries","filteredItems","items","query","item","a","b","mutationsGrouped","container","useTemplateRef","isNarrow","useContainerMediaQuery","mutationListPanelSize","useLocalStorage","updatePanesSize","panes","pane","_hoisted_2","_hoisted_3","_component_i_lucide_search","_component_UInput","mutationGroup","_normalizeClass","Splitpanes","Pane","_component_ListMutationEntry","_component_i_lucide_inbox","_cache","_component_RouterView"],"mappings":"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"}
@@ -1,286 +0,0 @@
1
- import { u as F, a as I, _ as U, b as O, c as D, d as H, e as K, f as M, h as J, x as j, g as W } from "./use-container-media-query-DHWhgIKV.js";
2
- import { m as B, c as o, o as n, a as t, d as E, b as T, e as p, w as k, f as q, n as v, g as r, F as z, h as R, t as V, i as c, r as N, u as X, j as Y, C as Z, l as G, p as ee } from "./index-D0GQZaew.js";
3
- import { _ as te, a as ne } from "./loader-DjhAUFXk.js";
4
- const se = {
5
- viewBox: "0 0 24 24",
6
- width: "1.2em",
7
- height: "1.2em"
8
- };
9
- function oe(e, i) {
10
- return n(), o("svg", se, [...i[0] || (i[0] = [
11
- t("g", {
12
- fill: "none",
13
- stroke: "currentColor",
14
- "stroke-linecap": "round",
15
- "stroke-linejoin": "round",
16
- "stroke-width": "2"
17
- }, [
18
- t("circle", {
19
- cx: "12",
20
- cy: "12",
21
- r: "10"
22
- }),
23
- t("path", { d: "m9 15l6-6" })
24
- ], -1)
25
- ])]);
26
- }
27
- const re = B({ name: "lucide-circle-slash", render: oe }), ie = {
28
- viewBox: "0 0 24 24",
29
- width: "1.2em",
30
- height: "1.2em"
31
- };
32
- function ae(e, i) {
33
- return n(), o("svg", ie, [...i[0] || (i[0] = [
34
- t("path", {
35
- fill: "none",
36
- stroke: "currentColor",
37
- "stroke-linecap": "round",
38
- "stroke-linejoin": "round",
39
- "stroke-width": "2",
40
- d: "M18 6L7 17l-5-5m20-2l-7.5 7.5L13 16"
41
- }, null, -1)
42
- ])]);
43
- }
44
- const le = B({ name: "lucide-check-check", render: ae });
45
- function P(e) {
46
- return e.asyncStatus === "loading" ? "loading" : e.state.status === "error" ? "error" : e.state.status === "pending" ? "pending" : e.stale ? "stale" : e.state.status === "success" ? "fresh" : "unknown";
47
- }
48
- const w = {
49
- loading: {
50
- base: "bg-purple-400",
51
- clear: "bg-purple-200",
52
- text: "text-purple-100"
53
- },
54
- fresh: {
55
- base: "bg-success-500",
56
- clear: "bg-success-200",
57
- text: "text-success-100"
58
- },
59
- error: {
60
- base: "bg-error-500",
61
- clear: "bg-error-200",
62
- text: "text-error-100"
63
- },
64
- stale: {
65
- base: "bg-info-500",
66
- clear: "bg-info-200",
67
- text: "text-info-100"
68
- },
69
- pending: {
70
- base: "bg-warning-500",
71
- clear: "bg-warning-200",
72
- text: "text-warning-100"
73
- },
74
- inactive: {
75
- base: "bg-neutral-400",
76
- clear: "bg-neutral-200",
77
- text: "text-neutral-100"
78
- },
79
- unknown: {
80
- base: "bg-gray-400",
81
- clear: "bg-gray-200",
82
- text: "text-gray-100"
83
- }
84
- }, ce = { class: "h-full w-6 relative" }, ue = ["title"], de = ["href", "title", "onClick"], _e = { class: "flex font-mono grow gap-0.5 overflow-auto items-center" }, me = { class: "text-wrap wrap-break-word rounded bg-(--ui-text)/5 px-0.5" }, ge = {
85
- key: 0,
86
- "aria-hidden": "true"
87
- }, pe = {
88
- key: 0,
89
- title: "This query is disabled"
90
- }, fe = { class: "rounded bg-theme/70 theme-neutral p-0.5 text-xs flex gap-x-0.5 items-center" }, he = {
91
- key: 1,
92
- title: "This query will be garbage collected"
93
- }, xe = /* @__PURE__ */ E({
94
- __name: "ListQueryEntry",
95
- props: {
96
- entry: {}
97
- },
98
- setup(e) {
99
- const i = X(), $ = F();
100
- function m(f) {
101
- f.preventDefault(), f.stopPropagation(), i.push("/queries");
102
- }
103
- const b = I(() => e.entry.key), u = T(() => P(e.entry));
104
- return (f, g) => {
105
- const C = te, a = le, s = ne, _ = U, y = O, h = re, S = D, L = N("RouterLink");
106
- return n(), p(L, {
107
- to: { name: "/queries/[queryId]", params: { queryId: e.entry.keyHash } },
108
- custom: ""
109
- }, {
110
- default: k(({ isActive: l, navigate: d, href: Q }) => [
111
- t("div", {
112
- class: v(["grid grid-cols-[minmax(0,auto)_1fr] grid-flow-col items-center gap-x-2 p-1 relative text-sm @container", [
113
- l ? "bg-neutral-200 dark:bg-neutral-700" : "hover:bg-(--ui-bg-elevated)",
114
- e.entry.active ? "" : "text-(--ui-text)/50"
115
- ]])
116
- }, [
117
- t("div", ce, [
118
- t("div", {
119
- class: v(["absolute -inset-1 right-0 flex items-center justify-center", r(w)[u.value].base]),
120
- title: u.value
121
- }, [
122
- u.value === "loading" ? (n(), p(C, {
123
- key: 0,
124
- title: "Loading",
125
- "aria-label": "Loading icon"
126
- })) : u.value === "fresh" ? (n(), p(a, {
127
- key: 1,
128
- title: "Fresh successful data",
129
- "aria-label": "Fresh successful data icon"
130
- })) : u.value === "error" ? (n(), p(s, {
131
- key: 2,
132
- title: "Error",
133
- "aria-label": "Error icon"
134
- })) : u.value === "stale" ? (n(), p(_, {
135
- key: 3,
136
- title: "Stale",
137
- "aria-label": "Stale icon"
138
- })) : u.value === "pending" ? (n(), p(y, {
139
- key: 4,
140
- title: "Pending",
141
- "aria-label": "Pending icon"
142
- })) : q("", !0)
143
- ], 10, ue)
144
- ]),
145
- t("a", {
146
- href: Q,
147
- class: "hover:cursor-pointer block overflow-hidden",
148
- title: e.entry.active ? "Active query" : "Inactive query",
149
- onClick: (x) => l ? m(x) : d(x)
150
- }, [
151
- t("ol", _e, [
152
- (n(!0), o(z, null, R(r(b), (x, A) => (n(), o(z, { key: x }, [
153
- t("li", me, V(x), 1),
154
- A < r(b).length - 1 ? (n(), o("li", ge, "/")) : q("", !0)
155
- ], 64))), 128))
156
- ])
157
- ], 8, de),
158
- e.entry.options?.enabled === !1 ? (n(), o("div", pe, [
159
- t("span", fe, [
160
- c(h, { "aria-hidden": "" }),
161
- g[0] || (g[0] = t("span", { class: "@max-md:hidden" }, "disabled", -1))
162
- ])
163
- ])) : !e.entry.active && e.entry.gcTimeout && e.entry.devtools.inactiveAt && typeof e.entry.options?.gcTime == "number" && Number.isFinite(e.entry.options.gcTime) && e.entry.options.gcTime <= 3e4 ? (n(), o("div", he, [
164
- c(S, {
165
- class: "size-[1em] dark:text-neutral-500 text-neutral-400",
166
- max: e.entry.options.gcTime,
167
- value: e.entry.devtools.inactiveAt + e.entry.options.gcTime - r($)
168
- }, null, 8, ["max", "value"])
169
- ])) : q("", !0)
170
- ], 2)
171
- ]),
172
- _: 1
173
- }, 8, ["to"]);
174
- };
175
- }
176
- }), ve = { class: "grid grid-rows-[auto_1fr] overflow-hidden @container" }, be = { class: "flex items-center p-2 border-b border-(--ui-border) gap-2" }, ye = { class: "relative grow" }, ke = { class: "flex gap-x-1" }, we = ["title"], ze = { class: "@max-[750px]:hidden" }, $e = {
177
- key: 0,
178
- role: "list",
179
- class: "divide-y divide-(--ui-border)"
180
- }, Ce = {
181
- key: 1,
182
- class: "flex flex-col items-center p-4 text-(--ui-text-muted) text-sm text-center gap-2"
183
- }, Te = /* @__PURE__ */ E({
184
- __name: "queries",
185
- setup(e) {
186
- const i = Y(""), $ = Z(), m = T(() => {
187
- let a = $.value;
188
- if (i.value) {
189
- const s = i.value.toLowerCase();
190
- a = a.filter((_) => _.key.some((h) => String(h).toLowerCase().includes(s)));
191
- }
192
- return a.toSorted((s, _) => _.devtools.updatedAt - s.devtools.updatedAt);
193
- }), b = T(() => ({
194
- loading: [],
195
- fresh: [],
196
- error: [],
197
- pending: [],
198
- inactive: m.value.filter((a) => !a.active),
199
- ...Object.groupBy(m.value, (a) => P(a))
200
- })), u = G("split-panes-container"), f = H("(width < 768px)", () => u.value?.$el), g = ee("pc-devtools-query-list-panel-size", [30, 70]);
201
- function C({ panes: a }) {
202
- g.value = a.map((s) => s.size);
203
- }
204
- return (a, s) => {
205
- const _ = K, y = M, h = xe, S = W, L = N("RouterView");
206
- return n(), o("section", ve, [
207
- t("div", be, [
208
- t("div", ye, [
209
- c(_, { class: "absolute left-2 top-1/2 -translate-y-1/2 text-ui-text-muted size-4" }),
210
- c(y, {
211
- modelValue: i.value,
212
- "onUpdate:modelValue": s[0] || (s[0] = (l) => i.value = l),
213
- type: "search",
214
- class: "w-full",
215
- placeholder: "Search Queries"
216
- }, null, 8, ["modelValue"])
217
- ]),
218
- t("div", ke, [
219
- (n(!0), o(z, null, R(b.value, (l, d) => (n(), o("div", {
220
- key: d,
221
- class: v(["theme-neutral bg-(--ui-bg-muted) rounded p-1 text-xs font-semibold flex items-center gap-x-1", (l?.length ?? 0) === 0 ? "text-(--ui-text-muted)" : ""]),
222
- title: `${l?.length ?? 0} ${d} queries (after filtering)`
223
- }, [
224
- t("div", {
225
- class: v(["rounded-full size-2", r(w)[d].base])
226
- }, null, 2),
227
- t("span", ze, V(d), 1),
228
- t("div", {
229
- class: v([
230
- "px-1.5 py-0.5 rounded min-w-[1.65em] flex justify-center",
231
- (l?.length ?? 0) === 0 ? "bg-(--ui-bg-accented)" : [r(w)[d].base, r(w)[d].text]
232
- ])
233
- }, [
234
- t("span", null, V(l?.length ?? 0), 1)
235
- ], 2)
236
- ], 10, we))), 128))
237
- ])
238
- ]),
239
- c(r(J), {
240
- ref: "split-panes-container",
241
- class: "overflow-hidden",
242
- horizontal: r(f),
243
- onResized: C
244
- }, {
245
- default: k(() => [
246
- c(r(j), {
247
- "min-size": "15",
248
- size: r(g)[0],
249
- class: "flex flex-col"
250
- }, {
251
- default: k(() => [
252
- m.value.length > 0 ? (n(), o("ol", $e, [
253
- (n(!0), o(z, null, R(m.value, (l) => (n(), o("li", {
254
- key: l.keyHash
255
- }, [
256
- c(h, { entry: l }, null, 8, ["entry"])
257
- ]))), 128))
258
- ])) : (n(), o("div", Ce, [
259
- c(S, { class: "size-8" }),
260
- s[1] || (s[1] = t("h3", { class: "text-lg" }, "No queries found", -1)),
261
- s[2] || (s[2] = t("p", null, "Try adjusting your search or perform some mutations in your app.", -1))
262
- ]))
263
- ]),
264
- _: 1
265
- }, 8, ["size"]),
266
- c(r(j), {
267
- "min-size": "30",
268
- size: r(g)[1],
269
- class: "flex flex-col"
270
- }, {
271
- default: k(() => [
272
- c(L)
273
- ]),
274
- _: 1
275
- }, 8, ["size"])
276
- ]),
277
- _: 1
278
- }, 8, ["horizontal"])
279
- ]);
280
- };
281
- }
282
- });
283
- export {
284
- Te as default
285
- };
286
- //# sourceMappingURL=queries-Czfs9c3l.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"queries-Czfs9c3l.js","sources":["../src/panel/utils/query-state.ts","../src/panel/components/ListQueryEntry.vue","../src/panel/pages/queries.vue"],"sourcesContent":["import type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\n\nexport type UseQueryEntryPayloadStatus =\n | 'loading'\n | 'fresh'\n | 'error'\n | 'stale'\n | 'pending'\n | 'unknown'\n\nexport function getQueryStatus(entry: UseQueryEntryPayload): UseQueryEntryPayloadStatus {\n if (entry.asyncStatus === 'loading') {\n return 'loading'\n }\n if (entry.state.status === 'error') {\n return 'error'\n }\n if (entry.state.status === 'pending') {\n return 'pending'\n }\n if (entry.stale) {\n return 'stale'\n }\n if (entry.state.status === 'success') {\n return 'fresh'\n }\n\n return 'unknown'\n}\n\nexport const STATUS_COLOR_CLASSES: Record<\n UseQueryEntryPayloadStatus | 'inactive',\n {\n base: string\n clear: string\n text: string\n }\n> = {\n loading: {\n base: 'bg-purple-400',\n clear: 'bg-purple-200',\n text: 'text-purple-100',\n },\n fresh: {\n base: 'bg-success-500',\n clear: 'bg-success-200',\n text: 'text-success-100',\n },\n error: {\n base: 'bg-error-500',\n clear: 'bg-error-200',\n text: 'text-error-100',\n },\n stale: {\n base: 'bg-info-500',\n clear: 'bg-info-200',\n text: 'text-info-100',\n },\n pending: {\n base: 'bg-warning-500',\n clear: 'bg-warning-200',\n text: 'text-warning-100',\n },\n inactive: {\n base: 'bg-neutral-400',\n clear: 'bg-neutral-200',\n text: 'text-neutral-100',\n },\n unknown: {\n base: 'bg-gray-400',\n clear: 'bg-gray-200',\n text: 'text-gray-100',\n },\n}\n","<script setup lang=\"ts\">\nimport type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\nimport { computed } from 'vue'\nimport { getQueryStatus, STATUS_COLOR_CLASSES } from '../utils/query-state'\nimport { useRouter } from 'vue-router'\nimport { usePerformanceNow } from '../composables/performance-now'\nimport { useFormattedKey } from '../composables/entries'\n\nconst { entry } = defineProps<{\n entry: UseQueryEntryPayload\n}>()\nconst router = useRouter()\n\nconst now = usePerformanceNow()\n// const now = useNow({ interval: Math.max(100, (entry.options?.gcTime || 0) / 30) })\n\nfunction unselect(event: MouseEvent) {\n event.preventDefault()\n event.stopPropagation()\n router.push('/queries')\n}\n\nconst formattedKey = useFormattedKey(() => entry.key)\nconst status = computed(() => getQueryStatus(entry))\n</script>\n\n<template>\n <RouterLink\n v-slot=\"{ isActive, navigate, href }\"\n :to=\"{ name: '/queries/[queryId]', params: { queryId: entry.keyHash } }\"\n custom\n >\n <div\n class=\"grid grid-cols-[minmax(0,auto)_1fr] grid-flow-col items-center gap-x-2 p-1 relative text-sm @container\"\n :class=\"[\n isActive ? 'bg-neutral-200 dark:bg-neutral-700' : 'hover:bg-(--ui-bg-elevated)',\n entry.active ? '' : 'text-(--ui-text)/50',\n ]\"\n >\n <div class=\"h-full w-6 relative\">\n <div\n class=\"absolute -inset-1 right-0 flex items-center justify-center\"\n :class=\"STATUS_COLOR_CLASSES[status].base\"\n :title=\"status\"\n >\n <i-lucide-loader v-if=\"status === 'loading'\" title=\"Loading\" aria-label=\"Loading icon\" />\n <i-lucide-check-check\n v-else-if=\"status === 'fresh'\"\n title=\"Fresh successful data\"\n aria-label=\"Fresh successful data icon\"\n />\n <i-lucide-x-octagon\n v-else-if=\"status === 'error'\"\n title=\"Error\"\n aria-label=\"Error icon\"\n />\n <i-lucide-check v-else-if=\"status === 'stale'\" title=\"Stale\" aria-label=\"Stale icon\" />\n <i-lucide-pause\n v-else-if=\"status === 'pending'\"\n title=\"Pending\"\n aria-label=\"Pending icon\"\n />\n </div>\n </div>\n\n <a\n :href\n class=\"hover:cursor-pointer block overflow-hidden\"\n :title=\"entry.active ? 'Active query' : 'Inactive query'\"\n @click=\"isActive ? unselect($event) : navigate($event)\"\n >\n <ol class=\"flex font-mono grow gap-0.5 overflow-auto items-center\">\n <template v-for=\"(key, i) in formattedKey\" :key=\"key\">\n <li class=\"text-wrap wrap-break-word rounded bg-(--ui-text)/5 px-0.5\">{{ key }}</li>\n <li v-if=\"i < formattedKey.length - 1\" aria-hidden=\"true\">/</li>\n </template>\n </ol>\n </a>\n\n <div v-if=\"entry.options?.enabled === false\" title=\"This query is disabled\">\n <span class=\"rounded bg-theme/70 theme-neutral p-0.5 text-xs flex gap-x-0.5 items-center\">\n <i-lucide-circle-slash aria-hidden />\n <span class=\"@max-md:hidden\">disabled</span>\n </span>\n </div>\n <div\n v-else-if=\"\n !entry.active &&\n entry.gcTimeout &&\n entry.devtools.inactiveAt &&\n typeof entry.options?.gcTime === 'number' &&\n Number.isFinite(entry.options.gcTime) &&\n entry.options.gcTime <= 30_000\n \"\n title=\"This query will be garbage collected\"\n >\n <UCircleProgress\n class=\"size-[1em] dark:text-neutral-500 text-neutral-400\"\n :max=\"entry.options.gcTime\"\n :value=\"entry.devtools.inactiveAt + entry.options.gcTime - now\"\n />\n </div>\n </div>\n </RouterLink>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { Pane, Splitpanes } from '@posva/splitpanes'\nimport { useQueryEntries } from '../composables/duplex-channel'\nimport { getQueryStatus, STATUS_COLOR_CLASSES } from '../utils/query-state'\nimport type { UseQueryEntryPayloadStatus } from '../utils/query-state'\nimport type { UseQueryEntryPayload } from '@pinia/colada-devtools/shared'\nimport { useContainerMediaQuery } from '../composables/use-container-media-query'\nimport { useLocalStorage } from '@vueuse/core'\n\nconst searchQuery = ref('')\n\nconst queries = useQueryEntries()\n\nconst filteredItems = computed(() => {\n let items = queries.value\n\n if (searchQuery.value) {\n const query = searchQuery.value.toLowerCase()\n items = items.filter((item) => {\n const searchable = item.key\n return searchable.some((v) => String(v).toLowerCase().includes(query))\n })\n }\n\n // sort by last updatedAt\n return items.toSorted((a, b) => {\n return b.devtools.updatedAt - a.devtools.updatedAt\n })\n})\n\nconst queriesGrouped = computed<\n Record<\n Exclude<UseQueryEntryPayloadStatus, 'unknown' | 'stale'> | 'inactive',\n UseQueryEntryPayload[]\n >\n>(() => {\n return {\n loading: [],\n fresh: [],\n error: [],\n pending: [],\n inactive: filteredItems.value.filter((item) => !item.active),\n ...Object.groupBy(filteredItems.value, (item) => getQueryStatus(item)),\n }\n})\n\nconst container = useTemplateRef('split-panes-container')\nconst isNarrow = useContainerMediaQuery('(width < 768px)', () => container.value?.$el)\n\nconst queryListPanelSize = useLocalStorage<number[]>('pc-devtools-query-list-panel-size', [30, 70])\n\nfunction updatePanesSize({ panes }: { panes: { size: number }[] }) {\n queryListPanelSize.value = panes.map((pane) => pane.size)\n}\n</script>\n\n<template>\n <section class=\"grid grid-rows-[auto_1fr] overflow-hidden @container\">\n <!-- Search & Actions Bar -->\n <div class=\"flex items-center p-2 border-b border-(--ui-border) gap-2\">\n <div class=\"relative grow\">\n <i-lucide-search\n class=\"absolute left-2 top-1/2 -translate-y-1/2 text-ui-text-muted size-4\"\n />\n <UInput v-model=\"searchQuery\" type=\"search\" class=\"w-full\" placeholder=\"Search Queries\" />\n </div>\n\n <!-- TODO: sort source, asc/desc -->\n\n <div class=\"flex gap-x-1\">\n <div\n v-for=\"(queryGroup, status) in queriesGrouped\"\n :key=\"status\"\n class=\"theme-neutral bg-(--ui-bg-muted) rounded p-1 text-xs font-semibold flex items-center gap-x-1\"\n :class=\"(queryGroup?.length ?? 0) === 0 ? 'text-(--ui-text-muted)' : ''\"\n :title=\"`${queryGroup?.length ?? 0} ${status} queries (after filtering)`\"\n >\n <div class=\"rounded-full size-2\" :class=\"STATUS_COLOR_CLASSES[status].base\" />\n <span class=\"@max-[750px]:hidden\">{{ status }}</span>\n <div\n class=\"px-1.5 py-0.5 rounded min-w-[1.65em] flex justify-center\"\n :class=\"\n (queryGroup?.length ?? 0) === 0\n ? 'bg-(--ui-bg-accented)'\n : [STATUS_COLOR_CLASSES[status].base, STATUS_COLOR_CLASSES[status].text]\n \"\n >\n <span>{{ queryGroup?.length ?? 0 }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <Splitpanes\n ref=\"split-panes-container\"\n class=\"overflow-hidden\"\n :horizontal=\"isNarrow\"\n @resized=\"updatePanesSize\"\n >\n <!-- List Panel -->\n <Pane min-size=\"15\" :size=\"queryListPanelSize[0]\" class=\"flex flex-col\">\n <ol role=\"list\" class=\"divide-y divide-(--ui-border)\" v-if=\"filteredItems.length > 0\">\n <li v-for=\"entry of filteredItems\" :key=\"entry.keyHash\">\n <ListQueryEntry :entry />\n </li>\n </ol>\n <div\n v-else\n class=\"flex flex-col items-center p-4 text-(--ui-text-muted) text-sm text-center gap-2\"\n >\n <i-lucide-inbox class=\"size-8\" />\n <h3 class=\"text-lg\">No queries found</h3>\n <p>Try adjusting your search or perform some mutations in your app.</p>\n </div>\n </Pane>\n\n <!-- Details Panel -->\n <Pane min-size=\"30\" :size=\"queryListPanelSize[1]\" class=\"flex flex-col\">\n <RouterView />\n </Pane>\n </Splitpanes>\n </section>\n</template>\n"],"names":["getQueryStatus","entry","STATUS_COLOR_CLASSES","router","useRouter","now","usePerformanceNow","unselect","event","formattedKey","useFormattedKey","__props","status","computed","_createBlock","_component_RouterLink","_withCtx","isActive","navigate","href","_createElementVNode","_hoisted_1","_unref","_component_i_lucide_loader","_component_i_lucide_check_check","_component_i_lucide_x_octagon","_component_i_lucide_check","_component_i_lucide_pause","$event","_hoisted_4","_openBlock","_createElementBlock","_Fragment","_renderList","key","i","_hoisted_5","_toDisplayString","_hoisted_6","_hoisted_7","_hoisted_8","_createVNode","_component_i_lucide_circle_slash","_cache","_hoisted_9","_component_UCircleProgress","searchQuery","ref","queries","useQueryEntries","filteredItems","items","query","item","v","a","b","queriesGrouped","container","useTemplateRef","isNarrow","useContainerMediaQuery","queryListPanelSize","useLocalStorage","updatePanesSize","panes","pane","_hoisted_2","_hoisted_3","_component_i_lucide_search","_component_UInput","queryGroup","_normalizeClass","Splitpanes","Pane","_component_ListQueryEntry","_component_i_lucide_inbox","_component_RouterView"],"mappings":"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"}
@@ -1,10 +0,0 @@
1
- import { _ as e, c as t, o as c } from "./index-D0GQZaew.js";
2
- const n = {};
3
- function s(o, r) {
4
- return c(), t("h1", null, "Settings");
5
- }
6
- const a = /* @__PURE__ */ e(n, [["render", s]]);
7
- export {
8
- a as default
9
- };
10
- //# sourceMappingURL=settings-BHmLo73t.js.map