@ethlete/query-devtools 1.0.0-next.2 → 1.0.0-next.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.
- package/CHANGELOG.md +17 -0
- package/fesm2022/ethlete-query-devtools-toggle.mjs +2 -2
- package/fesm2022/ethlete-query-devtools-toggle.mjs.map +1 -1
- package/fesm2022/ethlete-query-devtools.mjs +624 -377
- package/fesm2022/ethlete-query-devtools.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-query-devtools.d.ts +103 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.3
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`398f7a2`](https://github.com/ethlete-io/ethdk/commit/398f7a22f2694cc5627a95cbd2e8d05cd084a03c) Thanks [@TomTomB](https://github.com/TomTomB)! - A Batches tab inspects a `createQueryBatch` run - progress, throughput, time remaining and every
|
|
8
|
+
item's args and outcome - and the Queries list folds a run's items under one row.
|
|
9
|
+
|
|
10
|
+
- [`398f7a2`](https://github.com/ethlete-io/ethdk/commit/398f7a22f2694cc5627a95cbd2e8d05cd084a03c) Thanks [@TomTomB](https://github.com/TomTomB)! - Clicking an Events row opens its query in a drawer on the Events tab instead of jumping to Queries.
|
|
11
|
+
Each drawer's selection now survives a reload.
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`398f7a2`](https://github.com/ethlete-io/ethdk/commit/398f7a22f2694cc5627a95cbd2e8d05cd084a03c) Thanks [@TomTomB](https://github.com/TomTomB)! - Fixes the layout of a narrow panel: the Cache table scrolls in its own box, the Events base URL no
|
|
16
|
+
longer wraps one character per line, and every drawer tab's divider resizes its panes.
|
|
17
|
+
|
|
18
|
+
- [#3061](https://github.com/ethlete-io/ethdk/pull/3061) [`7cd3da8`](https://github.com/ethlete-io/ethdk/commit/7cd3da8342d0d619f06154d4155cfafedbed28f4) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlays: `data-et-overlay-layer` (or a per-open `zIndex`) puts an overlay above the default stacking level, which is how the query devtools panel and its toggle now stay visible over an app's own modals and tooltips.
|
|
19
|
+
|
|
3
20
|
## 1.0.0-next.2
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -37,7 +37,7 @@ class QueryDevtoolsToggleComponent {
|
|
|
37
37
|
<span class="tamper-dot" title="A query is showing an armed override or a devtools fault"></span>
|
|
38
38
|
}
|
|
39
39
|
</button>
|
|
40
|
-
`, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:
|
|
40
|
+
`, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
41
41
|
}
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsToggleComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
54
54
|
<span class="tamper-dot" title="A query is showing an armed override or a devtools fault"></span>
|
|
55
55
|
}
|
|
56
56
|
</button>
|
|
57
|
-
`, encapsulation: ViewEncapsulation.ShadowDom, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:
|
|
57
|
+
`, encapsulation: ViewEncapsulation.ShadowDom, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"] }]
|
|
58
58
|
}], propDecorators: { tampered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tampered", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
|
|
59
59
|
|
|
60
60
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n","import { Component, input, output, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n */\n@Component({\n selector: 'et-query-devtools-toggle',\n template: `\n <button (click)=\"openChange.emit()\" type=\"button\" title=\"Open query devtools ({{ shortcut }})\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n </svg>\n <span class=\"label\">Query</span>\n <kbd>{{ shortcut }}</kbd>\n @if (tampered()) {\n <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n }\n </button>\n `,\n // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n // eslint-disable-next-line ethlete/require-view-encapsulation-none\n encapsulation: ViewEncapsulation.ShadowDom,\n styles: `\n :host {\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n z-index:
|
|
1
|
+
{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n","import { Component, input, output, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n */\n@Component({\n selector: 'et-query-devtools-toggle',\n template: `\n <button (click)=\"openChange.emit()\" type=\"button\" title=\"Open query devtools ({{ shortcut }})\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n </svg>\n <span class=\"label\">Query</span>\n <kbd>{{ shortcut }}</kbd>\n @if (tampered()) {\n <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n }\n </button>\n `,\n // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n // eslint-disable-next-line ethlete/require-view-encapsulation-none\n encapsulation: ViewEncapsulation.ShadowDom,\n styles: `\n :host {\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n /* Above DEFAULT_OVERLAY_LAYER (2147483003) in @ethlete/core: rendered by the lazy shell, the\n button is a sibling of the application's content, so anything less puts an open modal over it. */\n z-index: 2147483010;\n }\n\n button {\n --_accent: var(--et-theme-color-primary-solid, #60a5fa);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 10px 14px;\n border: none;\n border-radius: 999px;\n background: linear-gradient(135deg, #1f1f23, #2a2a30);\n color: #fafafa;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n box-shadow:\n 0 6px 20px rgb(0 0 0 / 0.35),\n inset 0 0 0 1px rgb(255 255 255 / 0.08);\n transition:\n transform 0.15s ease,\n box-shadow 0.2s ease;\n }\n\n /* Gradient accent ring via a masked pseudo-element. */\n button::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: 1px;\n background: linear-gradient(135deg, var(--_accent), transparent 60%);\n -webkit-mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow:\n 0 10px 28px rgb(0 0 0 / 0.4),\n 0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent),\n inset 0 0 0 1px rgb(255 255 255 / 0.1);\n }\n\n button:hover::before {\n opacity: 1;\n }\n\n svg {\n inline-size: 16px;\n block-size: 16px;\n fill: none;\n stroke: var(--_accent);\n stroke-width: 1.6;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .label {\n line-height: 1;\n }\n\n kbd {\n padding: 3px 6px;\n border-radius: 5px;\n background: rgb(255 255 255 / 0.07);\n box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n color: #d4d4d8;\n font: inherit;\n font-size: 11px;\n font-weight: 500;\n line-height: 1;\n /* The Apple glyphs need no separator; the \"Ctrl+Alt+Q\" spelling is wider, hence the nowrap. */\n white-space: nowrap;\n }\n\n /* Visible with the panel closed, which is the point - a query being tampered with is a fact about\n the running app, not just about whatever the panel happens to have open. */\n .tamper-dot {\n position: absolute;\n inset-block-start: -3px;\n inset-inline-end: -3px;\n inline-size: 10px;\n block-size: 10px;\n border-radius: 50%;\n background: #f87171;\n box-shadow: 0 0 0 2px #1f1f23;\n }\n `,\n})\nexport class QueryDevtoolsToggleComponent {\n public tampered = input(false);\n public openChange = output<void>();\n\n protected shortcut = queryDevtoolsShortcutLabel();\n}\n","import { queryDevtoolsSettings, readQueryDevtoolsStore } from '@ethlete/query';\n\n/**\n * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped\n * whenever a shape change would make an older stored state restore into something wrong.\n * @internal\n */\nexport const QUERY_DEVTOOLS_VIEW_STATE_KEY = 'ethlete:query:devtools:v4';\n\n/**\n * Whether the panel was open when this tab last stored its view state. Read by\n * `<et-query-devtools-lazy>`, which has to load the panel before it can ask the panel anything.\n * @internal\n */\nexport const wasQueryDevtoolsOpen = () =>\n readQueryDevtoolsStore<{ open?: boolean }>(queryDevtoolsSettings().viewState, QUERY_DEVTOOLS_VIEW_STATE_KEY)?.open ===\n true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEA;;;;AAIG;MACU,0BAA0B,GAAG,OAAO,iBAAiB,EAAE,KAAK,OAAO,GAAG,KAAK,GAAG,YAAY;;ACJvG;;;;;AAKG;MA+HU,4BAA4B,CAAA;AA9HzC,IAAA,WAAA,GAAA;QA+HS,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK;qFAAC;QACvB,IAAA,CAAA,UAAU,GAAG,MAAM,EAAQ;QAExB,IAAA,CAAA,QAAQ,GAAG,0BAA0B,EAAE;AAClD,IAAA;8GALY,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA5H7B;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,SAAA,EAAA,CAAA,CAAA;;2FA+GU,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBA9HxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,QAAA,EAC1B;;;;;;;;;;;;;GAaT,EAAA,aAAA,EAIc,iBAAiB,CAAC,SAAS,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA;;;AC1B5C;;;;AAIG;AACI,MAAM,6BAA6B,GAAG;AAE7C;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,MAClC,sBAAsB,CAAqB,qBAAqB,EAAE,CAAC,SAAS,EAAE,6BAA6B,CAAC,EAAE,IAAI;AAClH,IAAA;;AChBF;;AAEG;;;;"}
|